/* Correcciones del sitio público del portal. ESCRITO A MANO (2026-10-08).
Por qué existe este archivo, y por qué lleva `!important`:
Las plantillas de `publico/` las GENERA `tools/portar_vistas.mjs` desde el
prototipo del handoff, y el prototipo trae los estilos METIDOS EN EL ATRIBUTO
`style` de cada elemento. Un estilo en línea le gana a cualquier hoja, así que
desde fuera sólo se puede corregir con `!important`; y tocar las plantillas a mano
no sirve, porque la siguiente regeneración se lo lleva. Esto, en cambio, sobrevive.
Lo que corrige son las tres fallas que salieron la primera vez que
`aurox/sitios/medir.mjs` pudo medir el portal (2026-10-08, 16 combinaciones):
1. CINCO TEXTOS QUE MEDÍAN 1:1. El prototipo los pinta con `color: transparent`:
uno con el degradado recortado a la letra y los números 02..05 del acordeón,
que son sólo contorno. Un texto transparente no lo lee quien ve poco, ni un
teléfono al sol, ni el instrumento.
2. VEINTISIETE TOQUES DE MENOS DE 44 px en el nav (el de Contadores medía 24).
3. TÍTULOS EN PÍXELES FIJOS: el del héroe en 76 px, sin `clamp`, que a 360 px
de ancho se sale 46 px por la izquierda.
Los selectores van por el propio atributo `style` (`[style*="..."]`) o por los
ganchos de datos que el prototipo ya trae (`[data-acc-num]`, `[data-nav]`), no por
posición: si el prototipo cambia de orden, esto sigue apuntando a lo mismo. */
/* ── 1. Nada de texto transparente ─────────────────────────────────────────── */
/* El titular con el degradado recortado a la letra: pasa a color sólido. Pierde el
degradado y gana el poder leerse, que es el intercambio correcto. */
[style*="background-clip: text"] {
background-image: none !important;
color: var(--accent2) !important;
-webkit-text-fill-color: var(--accent2) !important;
}
/* Los números del acordeón: del contorno a un relleno con contraste. Con
`--numStroke` bastaba de noche (4.97:1) pero de día daba 2.26:1 — ese token está
pensado para un trazo, no para letra. Van con `--muted`, que es el token que el
portal usa para texto y cumple en los dos temas. */
[data-acc-num] {
color: var(--muted) !important;
-webkit-text-stroke: 0 !important;
}
/* ── 2. Lo que se toca, a 44 px ────────────────────────────────────────────── */
/* El mismo número que usa el resto de la casa. `inline-flex` para que el alto se
note sin mover el renglón, igual que en los sitios de `sitios/`. */
/* `[data-nav] a` dejaba fuera los que cuelgan de la caja interior y el botón del
tema, que es un sin href. Se nombran los tres sitios donde hay algo que tocar. */
[data-nav] a,
[data-nav-caja] a,
nav a,
/* Y las pestanas del simulador («Tu» / «Nosotros»), que son con cursor de mano
dentro del contenido: median 31 px. Se nombran por lo que son —un control— y no
por donde estan, que es lo unico estable cuando la plantilla se regenera. */
a[title][style*="cursor: pointer"] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── 4. El acordeón, de pie en el teléfono ─────────────────────────────────── */
/* Son cinco paneles en fila de 92 px cada uno: 460 px que no caben en una pantalla
de 360, y por eso se salían 32 textos. Por debajo de 860 px la fila se vuelve
columna y cada panel ocupa el alto que necesite. Arriba de ahí no se toca: ese
acordeón horizontal es el diseño del handoff y en escritorio funciona. */
@media (max-width: 860px) {
/* El padre es un flex en fila y no tiene gancho propio: se le llega por el hijo,
con :has(). Sin esto, los paneles siguen en fila aunque cada uno se estire. */
:has(> [data-acordeon]) { flex-direction: column !important; height: auto !important; }
[data-acordeon] {
flex: 1 1 auto !important;
height: auto !important;
min-height: 92px;
}
[data-acordeon]:first-of-type { min-height: 180px; }
}
/* ── 3. Los títulos, que quepan en un teléfono ─────────────────────────────── */
/* El prototipo da un tamaño fijo para escritorio y nada más. Cada uno pasa a
`clamp(mínimo, vw, el que traía)`: en pantalla grande se ve exactamente igual que
antes, y al encoger baja hasta donde cabe. El mínimo es el 42% del original, que
es lo que deja el titular del héroe en dos renglones a 360 px. */
[style*="font-size: 76px"] { font-size: clamp(32px, 5.3vw, 76px) !important; }
[style*="font-size: 62px"] { font-size: clamp(26px, 4.3vw, 62px) !important; }
[style*="font-size: 58px"] { font-size: clamp(25px, 4.0vw, 58px) !important; }
[style*="font-size: 56px"] { font-size: clamp(24px, 3.9vw, 56px) !important; }
[style*="font-size: 54px"] { font-size: clamp(23px, 3.8vw, 54px) !important; }
[style*="font-size: 50px"] { font-size: clamp(22px, 3.5vw, 50px) !important; }
[style*="font-size: 44px"] { font-size: clamp(20px, 3.1vw, 44px) !important; }
[style*="font-size: 40px"] { font-size: clamp(19px, 2.8vw, 40px) !important; }
[style*="font-size: 38px"] { font-size: clamp(18px, 2.6vw, 38px) !important; }
[style*="font-size: 36px"] { font-size: clamp(18px, 2.5vw, 36px) !important; }
[style*="font-size: 34px"] { font-size: clamp(18px, 2.4vw, 34px) !important; }
[style*="font-size: 32px"] { font-size: clamp(18px, 2.2vw, 32px) !important; }
/* ── 5. La letra de la marca tambien en el ──────────────────────────── */
/* El prototipo la pone en un div interior, asi que lo que cuelgue fuera de ese div
—un mensaje del navegador, un bloque que se anada manana— salia en Times New Roman.
Medido: devolvia «Times New Roman». */
body { font-family: "Airbnb Cereal", Inter, system-ui, -apple-system, sans-serif; }
/* ── 6. Que se vea el patron del fondo ─────────────────────────────────────── */
/* El prototipo pinta el color de fondo en un div interior (data-raiz), que es opaco
y tapa las luces: el patron de logos vive detras, pegado al body. Medido con
elementFromPoint: sobre el fondo de la pagina estaba ese div con
background rgb(22,34,48). El color se sube al body y el div se queda transparente;
el contenido sigue encima porque va despues en el documento. */
body { background: var(--bg); }
[data-raiz] { background: transparent !important; }
/* ── 7. Las rejillas de dos columnas se parten en el telefono ──────────────── */
/* El bloque «Lo que cuesta no tener bien tu RFC» son dos rejillas anidadas de dos
columnas: la de fuera parte texto y tarjetas, la de dentro parte las dos fichas
de comparacion. A 360 y 390 px eso deja cada ficha en unos 60 px de ancho y la
cifra «20%» en monoespaciada de 17 px se sale de la pantalla. Medido con
medir.mjs: desbordes de 367 a 398 en una ventana de 390.
Va aqui y con !important porque las dos rejillas vienen del prototipo escritas
en el atributo `style`, y a un estilo en linea no se le gana de otra forma. Se
apunta por el valor exacto que trae el atributo, que es estable: lo escribe el
generador, no una persona. */
@media (max-width: 860px) {
[style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"],
[style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* ── 8. Los tres enlaces del pie, a 44 px ──────────────────────────────────── */
/* «Entrar al portal», «Aviso de privacidad» y «Términos de uso» medían 30 px de
alto. El apartado 2 de arriba cubre el nav y los controles del contenido, pero el
pie no es un