/* Reset corto, tipografía y utilidades de composición. */ /* Fuentes autoalojadas: ninguna petición a un tercero desde el navegador del visitante. */ @font-face { font-family: "Gabarito"; src: url("../fonts/gabarito-variable.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; font-style: normal; } @font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hankengrotesk-variable.woff2") format("woff2-variations"); font-weight: 300 800; font-display: swap; font-style: normal; } *, *::before, *::after { box-sizing: border-box; } /* Nada de "baile" lateral en móvil: sin `overflow-x` también en , la regla del se ignora en cuanto el scroll lo lleva el elemento raíz. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--crema); color: var(--tinta); font-family: var(--fuente-texto); font-size: var(--txt-m); line-height: var(--alto-texto); font-weight: var(--peso-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: var(--alto-titulo); letter-spacing: -0.02em; font-weight: var(--peso-macizo); margin: 0 0 var(--e-4); text-wrap: balance; } h1 { font-size: var(--txt-3xl); } h2 { font-size: var(--txt-2xl); } h3 { font-size: var(--txt-l); letter-spacing: -0.01em; } h4 { font-size: var(--txt-m); font-weight: var(--peso-fuerte); letter-spacing: 0; } p { margin: 0 0 var(--e-4); /* min() y no un valor fijo: una medida en ch dentro de una columna de rejilla ensancha la columna y desborda la pantalla en móvil. */ max-width: min(var(--medida), 100%); text-wrap: pretty; } /* * Los hijos de una rejilla tienen min-width auto por defecto y se niegan a * encogerse por debajo de su contenido. Sin esto, un titular largo empuja la * columna y saca la página entera del viewport del móvil. */ .duo > *, .razones > *, .tarifas > *, .cuadrante > *, .pie__rejilla > * { min-width: 0; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } img, picture, video, svg { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 var(--e-4); padding-left: 1.15em; } li { margin-bottom: var(--e-2); } :focus-visible { outline: 2px solid var(--senal); outline-offset: 3px; border-radius: 2px; } /* Para lector de pantalla. */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .saltar-al-contenido { position: absolute; top: -100%; left: var(--e-4); z-index: 200; background: var(--senal); color: var(--tinta); padding: var(--e-3) var(--e-4); font-weight: var(--peso-fuerte); border-radius: 0 0 var(--radio) var(--radio); } .saltar-al-contenido:focus { top: 0; } /* --- Composición ------------------------------------------------------ */ .contenedor { width: min(100% - var(--margen) * 2, var(--ancho)); margin-inline: auto; } .contenedor--estrecho { width: min(100% - var(--margen) * 2, var(--ancho-estrecho)); margin-inline: auto; } .seccion { padding-block: var(--seccion); } .seccion--apretada { padding-block: clamp(2.5rem, 6vw, 4.5rem); } /* Kicker: una sola vez por página como mucho. Repetirlo en cada sección es andamiaje. */ .kicker { font-family: var(--fuente-titulo); font-size: var(--txt-s); font-weight: var(--peso-fuerte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento); margin: 0 0 var(--e-3); } .entradilla { font-size: var(--txt-l); line-height: 1.4; color: var(--texto-suave); max-width: min(34ch, 100%); } .texto-suave { color: var(--texto-suave); } /* --- Motion ----------------------------------------------------------- */ /* * El contenido nunca nace invisible: solo se oculta cuando el propio script se ha * ejecutado y ha marcado el documento. Si el JS falla, tarda o está bloqueado, * la página se lee entera igual. */ .con-motion .revela { opacity: 0; transform: translateY(18px); transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva); transition-delay: var(--retardo, 0ms); } .con-motion .revela.es-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .con-motion .revela { opacity: 1; transform: none; } }