/* ============================================================= SISTEMA DE DISEÑO "EDICIÓN CLÍNICA" — capa de tokens (Fase 1) Fuente vinculante: design_handoff_esther_gaya/README.md → "Tokens de diseño" Se carga desde header.php DESPUÉS de todo el CSS legacy. CONVIVENCIA CON EL CSS LEGACY (decisión documentada, 2026-07-07): - textures.css define `--font-heading: 'Outfit'` y lo impone con `h1,h2,h3{font-family:var(--font-heading)!important}`. NO se cambia ese token globalmente: hacerlo pasaría TODOS los titulares legacy (blog, quiz, descuentos, guías…) de Outfit 700 a Instrument Serif 400, un cambio visual no auditado en ~100 páginas. - En su lugar, las páginas rediseñadas OPTAN al sistema añadiendo la clase `ec` a su contenedor raíz (o al ). El selector `.ec h1` (0,1,1) gana al `h1` (0,0,1) de textures.css aun con !important en ambos, y este fichero además carga después. - textures.css también impone `section,.section{padding:6rem 0!important}` y `section{background-color:transparent!important}`. Dentro de `.ec` se neutralizan con hooks (--ec-section-pad / --ec-section-bg) para que cada página nueva controle su espaciado y fondo. Las páginas legacy (sin `.ec`) no se ven afectadas. - Inter sigue cargándose: lo usan layout.css (body), textures.css (--font-main), product-page.css y routine-builder.css. Las piezas nuevas NO lo usan (Outfit para UI/cuerpo). ============================================================= */ :root { /* ---------- Color · fondos ---------- */ --ec-bg: #F7F3F1; /* fondo de página */ --ec-bg-alt: #FBF8F6; /* fondo alterno de paneles expandidos */ --ec-bg-promo: #F6F0F4; /* panel promo suave */ /* ---------- Color · tinta y texto ---------- */ --ec-ink: #2E2429; /* tinta principal */ --ec-text-2: #4A3D43; /* texto secundario */ --ec-text-3: #5A4B52; /* texto secundario (variante) */ --ec-muted: #6E5F66; /* muted — F8: antes #7A6A71 (4.61:1 justo sobre --ec-bg); oscurecido a 5.45:1 sobre bg / 6.01:1 sobre blanco para dar colchón AA a la clienta 45+ sin salir de la gama cálida */ --ec-placeholder: #826D74; /* placeholder de inputs — F8: antes #9A8A91 (3.27:1 sobre blanco, FALLABA AA); ahora 4.78:1 sobre blanco. SOLO para placeholders reales de input; texto informativo → --ec-muted */ /* ---------- Color · acentos ---------- */ --ec-rose: #B8728E; /* acento rosa: énfasis serif GRANDE (>=24px) y decorativo. NO usar como fondo de CTA ni texto pequeño (3.60:1 con blanco / 3.26:1 sobre bg → falla AA texto normal) */ --ec-rose-cta: #9C5876; /* F8: rosa oscurecido para FONDO de CTA con texto blanco (5.16:1) — sustituye a --ec-rose en botones */ --ec-rose-cta-hover: #8F4F6A; /* F8: hover del CTA rosa (6.01:1 con blanco) */ --ec-rose-text: #9C5876; /* F8: rosa para TEXTO pequeño: 4.68:1 sobre --ec-bg, 5.16:1 sobre blanco, 4.78:1 sobre --ec-notice-bg */ --ec-mauve: #8B5F83; /* malva profundo: eyebrows, enlaces secundarios */ --ec-rose-light: #D4A0B0; /* rosa claro (sobre oscuro) */ /* ---------- Color · bloque oscuro (garantía, VIP, chips activos) ---------- */ --ec-dark: #2E2429; --ec-dark-text: #F7F3F1; --ec-dark-muted: #C4AEB8; /* ---------- Color · tarjetas y bordes ---------- */ --ec-card-bg: #FFFFFF; --ec-border: rgba(46, 36, 41, 0.10); /* borde de tarjeta */ --ec-border-12: rgba(46, 36, 41, 0.12); /* variante inputs */ --ec-border-16: rgba(46, 36, 41, 0.16); /* variante inputs marcados */ /* ---------- Color · avisos / incompatibilidades ---------- */ --ec-notice-bg: #FDF4F7; --ec-notice-border: rgba(184, 114, 142, 0.35); /* ---------- Color · funcionales ---------- */ --ec-whatsapp: #157A42; /* SOLO botones de WhatsApp — F8: antes #1FA95C (3.05:1 con blanco, FALLABA AA); ahora 5.39:1 */ --ec-youtube: #FF0000; /* play de YouTube sobre --ec-dark */ /* ---------- Color · badges de momento (catálogo) ---------- */ --ec-badge-day-bg: rgba(255, 255, 255, 0.94); --ec-badge-day-text: #8A5A2B; --ec-badge-day-border: rgba(138, 90, 43, 0.28); --ec-badge-night-bg: #332639; --ec-badge-night-text: #F0E3EC; --ec-badge-both-bg: #FFFFFF; /* "Día y noche": píldora blanca neutra */ --ec-badge-both-text: #4A3D43; /* ---------- Tipografía ---------- */ --ec-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* 400 + italic */ --ec-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; /* 400–800 */ --ec-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* 400–500 */ --ec-ls-mono: 0.12em; /* letter-spacing mínimo en mono */ --ec-ls-mono-wide: 0.2em; /* letter-spacing en labels uppercase */ /* ---------- Forma · radios ---------- */ --ec-radius-card-sm: 14px; --ec-radius-card: 16px; --ec-radius-card-lg: 18px; --ec-radius-pill: 999px; /* botones y chips */ --ec-radius-input: 10px; /* ---------- Forma · sombras ---------- */ --ec-shadow-featured: 0 16px 36px -22px rgba(139, 95, 131, 0.55); /* tarjeta destacada */ --ec-shadow-dark: 0 12px 30px -10px rgba(46, 36, 41, 0.55); /* flotante oscura */ /* ---------- Forma · bordes discontinuos (chips "Tu piel", códigos, caja Bizum, upsell checkout) ---------- */ --ec-dashed-border: 1px dashed rgba(46, 36, 41, 0.25); /* ---------- Confort táctil (F8, clienta 45+ en móvil) ---------- */ --ec-tap-min: 44px; /* altura mínima de zona táctil (WCAG 2.5.8 AAA-ish) */ /* ---------- Movimiento ---------- */ --ec-transition: 200ms ease; /* rango 150–250ms del handoff */ } /* ============================================================= ÁMBITO .ec — las páginas rediseñadas envuelven su contenido en class="ec" (o la ponen en ). Nada de esto toca páginas legacy. ============================================================= */ .ec { font-family: var(--ec-font-body); color: var(--ec-ink); background-color: var(--ec-bg); -webkit-font-smoothing: antialiased; } /* Titulares: Instrument Serif 400. Gana a textures.css (h1,h2,h3{font-family:var(--font-heading)!important; letter-spacing:-0.02em!important}) por especificidad (.ec h1 > h1) y por orden de carga. */ .ec h1, .ec h2, .ec h3, .ec h4, .ec .section-title { font-family: var(--ec-font-display) !important; font-weight: 400; letter-spacing: normal !important; } /* Neutralizadores de los globales de textures.css dentro del ámbito .ec. Hooks: cada página/sección nueva fija --ec-section-pad / --ec-section-bg donde lo necesite; por defecto padding 0 y fondo transparente. */ .ec section, .ec .section { padding: var(--ec-section-pad, 0) !important; } .ec section { background-color: var(--ec-section-bg, transparent) !important; } /* ============================================================= Primitivas mínimas compartidas (las fases 2–7 añaden las suyas en assets/css/pages/*.css) ============================================================= */ /* Eyebrow: IBM Plex Mono, uppercase, malva. F8: 10px → 12px (llevan credencial COIB y datos de servicio, no son decorativos) con letter-spacing 0.16em para conservar el aire editorial. */ .ec-eyebrow { font-family: var(--ec-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ec-mauve); } /* Énfasis de marca dentro de un titular serif: cursiva rosa */ .ec-accent-i { font-style: italic; color: var(--ec-rose); }