/* ═══ 048 · Refinamientos sobre el diseño del dueño ═══ Nada se sustituye: la barra, el hero y el pie son los suyos. Esto sólo (a) fija la barra y la esconde/muestra con el scroll, (b) resume los datos del hero en una línea en el teléfono y (c) da estilo a la banda «Siguiente». */ /* a · BARRA FIJA. Las interiores ya eran sticky; la de portada vivía dentro del hero y al perderse la reemplazaba una cinta (motion.js), que en escritorio enseñaba una foto recortada donde iba el logo. Fija desde el principio, la cinta no se monta. Transparente sobre el hero; espresso al despegarse — el espresso de la propia barra. */ body[data-ruta="/"] nav.oscuro { position: fixed !important; top: 0; left: 0; right: 0; z-index: 60 !important; transition: transform .45s cubic-bezier(.2,.7,.1,1), background-color .35s ease, box-shadow .35s ease; } body[data-ruta="/"] nav.oscuro[data-barra-solida] { background-color: var(--espresso, #1f2538); box-shadow: 0 1px 0 rgba(247,198,135,.16); } body[data-ruta="/"] [data-hero] { padding-top: var(--alto-barra, 72px); } nav.claro, nav.oscuro { transition: transform .45s cubic-bezier(.2,.7,.1,1), background-color .35s ease; } nav[data-barra-oculta] { transform: translateY(-105%); } @media (prefers-reduced-motion: reduce) { nav.claro, nav.oscuro { transition: none; } } /* El numeral de capítulo deja de perseguir al lector por el borde izquierdo. */ .capitulo-marca { position: static !important; } /* b · DATOS DEL HERO EN EL TELÉFONO: una línea y «Ver datos». */ .og-resumen, .og-ver { display: none; } @media (max-width: 759px) { .origen:not([data-abierto]) .og-fila > :not(.og-resumen):not(.og-ver), .origen:not([data-abierto]) .og-pie, .origen:not([data-abierto]) .og-fuentes { display: none !important; } .origen .og-fila { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; } .origen[data-abierto] .og-fila { display: block !important; } .og-resumen { display: block; margin: 0; font: 500 10.5px/1.5 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: inherit; } .og-ver { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; background: none; border: 0; border-bottom: 1px solid currentColor; color: inherit; font: 500 10.5px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; opacity: .85; } .og-ver:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .origen[data-abierto] .og-resumen { display: none; } .paisaje-nota { position: static !important; margin-top: 10px; } .origen[data-abierto] .og-ver { margin-bottom: 12px; } } /* c · BANDA «SIGUIENTE», sobre el pie. Fina, en marfil, con la serif de los titulares; toda la banda es el enlace. */ .siguiente { background: var(--marfil, #fdfbf7); color: var(--espresso, #1f2538); border-top: 1px solid var(--filete, rgba(31,37,56,.14)); } .siguiente a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; max-width: 1500px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 64px); color: inherit; text-decoration: none; } .siguiente-rot { grid-column: 1 / -1; font: 500 10.5px var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--oro-texto, #3e5a80); } .siguiente-titulo { font-family: var(--font-heading); font-weight: 400; font-size: clamp(34px, 5.4vw, 72px); line-height: 1; letter-spacing: -.015em; } .siguiente-flecha { font-family: var(--font-heading); font-size: clamp(26px, 3.4vw, 44px); line-height: 1; transition: transform .5s cubic-bezier(.2,.7,.1,1); } .siguiente a:hover .siguiente-flecha, .siguiente a:focus-visible .siguiente-flecha { transform: translateX(10px); } .siguiente a:hover .siguiente-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; } .siguiente a:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; } /* 055 · el paralaje de las tarjetas se mueve dentro de su marco */ .tarjetas .trama { overflow: hidden; } /* 056 · CSS de Lenis (antes import dinámico que daba 404) */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /* 059 · Barra: subrayado que nace del centro (sólo puntero fino) */ @media (hover: hover) and (pointer: fine) { nav.oscuro .seccion, nav.claro .seccion { position: relative; } nav.oscuro .seccion::after, nav.claro .seccion::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.25,1,.5,1); } nav.oscuro .seccion:hover::after, nav.claro .seccion:hover::after, nav .seccion:focus-visible::after { transform: scaleX(1); } } /* 061 · Rejillas asimétricas: las tarjetas de portada se escalonan (masonry) y cada una se pinta aislada (contain), así el paralaje no repinta vecinas. */ .archivo-reja figure, .tarjetas .trama { contain: paint; } @media (min-width: 900px) { .tarjetas > li:nth-child(3n+2) { margin-top: clamp(40px, 6vw, 96px); } .tarjetas > li:nth-child(3n) { margin-top: clamp(16px, 2.5vw, 40px); } } /* 062 · Interruptor de sonido: mínimo, abajo a la izquierda. 069 · Anclado a 20 px de los cantos (y fuera de la zona segura del teléfono), sobre todo lo demás (z 1000) y con 44 px de alto, el objetivo táctil mínimo del sitio: tenía 40. Con el menú a pantalla completa abierto se aparta: el menú vive en z 60 y el interruptor flotaría encima. */ .sonido { position: fixed; left: calc(20px + env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 1000; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(253,251,247,.35); border-radius: 20px; background: rgba(31,37,56,.88); color: #fdfbf7; contain: layout paint; font: 500 10px var(--font-ui); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; } .sonido:focus-visible { outline: 2px solid #f7c687; outline-offset: 3px; } .sonido-visor { left: auto; right: 150px; top: 18px; bottom: auto; position: fixed; } .sn-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; } .sn-barras i { display: block; width: 2px; height: 3px; background: currentColor; transition: height .3s; } .sonido[aria-pressed="true"] .sn-barras i { animation: sn 1.1s ease-in-out infinite; } .sonido[aria-pressed="true"] .sn-barras i:nth-child(2) { animation-delay: .2s; } .sonido[aria-pressed="true"] .sn-barras i:nth-child(3) { animation-delay: .45s; } @keyframes sn { 0%,100% { height: 3px } 50% { height: 10px } } @media (prefers-reduced-motion: reduce) { .sonido .sn-barras i { animation: none !important; height: 7px; } } @media (max-width: 600px) { .sonido-visor { right: 120px; top: 18px; } } /* ── 068 · Brillo. Una pasada de luz al pasar o enfocar, de izquierda a derecha como la lanzadera, nunca en bucle. La luz va DETRÁS del texto (isolation + z-index −1), así el contraste del rótulo no cambia. Original: no es código de ningún registro; el patrón es el de siempre. ── */ body[data-editorial] .boton-oro, body[data-editorial] .boton-claro{position:relative;overflow:hidden;isolation:isolate} body[data-editorial] .boton-oro::after, body[data-editorial] .boton-claro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgb(212 163 115 / .34) 50%,transparent 70%);transform:translateX(-120%)} @media (hover:hover){ body[data-editorial] .boton-oro:hover::after, body[data-editorial] .boton-claro:hover::after{transform:translateX(120%);transition:transform .95s cubic-bezier(.2,.7,.2,1)} } body[data-editorial] .boton-oro:focus-visible::after, body[data-editorial] .boton-claro:focus-visible::after{transform:translateX(120%);transition:transform .95s cubic-bezier(.2,.7,.2,1)} @media (prefers-reduced-motion:reduce){ body[data-editorial] .boton-oro::after, body[data-editorial] .boton-claro::after{display:none} } body:has(.menu-movil[open]) .sonido:not(.sonido-visor) { visibility: hidden; } /* 077 · el grano de papel de 075 se retira con la paleta original. */ /* 081 · Cal encalada: grano muy tenue de muro de cal sobre todo el sitio (estático, sin coste de scroll). */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } @media print { body::after { display: none; } } /* 131 · P6 Cursor de marca (sólo puntero fino, sin movimiento reducido) */ html.cursor-luz, html.cursor-luz a, html.cursor-luz button, html.cursor-luz summary, html.cursor-luz [role="button"], html.cursor-luz label { cursor: none; } html.cursor-luz input, html.cursor-luz textarea, html.cursor-luz select, html.cursor-luz [contenteditable] { cursor: auto; } .cl-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; opacity: 0; transition: opacity .3s ease; } .cl-cursor.visto { opacity: 1; } .cl-cursor.texto { opacity: 0; } .cl-cursor i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; } .cl-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff3d6; box-shadow: 0 0 6px 1px rgba(247,198,135,.85), 0 0 14px rgba(247,198,135,.4); mix-blend-mode: screen; } .cl-m { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: #f7c687; box-shadow: 0 0 4px rgba(247,198,135,.7); opacity: 0; } .cl-aro { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(247,198,135,.75); box-shadow: 0 0 10px rgba(247,198,135,.25); opacity: 0; transition: opacity .25s ease; } .cl-cursor.enlace .cl-aro { opacity: 1; } .cl-cursor.enlace .cl-punto { opacity: .5; } .cl-cursor.pulsa .cl-aro { border-color: #fff3d6; } @media (prefers-reduced-motion: reduce), (pointer: coarse) { .cl-cursor { display: none; } }