/* =============================================================
   Colibrí Volt · estilos
   Paleta "Bosque eléctrico" con la regla 60/30/10:
   60 niebla (fondo) · 30 bosque (bandas, menú, pie, títulos) · 10 voltaje (acción, mejor precio)
   Los botones de compra usan el color de cada tienda: es la excepción
   categórica de la regla y vive solo en el bloque "Dónde comprar".
   ============================================================= */

/* 1. Tokens ---------------------------------------------------- */
:root {
  --niebla: #F3F5EE;
  --bosque: #0F2D26;
  --voltaje: #C8F135;
  --musgo: #4D6157;
  --salvia: #A7C0B4;
  --hoja: #3A6A0C;

  --fondo: var(--niebla);
  --superficie: #FFFFFF;
  --superficie-2: #E9EEE3;
  --texto: var(--bosque);
  --texto-suave: var(--musgo);
  --linea: #DCE3D6;
  --acento: var(--voltaje);
  --acento-texto: var(--hoja);
  --tinta-acento: var(--bosque);
  --banda: var(--bosque);
  --banda-texto: var(--niebla);
  --banda-suave: var(--salvia);
  --foco: var(--bosque);
  --mejor: color-mix(in srgb, var(--voltaje) 38%, #FFFFFF);
  --relleno-barra: var(--bosque);

  --serie-1: #0F2D26;
  --serie-2: #5E8E0A;
  --serie-3: #2A7FA8;
  --serie-4: #9B4DCA;

  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radio: 16px;
  --radio-chico: 10px;
  --ancho: min(1200px, 100% - 2.5rem);
  --nav-alto: 64px;
  --sombra: 0 1px 2px rgb(15 45 38 / .06), 0 10px 30px rgb(15 45 38 / .08);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0B1A16;
    --superficie: #132520;
    --superficie-2: #183029;
    --texto: #E6EFE9;
    --texto-suave: #97ADA2;
    --linea: #24403A;
    --acento: #BFE35A;
    --acento-texto: #BFE35A;
    --tinta-acento: #0B1A16;
    --banda: #071310;
    --foco: #BFE35A;
    --mejor: color-mix(in srgb, #BFE35A 20%, #132520);
    --relleno-barra: #BFE35A;
    --serie-1: #BFE35A;
    --serie-2: #7FD3B8;
    --serie-3: #8EC5FF;
    --serie-4: #D5A6FF;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}

/* 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* hidden siempre gana: varios componentes ponen display (flex, grid) y el navegador dejaba ver lo oculto.
   Así fallaba el filtro del catálogo: contaba bien, pero las tarjetas de otras marcas seguían visibles. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--voltaje); color: var(--bosque); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
code { font-family: var(--mono); font-size: .9em; }

/* 3. Utilidades -------------------------------------------------- */
.contenedor { width: var(--ancho); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salto {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--voltaje); color: var(--bosque); padding: .6rem 1rem;
  border-radius: 8px; font-weight: 600; text-decoration: none;
}
.salto:focus { top: 1rem; }
.solo-js { display: none !important; }
.js .solo-js { display: revert !important; }
/* hidden siempre gana, también en lo que solo existe con JS (el formulario del recomendador). */
.js .solo-js[hidden] { display: none !important; }
.js .filtros.solo-js { display: flex !important; }
.js .comparador__elegir.solo-js { display: grid !important; }
.texto-suave { color: var(--texto-suave); font-size: .95rem; }
.kicker {
  font: 500 .8rem/1.2 var(--mono);
  letter-spacing: .08em;
  color: var(--acento-texto);
  margin: 0 0 1rem;
}
.entradilla { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--texto-suave); max-width: 62ch; }
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; color: var(--texto);
  border-bottom: 2px solid var(--acento); padding-bottom: 2px;
}
.enlace-flecha svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s var(--ease); }
.enlace-flecha:hover svg { transform: translateX(4px); }
mark.pendiente { background: #FFE7A3; color: #4A3500; padding: 0 .3em; border-radius: 4px; }

.vista-previa {
  background: color-mix(in srgb, var(--voltaje) 45%, var(--fondo));
  color: var(--texto);
  font-size: .85rem;
  text-align: center;
  padding: .45rem 1rem;
}
@media (prefers-color-scheme: dark) { .vista-previa { color: #0B1A16; background: #BFE35A; } }

/* 4. Botones ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; text-decoration: none; line-height: 1.1;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn--primario { background: var(--acento); color: var(--tinta-acento); }
.btn--primario:hover { box-shadow: 0 6px 20px rgb(200 241 53 / .35); transform: translateY(-1px); }
.btn--secundario { background: transparent; color: var(--texto); border-color: var(--texto); }
.btn--secundario:hover { background: var(--texto); color: var(--fondo); }
.btn--fantasma { background: transparent; color: var(--banda-texto); border-color: rgb(243 245 238 / .55); }
.btn--fantasma:hover { border-color: var(--voltaje); color: var(--voltaje); }
.bloque-chico .btn--fantasma, .cabeza-pagina .btn--fantasma, .comparador .btn--fantasma { color: var(--texto); border-color: var(--linea); }
.btn--chico { min-height: 40px; padding: .5rem 1rem; font-size: .92rem; }
.btn--grande { min-height: 56px; padding: 1rem 2rem; font-size: 1.1rem; }

/* Botón de tienda: colores de la marca de cada tienda vía --tc/--tt/--tb */
.btn-tienda {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 46px; padding: .6rem 1.1rem;
  background: var(--tc); color: var(--tt);
  border: 1.5px solid var(--tb);
  border-radius: 12px;
  font-weight: 650; font-size: .95rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), filter .2s, box-shadow .2s;
}
.btn-tienda svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.btn-tienda:hover { transform: translateY(-1px); filter: brightness(.96); box-shadow: 0 6px 16px rgb(0 0 0 / .14); }
.btn-tienda:focus-visible { outline-color: var(--foco); }
.btn-tienda--chico { min-height: 42px; font-size: .9rem; padding: .5rem .9rem; }
.punto-tienda { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); border: 1.5px solid var(--tb); flex: none; }

.btn-comparar {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .4rem .9rem;
  background: transparent; color: var(--texto);
  border: 1.5px solid var(--linea); border-radius: 999px;
  font-weight: 600; font-size: .9rem;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-comparar:hover { border-color: var(--texto); }
.btn-comparar__mas { font-family: var(--mono); font-size: 1.05rem; line-height: 1; }
.btn-comparar[aria-pressed="true"] { background: var(--bosque); color: var(--voltaje); border-color: var(--bosque); }
@media (prefers-color-scheme: dark) { .btn-comparar[aria-pressed="true"] { background: var(--voltaje); color: #0B1A16; border-color: var(--voltaje); } }
.btn-comparar--grande { min-height: 48px; width: 100%; justify-content: center; margin-top: 1rem; }

/* 5. Insignias y notas --------------------------------------------- */
.insignia {
  display: inline-block; font: 650 .74rem/1 var(--sans);
  padding: .32rem .55rem; border-radius: 999px; vertical-align: middle;
}
.insignia--voltaje { background: var(--voltaje); color: #0F2D26; }
.insignia--ejemplo { border: 1px dashed currentColor; color: var(--texto-suave); font-weight: 600; }
/* Avisos informativos de la oferta: contorno, para no competir con "Mejor precio". */
.insignia--importacion, .insignia--reacondicionado, .insignia--vendedor { border: 1px solid currentColor; color: var(--texto-suave); font-weight: 600; background: transparent; }
.aviso-datos { background: var(--superficie-2); border-radius: var(--radio-chico); padding: .8rem 1rem; font-size: .92rem; max-width: 68ch; }
.nota-general {
  display: inline-flex; align-items: baseline; gap: 1px;
  background: var(--bosque); color: var(--voltaje);
  font: 600 1rem/1 var(--mono);
  padding: .45rem .55rem; border-radius: 10px; margin: 0;
}
.nota-general small { font-size: .7rem; color: var(--salvia); }
@media (prefers-color-scheme: dark) { .nota-general { background: #0B1A16; border: 1px solid var(--linea); } }
.nota-general--grande { font-size: 1.4rem; padding: .6rem .7rem; }
.nota-grande { font: 600 clamp(3rem, 6vw, 4.5rem)/1 var(--display); margin: .2rem 0 .6rem; }
.nota-grande small { font-size: .35em; color: var(--texto-suave); font-weight: 500; }

/* 6. Cabecera ---------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--bosque);
  color: var(--niebla);
  --foco: var(--voltaje);
  border-bottom: 1px solid rgb(255 255 255 / .06);
}
@media (prefers-color-scheme: dark) { .cabecera { background: #071310; } }
.cabecera__barra { display: flex; align-items: center; gap: 1rem; height: var(--nav-alto); }
.marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; margin-right: auto; }
.marca__nombre { font: 700 1.2rem/1 var(--display); letter-spacing: -0.02em; }
.logo { width: 34px; height: 34px; flex: none; }
.logo__ave { fill: currentColor; }
.logo__rayo { fill: var(--voltaje); stroke: var(--bosque); stroke-width: .8; stroke-linejoin: round; }
.nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: .5rem .8rem; border-radius: 999px;
  color: #D3DED7; text-decoration: none; font-weight: 500; font-size: .98rem;
}
.nav a:hover { color: #FFFFFF; background: rgb(255 255 255 / .06); }
.nav a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--voltaje); border-radius: 0; }
.cabecera .nav-comparar,
.cabecera .nav-comparar:hover {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .4rem .95rem;
  border: 1.5px solid var(--voltaje); border-radius: 999px;
  color: var(--voltaje); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.cabecera .nav-comparar:hover { background: rgb(200 241 53 / .1); }
.nav-comparar svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.cabecera .contador {
  background: var(--voltaje); color: var(--bosque);
  font: 600 .75rem/1 var(--mono); padding: .2rem .4rem; border-radius: 999px; min-width: 1.4em; text-align: center;
}
.menu-movil { display: none; position: relative; }
.menu-movil summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; color: var(--niebla);
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-movil__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  background: var(--bosque); border: 1px solid rgb(255 255 255 / .1);
  border-radius: 16px; padding: .5rem; min-width: 220px; box-shadow: var(--sombra);
}
.menu-movil__panel ul { list-style: none; margin: 0; padding: 0; }
.menu-movil__panel a { display: block; padding: .8rem 1rem; color: var(--niebla); text-decoration: none; border-radius: 10px; }
.menu-movil__panel a:hover, .menu-movil__panel a[aria-current="page"] { background: rgb(255 255 255 / .07); color: var(--voltaje); }
/* Con "Encontrar mi patín" el menú completo necesita unos 1,070 px: debajo, el menú de celular. */
.nav a, .marca__nombre { white-space: nowrap; }
@media (max-width: 1079.98px) {
  .nav { display: none; }
  .menu-movil { display: block; }
}
@media (max-width: 959px) {
  .nav-comparar span:not(.contador) { display: none; }
  .cabecera .nav-comparar { padding: .4rem .7rem; }
}

/* Migas */
.migas { padding: 1.1rem 0 0; font-size: .88rem; color: var(--texto-suave); }
.migas ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; margin-right: .3rem; opacity: .6; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* 7. Tarjetas de producto ----------------------------------------- */
.rejilla-p { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tarjeta-p {
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tarjeta-p:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--texto) 25%, var(--linea)); }
.tarjeta-p__imagen { display: block; background: var(--superficie-2); }
.tarjeta-p__imagen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tarjeta-p__cuerpo { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.tarjeta-p__cat { margin: 0; font: 500 .8rem/1.3 var(--mono); color: var(--texto-suave); letter-spacing: .03em; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tarjeta-p__titulo { margin: 0; font-size: 1.18rem; }
.tarjeta-p__titulo a { text-decoration: none; }
.tarjeta-p__titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta-p { position: relative; }
.tarjeta-p .btn-comparar, .tarjeta-p .tarjeta-p__precio { position: relative; z-index: 1; }
.tarjeta-p__datos { display: flex; gap: .9rem; list-style: none; margin: 0; padding: 0; color: var(--texto-suave); font-size: .9rem; }
.tarjeta-p__datos strong { font: 600 1rem var(--mono); color: var(--texto); }
.tarjeta-p__pie { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .4rem; }
.tarjeta-p__precio { margin: 0; font-size: .92rem; color: var(--texto-suave); line-height: 1.3; }
.tarjeta-p__precio strong { display: block; font: 650 1.3rem/1.2 var(--display); color: var(--texto); }
.tarjeta-p .btn-comparar { align-self: flex-start; }

/* 8. Secciones generales ------------------------------------------- */
.bloque { padding-block: clamp(4rem, 10vh, 7rem); }
.bloque-chico { padding-block: 1.5rem 4.5rem; }
.cabeza-pagina { padding-block: 2rem 1rem; }
.cabeza-pagina h1 { max-width: 20ch; }
.seccion-cabeza { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.seccion-cabeza h2 { margin: 0; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Confianza */
.texto-grande {
  font: 600 clamp(1.8rem, 4.2vw, 3.3rem)/1.12 var(--display);
  letter-spacing: -0.02em; max-width: 22ch; margin: 0 0 2.5rem;
}
.pilares { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
@media (min-width: 720px) { .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pilar { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; }
.pilar h3 { margin: .9rem 0 .4rem; }
.pilar p { margin: 0; color: var(--texto-suave); }
.pilar__icono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--bosque); color: var(--voltaje);
}
.pilar__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Galería de categorías (horizontal) */
.escena-horizontal { background: var(--banda); color: var(--banda-texto); padding: clamp(4rem, 10vh, 6rem) 0; }
.escena-horizontal__titulo { margin-bottom: 2rem; }
.pista {
  display: flex; gap: 1.25rem; padding: 0 1.25rem 1rem;
  overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pista::-webkit-scrollbar { display: none; }
.panel {
  position: relative; flex: 0 0 min(78vw, 420px); scroll-snap-align: start; scroll-margin-inline: 1.25rem;
  border-radius: var(--radio); overflow: hidden; text-decoration: none; color: #FFFFFF;
  isolation: isolate;
}
.panel img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .8s var(--ease); }
.panel:hover img { transform: scale(1.04); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(7 19 16 / .88), rgb(7 19 16 / .15) 55%, transparent); z-index: 0; }
.panel__texto { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.4rem; display: grid; gap: .3rem; }
.panel__num { font: 500 .8rem var(--mono); color: var(--voltaje); }
.panel__titulo { font: 650 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--display); letter-spacing: -0.02em; }
.panel__n { font-size: .9rem; color: #D3DED7; }
/* "Ver todos": con foto como los demás, más el borde y la flecha de acción. */
.panel--todos { border: 1px solid rgb(200 241 53 / .35); }
.panel--todos .panel__titulo { max-width: 12ch; }
.panel--todos svg { width: 2.4rem; height: 2.4rem; margin-top: .4rem; fill: none; stroke: var(--voltaje); stroke-width: 1.6; transition: transform .4s var(--ease); }
.panel--todos:hover svg { transform: translateX(8px); }

/* Máscara */
.escena-mascara { background: var(--banda); }
.mascara__velo { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgb(7 19 16 / .55), rgb(7 19 16 / .2) 70%); z-index: 1; pointer-events: none; }
.escena-mascara .escena__titulo { color: #FFFFFF; font-size: clamp(2rem, 5vw, 4rem); max-width: 18ch; }

/* Guías */
.rejilla-guias { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tarjeta-guia {
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.6rem; text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tarjeta-guia:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tarjeta-guia h2, .tarjeta-guia h3 { margin: 0; font-size: 1.35rem; }
.tarjeta-guia p { margin: 0; color: var(--texto-suave); }
.tarjeta-guia .enlace-flecha { margin-top: auto; align-self: flex-start; }
.tarjeta-guia__kicker { font: 500 .78rem var(--mono); color: var(--acento-texto); letter-spacing: .06em; }

/* Llamado final */
.cta-final { background: var(--banda); color: var(--banda-texto); text-align: center; }
.cta-final .contenedor { display: grid; justify-items: center; gap: 1rem; }
.cta-final h2 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); max-width: 16ch; margin: 0; }
.cta-final p { color: var(--banda-suave); margin: 0 0 .8rem; }

/* 9. Ficha de producto ---------------------------------------------- */
.ficha { padding-block: 1.5rem 4rem; }
.aviso-ejemplo {
  border: 1px dashed var(--texto-suave); border-radius: var(--radio-chico);
  padding: .8rem 1rem; color: var(--texto-suave); font-size: .95rem; margin: 0 0 1.5rem;
}
.ficha__arriba { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.ficha__foto { margin: 0; background: var(--superficie-2); border-radius: var(--radio); overflow: hidden; }
.ficha__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ficha__foto figcaption { font-size: .85rem; color: var(--texto-suave); padding: .7rem 1rem; }
.ficha__marca { font: 500 .85rem var(--mono); color: var(--texto-suave); margin: 0 0 .6rem; }
.ficha__titulo { margin-bottom: .4rem; }
.ficha__veredicto { font-size: 1.15rem; color: var(--texto-suave); margin: 0 0 1.2rem; }
.ficha__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ficha__chips li { display: flex; align-items: center; gap: .6rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: .7rem .85rem; font-size: .92rem; color: var(--texto-suave); }
.ficha__chips li strong { font: 600 1.05rem var(--mono); color: var(--texto); }
.ficha__chips svg { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: var(--texto); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ficha__seccion { margin-top: clamp(3rem, 7vh, 4.5rem); }

/* Dónde comprar */
.donde { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem; }
.donde__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.donde__cabeza h2 { font-size: 1.35rem; margin: 0; }
.donde__cabeza p { margin: 0; font-size: .85rem; color: var(--texto-suave); }
.donde__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; container-type: inline-size; }
.oferta {
  display: grid; gap: .7rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tienda precio" "boton boton";
  border: 1px solid var(--linea); border-radius: 12px; padding: .8rem .9rem;
  background: var(--fondo);
}
.oferta--mejor { border: 2px solid var(--acento); }
.oferta__tienda { grid-area: tienda; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.oferta__nombre { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; }
.oferta__detalle { flex-basis: 100%; font-size: .82rem; color: var(--texto-suave); }
.oferta__precio { grid-area: precio; display: grid; justify-items: end; gap: .1rem; text-align: right; }
.oferta__precio strong { font: 650 1.3rem/1.1 var(--display); }
.oferta__precio s { font-size: .82rem; color: var(--texto-suave); }
.oferta__precio time { font-size: .75rem; color: var(--texto-suave); }
.oferta__desc { font: 600 .78rem var(--mono); color: var(--acento-texto); }
.oferta__sinprecio { font-size: .85rem; color: var(--texto-suave); max-width: 14ch; }
.oferta .btn-tienda { grid-area: boton; width: 100%; }
.donde__nota { font-size: .8rem; color: var(--texto-suave); margin: .8rem 0 0; }

/* Calificación */
.ficha__valoracion { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.barras { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.barras li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: .8rem; font-size: .92rem; }
.barra__pista { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.barra__relleno { display: block; height: 100%; width: calc(var(--v) * 10%); background: var(--relleno-barra); border-radius: inherit; transform-origin: left; }
.barra__valor { font: 600 .95rem var(--mono); text-align: right; }
.radar-caja { margin: 0; justify-self: center; width: min(100%, 500px); }
.radar { width: 100%; height: auto; overflow: visible; }
.radar__anillo { fill: none; stroke: var(--linea); stroke-width: 1; }
.radar__eje { stroke: var(--linea); stroke-width: 1; }
.radar__serie { stroke-width: 2; stroke-linejoin: round; }
.radar__serie--1 { fill: var(--acento); fill-opacity: .55; stroke: var(--serie-1); }
.radar__punto { fill: var(--serie-1); }
.radar__etiqueta { fill: var(--texto-suave); font: 500 12px var(--sans); }
.radar--multi .radar__serie { fill-opacity: .1; }
.radar--multi .radar__serie--1 { fill: var(--serie-1); }
.radar__serie--2 { fill: var(--serie-2); stroke: var(--serie-2); fill-opacity: .1; }
.radar__serie--3 { fill: var(--serie-3); stroke: var(--serie-3); fill-opacity: .1; }
.radar__serie--4 { fill: var(--serie-4); stroke: var(--serie-4); fill-opacity: .1; }
.radar__punto--2 { fill: var(--serie-2); }
.radar__punto--3 { fill: var(--serie-3); }
.radar__punto--4 { fill: var(--serie-4); }
@media (prefers-color-scheme: dark) { .radar__serie--1 { fill-opacity: .3; } }

/* Reseña */
.prosa { max-width: 68ch; }
.prosa p, .prosa li { line-height: 1.7; }
.prosa h2 { margin-top: 2.2rem; }
.prosa--sola { padding-bottom: 4rem; }
.pros-contras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 2rem 0 1rem; }
.pc { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.3rem; }
.pc h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.pc h3 svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc--pro h3 svg { stroke: var(--acento-texto); }
.pc--contra h3 svg { stroke: var(--texto-suave); }
.pc ul { margin: 0; padding-left: 1.1rem; }
.pc li + li { margin-top: .35rem; }
.ideal { background: var(--superficie-2); border-radius: var(--radio-chico); padding: 1rem 1.2rem; max-width: 68ch; }

/* Tabla técnica */
.specs { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; font-size: .95rem; }
.specs th, .specs td { text-align: left; padding: .7rem 1rem; border-top: 1px solid var(--linea); vertical-align: top; }
.specs tbody th { font-weight: 500; color: var(--texto-suave); width: 50%; }
.specs td { font-weight: 600; }
.specs td.vacio { font-weight: 400; color: var(--texto-suave); font-style: italic; }
.specs__origen { display: inline-block; margin-left: .3rem; font-size: .78rem; font-weight: 400; color: var(--texto-suave); }
.specs__grupo th { background: var(--superficie-2); color: var(--texto); font: 600 .8rem var(--mono); letter-spacing: .05em; }
.specs--reglas td { font-weight: 400; }
.ficha__repite h2 { font-size: 1.5rem; }
.botones-tienda { display: flex; flex-wrap: wrap; gap: .6rem; }

/* 10. Filtros, catálogo y categorías ------------------------------- */
.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.filtros__chips { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; }
.chip {
  min-height: 40px; padding: .45rem 1rem; border-radius: 999px;
  background: var(--superficie); border: 1.5px solid var(--linea); color: var(--texto); font-weight: 600; font-size: .92rem;
}
.chip[aria-pressed="true"] { background: var(--bosque); color: var(--niebla); border-color: var(--bosque); }
@media (prefers-color-scheme: dark) { .chip[aria-pressed="true"] { background: var(--voltaje); color: #0B1A16; border-color: var(--voltaje); } }
.filtros__campo { display: grid; gap: .3rem; font-size: .85rem; color: var(--texto-suave); }
.filtros__campo--ancho { flex: 1 1 280px; }
.filtros__campo input, .filtros__campo select {
  min-height: 44px; padding: .5rem .8rem; border-radius: 12px;
  border: 1.5px solid var(--linea); background: var(--superficie); color: var(--texto); font-size: 1rem; min-width: 200px;
}
.filtros__n { margin: 0 0 .6rem auto; font-size: .9rem; color: var(--texto-suave); }
/* En celular: tipos en una fila que se desliza y campos de dos en dos, para que los patines aparezcan pronto. */
@media (max-width: 640px) {
  .filtros { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .js .filtros.solo-js { display: grid !important; }
  .filtros__chips { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .filtros__chips::-webkit-scrollbar { display: none; }
  .filtros__chips .chip { flex: none; }
  .filtros__campo { min-width: 0; }
  .filtros__campo:has([data-filtro-texto]) { grid-column: 1 / -1; }
  .filtros__campo input, .filtros__campo select { min-width: 0; width: 100%; }
  .filtros__n { grid-column: 1 / -1; margin: 0; }
}
.sin-resultados { color: var(--texto-suave); }
.cabeza-categoria { position: relative; min-height: 46vh; display: grid; align-items: end; overflow: hidden; margin-top: 1rem; color: #FFFFFF; }
.cabeza-categoria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.cabeza-categoria::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(7 19 16 / .9), rgb(7 19 16 / .25) 60%, rgb(7 19 16 / .1)); }
.cabeza-categoria__texto { position: relative; z-index: 1; padding-block: 3rem 2.5rem; }
.cabeza-categoria__texto p { max-width: 60ch; color: #E3EBE6; font-size: 1.1rem; }
.nota-guia { margin-top: 2.5rem; color: var(--texto-suave); }

/* 11. Comparador ----------------------------------------------------- */
.comparador__elegir { gap: 1rem; margin-bottom: 1.5rem; }
.comparador__fichas { display: flex; flex-wrap: wrap; gap: .9rem; padding: .6rem .6rem 0 0; }
.ficha-mini { position: relative; display: flex; align-items: center; gap: .6rem; background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 14px; padding: .5rem .9rem .5rem .5rem; }
.ficha-mini__img { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--superficie-2); }
.ficha-mini__img img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini__serie { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ficha-mini__quitar {
  position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: var(--bosque); color: var(--niebla); font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
@media (prefers-color-scheme: dark) { .ficha-mini__quitar { background: var(--voltaje); color: #0B1A16; } }
.comparador__grafica { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; margin-bottom: 2rem; }
.leyenda-radar { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.leyenda-radar li { display: flex; align-items: center; gap: .6rem; }
.tabla-desliza { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--linea); }
.comparativa { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); font-size: .93rem; min-width: 560px; }
.comparativa th, .comparativa td { padding: .7rem .9rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.comparativa thead th { font-family: var(--display); font-size: 1.02rem; background: var(--superficie-2); }
.comparativa thead th a { text-decoration: none; }
.comparativa tbody th { font-weight: 500; color: var(--texto-suave); position: sticky; left: 0; background: var(--superficie); min-width: 9.5rem; }
.comparativa td.es-mejor { background: var(--mejor); font-weight: 650; }
.comparativa__clave th, .comparativa__clave td { background: var(--superficie-2); }
.comparador__tiendas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 1.5rem; }
.comparador__tienda { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; display: grid; gap: .6rem; }
.comparador__tienda h3 { font-size: 1.05rem; margin: 0; }
.comparador__tienda .enlace-flecha, .comparador__elegir [data-comparador-compartir] { justify-self: start; }

/* 12. Ofertas, guías y ranking ---------------------------------------- */
.lista-ofertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.oferta-fila { display: grid; gap: 1rem; grid-template-columns: 110px minmax(0, 1fr); align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; }
.oferta-fila__img img { width: 110px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.oferta-fila h2 { font-size: 1.2rem; margin: .2rem 0; }
.oferta-fila h2 a { text-decoration: none; }
.oferta-fila__precio { margin: .2rem 0; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.oferta-fila__precio strong { font: 650 1.35rem var(--display); }
.oferta-fila .btn-tienda { grid-column: 1 / -1; }

.guia { padding-bottom: 4rem; }
.guia__cabeza { padding-block: 1.5rem 2rem; max-width: 52rem; }
.guia__cuerpo { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.guia__indice { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; font-size: .92rem; align-self: start; }
.guia__indice p { font: 600 .8rem var(--mono); margin: 0 0 .6rem; color: var(--texto-suave); }
.guia__indice ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.guia__indice a { text-decoration: none; }
.guia__indice a:hover { text-decoration: underline; }
.guia__seccion { scroll-margin-top: calc(var(--nav-alto) + 1rem); }
.guia__faq { margin-top: 2.5rem; }
.guia__faq details { background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .7rem; }
.guia__faq summary { font-weight: 650; cursor: pointer; }
.guia__faq details p { margin: .7rem 0 0; color: var(--texto-suave); }
.guia__cta { background: var(--banda); color: var(--banda-texto); border-radius: var(--radio); padding: 1.8rem; margin-top: 3rem; }
.guia__cta h2 { margin-top: 0; }
.guia__cta p { color: var(--banda-suave); }

.picks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 2.5rem; }
.pick { display: grid; gap: .3rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; text-decoration: none; }
.pick:hover { border-color: var(--texto); }
.pick__titulo { font: 500 .8rem var(--mono); color: var(--acento-texto); }
.ranking { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem; }
.ranking__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem; }
.ranking__pos { font: 700 2rem/1 var(--display); color: var(--acento-texto); min-width: 1.5ch; }
.ranking__info h2 { font-size: 1.3rem; margin: 0 0 .3rem; }
.ranking__info h2 a { text-decoration: none; }
.ranking__info p { margin: .2rem 0; }
.error-404 { padding-block: 5rem; }

/* 13. Pie y bandeja ---------------------------------------------------- */
.pie { background: var(--banda); color: var(--banda-texto); padding: 3.5rem 0 calc(2rem + env(safe-area-inset-bottom)); --foco: var(--voltaje); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-bottom: 2rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
.pie__marca p { color: var(--banda-suave); max-width: 34ch; }
.pie h2 { font: 600 .8rem var(--mono); letter-spacing: .06em; color: var(--voltaje); margin-bottom: .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie a { color: var(--banda-texto); text-decoration: none; }
.pie a:hover { color: var(--voltaje); }
/* Redes del sitio (Instagram): pie, cierre de la portada y Ofertas. */
.pie__red, .enlace-red { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.pie__red svg, .enlace-red svg, .seguir-ig svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icono-punto { fill: currentColor; stroke: none; }
.pie .pie__red { color: var(--voltaje); }
.pie .pie__red:hover { color: var(--banda-texto); }
.cta-final__red { font-size: .95rem; }
.cta-final .enlace-red { color: var(--banda-texto); text-decoration: underline; text-underline-offset: 3px; }
.cta-final .enlace-red:hover { color: var(--voltaje); }
.seguir-ig { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0; padding: 1rem 1.1rem; background: var(--superficie-2); border-radius: var(--radio); }
.seguir-ig p { margin: 0; font-weight: 600; }
.pie__legal { padding-top: 1.5rem; font-size: .82rem; color: var(--banda-suave); display: grid; gap: .3rem; }
.pie__legal p { margin: 0; max-width: 90ch; }

.bandeja {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .9rem;
  background: var(--bosque); color: var(--niebla);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 999px; padding: .5rem .55rem .5rem 1.2rem; box-shadow: 0 12px 40px rgb(0 0 0 / .3);
  --foco: var(--voltaje);
}
.bandeja[hidden] { display: none; }
body:has(.bandeja:not([hidden])) .pie { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.bandeja__texto { margin: 0; font-size: .92rem; white-space: nowrap; }
.bandeja__texto strong { font-family: var(--mono); color: var(--voltaje); }
.bandeja .btn--primario { background: var(--voltaje); color: var(--bosque); }
.bandeja__limpiar { background: none; border: 0; color: var(--salvia); font-size: .85rem; text-decoration: underline; padding: .4rem; min-height: 40px; }
/* En celular no cabía: "Vaciar" quedaba fuera de la pantalla. El texto baja a dos renglones y el botón se acorta. */
@media (max-width: 520px) {
  .bandeja { gap: .5rem; padding-left: 1rem; }
  .bandeja__texto { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: .85rem; line-height: 1.25; }
  .bandeja .btn, .bandeja__limpiar { flex: none; white-space: nowrap; }
  .bandeja__ahora { display: none; }
}

.aviso-flotante {
  position: fixed; left: 50%; top: calc(var(--nav-alto) + 1rem); z-index: 80;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linea);
  border-radius: 12px; padding: .7rem 1rem; box-shadow: var(--sombra); font-size: .92rem; max-width: min(92vw, 420px);
  transition: opacity .25s, transform .35s var(--ease);
}
.aviso-flotante.es-visible { opacity: 1; transform: translate(-50%, 0); }

/* Barras: se llenan al entrar en pantalla (sin JS se ven llenas) */
.js .barras:not(.visto) .barra__relleno { transform: scaleX(0); }
.barras.visto .barra__relleno { transform: scaleX(1); transition: transform 1.2s var(--ease); }

/* 14. Portada: video en bucle que se reproduce solo (main.js) --------------
   Sin JS, con movimiento reducido o con ahorro de datos queda la imagen fija
   del primer cuadro. El texto y los botones se ven desde el inicio. */
/* overflow: clip (y no hidden) para que el tablero pueda quedarse fijo con sticky en celular. */
.portada { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--banda); color: var(--banda-texto); }
.portada__fondo { position: absolute; inset: 0; z-index: -1; }
.portada__fondo img, .portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__video { opacity: 0; transition: opacity .8s ease; }
.portada--video .portada__video { opacity: 1; }
.portada__velo { position: absolute; inset: 0; background: linear-gradient(to top, rgb(7 19 16 / .92) 0%, rgb(7 19 16 / .6) 38%, rgb(7 19 16 / .15) 68%, rgb(7 19 16 / .3)); }
.portada__contenido { min-height: clamp(30rem, calc(92svh - var(--nav-alto)), 62rem); display: grid; align-content: end; justify-items: start; gap: 1.1rem; padding: 6rem 0 clamp(4.5rem, 10vh, 6.5rem); }
.portada__titulo { margin: 0; max-width: 12ch; font: 700 clamp(2.8rem, 8.4vw, 7rem)/.95 var(--display); letter-spacing: -0.035em; color: #FFFFFF; text-shadow: 0 2px 24px rgb(0 0 0 / .45); }
.portada__texto { margin: 0; max-width: 40ch; font: 500 clamp(1.1rem, 1.8vw, 1.4rem)/1.4 var(--sans); color: #F3F5EE; text-shadow: 0 2px 20px rgb(0 0 0 / .5); }
.portada .acciones { margin-top: .4rem; }
/* Pausa del video (pauta de accesibilidad: lo que se mueve solo más de 5 s debe poder detenerse). */
.portada__boton {
  position: absolute; z-index: 1; right: max(1.25rem, calc((100% - 1200px) / 2)); bottom: 1.25rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgb(243 245 238 / .5); border-radius: 50%;
  background: rgb(11 26 22 / .6); color: #F3F5EE; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.portada__boton[hidden] { display: none; }
.portada__boton:hover { border-color: var(--voltaje); color: var(--voltaje); }
.portada__boton:focus-visible { outline: 2px solid var(--voltaje); outline-offset: 3px; }
.portada__boton svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.portada__boton .icono-reproducir, .portada__boton--pausado .icono-pausa { display: none; }
.portada__boton--pausado .icono-reproducir { display: block; }

/* Tablero del patín: invita a deslizar y marca la velocidad a la que bajas (main.js).
   Sin JS es un enlace a "Cómo comparamos" que marca 0 km/h. Computadora: horizontal, abajo al centro.
   Celular: vertical, en el costado derecho, en la columna del botón de pausa; se queda a la vista
   (sticky) mientras pasa la portada. */
.portada__carril { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tablero {
  position: absolute; left: 50%; bottom: max(1rem, 3vh); transform: translateX(-50%);
  display: grid; justify-items: center; gap: .3rem; pointer-events: auto;
  color: #F3F5EE; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.tablero__pantalla {
  display: flex; align-items: center; gap: 1.1rem; padding: .45rem 1.35rem;
  border: 1.5px solid rgb(200 241 53 / .5); border-radius: 999px; background: rgb(11 26 22 / .78);
  transition: border-color .3s;
}
.tablero:hover .tablero__pantalla { border-color: var(--voltaje); }
.tablero:focus-visible { outline: none; }
.tablero:focus-visible .tablero__pantalla { outline: 2px solid var(--voltaje); outline-offset: 4px; }
.tablero__modo { display: grid; justify-items: center; gap: .2rem; font: 500 .69rem/1 var(--mono); letter-spacing: .08em; color: var(--voltaje); }
.tablero__hoja { width: 1rem; height: .875rem; fill: none; stroke: var(--voltaje); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tablero__vel { display: grid; justify-items: center; min-width: 2.6rem; }
.tablero__num { font: 700 1.85rem/1 var(--display); font-variant-numeric: tabular-nums; color: #F3F5EE; }
.tablero__unidad { font: 500 .66rem/1.3 var(--mono); color: #97ADA2; }
.tablero__pila { display: block; width: 2.1rem; height: auto; }
.tablero__pila--v { display: none; }
.tablero__cuerpo { fill: none; stroke: #E6EFE9; stroke-width: 1.3; }
.tablero__borne { fill: #E6EFE9; }
.tablero__carga rect { fill: var(--voltaje); }
.tablero__flecha { width: 18px; height: 12px; fill: none; stroke: var(--voltaje); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: tablero-flecha 1.6s var(--ease) infinite; }
@keyframes tablero-flecha { 0% { transform: translateY(-3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
.tablero__texto { font: 500 .72rem var(--mono); letter-spacing: .14em; color: rgb(243 245 238 / .85); text-shadow: 0 1px 10px rgb(0 0 0 / .6); }
.tablero__corto { display: none; }
.tablero__flecha, .tablero__texto { transition: opacity .35s ease; }
.tablero--andando .tablero__flecha, .tablero--andando .tablero__texto { opacity: 0; }
#como-comparamos { scroll-margin-top: calc(var(--nav-alto) + 1rem); }
/* En pantallas medianas los botones de la portada llegan al centro: el texto sube para dejarle lugar al tablero. */
@media (min-width: 768px) and (max-width: 959.98px) {
  .portada__contenido { padding-bottom: calc(max(1rem, 3vh) + 7.75rem); }
}
@media (max-width: 767.98px) {
  /* El carril termina arriba del botón de pausa para que el tablero nunca lo tape. */
  .portada__carril { bottom: 4.75rem; }
  .tablero {
    position: sticky; top: calc(var(--nav-alto) + 1rem); left: auto; bottom: auto; transform: none;
    width: 2.75rem; margin: max(1.25rem, 12svh) 1.25rem 0 auto; gap: .45rem;
  }
  .tablero__pantalla { flex-direction: column; gap: .6rem; width: 100%; padding: .8rem 0 .75rem; }
  .tablero__modo { font-size: .6rem; letter-spacing: .04em; }
  .tablero__vel { min-width: 0; }
  .tablero__num { font-size: 1.3rem; }
  .tablero__unidad { font-size: .55rem; }
  .tablero__pila--h { display: none; }
  .tablero__pila--v { display: block; width: .95rem; }
  .tablero__texto { order: 1; writing-mode: vertical-rl; font-size: .62rem; letter-spacing: .2em; }
  .tablero__largo { display: none; }
  .tablero__corto { display: inline; }
  .tablero__flecha { order: 2; }
  /* Columna libre a la derecha para el tablero: el texto no pasa por debajo al deslizar. */
  .portada__texto { max-width: calc(100% - 3.25rem); }
}
@media (max-width: 352px) { .portada__titulo { font-size: 2.45rem; } }

/* 14a. Recomendador ("Encontrar mi patín", main.js) ----------------------
   Una pregunta por pantalla con opciones grandes para el dedo; al final, 3 tarjetas con el porqué.
   Sin JS el formulario se oculta (.solo-js) y queda un aviso con enlaces. */
.portada__nota { margin: 0; font: 500 .85rem var(--mono); letter-spacing: .02em; color: rgb(243 245 238 / .82); text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.franja-recomendador {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  margin-top: 1rem; padding: .9rem 1.1rem; background: var(--superficie-2); border-radius: var(--radio);
}
.franja-recomendador p { margin: 0; }
.recomendador__form { max-width: 46rem; }
.recomendador__progreso { margin: 0 0 .75rem; font: 500 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.paso { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.paso legend { padding: 0; margin-bottom: .45rem; font: 650 clamp(1.5rem, 3.2vw, 2.1rem)/1.15 var(--display); letter-spacing: -0.02em; }
.paso__ayuda { margin: 0 0 1rem; color: var(--texto-suave); }
.paso__nota { margin: .6rem 0 0; font-size: .92rem; color: var(--acento-texto); }
.opciones { display: grid; gap: .6rem; margin: 1rem 0 1.25rem; }
@media (min-width: 640px) { .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion__texto {
  display: grid; gap: .15rem; align-content: center; min-height: 58px; padding: .85rem 1.1rem;
  border: 1.5px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie);
  font-weight: 600; transition: border-color .2s, background-color .2s;
}
.opcion__texto small { font-weight: 400; color: var(--texto-suave); }
.opcion:hover .opcion__texto { border-color: var(--texto-suave); }
.opcion input:checked + .opcion__texto { border-color: var(--acento-texto); background: var(--superficie-2); background: color-mix(in srgb, var(--acento) 16%, var(--superficie)); }
.opcion input:focus-visible + .opcion__texto { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.campo-ciudad { display: block; margin: 1rem 0 0; }
.campo-ciudad select {
  width: 100%; min-height: 54px; padding: .7rem 1rem; border: 1.5px solid var(--linea); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600;
}
.opciones-calles .paso__ayuda { margin: 1.1rem 0 0; }
.paso [data-siguiente] { margin-top: 1rem; }
.recomendador__nav { margin-top: .5rem; min-height: 2.5rem; }
.recomendador__atras { background: none; border: 0; padding: .4rem 0; color: var(--texto-suave); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.recomendador__resultados:focus { outline: none; }
.recomendador__resultados, .recomendador__form { scroll-margin-top: calc(var(--nav-alto) + 1rem); }
.recomendador__titulo { margin: 0 0 .3rem; }
.recomendados { display: grid; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 760px) { .recomendados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.recomendado { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.recomendado--mejor { border: 2px solid var(--acento-texto); }
.recomendado--casi { border-style: dashed; }
.recomendado__papel { margin: 0; font: 600 .8rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--acento-texto); }
.recomendado__papel span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto-suave); }
.recomendado__img { display: block; overflow: hidden; border-radius: var(--radio-chico); background: #FFFFFF; }
.recomendado__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.recomendado__nombre { margin: .2rem 0 0; font-size: 1.25rem; }
.recomendado__nombre a { text-decoration: none; }
.recomendado__precio { margin: 0; }
.recomendado__precio strong { font: 650 1.2rem var(--display); }
.recomendado__razones { display: grid; gap: .3rem; margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.recomendado__ojo { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.recomendado__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.recomendador__fin { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
@media (max-width: 767.98px) { .portada__nota { max-width: calc(100% - 3.25rem); } }

/* 14b. Escenas de scroll ---------------------------------------------------
   Versión ESTÁTICA por defecto (sin JS, movimiento reducido o error):
   todo se ve y se lee. Lo animado vive bajo html.anim. */
.escena { position: relative; }
.escena__escenario { position: relative; overflow: hidden; }

.escena-mascara .escena__escenario { min-height: clamp(280px, 55svh, 560px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.mascara { position: absolute; inset: 0; margin: 0; }
.mascara img { width: 100%; height: 100%; object-fit: cover; }
.escena__titulo { position: relative; z-index: 2; text-align: center; padding: 0 1.25rem; text-shadow: 0 2px 30px rgb(0 0 0 / .5); }

/* Animado: solo cuando main.js activa html.anim y la escena se armó */
.anim [data-revelar] .linea { overflow: clip; }
.magnetico { will-change: transform; }
.magnetico span { display: inline-block; pointer-events: none; }

/* Categorías: en computadora caben todas en una fila, sin deslizar */
@media (min-width: 900px) {
  .escena-horizontal .pista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: var(--ancho); margin-inline: auto; padding: 0; overflow: visible; scroll-snap-type: none; }
  .escena-horizontal .panel__titulo { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
}

/* 14b. Tu ciudad: relieve, clima, autonomía y mapa ---------------------- */
.chip-dato {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0;
  font: 600 .8rem/1 var(--sans); padding: .38rem .65rem; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto);
}
.chip-dato--plana { background: #DCEFD0; color: #23421B; }
.chip-dato--ondulada { background: #E9EDB8; color: #3E4310; }
.chip-dato--cerros { background: #F5DDBE; color: #5A3409; }
@media (prefers-color-scheme: dark) {
  .chip-dato--plana { background: #1F3A26; color: #C8EBB4; }
  .chip-dato--ondulada { background: #343A16; color: #E3E9A6; }
  .chip-dato--cerros { background: #45301A; color: #F4D2A6; }
}

/* Perfil del terreno */
.perfil { width: 100%; height: 130px; display: block; overflow: visible; }
.perfil__area { fill: color-mix(in srgb, var(--voltaje) 30%, transparent); }
.perfil__linea { fill: none; stroke: var(--voltaje); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* Reparto por pendiente */
.tramos { margin-top: 1rem; }
.tramos__barra { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); }
.tramos__seg { display: block; min-width: 3px; }
.tramos__seg--0 { background: #B9D8A6; }
.tramos__seg--1 { background: #7BAE5E; }
.tramos__seg--2 { background: #3F7A33; }
.tramos__seg--3 { background: #1B4A2A; }
@media (prefers-color-scheme: dark) {
  .tramos__seg--0 { background: #3A5A33; }
  .tramos__seg--1 { background: #6A9A4E; }
  .tramos__seg--2 { background: #A9CF6B; }
  .tramos__seg--3 { background: #DDF59A; }
}
.tramos__leyenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; list-style: none; margin: .6rem 0 0; padding: 0; font-size: .82rem; color: var(--texto-suave); }
.tramos__leyenda li { display: inline-flex; align-items: center; gap: .35rem; }
.tramos__leyenda strong { color: var(--texto); font-family: var(--mono); font-weight: 600; }
.tramos__punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Cabeza de ciudad */
.cabeza-ciudad { background: var(--banda); color: var(--banda-texto); padding: 2.5rem 0 3rem; margin-top: 1rem; }
.cabeza-ciudad__rejilla { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.cabeza-ciudad h1 { color: #FFFFFF; max-width: 18ch; }
.cabeza-ciudad .kicker { color: var(--voltaje); }
.cabeza-ciudad__texto { color: var(--banda-suave); font-size: 1.1rem; max-width: 52ch; }
.cabeza-ciudad__perfil { margin: 0; }
.cabeza-ciudad__perfil figcaption { font-size: .82rem; color: var(--banda-suave); margin-top: .6rem; }
.cabeza-ciudad .chip-dato { margin-top: .4rem; }

/* Tarjetas de perfil */
.perfil-ciudad { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.dato-ciudad { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.3rem 1.4rem; }
.dato-ciudad p { margin: 0 0 .5rem; }
.dato-ciudad__titulo { font: 500 .8rem var(--mono); color: var(--acento-texto); letter-spacing: .05em; }
.dato-ciudad__valor { font: 650 1.5rem/1.15 var(--display); letter-spacing: -0.02em; }
.dato-ciudad__sep { color: var(--texto-suave); font-weight: 400; }
.lluvia { width: 100%; height: auto; margin-top: .6rem; }
.lluvia__barra { fill: #5B9BC7; }
.lluvia__mes { fill: var(--texto-suave); font: 500 11px var(--mono); }
.lluvia__valor { fill: var(--texto); font: 600 11px var(--mono); }
@media (prefers-color-scheme: dark) { .lluvia__barra { fill: #7DB6DE; } }

/* Necesidades */
.necesidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.necesidad { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.3rem; }
.necesidad h3 { margin: .1rem 0 .3rem; font-size: 1.1rem; }
.necesidad p { margin: 0; color: var(--texto-suave); }
.necesidad__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--bosque); color: var(--voltaje); }
.necesidad__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Ranking por ciudad */
.ranking-ciudad { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem; }
.rank-ciudad { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem; }
.rank-ciudad__pos { font: 700 2rem/1 var(--display); color: var(--acento-texto); min-width: 1.5ch; }
.rank-ciudad h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.rank-ciudad h3 a { text-decoration: none; }
.rank-ciudad .texto-suave { margin: 0 0 .6rem; }
.razones { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.razon { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: .45rem; align-items: start; }
.razon svg { width: 1.2em; height: 1.2em; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: .15em; }
.razon--si svg { stroke: var(--acento-texto); }
.razon--no svg { stroke: #B4532A; }
@media (prefers-color-scheme: dark) { .razon--no svg { stroke: #F0A07C; } }

/* Autonomía por patín */
.autonomias { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.autonomia { display: grid; gap: .4rem; }
.autonomia__nombre { font-weight: 650; text-decoration: none; }
.autonomia__nombre:hover { text-decoration: underline; }
.autonomia__pista { position: relative; height: 16px; border-radius: 999px; background: var(--superficie-2); }
.autonomia__anunciada { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: color-mix(in srgb, var(--texto) 16%, transparent); }
.autonomia__estimada { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--relleno-barra); }
.autonomia__invierno { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: #5B9BC7; transform: translateX(-50%); }
.autonomia__datos { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.autonomia__datos strong { color: var(--texto); font-family: var(--mono); }
.autonomia-relieve { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.autonomia-relieve li { display: grid; gap: .2rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1rem; font-size: .9rem; color: var(--texto-suave); }
.autonomia-relieve strong { font: 650 1.5rem var(--display); color: var(--texto); }

/* Mapa de alcance */
.mapa-alcance { display: grid; gap: 1rem; }
.mapa-alcance__cabeza h2 { margin-bottom: .3rem; }
.mapa-alcance__cabeza p { margin: 0; }
.mapa-alcance__controles { gap: .8rem; align-items: end; flex-wrap: wrap; }
.js .mapa-alcance__controles.solo-js { display: flex !important; }
.segmentado { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linea); }
.segmentado button { min-height: 38px; padding: .35rem .9rem; border-radius: 999px; border: 0; background: transparent; color: var(--texto-suave); font-weight: 600; font-size: .9rem; }
.segmentado button[aria-pressed="true"] { background: var(--bosque); color: var(--niebla); }
@media (prefers-color-scheme: dark) { .segmentado button[aria-pressed="true"] { background: var(--voltaje); color: #0B1A16; } }
.buscador { display: flex; gap: .5rem; flex: 1 1 260px; }
.buscador input { flex: 1; min-width: 0; min-height: 44px; padding: .5rem .8rem; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--superficie); color: var(--texto); font-size: 1rem; }
.chips-mapa { flex-wrap: wrap; gap: .5rem; }
.js .chips-mapa.solo-js { display: flex !important; }
.chips-mapa__mas { flex-basis: 100%; }
.chips-mapa__mas summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .9rem; border: 1.5px dashed var(--linea); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; }
.chips-mapa__mas summary::-webkit-details-marker { display: none; }
.chips-mapa__mas summary::after { content: "+"; font: 600 1rem/1 var(--mono); }
.chips-mapa__mas[open] summary::after { content: "−"; }
.chips-mapa__mas summary:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.chips-mapa__lista { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.mapa-alcance__lienzo { height: clamp(320px, 52vh, 480px); border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: var(--superficie-2); z-index: 0; }
.mapa-alcance__leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .92rem; }
.mapa-alcance__leyenda li { display: flex; gap: .6rem; align-items: baseline; }
.mapa-alcance__estado { margin: 0; font-size: .9rem; color: var(--texto-suave); min-height: 1.4em; }
.mapa-alcance__nota { margin: 0; }
.serie-punto { width: 12px; height: 12px; border-radius: 50%; flex: none; transform: translateY(1px); }
.mapa-pin { background: none; border: 0; }
.mapa-pin span { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--voltaje); border: 4px solid var(--bosque); box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.leaflet-container { font-family: var(--sans); background: var(--superficie-2); }
.leaflet-control-attribution { font-size: 11px; }
@media (prefers-color-scheme: dark) {
  .mapa-alcance--osm .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6); }
  .leaflet-control-attribution { background: rgb(11 26 22 / .85) !important; color: #97ADA2; }
  .leaflet-control-attribution a { color: #BFE35A; }
  .leaflet-bar a { background: #132520; color: #E6EFE9; border-bottom-color: #24403A; }
  .leaflet-bar a:hover { background: #183029; }
}

/* Tu ubicación */
.ubicacion { display: grid; gap: 2rem; }
.ubicacion__caja { background: var(--banda); color: var(--banda-texto); border-radius: var(--radio); padding: clamp(1.4rem, 3vw, 2.2rem); --foco: var(--voltaje); }
.ubicacion__caja h2 { color: #FFFFFF; }
.ubicacion__caja .texto-suave { color: var(--banda-suave); }
.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-top: 1rem; }
.ubicacion__ciudad { flex: 1 1 220px; }
.ubicacion__caja .filtros__campo { color: var(--banda-suave); }
.ubicacion__caja .mapa-alcance__estado { color: var(--banda-suave); margin-top: .8rem; }
.ubicacion__resultado { display: grid; gap: 1.5rem; }
.ubicacion__resultado[hidden] { display: none; }
.ubicacion__datos { margin-top: 1.5rem; }

/* Lista de ciudades */
.lista-ciudades { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ciudad-tarjeta { display: grid; gap: .3rem; height: 100%; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; text-decoration: none; transition: transform .3s var(--ease), border-color .3s; }
.ciudad-tarjeta:hover { transform: translateY(-2px); border-color: var(--texto); }
.ciudad-tarjeta__nombre { font: 650 1.2rem var(--display); }
.ciudad-tarjeta__estado { font-size: .85rem; color: var(--texto-suave); }
.ciudad-tarjeta__datos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }

/* Marcas */
.chip-dato--oficial { background: #DCEFD0; color: #23421B; }
.chip-dato--importacion { background: #F5DDBE; color: #5A3409; }
@media (prefers-color-scheme: dark) {
  .chip-dato--oficial { background: #1F3A26; color: #C8EBB4; }
  .chip-dato--importacion { background: #45301A; color: #F4D2A6; }
}
.criterios { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-top: 1rem; }
.criterio { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.25rem; }
.criterio h3 { margin: .7rem 0 .35rem; font-size: 1.1rem; }
.criterio p { margin: 0; color: var(--texto-suave); }
.criterio__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bosque); color: var(--voltaje); font: 600 .95rem var(--mono); }
.tabla-marcas { min-width: 760px; }
/* Logotipo y nombre en columnas propias: todas las placas miden lo mismo para que la columna quede pareja. */
.tabla-marcas th, .tabla-marcas td { vertical-align: middle; }
.tabla-marcas td.tabla-marcas__logo { width: 1%; padding-right: .25rem; }
.tabla-marcas tbody th, .tabla-marcas td:nth-child(3), .tabla-marcas .chip-dato { white-space: nowrap; }
.tabla-marcas .logo-marca--chico, .tabla-marcas .sello-marca { width: 7.5rem; height: 2.6rem; padding: 0 .65rem; border-radius: 10px; }
.tabla-marcas .logo-marca--chico img { height: 1.35rem; max-width: 100%; }
.tabla-marcas .logo-marca--chico.logo-marca--cuadrado img { height: 1.9rem; }
.tabla-marcas tbody th { width: auto; font-weight: 600; color: var(--texto); }
.tabla-marcas td { font-weight: 400; }
.rejilla-marcas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 1rem; }
.tarjeta-marca { display: grid; gap: .5rem; align-content: start; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.2rem 1.25rem 1.3rem; color: inherit; text-decoration: none; transition: transform .3s var(--ease), border-color .3s; }
.tarjeta-marca:hover { transform: translateY(-2px); border-color: var(--texto); }
.tarjeta-marca p { margin: 0; color: var(--texto-suave); }
.tarjeta-marca__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tarjeta-marca__pais { font: 500 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.tarjeta-marca__nombre { margin: .2rem 0 0; font: 650 1.4rem/1.1 var(--display); letter-spacing: -0.01em; }
.tarjeta-marca__datos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.tarjeta-marca .enlace-flecha { margin-top: .3rem; }
/* Logotipo de marca: placa clara para que se lea igual en tema claro y oscuro */
.logo-marca { display: inline-grid; place-items: center; flex: none; background: #FFFFFF; border: 1px solid var(--linea); border-radius: 12px; }
.logo-marca img { display: block; width: auto; object-fit: contain; }
.logo-marca--oscuro { background: #141816; border-color: #141816; }
.logo-marca--chico { height: 2rem; padding: 0 .55rem; border-radius: 9px; }
.logo-marca--chico img { height: 1.15rem; max-width: 4.8rem; }
.logo-marca--mediano { height: 2.9rem; padding: 0 .8rem; }
.logo-marca--mediano img { height: 1.6rem; max-width: 8.5rem; }
.logo-marca--grande { height: 5rem; padding: 0 1.1rem; border-radius: 18px; }
.logo-marca--grande img { height: 2.9rem; max-width: 12rem; }
.logo-marca--chico.logo-marca--cuadrado img { height: 1.5rem; }
.logo-marca--mediano.logo-marca--cuadrado img { height: 2.2rem; }
.logo-marca--grande.logo-marca--cuadrado img { height: 3.9rem; }
.tabla-marca { display: flex; align-items: center; gap: .6rem; }
.ficha__marca { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sello-marca { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 12px; background: var(--bosque); color: var(--niebla); font: 700 1rem var(--display); letter-spacing: -0.02em; }
.sello-marca--grande { width: 4.2rem; height: 4.2rem; border-radius: 18px; font-size: 1.5rem; }
@media (prefers-color-scheme: dark) { .sello-marca { background: var(--superficie-2); color: var(--voltaje); } }
/* Si el logotipo es ancho y la pantalla angosta, el título pasa abajo en vez de salirse */
.cabeza-marca__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cabeza-marca__fila > div { flex: 1 1 16rem; min-width: 0; }
.cabeza-marca__fila .kicker { margin: 0 0 .3rem; }
.cabeza-marca__fila h1 { margin: 0; }
.chips-marca { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.2rem 0 0; }
.marca-rejilla { display: grid; gap: 2rem; }
.marca-rejilla .pros-contras { margin: 1.5rem 0 1rem; }
.prosa-marca { max-width: 68ch; }
.marca-servicio { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.3rem 1.4rem; }
.marca-servicio h2 { font-size: 1.25rem; }
.marca-servicio dl { margin: 0; display: grid; gap: 1rem; }
.marca-servicio dt { font: 500 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.marca-servicio dd { margin: .25rem 0 0; }
.modelos-marca { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; max-width: 760px; }
.modelos-marca li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding: .8rem 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; }
.modelos-marca__nombre { font-weight: 600; }
.modelos-marca strong { font-family: var(--mono); font-weight: 500; }
.boton-donde { gap: .45rem; }
.boton-donde svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.otras-marcas { padding-left: 1.2rem; display: grid; gap: .4rem; max-width: 70ch; }
.fuentes { padding-left: 1.2rem; display: grid; gap: .35rem; }
.otras-marcas-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1rem 0 0; }
.otras-marcas-nav .chip { display: inline-flex; align-items: center; text-decoration: none; }
@media (min-width: 960px) { .marca-rejilla { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .marca-servicio { position: sticky; top: calc(var(--nav-alto) + 1.25rem); } }

/* Portada: Nogales contra Hermosillo */
.ciudades-inicio h2 { max-width: 20ch; }
.ciudades-inicio h2 > span { display: block; } /* una frase por renglón */
.duelo__ejemplo { margin: 1.75rem 0 0; max-width: 62ch; font-size: .98rem; font-weight: 500; color: var(--texto-suave); }
.duelo__ejemplo + .duelo { margin-top: .85rem; }
.duelo { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin: 2rem 0 .8rem; }
.duelo__ciudad { display: grid; gap: .8rem; background: var(--banda); color: var(--banda-texto); border-radius: var(--radio); padding: 1.4rem 1.5rem 1.5rem; text-decoration: none; transition: transform .3s var(--ease); }
.duelo__ciudad:hover { transform: translateY(-3px); }
.duelo__cabeza { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.duelo__nombre { font: 650 1.7rem/1 var(--display); letter-spacing: -0.02em; color: #FFFFFF; }
.duelo__datos { display: grid; gap: .3rem; color: var(--banda-suave); font-size: .95rem; }
.duelo__datos strong { color: #FFFFFF; font-family: var(--mono); }
.duelo__ciudad .tramos__barra { background: rgb(255 255 255 / .08); }
.duelo__ciudad .tramos__leyenda { color: var(--banda-suave); }
.duelo__ciudad .tramos__leyenda strong { color: #FFFFFF; }
.duelo__ciudad .tramos__seg--0 { background: #3A5A33; }
.duelo__ciudad .tramos__seg--1 { background: #6A9A4E; }
.duelo__ciudad .tramos__seg--2 { background: #A9CF6B; }
.duelo__ciudad .tramos__seg--3 { background: #DDF59A; }

/* 15. Responsive --------------------------------------------------------- */
/* La fila de tienda se pone en una línea según el ancho de la caja, no de la pantalla:
   en tablet la ficha va a dos columnas y la caja queda angosta. */
@container (min-width: 600px) {
  .oferta {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "tienda precio boton";
  }
  .oferta .btn-tienda { width: auto; min-width: 190px; }
}
@media (min-width: 720px) {
  .oferta-fila { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .oferta-fila__img img { width: 140px; }
  .oferta-fila .btn-tienda { grid-column: auto; }
}
@media (min-width: 720px) {
  .perfil-ciudad, .necesidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duelo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .perfil-ciudad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cabeza-ciudad__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ficha__arriba { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .ficha__galeria { position: sticky; top: calc(var(--nav-alto) + 1.25rem); }
  .ficha__valoracion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .comparador__grafica { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .guia__cuerpo { grid-template-columns: 250px minmax(0, 1fr); }
  .guia__indice { position: sticky; top: calc(var(--nav-alto) + 1.25rem); }
}
@media (max-width: 539px) {
  .barras li { grid-template-columns: 7rem minmax(0, 1fr) 2.6rem; gap: .5rem; }
  .bandeja { left: 1rem; right: 1rem; transform: none; justify-content: space-between; }
  .ranking__item, .rank-ciudad { grid-template-columns: auto minmax(0, 1fr); }
  .ranking__item .nota-general, .rank-ciudad .nota-general { grid-column: 2; justify-self: start; }
}

/* 16. Movimiento reducido: solo lo intrusivo ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada__video { transition: none; }
  .tablero__flecha { animation: none; }
}

/* Fotos oficiales de producto: vienen centradas sobre blanco en 4:3. */
.foto-producto { background: #FFFFFF; }
.tarjeta-p__imagen:has(.foto-producto), .ficha__foto:has(.foto-producto) { background: #FFFFFF; }
.ficha__foto:has(.foto-producto) figcaption { background: var(--superficie); border-top: 1px solid var(--linea); }