/* barra.css — LA BARRA. Una sola, para todas las páginas. ══════════════════════════════════════════════════════════════════════════ POR QUÉ EXISTE ESTE ARCHIVO Este sitio tiene dos hojas base: `css/site.css` la usa SÓLO la portada, y `assets/styles.css` la usan las otras veintiuna páginas. Las dos traían su propia copia de las reglas del header, y las copias se separaron: el 2 de septiembre la portada ya tenía la barra abajo, con el monograma, con los tres destinos y con objetivos táctiles de 44 px… y las páginas de juego y las legales seguían con la barra vieja arriba, con cinco enlaces, sin «Descargar» —el botón que el dueño puso por encima de todo— y desbordando 63,8 px en un teléfono de 360. No se vio antes porque cada arreglo se verificaba en la portada. Un header duplicado en dos hojas es una trampa que se arma sola: se arregla una copia, la otra se queda vieja, y la página que menos se mira es la que se rompe. Así que las reglas de la barra viven acá y en ningún otro sitio. Las dos hojas base ya no las tienen. Se enlaza DESPUÉS de la hoja base de cada página, tanto por precedencia como para que se lea claro en el . Depende de estas variables, definidas por igual en las dos hojas base: --max, --ink, --muted, --gold, --gold-soft. ══════════════════════════════════════════════════════════════════════════ */ /* ── El vidrio ─────────────────────────────────────────────────────────────── El pill de vidrio del juego (HomeBottomBar). En escritorio va ARRIBA, que es donde el ojo lo busca; en el teléfono va ABAJO, al alcance del pulgar — ver el bloque de `@media (max-width: 700px)`. [2026-09-02 · pedido del dueño] Antes había DOS piezas de vidrio a la vez: esta arriba y un «Descargar gratis» abajo. Dos barras para tres enlaces, y en un teléfono eso son dos mordiscos a una pantalla que ya es angosta. */ .site-header { position: sticky; top: 10px; z-index: 50; margin: 10px 12px 0; border-radius: 999px; background: rgba(20, 8, 11, .55); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); } .scrolled .site-header { border-bottom-color: rgba(255,255,255,.14); } .site-header nav { max-width: var(--max); margin-inline: auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ── La marca, dibujada ────────────────────────────────────────────────────── Va como máscara y no como para poder RECOLOREARLA: la máscara toma el `color` del enlace, así que la marca hereda el estado igual que hacía el texto cuando era texto. Y al ser un solo archivo, las veintidós páginas lo piden una vez y lo reutilizan de la caché. */ .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); } .brand .brand-mark { display: block; width: auto; height: clamp(1.05rem, 2.4vw, 1.5rem); aspect-ratio: 8785 / 1985; background-color: currentColor; -webkit-mask: url('/assets/logo-largo.svg') no-repeat center / contain; mask: url('/assets/logo-largo.svg') no-repeat center / contain; transition: opacity .15s ease; } .brand:hover .brand-mark { opacity: .82; } .site-footer .brand .brand-mark { height: 1.2rem; } /* El nombre sigue estando para lectores de pantalla y buscadores: el logo es la forma de la marca, no un sustituto de su texto. */ .vo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Los destinos ──────────────────────────────────────────────────────────── La zona que se toca son 44 px de alto, no la caja de la línea. [2026-09-02] Medido: los enlaces daban 17-18 px de alto. En el teléfono la barra vive bajo el pulgar, pero una tablet de 768 px también se toca con el dedo, así que la regla va en la base y vale en todos los anchos. El alto del header no cambia: ya medía 66 en escritorio. */ .site-header ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; align-items: center; } .site-header ul a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; min-height: 44px; } .site-header ul a:hover, .site-header ul a[aria-current="page"] { color: var(--ink); } .site-header .brand { display: inline-flex; align-items: center; min-height: 44px; } /* «Descargar» es el único botón de la barra y el único que el dueño marcó como imprescindible. Píldora dorada en TODAS las páginas: hasta hoy sólo existía en la portada y en las fichas de juego. */ .site-header .nav-cta { color: #2a0509; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-radius: 999px; padding: 7px 16px; font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; } .site-header .nav-cta:hover { color: #2a0509; filter: brightness(1.05); } /* ── El teléfono: la barra baja al pulgar ──────────────────────────────────── Aquí vivía la coreografía de la barra ANTERIOR: un header que entraba desde arriba (`top: 0` + `translateY(-130%)`) y se descubría al pasar el hero, mientras el «Descargar gratis» esperaba abajo en su propia barra. Al dejar UNA sola barra y mandarla abajo, esas reglas quedaron vivas y peleando: `translateY(-130%)` la levantaba 48 px del suelo, así que flotaba encima del texto del hero; y `.lp-home .site-header ul { display: none }` la dejaba convertida en un logo que no llevaba a ningún sitio. No necesita coreografía: está siempre, y siempre completa. */ @media (max-width: 700px) { .site-header { position: fixed; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0 12px; z-index: 60; } /* ── El aire cede primero; el contenido, nunca ──────────────────────────── [2026-09-02 · segunda tanda de medidas] El tope de texto de más abajo para que crezca la LETRA. No para que encoja la PANTALLA, que es el otro caso y el que de verdad rompía: el zoom por sitio de Safari (el menú AA: 100 · 115 · 125 · 150 %) no agranda el texto, reduce el viewport lógico. Un iPhone de 360 pt al 115 % es una pantalla de 313 px CSS, y ahí ningún tope en píxeles ayuda, porque el píxel CSS escala con el zoom. Medido antes de este bloque: 320 px (iPhone SE de 1.ª, o el 112 %) → la barra se parte en DOS renglones: 58 → 62 px de alto 313 px (115 %) → holgura −3,6 y la píldora 2,7 px fuera del vidrio 288 px (125 %) → 17 px de desborde y la píldora 27,7 px FUERA `--falta` mide cuánto se ha estrechado la pantalla por debajo de 360 y vale 0 en todo iPhone al 100 %: cada valor que depende de ella da exactamente el número de hoy en una pantalla normal, y sólo empieza a ceder cuando falta sitio de verdad. Cede el aire —relleno y separaciones—, que no significa nada; el contenido no. */ .site-header { --falta: max(0px, 360px - 100vw); } .site-header nav { flex-wrap: nowrap; padding: 6px max(8px, 12px - var(--falta) * .10) 6px max(10px, 14px - var(--falta) * .10); gap: max(8px, 14px - var(--falta) * .15); } /* La lista toma el sobrante y el CTA se empuja al extremo con `margin-left: auto`. No cuesta un píxel de ancho —sólo reparte la holgura que ya hay— pero cambia lo que se lee: en vez de cuatro cosas del mismo peso en fila queda [marca · El juego · Soporte] ————— [Descargar]. El aire delante del botón es lo que lo convierte en botón; pegado a «Soporte» era el cuarto enlace, y el dueño fue explícito en que ese es el que importa. */ .site-header ul { gap: max(8px, 13px - var(--falta) * .15); flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; } .site-header ul .cta-li { margin-left: auto; } /* ── Quién cede y quién no ──────────────────────────────────────────────── Si algún día falta ancho, que se rompa por donde se decidió y no por donde caiga. La marca no se deforma y el botón no se encoge (`flex: 0 0 auto`); los dos enlaces secundarios son los únicos que pueden ceder, y ceden recortando con puntos suspensivos en vez de saltar de renglón. Sin el `min-width: 0` un hijo de flex no baja de su ancho mínimo de contenido, así que el recorte no llegaría a ocurrir nunca. */ .site-header .brand, .site-header ul .cta-li { flex: 0 0 auto; } .site-header ul li { display: flex; align-items: center; min-width: 0; } .site-header ul li:not(.cta-li) > a { display: block; max-width: 100%; min-height: 0; line-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── El blanco táctil de la marca, desacoplado del dibujo ───────────────── El monograma se DIBUJA de 31,7 px de ancho, que son 12 menos de los 44 que pide Apple. Los 7 px por lado salen del relleno del vidrio y de la separación con la lista: espacio muerto, cero px de maquetación. Se ve de 31,7 y se toca de 45,7. */ .site-header .brand { position: relative; } .site-header .brand::after { content: ""; position: absolute; inset: 0 -7px; } .site-header .brand .brand-mark { height: min(1rem, 18px); } /* ── Tope al crecimiento del texto ──────────────────────────────────────── [2026-09-02 · medido] Con el monograma la barra tiene 25,5 px de holgura a 360 px… con la raíz en 16 px. Si alguien sube el «tamaño de texto mínimo» de Safari, la raíz crece, los destinos crecen con ella y la fila desborda: medido, a 20 px de raíz la holgura pasaba a −19,3 y aparecían 7 px de desborde real. El tope tiene que ser ABSOLUTO o no es tope: `clamp(.8rem, .88rem, 1.05rem)` no hace nada, porque los tres valores escalan juntos y siempre gana el del medio. Con píxeles en los extremos, el texto de la barra crece de 12 a 15 px y ahí se planta, mientras el resto de la página sigue escalando entera — que es donde de verdad importa leer. No es ignorar la preferencia: es que una barra fija de una sola fila no puede crecer sin romperse, y romperse se lee peor que no crecer. Medido después del tope: ningún tamaño de raíz de 16 a 24 px desborda, y el peor caso deja 13,3 px de holgura. */ .site-header ul a, .site-header .nav-cta { font-size: clamp(12px, .88rem, 15px); } .site-header .nav-cta { padding: 0 max(10px, 14px - var(--falta) * .10); min-height: 44px; white-space: nowrap; } /* Sitio para la barra: sin esto el último bloque de cada página queda debajo del vidrio y su texto no se puede leer ni tocar. */ body { padding-bottom: 84px; } /* ── En la portada, la barra espera fuera de la pantalla inicial ────────── [2026-09-02 · dueño] «Cuando está en la pantalla inicial no tendría por qué aparecer, sólo al hacer scroll hacia abajo». Tiene razón y es sólo de la PORTADA: ahí la primera pantalla es el hero, y el hero ya trae su propio botón grande del App Store. Una segunda llamada a lo mismo, flotando encima, es ruido sobre la única pantalla que tiene que entrar entera. En cambio en soporte, privacidad o una ficha de juego no hay hero que respetar y la barra es la única navegación: ahí está desde el primer píxel. Por eso el gancho es `.lp-home`, que sólo lleva la portada. La señal es `paso-hero`, la misma que ya existía en `app.js` (`scrollY > innerHeight * 0.55`): una sola fuente para «ya dejaste atrás la primera pantalla». Y va colgado de `.js`: sin JavaScript nadie añade `paso-hero`, así que sin esa guarda la portada se quedaría permanentemente sin barra. */ .js .lp-home .site-header { transform: translateY(calc(100% + 18px)); visibility: hidden; transition: transform .34s cubic-bezier(.2,.7,.3,1), visibility 0s linear .34s; } .js.paso-hero .lp-home .site-header { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.2,.7,.3,1), visibility 0s; } } @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .js .lp-home .site-header, .js.paso-hero .lp-home .site-header { transition: none; } } /* ── La barra angosta: el monograma en lugar del logotipo largo ────────────── [2026-09-02 · pedido del dueño: «que estén Soporte, El juego y sobre todo Descargar»] Con los tres destinos la fila NO cabía, y esto está medido, no estimado. La medida se tomó a 360 px sobre la barra tal como estaba entonces —relleno del nav 16+12, separaciones 14 en la lista y 10 entre marca y lista—, que daba una caja interior de 306 px: logotipo largo 70,8 «El juego» 53,4 «Soporte» 54,2 «Descargar» 99,2 separaciones 14 + 14 + 10 = 38 ───────────────────────────────────────────────────────────── 277,6 + 38 = 315,6 contra 306 → faltaban 9,6 px Y ojo con cómo se comprueba: el navegador decía `scrollWidth == clientWidth`, que parece «entra justo» y no lo es. En una fila flex esa igualdad es la FIRMA DEL APRETÓN, no de la holgura: el logotipo es una máscara de ancho automático con `flex-shrink` por omisión, así que el navegador lo aplastaba en silencio hasta que la suma cuadrara. La cuenta pieza a pieza es la que dice la verdad. Un ajuste que se consigue deformando la marca no es un ajuste. La solución no es quitar un destino —el dueño pidió los tres— sino cambiar CÓMO está la marca. El monograma Q·G es la misma marca en su forma corta: ya se usa en el dorso de las cartas de este sitio, y su relación 1,89:1 contra 4,43:1 del logotipo largo lo deja en 31,7 px. Medido: la fila pasa a 280,5 px y sobran 27,5. Eso es holgura de verdad, la que hace falta para que el texto grande de iOS no rompa la barra. Y no se pierde nada: el logotipo largo sigue enorme en el hero de la portada y entero en el pie de cada página. Lo que la barra necesita es una firma, no una portada. El corte va en 460 px y no en 400 a propósito: el iPhone estándar mide 393 pt y el Pro 402, así que un corte en 400 le habría dado marca corta a uno y marca larga al otro —dos teléfonos casi iguales con dos barras distintas—. En 460 entran todos los iPhone en vertical, Pro Max (430) incluido, y la regla se lee sola: en el teléfono, el monograma; de tablet para arriba, el logotipo entero. Medido a 430 px con monograma: 97,5 px de holgura. */ @media (max-width: 460px) { .site-header .brand .brand-mark { height: min(1.05rem, 19px); aspect-ratio: 2527 / 1337; -webkit-mask-image: url('/assets/monograma.svg'); mask-image: url('/assets/monograma.svg'); } }