/* ALIC V7 — editorial.css Sistema editorial de la home. Se carga SOLO en index.html, después de los CSS heredados, para no alterar las otras 17 páginas mientras se migran. Principio rector: una sola variable (--fsize) escala tipografía y ritmo. Todo aquí está en rem y el rem está atado al ancho de viewport. Ver docs/07_REFERENCIA_DISENO_NORMALISBORING.md §2.1. */ /* ============================================================ 1. ESCALA FLUIDA ============================================================ Solo aplica cuando lleva la clase .editorial, de modo que las páginas todavía no migradas conservan el rem de 16px del navegador. */ html.editorial { --fsize: 1.0416666667vw; /* 15px a 1440px */ font-size: var(--fsize); } @media (max-width: 1440px) { html.editorial { --fsize: 1.1vw; } } @media (max-width: 1024px) { html.editorial { --fsize: 1.953125vw; } } @media (max-width: 768px) { html.editorial { --fsize: 2.6041666667vw; } } @media (max-width: 576px) { html.editorial { --fsize: 3.4722222222vw; } } @media (max-width: 468px) { html.editorial { --fsize: 4.2735042735vw; } } @media (max-width: 375px) { html.editorial { --fsize: 5.3333333333vw; } } html.editorial body { font-size: var(--ed-body); line-height: var(--ed-body-lh); background: var(--marfil); overflow-x: clip; } /* ============================================================ 2. TOKENS EDITORIALES ============================================================ */ html.editorial { /* Tipografía: 10 pasos, cada uno con su interlineado bloqueado */ --ed-mega: 11rem; --ed-mega-lh: 0.9; /* El titular de entrada es la pieza con más peso de la página: se le da más cuerpo y un interlineado más cerrado que al resto de la escala. */ --ed-super: 6.6rem; --ed-super-lh: 0.92; --ed-xxl: 4.2rem; --ed-xxl-lh: 1.02; --ed-xl: 3rem; --ed-xl-lh: 1.08; --ed-l: 2.2rem; --ed-l-lh: 1.15; --ed-m: 1.6rem; --ed-m-lh: 1.3; --ed-body-l: 1.35rem; --ed-body-l-lh: 1.5; --ed-body: 1rem; --ed-body-lh: 1.65; --ed-small: 0.85rem; --ed-small-lh: 1.5; --ed-micro: 0.7rem; --ed-micro-lh: 1.4; /* Ritmo vertical: se declara por sección, arriba y abajo por separado */ --pad-xl: 12rem; --pad-l: 9rem; --pad-m: 6rem; --pad-s: 3rem; --pad-xs: 1.6rem; /* Retícula */ --edge: 1.65rem; --gutter: 1.5rem; --ease-out: cubic-bezier(.22, .61, .36, 1); } @media (max-width: 1024px) { html.editorial { --ed-mega: 6.5rem; --ed-super: 4.4rem; --ed-xxl: 3.2rem; --pad-xl: 7rem; --pad-l: 5.5rem; --pad-m: 4rem; } } @media (max-width: 768px) { html.editorial { --ed-mega: 4.6rem; --ed-super: 2.35rem; /* la línea más larga ("ENCUENTRA LA") debe caber a 375px */ --ed-xxl: 2.4rem; --ed-xl: 2.1rem; --pad-xl: 5rem; --pad-l: 4rem; --pad-m: 3rem; --edge: 1.25rem; } } /* ============================================================ 3. UTILIDADES DE TIPO Y RITMO ============================================================ */ .ed-mega { font-size: var(--ed-mega); line-height: var(--ed-mega-lh); } .ed-super { font-size: var(--ed-super); line-height: var(--ed-super-lh); } .ed-xxl { font-size: var(--ed-xxl); line-height: var(--ed-xxl-lh); } .ed-xl { font-size: var(--ed-xl); line-height: var(--ed-xl-lh); } .ed-l { font-size: var(--ed-l); line-height: var(--ed-l-lh); } .ed-m { font-size: var(--ed-m); line-height: var(--ed-m-lh); } .ed-body-l { font-size: var(--ed-body-l); line-height: var(--ed-body-l-lh); } .ed-body { font-size: var(--ed-body); line-height: var(--ed-body-lh); } .ed-small { font-size: var(--ed-small); line-height: var(--ed-small-lh); } .ed-micro { font-size: var(--ed-micro); line-height: var(--ed-micro-lh); } .pt-xl { padding-top: var(--pad-xl); } .pb-xl { padding-bottom: var(--pad-xl); } .pt-l { padding-top: var(--pad-l); } .pb-l { padding-bottom: var(--pad-l); } .pt-m { padding-top: var(--pad-m); } .pb-m { padding-bottom: var(--pad-m); } .pt-s { padding-top: var(--pad-s); } .pb-s { padding-bottom: var(--pad-s); } .pt-xs { padding-top: var(--pad-xs); } .pb-xs { padding-bottom: var(--pad-xs); } /* Margen superior e inferior, en la misma escala. Existen para que ningún bloque necesite un atributo `style=` en el marcado: con la CSP en vigor un estilo escrito en el HTML solo se aplicaría abriendo `style-src` a 'unsafe-inline', y no vale la pena rebajar la política por doce márgenes. Los estilos que GSAP escribe en tiempo de ejecución van por el CSSOM y la CSP no los alcanza. */ .mt-m { margin-top: var(--pad-m); } .mb-m { margin-bottom: var(--pad-m); } .mt-s { margin-top: var(--pad-s); } .mb-s { margin-bottom: var(--pad-s); } .self-end { align-self: end; } .ed-wrap { padding-inline: var(--edge); } .f-sans { font-family: var(--font-sans); } .f-serif { font-family: var(--font-serif); } .f-display { font-family: var(--font-display); } .t-upper { text-transform: uppercase; } .italic { font-style: italic; } .bg-marfil { background: var(--marfil); color: var(--onice); } .bg-onice { background: var(--onice); color: var(--marfil); } .bg-pearl { background: var(--pearl); color: var(--onice); } .bg-cardenal { background: var(--cardenal); color: var(--marfil); } /* ============================================================ 4. PRELOADER ============================================================ El contenido NO depende de él: si el JS falla, .ed-loader nunca recibe la clase .is-done pero tampoco oculta nada, porque el body jamás se pone a opacity 0 desde CSS. Ver AGENTS.md §8. */ .ed-loader { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: var(--onice); color: var(--marfil); transition: opacity .8s var(--ease-out), visibility .8s; } html:not(.js-enhanced) .ed-loader { display: none; } .ed-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } /* Vídeo de fondo de la cortina. Va detrás del logotipo y de la barra; si no carga, queda el fondo onice del propio .ed-loader y nada se rompe. */ .ed-loader__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--onice); } .ed-loader__media video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s var(--ease-out); } .ed-loader[data-loader-media="ready"] .ed-loader__media video { opacity: 1; } /* Velo para que el logotipo se lea sobre cualquier fotograma. */ .ed-loader__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--onice) 55%, transparent) 0%, color-mix(in srgb, var(--onice) 30%, transparent) 55%, color-mix(in srgb, var(--onice) 70%, transparent) 100%); } .ed-loader__mark { position: relative; z-index: 2; font-family: var(--font-display); font-size: var(--ed-xxl); letter-spacing: 0.18em; text-transform: uppercase; overflow: hidden; display: flex; gap: 0.04em; } .ed-loader__mark span { display: inline-block; } .ed-loader__bar { position: absolute; z-index: 2; left: var(--edge); right: var(--edge); bottom: var(--edge); height: 1px; background: color-mix(in srgb, var(--marfil) 22%, transparent); } .ed-loader__bar i { display: block; height: 100%; width: var(--progress, 0%); background: var(--dorado); } .ed-loader__pct { position: absolute; z-index: 2; right: var(--edge); bottom: calc(var(--edge) + 1rem); font-family: var(--font-sans); font-size: var(--ed-micro); letter-spacing: 0.14em; color: var(--dorado); } /* ============================================================ 4b. CABECERA SOBRE FONDOS MIXTOS ============================================================ El hero combina crema a la izquierda y una columna de imagen oscura a la derecha, donde caen las acciones. Un solo color de texto no puede ser legible en ambos, así que las acciones llevan su propia píldora. */ /* ---- Cabecera editorial: logotipo a la izquierda, navegación vertical pegada al borde derecho. Solo en la home migrada; las otras 17 páginas conservan la cabecera horizontal hasta que se migren. ---- */ html.editorial .site-header { display: block; height: auto; padding: 0; pointer-events: none; /* el hueco central no debe bloquear el contenido */ background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.editorial .site-header > * { pointer-events: auto; } /* Aquí la cabecera no tiene altura propia (display:block y el logotipo posicionado dentro), así que el translateY en porcentaje del retiro valía 0 y solo quedaba el fundido. Con una medida fija sí se desliza. */ html.editorial .site-header[data-header-hidden] { transform: translateY(-6rem); } /* El logotipo y la navegación quedan fijos sobre un recorrido que alterna paneles blancos y negros, así que ningún color fijo sirve. Con difference sobre blanco se invierten solos: negros sobre fondo claro, blancos sobre fondo oscuro. Es la misma técnica que usa el referente en su logotipo. La mezcla va en el

, no en cada hijo: el header ya crea contexto de apilamiento por su z-index, así que una mezcla declarada dentro solo se combinaría con el propio header (fondo transparente) y el texto se quedaba blanco siempre, invisible sobre los paneles claros. */ html.editorial .site-header { mix-blend-mode: difference; } /* Solo el logotipo necesita la mezcla: es lo único que queda fijo sobre paneles claros y oscuros. La navegación ya vive dentro del hero blanco. */ html.editorial .site-logo { color: #fff; } html.editorial .site-logo { position: absolute; top: calc(var(--edge) + 0.4rem); left: var(--edge); font-size: var(--ed-l); letter-spacing: 0.14em; } /* Los enlaces se alinean en fila y es cada uno el que gira, no el contenedor: rotando el contenedor se invertía el orden de lectura. */ /* La navegación se pega al borde donde arranca el vídeo, no al borde de la pantalla, y se queda ahí fija durante todo el recorrido. --hero-open debe coincidir con HERO_OPEN_VW en editorial.js. */ html.editorial { --hero-open: 78vw; } /* La navegación se ancla al borde derecho del propio panel del hero, no al viewport. Con position fixed no se movía, pero el vídeo se deslizaba por debajo y acababa tapándola; anclada al panel viaja con él y siempre queda sobre el blanco, junto al canto del vídeo. Los enlaces se apilan en columna, todos en la misma vertical; en fila quedaban escalonados en diagonal. column-reverse deja el primero abajo, que es el orden de lectura de una navegación girada. */ html.editorial .site-nav { position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); z-index: 3; color: var(--onice); } html.editorial .site-nav > a { writing-mode: vertical-rl; rotate: 180deg; /* se lee de abajo hacia arriba */ font-size: var(--ed-micro); letter-spacing: 0.22em; white-space: nowrap; } /* El desplegable de colecciones no cabe en vertical: aquí el enlace lleva directo al ancla de la sección y las tres colecciones siguen accesibles desde el menú completo. */ /* ---- Acciones fijas, fuera del

---- Van en su propio contenedor porque el header está en modo difference y un hijo no puede quedar fuera de esa mezcla. Aquí llevan fondo propio y se leen igual sobre el blanco que sobre el vídeo. */ html.editorial .ed-actions { position: fixed; top: var(--edge); right: var(--edge); z-index: calc(var(--layer-header) + 1); display: flex; align-items: center; gap: var(--pad-xs); } html.editorial .ed-actions button { border: 1px solid color-mix(in srgb, var(--marfil) 40%, transparent); border-radius: 999px; padding: 0.55rem 1.2rem; font-family: var(--font-sans); font-size: var(--ed-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--marfil); background: color-mix(in srgb, var(--onice) 62%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } html.editorial .ed-actions button:hover { background: var(--marfil); color: var(--onice); border-color: var(--marfil); opacity: 1; } /* El icono de hamburguesa es para móvil; en escritorio manda la palabra. */ html.editorial .ed-actions__icon { display: none; } /* Intercambio: durante el hero se ofrece agendar; una vez pasado, el botón se convierte en el acceso al menú completo. */ html.editorial .ed-actions__menu { display: none; } html.editorial body[data-ed-nav="menu"] .ed-actions__agendar { display: none; } html.editorial body[data-ed-nav="menu"] .ed-actions__menu { display: inline-flex; } /* ============================================================ LA FRONTERA DE LA LECTURA VERTICAL ============================================================ `@media (max-width: 1024px), (orientation: portrait)` aparece varias veces en esta hoja y siempre significa lo mismo: aquí el recorrido se lee en columna. Es la negación exacta de la consulta con la que editorial.js monta el riel horizontal —`(min-width: 1025px) and (orientation: landscape)`, la constante DESKTOP—, y las dos tienen que cambiar juntas o habrá un tramo de anchos con el riel en horizontal y los estilos de la columna, o al revés. Por qué 1024 y no 768: un iPad en retrato mide 810, 820 o 1024 px de ancho. Con la frontera en 768 se llevaba el recorrido lateral con el scroll anclado, que es un gesto de rueda de ratón, y encima se quedaba fuera de todo lo que se afinó para la columna. Con la frontera aquí, cualquier tableta en retrato lee como el móvil y el recorrido lateral queda para el portátil y el escritorio, que es donde se pensó. ============================================================ */ @media (max-width: 1024px), (orientation: portrait) { html.editorial .ed-actions__icon { display: inline; } html.editorial .ed-actions__label { display: none; } /* Sin recorrido horizontal en móvil no hay momento de intercambio: el menú está disponible desde el principio. */ html.editorial .ed-actions__menu { display: inline-flex; } html.editorial .ed-actions__agendar { display: none; } } /* El botón flotante comparte color con el fondo cardenal de la sección de consulta y del cierre del recorrido: sin borde se desvanece. */ html.editorial .floating-consulta button { border: 1px solid color-mix(in srgb, var(--marfil) 55%, transparent); } /* ============================================================ 5. HERO EDITORIAL ============================================================ */ /* El hero ocupa el ancho completo y arranca en blanco, sin medios: el vídeo está en el panel siguiente del recorrido y se descubre al deslizar. */ .ed-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: stretch; background: var(--marfil); overflow: hidden; } /* ---- Fondo de vídeo del hero ---- Va muy atenuado: es atmósfera, no protagonista, y el titular tiene que seguir leyéndose sin esfuerzo. Ajusta --hero-video-opacity para calibrar. Si el iframe no llega a inyectarse, queda el blanco y no se rompe nada. */ /* Equilibrio medido sobre una zona plana del hero (255 = blanco puro): papel limpio ................ 249 solo grano .................. 241 el grano cuesta 8 niveles grano + vídeo al 0,10 ....... ~237 Más opacidad de vídeo agrisa la sección y le resta contraste al titular; menos grano y la textura deja de apreciarse. Estos son los valores donde se ve el grano, se intuye el vídeo y la página sigue leyéndose blanca. */ html.editorial { --hero-video-opacity: 0.10; --hero-grain-opacity: 0.7; } .ed-hero__backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--marfil); } /* Grano de película. El ruido se genera con feTurbulence en un SVG embebido: no añade ninguna petición y escala a cualquier tamaño. Sobre blanco solo multiply produce grano visible —screen y overlay no alteran el blanco—, pero multiply oscurece todo por igual y agrisaba la sección. Por eso el ruido se sesga hacia el claro con feComponentTransfer (gamma < 1): la mayoría de la textura queda casi blanca, que en multiply no cambia nada, y solo las motas más oscuras marcan el grano. Así se ve la textura sin perder el blanco. */ .ed-hero__backdrop::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--hero-grain-opacity); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='0.45'/%3E%3CfeFuncG type='gamma' exponent='0.45'/%3E%3CfeFuncB type='gamma' exponent='0.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Un