/* ============================================================================
VATIONAUTA · sistema visual base — "sala de control"
Fuente de verdad de la identidad del Slot 3 (estaciones de energía portátiles).
Documentación de uso, voz y reglas → skill local `vationauta-visual-system`.
Compromiso deliberado: UN solo mundo visual (dark). Single-theme a propósito.
Anti-footprint: grafito neutro-verdoso SIN azul (≠ Tránsito Estelar),
sin tierra cálida (≠ Hierroybrasa). Escala de podio verde › naranja › rojo.
============================================================================ */
/* ---------- TOKENS ---------- */
:root {
color-scheme: light;
/* MODO CLARO (adoptado 2026-07-25, S12, elegido sobre 4 peldaños de fondo — se quedó el paso 1).
Gris FRÍO, nunca crema: el crema cálido es la identidad de Hierroybrasa y este sitio no la toca.
El fondo no es blanco puro a propósito: con blanco, las tarjetas (que sí son blancas) no se
despegan y la página queda lavada. */
/* fondos (gris frío neutro-verdoso; NO azul —eso es Tránsito Estelar—, NO crema) */
--pg:#E9EEF0; /* fondo base */
--ps:#FFFFFF; /* superficie / tarjeta */
--praised:#DEE5E8; /* elevado — va POR DEBAJO del fondo, si no se invierte la jerarquía */
--pink:#1A2327; /* texto */
--psub:#3D4A4F; /* texto secundario */
--psteel:#4C5A61; /* apagado / etiquetas — NO subirlo: a #6A787D los textos de 11-13 px
caían a 3,65 sobre el fondo (mínimo AA para texto normal: 4,5) */
--pline:#C2CCD0; /* borde */
--pline2:#D8E0E3; /* borde tenue / retícula */
/* ESCALA DEL PODIO (verde › naranja › rojo) — también acento de marca.
Al invertir el fondo hay que RECALCULARLA, no invertirla: el verde menta y el ámbar claros del
modo oscuro dan 3,1-3,2 sobre blanco. Y `-ink` cambia de sentido: en oscuro era la versión CLARA
del acento para leer sobre el tinte oscuro; aquí es la OSCURA para leer sobre el tinte claro. */
--pvolt:#12A566; --pvolt-ink:#0B6B41; --pvolt-tint:#E4F6EE; /* 1.º / mejor + firma */
--amber:#C97A10; --amber-ink:#8A5207; --amber-tint:#FBF0DE; /* 2.º / intermedio */
--red:#D23B32; --red-ink:#96251E; --red-tint:#FBE7E5; /* 3.º / línea roja */
/* placa de producto (packshots de fondo blanco de Amazon/tiendas).
NO se toca al cambiar de tema: su valor lo fija la imagen HORNEADA en postprocess.py, no la
paleta. Si se separan, el packshot canta como un rectángulo dentro de la placa. */
--plate:#F5F7F8; --plate-line:#DCE3E5;
/* FIRMA TRICOLOR — proporción del logo: 3/5 verde · 1/5 naranja · 1/5 rojo (rojo a la derecha).
Se usa en la barra del logo y como línea del borde INFERIOR de cada burbuja. */
--v-bar:linear-gradient(90deg, var(--pvolt) 0 57%, var(--amber) 63%, var(--amber) 77%, var(--red) 83%, var(--red) 100%);
/* tipografías — self-hosted (ver assets/fonts/README.md). Fallback de sistema robusto. */
--f-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
--f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
--f-mono:'JetBrains Mono','Cascadia Code','Consolas',ui-monospace,monospace;
/* Alto real de la cabecera pegajosa, MEDIDO en el navegador (66-67 px, estable de 390 a 1440).
Existe como token porque hay dos sitios que dependen de él: el salto de las anclas y el `thead`
pegajoso de las tablas comparativas. Si cambia el `padding-block` del header, cambia aquí. */
--h-header:67px;
--maxw:1120px;
/* Medida de lectura. Se subió de 68ch a 84ch: con 68ch el párrafo medía 721 px dentro de una
columna de 1040 y dejaba 320 px muertos a la derecha del H2, que sí ocupa el ancho entero.
84ch (~890 px) cierra casi todo ese hueco sin irse a renglones de 110 caracteres. */
--prose:84ch;
--radius:14px;
}
/* ---------- @FONT-FACE (binarios PENDIENTES — ver README; hoy cae al fallback) ---------- */
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-latin-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('../fonts/space-grotesk-latin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-latin-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter-latin-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-latin-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-latin-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing:border-box; }
/* El salto de las anclas tiene que dejar el título A LA VISTA, no debajo de la cabecera.
`.site-header` es `position:sticky; top:0`, así que sin esto el navegador lleva el destino al
borde de la ventana y la cabecera se come el titular — el enlace parece llevarte a mitad del
párrafo siguiente.
Va como `scroll-padding-top` en `html` y NO como `scroll-margin-top` en cada `id`: una sola
declaración cubre todas las anclas del sitio, incluidas las que se añadan después. Con la otra vía
habría que acordarse de marcar cada destino nuevo, y no se acuerda nadie.
El aire de 16 px es para que el título no quede lamiendo el borde de la cabecera. */
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--h-header) + 16px); }
body {
margin:0; background:var(--pg); color:var(--pink);
font-family:var(--f-body); font-size:1.05rem; line-height:1.7;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, picture, svg { max-width:100%; height:auto; display:block; }
a { color:var(--pvolt-ink); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { text-decoration-color:var(--pvolt); }
:focus-visible { outline:2.5px solid var(--pvolt); outline-offset:3px; border-radius:3px; }
strong, b { color:var(--pink); font-weight:600; }
hr { border:0; border-top:1px solid var(--pline); margin:2.4rem 0; }
/* ---------- LAYOUT ---------- */
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.container { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,34px); align-items:start; }
@media (max-width:820px){ .two{ grid-template-columns:1fr; } }
/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4 { font-family:var(--f-display); font-weight:700; line-height:1.08; letter-spacing:-.01em; text-wrap:balance; margin:0; }
/* Kicker de sección. NO va en mono a propósito (condición del `guardian-portfolio`, 2026-07-26):
Tránsito Estelar resuelve el suyo con DM Mono en versalitas y tracking .15em, y este llevaba
JetBrains Mono en versalitas con .14em — mismo tratamiento tipográfico con otro archivo de fuente,
que es footprint de FORMA aunque las caras no coincidan. El tema oscuro era lo más ruidoso que
separaba los dos sitios; al pasar a claro, la coincidencia quedaba a la vista.
Aquí pasa a la tipografía de cuerpo con tracking corto y un filete tricolor delante, que es firma
propia del sitio (la misma barra del logo). El mono se reserva para CIFRAS de tabla, que es donde
aporta y donde TE no tiene equivalente. */
.eyebrow { font-family:var(--f-body); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--pvolt-ink); font-weight:600; margin:0 0 14px; display:flex; align-items:center; gap:.55em; }
.eyebrow::before { content:""; flex:0 0 auto; width:22px; height:3px; border-radius:2px; background:var(--v-bar); }
.lede { font-size:clamp(1.08rem,2.2vw,1.28rem); color:var(--psub); max-width:60ch; }
/* Prosa del artículo */
/* UNA sola medida por página: el texto ocupa la columna entera, igual que los H2 y las tablas.
Antes convivían tres anchos en la misma página (890 px los bloques con cap inline, 993 px la caja
del atajo y 1040 px los H2 y el resto), y el salto se veía. La medida de lectura ya no se aplica
como tope duro; queda `--prose` declarada por si algún bloque suelto la necesita. */
.prose { max-width:none; }
.prose > * + * { margin-top:1.15em; }
.prose h2 { font-size:clamp(1.5rem,3.4vw,2rem); margin-top:2.4em; }
.prose h3 { font-size:clamp(1.18rem,2.4vw,1.4rem); margin-top:1.8em; color:var(--pink); }
.prose p, .prose li { color:var(--psub); }
.prose ul, .prose ol { padding-left:1.3em; display:grid; gap:.5em; }
.prose li::marker { color:var(--pvolt); }
.prose blockquote { border-left:3px solid var(--pvolt); margin:0; padding:.2em 0 .2em 1.1em; color:var(--pink); }
.prose code { font-family:var(--f-mono); font-size:.9em; background:var(--pline2); padding:.12em .4em; border-radius:5px; color:var(--pink); }
/* ---------- BREADCRUMB ---------- */
.crumbs { font-family:var(--f-mono); font-size:.78rem; color:var(--psteel); display:flex; flex-wrap:wrap; gap:.5em; align-items:center; }
.crumbs a { color:var(--psteel); text-decoration:none; }
.crumbs a:hover { color:var(--pink); }
.crumbs li + li::before { content:"›"; margin-right:.5em; color:var(--pline); }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.5em; margin:0; padding:0; }
.crumbs li { display:flex; align-items:center; }
.crumbs [aria-current="page"] { color:var(--pink); }
/* ---------- BYLINE (EEAT / autor real nombrado) ---------- */
.byline { display:flex; align-items:center; gap:12px; font-size:.9rem; color:var(--psteel); }
.byline img, .byline .av { width:38px; height:38px; border-radius:50%; background:var(--pline2); border:1px solid var(--pline); object-fit:cover; }
.byline b { color:var(--pink); }
.byline time { font-family:var(--f-mono); font-size:.82rem; }
/* ---------- BOTONES ---------- */
.btn { font-family:var(--f-body); font-weight:600; font-size:.95rem; border-radius:10px; padding:12px 20px;
border:1px solid var(--pvolt); background:var(--pvolt-ink); /* claro: .btn y .skip: tinta verde MUY oscura sobre el verde menta del oscuro. En claro el fondo del botón
pasa a --pvolt-ink y la tinta va en blanco (6,6:1); el blanco sobre el verde claro daba 3,18. */
color:#fff; text-decoration:none;
display:inline-flex; align-items:center; gap:9px; cursor:pointer; /* claro: el halo verde solo funciona sobre fondo oscuro: sobre claro es una mancha borrosa. Pasa a
sombra proyectada corta, en el mismo verde. */
box-shadow:0 2px 8px rgba(11,107,65,.22); }
.btn:hover { filter:brightness(1.10) /* claro: aclarar un botón CLARO casi no se nota; sobre el verde oscuro nuevo sí, subiendo un punto. */; }
.btn.ghost { background:transparent; color:var(--pink); border-color:var(--pline); box-shadow:none; }
.btn.ghost:hover { border-color:var(--pvolt); }
/* ---------- CHIPS ---------- */
.chip { font-family:var(--f-mono); font-size:.74rem; color:var(--psteel); border:1px solid var(--pline); background:var(--ps); border-radius:999px; padding:6px 12px; white-space:nowrap; }
.chip b { color:var(--pink); }
/* ---------- HERO ---------- */
.hero { border:1px solid var(--pline); border-radius:18px; background:var(--ps); overflow:hidden; position:relative; }
.hero__grid { position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;
background-image:linear-gradient(var(--pline2) 1px,transparent 1px),linear-gradient(90deg,var(--pline2) 1px,transparent 1px);
background-size:34px 34px; -webkit-mask-image:radial-gradient(120% 90% at 90% 10%,#000,transparent 70%); mask-image:radial-gradient(120% 90% at 90% 10%,#000,transparent 70%); }
.hero__body { position:relative; z-index:1; padding:clamp(24px,5vw,52px); }
.hero h1 { font-size:clamp(1.9rem,5vw,3rem); max-width:20ch; }
.hero h1 em { font-style:normal; color:var(--pvolt-ink); }
.hero .lede { margin-top:18px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
/* ---------- FIGURA DE IMAGEN EDITORIAL (hero / concepto) — banda sin JS ----------
La imagen del hero (generada con gpt-image-2) vive como banda independiente con el mismo
lenguaje de burbuja del sitio: borde grafito + radio + recorte. NO lleva la barra tricolor
(esa es de los bloques de contenido, no de una foto). Anti-CLS: width/height van en el . */
.fig { margin:0; }
/* El marco (borde + radio) va en el , no en el : así el pie de foto queda FUERA de
la burbuja, como una línea suelta debajo, en vez de comerse un trozo de la caja. */
.fig--hero { margin-top:clamp(14px,2.4vw,22px); }
.fig--concept { margin:clamp(20px,3.5vw,32px) 0; }
.fig--hero > picture, .fig--concept > picture { display:block; border:1px solid var(--pline);
border-radius:16px; overflow:hidden; background:var(--ps); }
.fig--concept > picture { border-radius:14px; }
.fig--hero img, .fig--concept img { width:100%; height:auto; display:block; }
/* Cabecera de una review de UN modelo: manda la foto real del producto, no la ilustración conceptual.
Antes la banda de arriba llevaba un aparato anónimo, así que el lector abría «Bluetti Elite 100 V2»
y lo primero que veía era otra máquina; la ilustración baja a media página, donde funciona como
textura editorial sin suplantar a nada. La foto va sobre la placa clara y ENTERA (contain), que es
como se sirven los packshots en el resto del sitio. */
.fig--producto > picture { background:var(--plate); aspect-ratio:16/9; }
.fig--producto img { width:100%; height:100%; object-fit:contain; padding:clamp(14px,3vw,30px); }
/* Pie de figura: discreto a propósito (11,5 px, gris apagado), pero LEGIBLE. No se baja más ni se
esconde: un texto dimensionado para que solo lo lea el buscador es «texto oculto» en las políticas
de spam de Google, y el riesgo no compensa. Dice lo único honesto que se puede decir de un hero
conceptual —que el equipo de la imagen no es el modelo del que habla la página—, así que además de
dar a Google el *caption* que sí usa, sostiene el encuadre de análisis declarado del sitio. */
/* Aviso de imagen generada con IA. Obligatorio a partir del 2-ago-2026 por el artículo 50 del
Reglamento (UE) 2024/1689 (AI Act), que exige declarar el contenido sintético realista. La norma
pide que se declare con CLARIDAD, no que se explique: por eso son tres palabras y no una frase. */
.fig figcaption { font-family:var(--f-mono); font-size:.7rem; line-height:1.5; color:var(--psteel);
padding:7px 2px 0; }
@media (max-width:560px){ .fig figcaption { font-size:.67rem; } }
/* ---------- BARRA DE COMPRA (punto de entrada intermedio) ----------
El bloque grande de «dónde comprar» vive al ~70 % de la página. Quien ya lo tiene claro antes no
debería tener que bajar hasta ahí: esta barra repite el enlace justo donde acaba de convencerse
—bajo la foto de producto en las reviews, al cerrar cada modelo en las comparativas—.
Va SIEMPRE por debajo de la divulgación de la cabecera, que es lo que exige el art. 20 LSSI. */
.buystrip { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:18px 0 0;
border:1px solid var(--pline); border-radius:12px; background:var(--ps);
padding:12px 14px; }
.buystrip__q { font-size:.92rem; color:var(--psub); }
.buystrip__q b { color:var(--pink); }
.buystrip .storebtn { margin-left:auto; }
@media (max-width:560px){ .buystrip .storebtn { margin-left:0; } }
/* ---------- WORDMARK / LOGO (firma = barra tricolor 3/5·1/5·1/5) ---------- */
.wordmark { display:inline-grid; gap:9px; }
.wordmark .wm { font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.02em; line-height:1; color:var(--pink); }
.wordmark .wm .v { color:var(--pvolt); }
.wordmark .bar { height:7px; border-radius:999px; background:var(--v-bar); box-shadow:none /* claro: el halo de la barra del logotipo desaparece sobre claro. Fuera: la firma tricolor ya se ve sola. */; }
/* ---------- DIVULGACIÓN DE AFILIACIÓN (visible antes del 1.er enlace) ---------- */
/* Divulgación de afiliación. Va SIEMPRE antes del primer enlace afiliado —eso lo exige el art. 20 de
la LSSI y el art. 26 de la LCD: el lector tiene que saber que el enlace es comercial ANTES de
decidir pulsarlo, así que el pie de página no basta—, pero el TAMAÑO no está prescrito: la norma
pide claro e inequívoco, no un panel. Aquí es una línea con filete de color y rótulo en versal:
sobria, y sigue siendo claramente identificable, que es la condición. No se encoge más. */
.disclosure { font-size:.74rem; line-height:1.55; color:var(--psub); margin:0;
border-left:2px solid var(--pvolt); padding:3px 0 3px 11px; }
.disclosure__lab { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em;
text-transform:uppercase; color:var(--pvolt-ink); font-weight:700; }
.disclosure__lab::after { content:" · "; color:var(--psteel); }
/* ---------- CAJA DE VEREDICTO / RESPUESTA RÁPIDA ---------- */
.verdict { border:1px solid var(--pline); border-left:3px solid var(--pvolt); background:var(--ps); border-radius:12px; padding:clamp(16px,2.5vw,22px); display:grid; gap:10px; }
.verdict__lab { font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pvolt-ink); font-weight:700; }
.verdict p { margin:0; color:var(--pink); }
/* ============================================================================
TABLA COMPARATIVA + PODIO (el patrón estrella del sitio)
Reglas de honestidad (obligatorias, ver skill):
- El podio solo colorea donde hay diferencia real. Empates → clase .eq (gris, sin marca).
- Criterios no comparables (métricas distintas) → sin color.
- El color marca la posición EN ESE criterio, nunca un juicio del producto.
- El precio va "en vivo" (API/feed), NUNCA cifra a mano.
============================================================================ */
.cmpwrap { overflow-x:auto; border:1px solid var(--pline); border-radius:16px; background:var(--ps); }
table.cmp { border-collapse:collapse; width:100%; min-width:640px; font-variant-numeric:tabular-nums; }
/* Ficha de UN solo producto: la tabla ocupa el ancho de la página como todo lo demás —acotarla la
dejaba más estrecha que el texto y descuadrada—. Lo que se ajusta es el INTERIOR: la columna del
criterio se lleva un tercio y la del valor el resto, así el dato no queda flotando en el centro
con medio ancho muerto detrás. */
table.cmp:has(thead th:nth-child(2):last-child) { table-layout:fixed; }
table.cmp:has(thead th:nth-child(2):last-child) th[scope="row"] { width:34%; }
table.cmp th, table.cmp td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--pline2); }
/* ⚠️ `top:0` es CORRECTO aquí y no se toca. Este `thead` NO se pega respecto a la ventana sino
respecto a `.cmpwrap`, que tiene `overflow:auto` y por tanto es su contenedor de scroll. En
S13 se cambió a `top:var(--h-header)` creyendo que quedaba tapado por la cabecera del sitio, y
lo que hizo fue empujarlo 67 px hacia abajo DENTRO del wrap: el encabezado se montaba encima de
la primera fila. Revertido tras verlo en pantalla. La cabecera del sitio no le afecta. */
table.cmp thead th { position:sticky; top:0; background:var(--ps); border-bottom:1px solid var(--pline); font-family:var(--f-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--psteel); font-weight:700; vertical-align:bottom; }
table.cmp thead th .brandcell { display:block; font-family:var(--f-display); font-size:1rem; letter-spacing:0; text-transform:none; color:var(--pink); font-weight:700; }
table.cmp thead th .mdl { display:block; font-weight:400; color:var(--psteel); text-transform:none; letter-spacing:0; }
table.cmp tbody th { font-weight:600; color:var(--pink); font-size:.92rem; }
table.cmp td { font-family:var(--f-mono); font-size:.9rem; color:var(--psub); }
table.cmp .valuecol { color:var(--psteel); }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom:0; }
/* Separador entre productos: el #2E383C de --pline2 era casi invisible sobre el grafito y las filas
se leían como un bloque continuo. Se sube al tono de --pline, que ya se usa para delimitar cajas. */
table.cmp tbody th, table.cmp tbody td { border-bottom-color:var(--pline); }
/* Ni un valor partido en dos renglones («hasta 1.000 / W», «~4.800 / W»): las celdas son cifras
cortas con su unidad y el rótulo de cabecera es una etiqueta, no prosa. */
table.cmp thead th, table.cmp tbody td { white-space:nowrap; }
table.cmp tbody th { white-space:normal; } /* el nombre del modelo SÍ puede envolver */
.dyn { white-space:nowrap; }
/* Última columna del comparador. Antes prometía un «precio en vivo» que este sitio no puede dar (cero
JS por regla dura, y la CSP propia lo bloquea): ahora lleva a la review, donde están todos los
enlaces de tienda y el lector compara por su cuenta. Sin elegir tienda por él. */
.tolink { display:inline-block; white-space:nowrap; font-family:var(--f-mono); font-size:.78rem;
color:var(--pvolt-ink); background:var(--pvolt-tint); border:1px solid var(--pline);
border-radius:6px; padding:5px 11px; text-decoration:none; }
.tolink:hover { border-color:var(--pvolt); color:var(--pink); }
.tolink::after { content:" \203A"; }
.nodata { font-family:var(--f-mono); color:var(--psteel); }
/* La tabla del comparador se sale del ancho de lectura en pantallas grandes: 8 columnas de cifras
necesitan aire y el resto de la página no tiene por qué ensancharse con ellas. */
@media (min-width:1300px){ .cmpwrap { margin-inline:-60px; } }
/* posiciones del podio (solo color, sin números — decisión de marca) */
.cmp .p1 { color:var(--pvolt-ink) !important; font-weight:700; background:var(--pvolt-tint); }
.cmp .p2 { color:var(--amber-ink) !important; }
.cmp .p3 { color:var(--red-ink) !important; }
.cmp .eq { color:var(--psteel); }
/* dato en vivo (precio) — punto neutro, NO rojo (el rojo es "3.º") */
.dyn { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:.78rem; color:var(--psub); background:var(--praised); border:1px solid var(--pline); padding:3px 9px; border-radius:6px; }
.dyn .live { width:7px; height:7px; margin:0; }
/* leyenda: SOLO los 3 colores, debajo de la tabla */
.cmpcap { font-size:.82rem; color:var(--psteel); margin-top:12px; display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.cmpcap span { display:inline-flex; align-items:center; gap:8px; }
.cmpcap .lg { width:16px; height:16px; border-radius:4px; display:inline-block; }
.cmpnote { font-size:.82rem; color:var(--psteel); margin-top:8px; }
.cmpnote b { color:var(--pink); }
/* punto "en vivo" reutilizable (neutro) */
.live { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--psteel); /* claro: el punto «en directo» brillaba en gris sobre oscuro; en claro un halo gris no se ve. Se cambia
por un anillo verde tenue, que sí lee. */
box-shadow:0 0 0 3px rgba(18,165,102,.18); vertical-align:middle; animation:v-pulse 2s ease-in-out infinite; }
@keyframes v-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
/* ============================================================================
PLACA DE PRODUCTO — los packshots de Amazon/tiendas vienen en BLANCO.
Viven siempre en esta caja clara para que el blanco se funda y todo quede
uniforme (den PNG transparente o JPG blanco). NUNCA una foto blanca suelta
sobre el grafito.
============================================================================ */
.plate { background:var(--plate); border:1px solid var(--plate-line); border-radius:12px; display:grid; place-items:center; padding:16px; position:relative; box-shadow:0 2px 10px rgba(26,35,39,.10) /* claro: sombra negra al 28 % sobre fondo claro ensucia. Baja al 10 % y en el gris del texto, no negro. */; }
.plate::after { content:""; position:absolute; inset:0; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.7),transparent 40%); pointer-events:none; }
.plate img { mix-blend-mode:normal; }
.plate.sm { padding:10px; }
/* ---------- FILA MULTI-TIENDA (badges) ---------- */
.stores { display:grid; gap:14px; }
.prow { border:1px solid var(--pline); border-radius:14px; background:var(--ps); padding:16px; display:grid; gap:14px; grid-template-columns:auto 1fr; align-items:start; }
@media (max-width:560px){ .prow{ grid-template-columns:1fr; } }
/* La placa llena el alto de la fila en vez de quedarse en un sello de 76 px: la fila mide ~184 px
y el packshot es la primera lectura de la fila. En móvil la fila pasa a una columna y se acota. */
.prow .plate.sm { width:132px; height:132px; }
@media (max-width:560px){ .prow .plate.sm { width:104px; height:104px; } }
.prow__main { display:grid; gap:12px; }
.prow__top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.prow__name { font-family:var(--f-display); font-weight:700; font-size:1.1rem; }
.prow__spec { font-family:var(--f-mono); font-size:.78rem; color:var(--psteel); }
.prow__badges { display:flex; flex-wrap:wrap; gap:8px; }
/* prioridad de botón: marca directa › tienda ES › Amazon */
.storebtn { text-decoration:none; border:1px solid var(--pline); border-radius:9px; padding:9px 13px; display:inline-flex; flex-direction:column; gap:1px; background:var(--pg); min-width:118px; }
.storebtn:hover { border-color:var(--pvolt); }
.storebtn .k { font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--psteel); }
.storebtn .v2 { font-weight:600; font-size:.9rem; color:var(--pink); display:flex; align-items:center; gap:7px; }
.storebtn .v2::before { content:"›"; color:var(--pvolt); font-weight:700; }
.storebtn.primary { background:var(--pvolt-tint); border-color:var(--pvolt); }
.metabadges { display:flex; flex-wrap:wrap; gap:8px; }
.mbadge { font-family:var(--f-mono); font-size:.74rem; padding:5px 10px; border-radius:7px; border:1px solid var(--pline); color:var(--psub); display:inline-flex; align-items:center; gap:6px; }
.mbadge .ic { width:8px; height:8px; border-radius:2px; background:var(--psteel); }
.mbadge.ship .ic { background:var(--pvolt); }
.mbadge.warr .ic { background:var(--psteel); }
/* ---------- CARD (comparativa / review) ---------- */
.rcard { border:1px solid var(--pline); border-radius:16px; overflow:hidden; background:var(--ps); }
.rcard__img { aspect-ratio:16/9; background:radial-gradient(90% 120% at 20% 0%,var(--pvolt-tint),transparent 60%),var(--pline2); display:grid; place-items:center; position:relative; padding:16px; }
/* Miniatura de la tarjeta. El panel nació como degradado a secas (S2, cuando no había ni una imagen);
desde S12 lleva la imagen de su destino: el PACKSHOT real en las tarjetas de un modelo concreto y el
hero conceptual en las de comparativa. Se aplica solo donde la rejilla queda COMPLETA: media rejilla
con foto y media sin ella se ve peor que ninguna. */
.rcard__img { padding:0; } /* la imagen llena el panel */
/* La imagen va en posición absoluta para que NO imponga su proporción al panel: con `height:100%`
sobre una caja de altura indefinida, los atributos width/height de la imagen ganaban y el panel
se volvía cuadrado en vez de mantener su 16/9. */
.rcard__img > picture { position:absolute; inset:0; display:block; }
.rcard__img img { width:100%; height:100%; display:block; }
.rcard__img--foto img { object-fit:cover; } /* hero: recorta, es panorámico */
.rcard__img--placa { background:var(--plate); } /* packshot: fondo de placa clara… */
.rcard__img--placa img { object-fit:contain; padding:10px; } /* …y entero, sin recortar el producto */
.rcard:not(:has(.rcard__img img)) .rcard__img { padding:16px; } /* las que siguen sin imagen, como antes */
.rcard__kick { position:absolute; top:12px; left:12px; z-index:2; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; background:var(--ps); color:var(--pvolt-ink); border:1px solid var(--pline); padding:4px 9px; border-radius:6px; }
/* Etiqueta de una tarjeta SIN miniatura. Donde no hay imagen para todos los destinos de la rejilla
—/aprender, la home— se retira el panel entero en vez de dejarlo con el degradado a secas: un hueco
de foto vacío se lee como foto que falta, y más ahora que las demás rejillas sí la llevan. */
.rcard__kick--solo { position:static; display:inline-block; justify-self:start; margin-bottom:2px; }
.rcard__body { padding:18px; display:grid; gap:9px; }
.rcard__body h3 { font-size:1.15rem; }
.rcard__body p { margin:0; font-size:.9rem; color:var(--psub); }
/* ---------- REJILLA DE MODELOS (.modelgrid) — los 13 análisis en la home ----------
Decisión de Sergi (2026-07-26): filas de tres, y la que se queda sola en la última fila va al
CENTRO, no pegada a la izquierda. Formato horizontal (placa pequeña + nombre + specs) a propósito:
con el packshot cuadrado que llevan las tarjetas de los hubs, trece fichas costarían ~1.800 px;
así caben en cinco filas bajas.
Antes esto era una tira deslizante; se retiró porque escondía nueve de las trece tras un gesto. */
.modelgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,18px); }
/* La huérfana, centrada. `3n+1` cubre 13, 10, 7… — cualquier resto de 1 sobre filas de tres. */
.modelgrid > :last-child:nth-child(3n+1) { grid-column:2; }
@media (max-width:880px){
.modelgrid { grid-template-columns:repeat(2,1fr); }
/* En dos columnas manda otro resto: la que sobra ocupa el ancho y se centra a media caja. */
.modelgrid > :last-child:nth-child(3n+1) { grid-column:auto; }
.modelgrid > :last-child:nth-child(2n+1) { grid-column:1 / -1; justify-self:center; width:calc(50% - 9px); }
}
@media (max-width:560px){
.modelgrid { grid-template-columns:1fr; }
.modelgrid > :last-child:nth-child(2n+1) { grid-column:auto; width:auto; }
}
.modelcard { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
text-decoration:none; color:inherit; padding:11px 13px 11px 11px;
border:1px solid var(--pline); border-radius:12px; transition:box-shadow .16s ease; }
.modelcard:hover { box-shadow:0 6px 18px rgba(26,35,39,.13); }
.modelcard:hover .modelcard__name { color:var(--pvolt-ink); }
/* Misma placa clara que los packshots del resto del sitio (§5 de la skill), en pequeño. */
.modelcard__plate { display:grid; place-items:center; width:74px; aspect-ratio:1; flex:0 0 auto;
background:var(--plate); border:1px solid var(--plate-line); border-radius:9px; overflow:hidden; }
.modelcard__plate img { width:100%; height:100%; object-fit:contain; padding:6px; display:block; }
.modelcard__body { display:grid; gap:3px; min-width:0; }
.modelcard__name { font-family:var(--f-display); font-weight:700; font-size:.95rem; line-height:1.25; color:var(--pink); }
.modelcard__spec { font-family:var(--f-mono); font-size:.7rem; line-height:1.45; color:var(--psteel); }
/* Entrada al hacer scroll. CSS puro (`animation-timeline: view()`), sin una línea de JS: es
mejora progresiva estricta como manda la regla 8 del sitio — donde no se soporta, las fichas
simplemente están ahí. Y se apaga entera con `prefers-reduced-motion`. */
@keyframes mgEntra { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.modelgrid > * { animation:mgEntra linear both; animation-timeline:view(); animation-range:entry 0% entry 75%; }
}
}
/* Panel de imagen en BANDA (.rcard__img--banda) — más ancho que alto de lo normal.
Las cuatro fotos de uso son 800×528 y el panel estándar es 16/9, así que el recorte es idéntico
en las cuatro; lo que cambia es el encuadre de origen: `camping` y `respaldo-largo` son primeros
planos del frontal y a 540 px de ancho el aparato salía descomunal. En banda, ese detalle se lee
como textura y los planos generales siguen funcionando. */
.rcard__img--banda { aspect-ratio:2.35/1; }
/* ---------- CABECERA DE MODELO CON SU FOTO (.modelhead) ----------
Petición de Sergi (2026-07-27). En las comparativas, cada sección «X en detalle» abría con el
título a pelo: al saltar de una sección a otra no había forma de ver DE QUÉ aparato se habla sin
volver a la tabla. La miniatura al lado del titular lo resuelve sin robar espacio a la prosa.
La foto es DECORATIVA (`alt=""`) a propósito: el nombre del modelo ya está en el
justo al
lado, así que repetirlo en el alt solo hace que un lector de pantalla lo oiga dos veces.
El selector lleva `.prose` delante para ganarle a `.prose > * + *`, que si no le mete su propio
margen al envoltorio y descuadra el aire entre secciones. */
.prose .modelhead { display:flex; align-items:center; justify-content:space-between;
gap:14px 22px; flex-wrap:wrap; margin-top:2.4em; }
.prose .modelhead h2 { margin-top:0; flex:1 1 260px; }
/* Misma placa clara que el resto de packshots del sitio (§5 de la skill), en miniatura. */
.modelhead__shot { flex:0 0 auto; display:grid; place-items:center; width:96px; aspect-ratio:1;
background:var(--plate); border:1px solid var(--plate-line); border-radius:10px; overflow:hidden; }
.modelhead__shot img { width:100%; height:100%; object-fit:contain; padding:7px; display:block; }
@media (max-width:520px){ .modelhead__shot { width:74px; } }
/* ---------- FAQ (details/summary nativo; texto = idéntico al FAQPage schema) ---------- */
.faq { display:grid; gap:10px; }
.faq details { border:1px solid var(--pline); border-radius:12px; background:var(--ps); padding:0 16px; }
.faq summary { cursor:pointer; padding:15px 0; font-family:var(--f-display); font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--f-mono); color:var(--pvolt); font-size:1.2rem; }
.faq details[open] summary::after { content:"−"; }
.faq details[open] summary { border-bottom:1px solid var(--pline2); }
.faq details p { color:var(--psub); padding:0 0 16px; margin:12px 0 0; }
/* ---------- FOOTER ---------- */
.site-foot { border-top:1px solid var(--pline); margin-top:clamp(48px,8vw,90px); padding:34px 0; color:var(--psteel); font-size:.86rem; }
.site-foot a { color:var(--psteel); }
.site-foot .wrap { display:grid; gap:16px; }
.foot-top { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between; }
.foot-links { display:flex; flex-wrap:wrap; gap:7px 18px; list-style:none; margin:0; padding:0; font-family:var(--f-mono); font-size:.8rem; }
.foot-links a { text-decoration:none; }
.foot-links a:hover { color:var(--pink); }
/* Sin cap de ancho: era el mismo resto de `max-width` que se quitó en el cuerpo, y dejaba el párrafo
del pie a media columna con el hueco muerto a la derecha. Una sola medida en toda la página. */
.foot-fine { font-size:.8rem; color:var(--psteel); }
.foot-fine b { color:var(--psub); }
/* ---------- FIRMA DEL MARCO: línea tricolor SOLO en el borde inferior ----------
Verde › naranja › rojo (rojo a la derecha), IGUAL en todas las burbujas.
Doble fondo (padding-box + border-box) → respeta el border-radius; el borde inferior
transparente deja ver el degradado, los otros 3 lados quedan neutros (1px). */
.hero, .cmpwrap, .prow, .rcard, .modelcard, .faq details {
border-bottom-color:transparent; border-bottom-width:3px;
background:linear-gradient(var(--ps),var(--ps)) padding-box, var(--v-bar) border-box;
}
/* ---------- SKIP LINK (accesibilidad, sin JS) ---------- */
.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--pvolt-ink); /* claro: .btn y .skip: tinta verde MUY oscura sobre el verde menta del oscuro. En claro el fondo del botón
pasa a --pvolt-ink y la tinta va en blanco (6,6:1); el blanco sobre el verde claro daba 3,18. */
color:#fff; font-weight:600; padding:10px 16px; border-radius:0 0 8px 0; text-decoration:none; }
.skip:focus { left:0; }
/* ---------- CABECERA + NAV DEL SITIO (sin JS; = menú móvil) ----------
Completa el sistema: usa tokens y firma tricolor existentes, no reabre la identidad. */
.site-header { position:sticky; top:0; z-index:40; background:var(--pg); border-bottom:1px solid var(--pline2); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:13px; }
.brand { display:inline-grid; gap:5px; text-decoration:none; }
.brand .wm { font-family:var(--f-display); font-weight:800; font-size:1.14rem; letter-spacing:.02em; line-height:1; color:var(--pink); }
.brand .wm .v { color:var(--pvolt); }
.brand .bar { height:4px; border-radius:999px; background:var(--v-bar); }
.nav > summary { list-style:none; cursor:pointer; font-family:var(--f-mono); font-size:.8rem; color:var(--pink); border:1px solid var(--pline); border-radius:8px; padding:8px 13px; user-select:none; }
.nav > summary::-webkit-details-marker { display:none; }
.nav > summary::before { content:"\2261 "; color:var(--pvolt); }
.nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.nav a { display:block; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.02em; color:var(--psub); text-decoration:none; padding:9px 11px; border-radius:7px; }
.nav a:hover { color:var(--pink); background:var(--ps); }
.nav a[aria-current="page"] { color:var(--pvolt-ink); background:var(--ps); }
@media (max-width:719px){
.nav[open] > ul { position:absolute; left:0; right:0; top:100%; background:var(--pg); border-bottom:1px solid var(--pline); padding:10px clamp(18px,4vw,40px) 16px; }
}
@media (min-width:720px){
.nav > summary { display:none; }
/* Los cerrados colapsan su contenido en ::details-content con content-visibility:hidden
(Chrome 131+ y equivalentes). Desde ese cambio el display:flex del
NO basta: el contenido
computaba visible pero medía 0x0 y el menú desaparecía en escritorio. Hay que abrir el pseudo.
Verificado en vivo sobre Chrome 150; el display:flex se mantiene como respaldo para motores
anteriores, que sí colapsaban con display:none en los hijos. */
.nav::details-content { content-visibility:visible; block-size:auto; overflow:visible; }
.nav > ul { display:flex !important; flex-direction:row; gap:4px; flex-wrap:wrap; align-items:center; }
}
/* ---------- ÍNDICE DE SECCIÓN (hubs) — layout reutilizable, NO reabre la identidad ----------
Rejilla de tarjetas para /frente-a-frente, /aprender, /marcas. Usa el componente .rcard
existente; aquí solo se añade la rejilla, la variante enlazable y el estado "próximamente". */
.cardgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:clamp(16px,2.5vw,22px); }
a.rcard { text-decoration:none; color:inherit; display:block; transition:box-shadow .16s ease; }
a.rcard:hover { box-shadow:0 6px 18px rgba(26,35,39,.13) /* claro: misma razón en el hover de las tarjetas. */; } /* no toca border-color → respeta la firma tricolor */
a.rcard:hover .rcard__body h3 { color:var(--pvolt-ink); }
/* Centra la tarjeta que se queda SOLA en la última fila, en vez de dejarla pegada a la izquierda.
⚠️ Fija las columnas por breakpoint a propósito, renunciando al `auto-fill` de `.cardgrid`: con
`auto-fill` el número de columnas lo decide el ancho disponible, y entonces `nth-child` no tiene
forma de saber cuándo una tarjeta queda huérfana. Los cortes salen de medir dónde cambiaba de
columnas la rejilla original (3 por encima de ~1024 px, 2 hasta ~700, 1 por debajo), así que el
reparto no cambia — solo la última.
`3n+1` cubre 13, 10, 7…: cualquier resto de 1 sobre filas de tres. En dos columnas manda otro
resto, de ahí el selector distinto dentro de la media query. */
.cardgrid.cardgrid--centra-sola { grid-template-columns:repeat(3,1fr); }
.cardgrid--centra-sola > :last-child:nth-child(3n+1) { grid-column:2; }
@media (max-width:1023px){
.cardgrid.cardgrid--centra-sola { grid-template-columns:repeat(2,1fr); }
.cardgrid--centra-sola > :last-child:nth-child(3n+1) { grid-column:auto; }
/* El ancho repite el mismo clamp que el `gap` para que la huérfana mida exactamente una columna. */
.cardgrid--centra-sola > :last-child:nth-child(2n+1) {
grid-column:1 / -1; justify-self:center; width:calc((100% - clamp(16px,2.5vw,22px)) / 2); }
}
@media (max-width:699px){
.cardgrid.cardgrid--centra-sola { grid-template-columns:1fr; }
.cardgrid--centra-sola > :last-child:nth-child(2n+1) { grid-column:auto; width:auto; }
}
.rcard.soon { opacity:.6; }
.rcard__kick.soon { color:var(--psteel); background:var(--pg); }
.hubnote { color:var(--psteel); font-size:.9rem; }
/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce){ .live{ animation:none; } }
/* ---------- BLOQUE DE MODELO (.modelblock) — descripcion + compra en un encuadre ----------
Validado por Sergi el 2026-07-26 sobre el comparador y propagado a los listicles y a las
paginas de uso que describen modelo por modelo. Imagen a la izquierda, texto a la derecha,
botones de afiliacion abajo ocupando el ancho.
⚠️ Las etiquetas de garantia (.mbadge) son PROVISIONALES: cuando haya botones de mas
programas, la fila de abajo se queda solo con botones (decision de Sergi, 2026-07-26). */
/* (interno) — imagen a la izquierda, descripcion a la derecha, compra debajo.
Encargo de Sergi: "informacion y facilidad de compra". Antes la prosa vivia en una seccion y
el boton veinte pantallas mas abajo; ahora quien lee el porque de un modelo tiene delante
como comprarlo, sin scroll de por medio.
PROTOTIPO: este CSS vive inline a proposito. Al propagarlo a las 23 paginas sube a
vationauta.css y ENTONCES toca bumpear el token ?v= en sus 47 referencias. */
.modelblock { display:grid; grid-template-columns:minmax(112px,168px) 1fr;
gap:clamp(14px,2.4vw,26px); align-items:start;
border:1px solid var(--pline); border-bottom-color:transparent; border-bottom-width:3px;
border-radius:14px; padding:clamp(16px,2.6vw,24px);
margin-top:clamp(18px,3vw,26px);
background:linear-gradient(var(--ps),var(--ps)) padding-box, var(--v-bar) border-box; }
.modelblock .plate.sm { width:100%; aspect-ratio:1; }
.mb__body > h3 { margin-top:0; }
.mb__body > p { margin-bottom:0; }
.mb__spec { font-family:var(--f-mono); font-size:.78rem; color:var(--psteel); margin-top:10px; }
/* La compra ocupa el ancho entero, debajo de las dos columnas, separada por un filete. */
.mb__buy { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
margin-top:clamp(12px,2vw,16px); padding-top:clamp(12px,2vw,16px);
border-top:1px solid var(--pline2); }
@media (max-width:560px){ .modelblock { grid-template-columns:1fr; }
.modelblock .plate.sm { max-width:180px; } }
/* ============================================================================
AVISO DE SALIDA (.salida) — la última pantalla antes de irse
============================================================================
Qué es: cuando el lector hace amago de cerrar la pestaña, se le recuerda el
modelo (o los dos modelos) que esa página señala, con su enlace de tienda.
Cuatro cosas que NO son negociables aquí:
1. El marcado lo CREA `assets/salida.js`; en el HTML servido no hay ni un nodo
de esto. Así no queda contenido oculto indexable ni un enlace afiliado
duplicado en cada página, y si el script no carga no hay resto ninguno.
2. `