/* DB Project — base: reset, escala de espaciado, contenedor, ritmo de sección. Reemplaza a css/layout.css (nav/hilo/footer se fueron a css/chrome.css). */ :root { /* Múltiplos de 8, sin excepciones. La escala anterior (6/10/16/20/32/40/64/88) mezclaba múltiplos de 2 y de 8 y no daba un ritmo vertical consistente. */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; --container-max: 1280px; --container-pad: 24px; --nav-height: 96px; /* Lo que hay que dejar libre arriba para que la barra no tape nada. No es lo mismo que --nav-height: esto incluye el recorte de pantalla del teléfono. La barra vive en top: --space-3 + safe-area y la píldora mide ~56px; el --space-3 final es aire, no cálculo. Lo usa toda sección que pueda quedar con su encabezado pegado al tope — hoy, la 05, que se pinea. */ --nav-clearance: calc(var(--space-3) + env(safe-area-inset-top, 0px) + 56px + var(--space-3)); /* Escala z semántica — ningún 9999 suelto en todo el sitio. */ --z-thread: 40; --z-nav: 50; --z-overlay: 60; } @media (min-width: 768px) { :root { --container-pad: 56px; } } *, *::before, *::after { box-sizing: border-box; } /* El navegador declara [hidden] { display: none } con especificidad de tipo, así que CUALQUIER regla de clase con display se lo lleva por delante. Pasó con el encabezado de la pasarela: con un solo proyecto el JS le pone hidden y el contador seguía a la vista, porque .pasarela__cab declara display:flex. El !important acá es correcto: hidden no es una preferencia de estilo, es una afirmación sobre si el elemento existe para el visitante. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; /* El nav flota con position:fixed y no reserva espacio; esto evita que un salto de ancla deje el título de la sección debajo de la píldora. */ scroll-padding-top: var(--nav-height); /* La canaleta de la barra de scroll se reserva siempre. Es lo que evita que bloquear el scroll al abrir una ficha desplegable corra la página unos píxeles a la derecha: sin esto, la barra desaparece y el contenido se recentra en el ancho que sobra. En las páginas largas la canaleta ya estaba ocupada, así que no cambia nada de lo que se ve. */ scrollbar-gutter: stable; } /* Mientras una ficha desplegable está abierta, el fondo no scrollea. Va en y no en : el sitio tiene secciones pineadas por ScrollTrigger, y sacar el body del flujo les cambia el alto del documento debajo de los pies. Con overflow el navegador conserva la posición y ScrollTrigger no se entera. */ html.ficha-abierta { overflow: hidden; } body { margin: 0; } img { max-width: 100%; display: block; } /* El padding lateral nunca baja del recorte de la pantalla: en horizontal, en un teléfono con notch, el texto quedaría cortado contra el borde. max() elige el mayor de los dos, así en pantallas sin recorte queda exactamente como antes. */ .container { max-width: var(--container-max); margin-inline: auto; padding-left: max(var(--container-pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--container-pad), env(safe-area-inset-right, 0px)); } /* Toda sección que aloje una entrada con desplazamiento HORIZONTAL tiene que recortar: mientras esos bloques están fuera de pantalla esperando su entrada, viven corridos hacia un costado, y si la sección no los recorta ese desplazamiento se suma al ancho scrolleable del documento y aparece una barra horizontal en toda la página. Encontrado midiendo: en 375px, la tarjeta de servicios con data-enter="right" quedaba en x=+32 y llevaba el scrollWidth del documento a 383 sobre 375. La comparación ya tenía su recorte propio; servicios no, y la regla suelta no iba a cubrir la próxima sección que usara una entrada lateral. clip y no hidden: hidden convierte a la sección en contenedor de scroll y rompe position:sticky de cualquier descendiente. */ .section:has([data-reveal="cross"]), /* Las tarjetas que entran desde su lado con rotación (secciones 02 y 04) se salen unos píxeles MIENTRAS dura la entrada: medido, 1px a 375 y 3,5px a 414. En reposo no sobran, pero ese desborde transitorio alcanza para que parpadee la barra horizontal en un celular. */ .section:has([data-enter]), /* La 03 no tiene tarjetas pero su entrada también es lateral: el interruptor y las frases llegan desde la izquierda y el símbolo desde la derecha. */ /* El ritmo vertical entre secciones. Estaba en 96 (mobile) y 128 (desktop) por lado, así que entre el último contenido de una sección y la marca de la siguiente quedaban 192 y 256px de nada. Medido en la costura 02→03: 268px vacíos debajo del borde inferior de un bloque con borde, que se lee como que la página se cortó. Baja un escalón de la escala en cada corte: sigue siendo espacio negativo generoso (192px son el 21% de un viewport de 900) sin el agujero. El cambio es global a propósito — el hueco existía en todas las costuras, la 02→03 era sólo donde más se notaba. */ /* Baja otro escalón de la escala. Cada bloque se comía una pantalla y media y ninguna sección entraba entera en un viewport de desktop sin scrollear dentro de ella. 64px de aire arriba y abajo en desktop siguen siendo espacio negativo generoso — el 7% de un viewport de 900 por lado — y devuelven casi una pantalla por sección a lo largo de la página. Múltiplos de 8, como toda la escala. */ /* Las secciones que cruzan dos bloques recortan su propio desborde lateral. data-reveal="cross" desplaza cada lado 200px en desktop, y esos 200px salen de la pantalla mientras dura el cruce: medido en Servicios a 1440, .formato__texto terminaba en x=1497 sobre un viewport de 1440 — 57px de barra horizontal en toda la página, y sólo mientras la animación estaba a mitad de camino, que es la peor clase de bug porque no está siempre. clip y no hidden: hidden crea un contenedor de scroll y rompe el position: sticky de las escenas que viven en otras secciones. Antes esta regla existía pero atada a un atributo de UNA sección (data-caminos). Va sobre el mecanismo, no sobre el lugar: cualquier sección que cruce, recorta. */ .section:has([data-reveal="cross"]) { overflow-x: clip; } /* ── El aire de una sección depende de lo que la sección tiene adentro ──────── Antes era var(--space-5) para todas: medido, 64px arriba y 64 abajo en las siete secciones del Inicio y en las siete de landing, sin una excepción. Eso es lo que hace que el sitio "respire igual" en todos lados y se lea como una plantilla rellenada. Ahora hay tres respiraciones, y la decide el contenido —no una lista de excepciones escritas a mano sección por sección, que sería el mismo problema con más líneas—: por defecto una sección normal, con título y cuerpo apretada la que ya trae una grilla de piezas: la grilla pone su propio ritmo y sumarle el aire de afuera la deja flotando amplia la que es sólo una afirmación: sin grilla que la sostenga, el aire ES el contenido Y en clamp, no en un valor fijo: en 375px el respiro grande no es grande, es media pantalla perdida. */ .section { padding-block: clamp(2rem, 4.4vw, 3.25rem); } /* Apretada: ya tiene una grilla adentro. */ .section:has(.card, .rubro, .plan, .paso, .formato, .compara__col, .precio) { padding-block: clamp(1.75rem, 3.4vw, 2.5rem); } /* Amplia: es una sola afirmación y el aire la sostiene. */ .section.cierre, .section.cierre-formato, .section.parana { padding-block: clamp(3rem, 6vw, 4.5rem); } /* En desktop había un @media que reponía var(--space-6) —64px— para TODAS las secciones, y era el origen real de que todo respirara igual: pisaba cualquier matiz que se intentara arriba. Ahora sube el techo de las tres respiraciones en vez de aplanarlas a un solo número. */ @media (min-width: 1024px) { .section { padding-block: var(--space-5); } .section:has(.card, .rubro, .plan, .paso, .formato, .compara__col, .precio) { padding-block: var(--space-4); } .section.cierre, .section.cierre-formato, .section.parana { padding-block: var(--space-7); } } h1, h2, h3 { text-wrap: balance; margin-block: 0 var(--space-3); } h2 { font-size: var(--db-fs-h2); } h3 { font-size: var(--db-fs-h3); } /* ── DOS REGISTROS DE TITULAR, NO UNO EN DOS TAMAÑOS ────────────────────────── design-system/typography.css les da a h1, h2 y h3 el mismo peso (600) y a h1 y h2 el mismo interletrado (-0.025em). Con la fuente igual, el peso igual y el tracking igual, lo único que distinguía un título de página de uno de sección era cuántos píxeles medía — y a 40px un h2 y a 64 un h1 se leen como el mismo objeto a dos distancias, no como dos niveles. Se separan por dos ejes a la vez, que es lo que hace que la diferencia se lea incluso cuando los tamaños se acercan: TÍTULO DE PÁGINA (h1, .display) denso: tracking más cerrado y renglón más corto. Es una afirmación, y se compacta. TÍTULO DE SECCIÓN (h2) abierto: peso 500 y tracking casi neutro. Es un rótulo del recorrido, y respira. Ni una fuente nueva, ni un peso que no esté ya cargado (el @import trae 400, 500, 600 y 700). Los tokens de design-system no se tocan: esto es tratamiento del sitio, no de la identidad. */ h1, .display { letter-spacing: -0.035em; line-height: 1.05; } h2 { font-weight: 500; letter-spacing: -0.005em; line-height: 1.18; } /* h3 se queda en 600: es el nivel de bloque, vive dentro de tarjetas y paneles y ahí el peso es lo que lo separa del párrafo que tiene pegado abajo. */ /* El texto de apoyo BAJA. Estaba en --db-gris-claro (8,06:1 contra el grafito), casi tan encendido como un título en blanco: con esa distancia, un párrafo y un titular pesaban casi lo mismo y ninguna sección tenía jerarquía a distancia. Ahora va en --db-gris-medio (4,97:1) y el rango entre título y párrafo pasa de 16,9→8,1 a 16,9→5,0. Sigue siendo AA de sobra. */ p { text-wrap: pretty; max-width: 68ch; margin-block: 0 var(--space-2); /* La prosa crece de 16 a 20px con el ancho (--db-fs-cuerpo). No es lo mismo que --db-fs-body, que quedó para controles: un botón de 20px es un botón gordo, un párrafo de 16px al lado de un título de 110 es una nota al pie. */ font-size: var(--db-fs-cuerpo); color: var(--db-gris-medio); line-height: 1.65; /* texto claro sobre fondo oscuro pide más aire */ } a { color: inherit; } .mono { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--db-acento); outline-offset: 3px; } /* Texto que existe para el lector de pantalla y no para la vista. Se usa en controles cuyo significado ya está dicho por su forma (el botón de pausa de la franja es un cuadrado, no una palabra). No se usa display:none ni visibility:hidden: las dos lo sacarían también del árbol de accesibilidad, que es justo lo contrario de lo que se busca. */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Salto al contenido: para quien navega con teclado y no quiere tabular por toda la barra y el índice de secciones en cada página. */ .skip-link { position: absolute; left: var(--space-2); top: -100px; z-index: var(--z-overlay); background: var(--db-acento); color: var(--db-grafito); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: 8px; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: var(--space-2); } /* ── Tramo claro ───────────────────────────────────────────────────────────── El recorrido alterna claro y oscuro por tramos, y un tramo claro no es "lo mismo con otro background": cambia el material entero. En vez de escribir una variante clara de cada regla que vive adentro, el tramo REDEFINE los tokens una sola vez y todo lo que usa var(--db-…) se adapta solo. Incluido --db-acento: el teal pleno da 2,83:1 contra el claro y no alcanza ni para texto ni para un borde que informe. Adentro de un tramo claro el mismo teal vale su versión oscurecida, así "el acento" sigue siendo un solo concepto en todo el sitio y no dos colores que hay que recordar cuál va dónde. --db-acento-apagado se redeclara con la misma fórmula para que se recalcule sobre el acento local, y sube de 34% a 55%: sobre claro, un teal al 34% de opacidad directamente no se ve. El grano va en un ::before fijo al tramo y con pointer-events:none. Es una imagen tileada, no un filtro: se rasteriza una vez. */ .tramo-claro { --db-texto-sobre-oscuro: var(--db-texto-sobre-claro); --db-texto-secundario-sobre-oscuro: var(--db-texto-secundario-sobre-claro); --db-gris-claro: var(--db-texto-secundario-sobre-claro); --db-gris-medio: var(--db-texto-secundario-sobre-claro); --db-acento: var(--db-acento-sobre-claro); --db-acento-apagado: color-mix(in srgb, var(--db-acento) 55%, transparent); --db-linea: color-mix(in srgb, var(--db-grafito) 14%, transparent); --db-linea-fuerte: color-mix(in srgb, var(--db-grafito) 30%, transparent); --db-superficie: var(--db-blanco); position: relative; isolation: isolate; background: var(--db-tramo-claro); color: var(--db-texto-sobre-claro); } .tramo-claro::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--db-grano); opacity: 0.5; pointer-events: none; } /* Sobre claro el anillo de foco en teal oscurecido se ve, pero el grafito se ve mejor: es el color de máximo contraste de este material. */ .tramo-claro :focus-visible { outline-color: var(--db-grafito); } /* Botones — compartidos por las cinco páginas */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); /* Piso de área táctil, ronda 2026-09-06. Era 44px —el mínimo de WCAG 2.5.8— y el mínimo no es el objetivo: con 44 el botón entra en la norma y sigue siendo incómodo de tocar. 48 en desktop, 52 en teléfono (abajo), que es el ancho real del pulgar y no el del puntero. Lo hereda TODO .btn, así que ningún nivel puede quedar por debajo por olvido. */ min-height: 48px; padding: 0 var(--space-3); border: 1px solid transparent; /* Fondo explícito, y no heredado. Hasta acá todos los .btn eran , que nacen con fondo transparente, así que .btn--ghost no necesitaba declararlo. El primer