/* ============================================================ SPORTS TRAVEL COLOMBIA — base compartida Marca: negro profundo + rojo/amarillo/azul del logo Tipo: Saira (display + cuerpo) — prueba tipográfica ============================================================ */ :root { /* Fondo claro vintage (crema / papel) */ --bg: #f3e8cf; --bg-2: #ecdfc1; --surface: #f9f2df; --surface-2: #ecdfbf; --line: rgba(33, 27, 18, 0.15); --line-2: rgba(33, 27, 18, 0.30); /* Texto tinta (token --cream = color de texto principal, ahora oscuro) */ --cream: #211b12; --text: #211b12; --text-2: rgba(33, 27, 18, 0.76); /* ⚠️ --text-3 estaba en .50 y daba 3,13:1 sobre el papel. Se usa a 11–11.5px con peso 800 (eyebrows, códigos STC, notas al pie del popup), y 11.5px negrita NO es "texto grande" —el umbral son 18.66px—, así que esos ~12 sitios fallaban el 4.5:1. No subirlo más: a .70 el gris deja de leerse como secundario. ⚠️ De .62 a .64 el 2026-08-23, y el motivo es que el .62 se midió contra el crema del PIE (#f6efda, donde daba 4,57) y hay 12 de los 28 usos que viven sobre el crema de la PÁGINA (#f3e8cf, más oscuro): los `01…06` y el `USA · MEX · CAN` de "Elige tu pasión" daban 4,467 — fallaban por tres centésimas. Con .64 dan 4,75 sobre el papel de página, 4,86 sobre el del pie y 4,92 sobre el de los álbumes. Comprobado que los 28 usos están sobre crema claro: subir el alfa sólo puede mejorarlos. */ --text-3: rgba(33, 27, 18, 0.64); /* Colores del logo */ --red: #e8202e; /* Mismo rojo, 3% más oscuro, SOLO para fondos que llevan texto blanco encima. El --red de marca da 4,48:1 con #fff y se queda a una centésima del 4.5:1; éste da 4,89:1. A ojo son indistinguibles, y así el rojo de marca sigue intacto en todo lo demás (puntos, filetes, acentos). */ --red-cta: #dd1e2b; /* El rojo de marca en versión TINTA, para cuando el rojo es texto sobre el crema y no relleno. Sobre #f3e8cf el --red da 3,69:1 y falla; éste da 4,97. ⚠️ --red-cta NO sirve para esto: está pensado al revés (fondo rojo con blanco encima) y como tinta sobre crema se queda en 4,02. Es el mismo hex que --c-f1-t a propósito: el acento de F1 ES el rojo de marca, así que su versión tinta tiene que ser la misma o el sitio tendría dos rojos oscuros distintos. Medido: 4,97 sobre #f3e8cf (papel de página), 5,27 sobre #f6efda (pie) y 4,58 sobre --bg-2 (#ecdfc1, banda de cifras). */ --red-t: #c41421; --yellow: #ffc400; --blue: #1e8fff; --blue-deep: #0a4fa8; /* Acentos por deporte */ --c-futbol: #1e8fff; --c-f1: #e8202e; --c-motogp: #ff6b1a; --c-tenis: #3fae4f; --c-festival: #e63da8; --c-expediciones: #8140b5; /* ---------- Los mismos acentos, en versión TINTA ---------- Cada acento hace dos trabajos distintos y sólo sirve bien para uno. Como SUPERFICIE (el relleno de un botón, la píldora de una tarjeta, el filete del hero, un brillo) el acento es perfecto: brilla, es la marca del deporte y no tiene que competir con nada. Como TINTA sobre el crema del papel es otra cosa. Medido el 2026-08-23 contra el crema más oscuro de los tres (--bg-2, la banda de cifras), el acento de marca daba: fútbol 2,5 · Moto GP 2,2 · tenis 2,2 · festivales 2,8 · F1 3,4. Hacen falta 4,5 para texto normal y 3 para texto grande, así que cinco de los seis fallaban, y tres fallaban INCLUSO en texto grande. No era sutileza de auditoría: el "VER PROGRAMA" de cada tarjeta —el enlace principal, el que hay que pulsar— era lo más flojo de su bloque, más flojo que el párrafo gris de al lado. Estos seis son el mismo color con la luz bajada y nada más: el matiz y la saturación quedan intactos, así que siguen siendo reconociblemente el azul del fútbol o el naranja de Moto GP. Todos dan ≥4,5 sobre los tres cremas del sitio (#f3e8cf, #ecdfc1, #fbf6ea) y ≥5,9 con blanco encima. Es la misma jugada que --red-cta unas líneas más arriba, sólo que en la otra dirección: allí el rojo se hunde para poder llevar blanco encima, aquí el acento se hunde para poder ser él mismo la tinta. ⚠️ NO uses estos en superficies. Si pintas un botón con --sp-t el sitio pierde el brillo, que es justo lo que lo hace suyo. La regla es corta: acento sobre crema → tinta; acento debajo de algo → marca. */ --c-futbol-t: #0061c2; --c-f1-t: #c41421; --c-motogp-t: #ae3e00; --c-tenis-t: #297133; --c-festival-t: #ba187e; --c-expediciones-t: #8140b5; /* el morado ya daba 4,8: se queda igual */ --font-display: "Anton", "Saira Condensed", "Arial Narrow", sans-serif; --font-body: "Saira", "Helvetica Neue", sans-serif; /* La franja tricolor del tope, y el aire que Juan pidió entre ella y el logo. --nav-h SUMA los dos, así que la banda donde vive el contenido de la barra sigue midiendo 72px exactos y el logo no se descentra. Todo lo que se apoya en --nav-h (el padding del hero, el top del menú móvil y el de su velo) baja solo; no hay ningún 72 escrito a mano en el resto del sitio. ⚠️ La franja es TAMBIÉN la barra de progreso de lectura; el porqué y el cómo están en la sección "FRANJA TRICOLOR" al final de este archivo. ⚠️ 2026-08-24: se sumó env(safe-area-inset-top) — el hueco de la isla dinámica/notch en iPhone. Sin esto, con viewport-fit=cover puesto, el nav fijo (y su franja) arrancaban en el y=0 de verdad, justo detrás de la isla: al hacer scroll el fondo borroso del nav no llegaba a cubrirla y se veía la foto del hero (o la propia franja) pegada al notch. Con la variable en :root, TODO lo que se apoya en --nav-h baja solo, igual que con la franja. */ --franja-h: 6px; --franja-aire: 10px; --nav-h: calc(72px + var(--franja-h) + var(--franja-aire) + env(safe-area-inset-top, 0px)); --pad: clamp(20px, 5vw, 72px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } /* ⚠️ 2026-08-24: overflow-x:hidden va en Y en , no sólo en uno. En iOS Safari el elemento que arrastra el "pan"/rebote horizontal con el dedo es (documentElement), no : el overflow-x:hidden del body (abajo) recorta lo que se PINTA, pero no bloquea el gesto de arrastre, así que en iPhone la página igual se dejaba correr hacia los lados y quedaban a la vista fragmentos de la bufanda / el carrusel que están fuera del viewport a propósito (ver la nota de `.bufanda` sobre por qué se sale del viewport). Con el mismo overflow-x:hidden también en el gesto queda fijo en escritorio y en iOS por igual. */ html { scroll-behavior: smooth; overflow-x: hidden; } /* Scrollbar a juego con el papel de la página, no el blanco de fábrica del navegador. Pista = --bg (el mismo crema del body), pulgar = tinta a baja opacidad —no --cream sólido, que se vería como una barra negra pesada—. Firefox usa scrollbar-color; WebKit/Chromium/Safari usa los pseudo-elementos ::-webkit-scrollbar*. El pulgar lleva un borde del color de la pista (background-clip: padding-box) para que quede angosto y separado del canto, en vez de pegado a los dos bordes. */ html { scrollbar-color: rgba(33, 27, 18, 0.35) var(--bg); } ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background-color: rgba(33, 27, 18, 0.35); border: 3px solid var(--bg); border-radius: 9px; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(33, 27, 18, 0.5); background-clip: padding-box; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16.5px; font-weight: 460; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Grano de textura global. ⚠️ Estaba a z-index 990, por ENCIMA del popup de programa (960): el grano se multiplicaba sobre el texto del programa y le bajaba el contraste real. El grano es del papel de la página, no de la hoja del programa, que ya trae el suyo. A 940 queda debajo del popup y del velo de progreso (950) y encima de todo lo demás. */ body::after { content: ""; position: fixed; inset: 0; z-index: 940; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* Salto al contenido: primer elemento enfocable de cada página. Sólo aparece al llegar con el tabulador, para que quien navegue con teclado no tenga que recorrer el nav entero en cada página. */ .skip-link { position: fixed; top: 0; left: 50%; /* -120% (de la propia altura del enlace) NO alcanza a esconderlo del todo en iPhone con isla dinámica: sin viewport-fit=cover Safari confinaba los `fixed` a la zona "segura" bajo el notch, así que el -120% se calculaba corto y el enlace se veía flotando ahí en cuanto la barra de Safari se recogía al hacer scroll (2026-08-24). -200px es una distancia fija que limpia cualquier isla dinámica real (≤59px) de sobra, y no depende de la altura del propio enlace ni de si el navegador ya soporta el notch. */ transform: translate(-50%, -200px); z-index: 1000; background: var(--cream); color: var(--bg); font-family: var(--font-body); font-size: 15px; font-weight: 700; padding: 12px 22px; border-radius: 0 0 12px 12px; transition: transform 0.18s var(--ease-out); } /* Va con `:focus` a secas y NO con `:focus-visible`, que es lo que se usa en el resto del sitio. `:focus-visible` es una heurística del navegador: con el foco puesto por JS (volver de un popup, un `#contenido` en la URL, la restauración de foco al recargar) puede no cumplirse, y entonces el enlace se queda fuera de pantalla ENFOCADO — el teclado está en un elemento que no se ve. Aquí no hay contrapartida: el enlace vive en `translate(-50%,-120%)`, así que con el ratón es inalcanzable y `:focus` sólo lo puede disparar el teclado. */ .skip-link:focus { transform: translate(-50%, 0); outline: 3px solid var(--yellow); outline-offset: -6px; } ::selection { background: var(--red); color: #fff; } /* ---------- Tipografía display ---------- */ .d-giant, .d-big, .d-mid { font-family: var(--font-display); text-transform: uppercase; line-height: 0.96; letter-spacing: 0.01em; font-weight: 400; } .d-giant { font-size: clamp(46px, 8vw, 140px); } .d-big { font-size: clamp(34px, 5.2vw, 92px); } .d-mid { font-size: clamp(26px, 3.4vw, 52px); } .d-outline { color: transparent; -webkit-text-stroke: 2px rgba(33, 27, 18, 0.38); } .d-outline-accent { color: transparent; -webkit-text-stroke: 2px var(--accent, var(--red)); } /* El eyebrow hace las dos cosas a la vez: el filete de 34×3px es SUPERFICIE y las letras son TINTA, así que no pueden compartir color. A 14,5px el texto es "texto normal" para la norma (el umbral de texto grande son 18,66px en negrita) y el rojo de marca sobre el crema da 3,69:1 — falla. El filete, en cambio, es un adorno de 3px que sólo necesita brillar. Por eso hay dos variables: --accent para el filete y --accent-t para la tinta. Si sólo se define --accent, la tinta lo hereda —así siguen andando los sitios que ya lo usaban— y si no hay ninguna, el respaldo es --red-t (4,97), no --red. */ .eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 14.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-t, var(--accent, var(--red-t))); display: inline-flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--accent, var(--red)); display: inline-block; } .lead { font-size: clamp(16px, 1.5vw, 20px); color: var(--text-2); max-width: 58ch; text-wrap: pretty; } /* Tapa de la isla dinámica / notch: opaca SIEMPRE, sin depender del scroll. ⚠️ 2026-08-24, segunda vuelta sobre el fix de --nav-h de hoy mismo: ese fix bajó el nav y su franja para que no arrancaran detrás del notch, pero el propio