/* =========================================================================
   Padel Point — hoja de estilos base (Task 5: identidad visual y layout)
   Mobile first. Los tokens de color del tema claro viven en :root; el bloque
   @media (prefers-color-scheme: dark) SOLO redefine esos mismos tokens.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tipografia: Archivo y Archivo Condensed, servidas desde /fuentes/.
   Pesos 400/500/700, subconjunto latino, font-display: swap.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/archivo-condensed-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/archivo-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/archivo-condensed-700.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   Tokens de color — modo claro en :root.
   ------------------------------------------------------------------------- */
:root {
  --fondo: #FAFAF8;
  --superficie: #FFFFFF;
  --tinta: #11161D;
  --tinta-suave: #5A6472;
  --borde: #E4E6E9;
  --acento: #12508C;
  --acento-fuerte: #0D3D6B;
  --volt: #C8E438;
  --oferta: #B4272B;

  /* Tipografia */
  --fuente-texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-titulos: 'Archivo Condensed', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Medidas */
  --alto-encabezado: 4.25rem;
  --radio: 10px;
  --sombra-suave: 0 4px 20px rgba(17, 22, 29, 0.08);

  /* Tokens del hero (Task 6). El hero es la ÚNICA zona oscura del sitio, en
     los dos temas -- por diseño, no cambia con prefers-color-scheme, así
     que estos tokens NO se redefinen en el bloque oscuro de abajo (a
     diferencia de --fondo/--tinta/etc, que sí). Son la capa que hunde el
     magenta de la cancha del video (#D552A4) para que no vibre contra el
     azul del sitio (--acento, #12508C): más transparente arriba, más densa
     abajo, donde se apoyan el título y los CTA. */
  --hero-texto: #FFFFFF;
  --hero-capa-arriba: rgba(10, 13, 18, 0.25);
  --hero-capa-medio: rgba(10, 13, 18, 0.55);
  --hero-capa-abajo: rgba(10, 13, 18, 0.92);
  /* Texto sobre --volt: el botón del quiz no cambia de color entre temas
     (ver --volt más abajo), así que su texto tampoco puede depender de
     --tinta -- en modo oscuro --tinta es casi blanca y perdería contraste
     contra el verde claro. */
  --tinta-sobre-volt: #11161D;
}

/* Modo oscuro: se redefinen SOLO los tokens. --volt no cambia a proposito:
   es el mismo verde pelota siempre, y en esta tarea no se usa en ningun
   elemento (queda reservado para el CTA del quiz de la Task 6). */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0E1116;
    --superficie: #161B22;
    --tinta: #EEF1F5;
    --tinta-suave: #9AA5B4;
    --borde: #242C36;
    --acento: #3E8FD4;
    --acento-fuerte: #5BA6E4;
    --oferta: #E4645F;
    --sombra-suave: 0 4px 20px rgba(0, 0, 0, 0.35);
  }
}

/* -------------------------------------------------------------------------
   Reset base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* Ningun elemento puede empujar el ancho del body: si algo se desborda, el
   arreglo real es min-width: 0 en el item de grid/flex responsable (ver
   header y footer mas abajo), no ocultar el sintoma con overflow. Este
   overflow-x es una ultima red, no la solucion. */
html, body { overflow-x: hidden; }

img, svg, video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; margin: 0; padding: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

main { display: block; }

/* Cifras tabulares: precios, pesos y contadores nunca "bailan" al cambiar. */
.cifras,
.contador {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------------------- */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.saltar-contenido {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 200;
  background: var(--acento);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  transition: top 0.15s ease;
}
.saltar-contenido:focus {
  top: 0;
}

/* =========================================================================
   Header
   ========================================================================= */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.encabezado__barra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo    acciones acciones"
    "buscador buscador buscador";
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.6rem;
  padding: 0.6rem 1rem;
  max-width: 1400px;
  margin: 0 auto;
  min-width: 0;
}

.logo {
  grid-area: logo;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  min-width: 0;
}
.logo__marca { color: var(--tinta); }
.logo__punto { color: var(--acento); }

/* Buscador: protagonista, no un iconito. En mobile ocupa su propia fila
   completa debajo del logo (ver grid-template-areas de arriba). */
.buscador {
  grid-area: buscador;
  display: flex;
  align-items: center;
  min-width: 0;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
}
.buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: 0.95rem;
  color: var(--tinta);
}
.buscador__campo::placeholder { color: var(--tinta-suave); }
.buscador__campo::-webkit-search-cancel-button { display: none; }

.buscador__boton {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: #fff;
  background: var(--acento);
  transition: background-color 0.15s ease;
}
.buscador__boton:hover,
.buscador__boton:focus-visible { background: var(--acento-fuerte); }

.encabezado__acciones {
  grid-area: acciones;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-width: 0;
}

.boton-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--tinta);
  transition: background-color 0.15s ease;
}
.boton-icono:hover,
.boton-icono:focus-visible { background: var(--fondo); }

.contador {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1.05rem;
  text-align: center;
}
.contador[hidden] { display: none; }

/* Boton hamburguesa: visible siempre que el nav de escritorio esta oculto
   (mobile/tablet chico). Ver breakpoint mas abajo. */
.boton-menu {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
}
.boton-menu:hover { background: var(--fondo); }
.boton-menu span {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Nav de escritorio + mega menu (oculto por default, se muestra en el
   breakpoint de escritorio mas abajo)
   ------------------------------------------------------------------------- */
.nav { display: none; }

.nav__lista {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__enlace {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0.85rem 0.65rem;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--tinta);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav__enlace:hover,
.nav__enlace:focus-visible {
  color: var(--acento);
}
.nav__enlace--activo {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

/* Mega panel: se revela con opacity/pointer-events (no display/visibility)
   para que sus links sigan siendo alcanzables por teclado y :focus-within
   funcione al tabular desde el boton hacia el contenido del panel. */
.nav__item--mega .mega {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mega__lista { display: flex; flex-direction: column; gap: 0.15rem; }
.mega__enlace {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--tinta);
}
.mega__enlace:hover,
.mega__enlace:focus-visible {
  background: var(--fondo);
  color: var(--acento);
}

/* -------------------------------------------------------------------------
   Panel lateral mobile (checkbox hack, sin JS)
   ------------------------------------------------------------------------- */
.nav-toggle:checked ~ .nav-mobil__fondo {
  opacity: 1;
  pointer-events: auto;
}
.nav-toggle:checked ~ .nav-mobil {
  transform: translateX(0);
}

.nav-mobil__fondo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(17, 22, 29, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.nav-mobil {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  width: min(85vw, 22rem);
  max-width: 100vw;
  overflow-y: auto;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  padding: calc(var(--alto-encabezado) - 1rem) 1.25rem 2rem;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.nav-mobil__lista {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-mobil__lista > li > a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--borde);
}
.nav-mobil__lista > li > a:hover,
.nav-mobil__lista > li > a:focus-visible { color: var(--acento); }

.nav-mobil__detalle {
  border-bottom: 1px solid var(--borde);
}
.nav-mobil__detalle summary {
  padding: 0.85rem 0.25rem;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
}
.nav-mobil__detalle summary::-webkit-details-marker { display: none; }
.nav-mobil__detalle summary::after {
  content: '+';
  float: right;
  color: var(--tinta-suave);
}
.nav-mobil__detalle[open] summary::after { content: '−'; }
.nav-mobil__sublista {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0 0.6rem 0.75rem;
}
.nav-mobil__subenlace {
  display: block;
  padding: 0.55rem 0.25rem;
  color: var(--tinta-suave);
  font-size: 0.92rem;
}
.nav-mobil__subenlace:hover,
.nav-mobil__subenlace:focus-visible { color: var(--acento); }

/* -------------------------------------------------------------------------
   Breakpoint de escritorio: el header pasa a DOS filas.

   Antes probamos las tres cosas que crecen -- logo, buscador y nav -- en
   una sola fila, con el buscador tomando un ancho fijo y el nav estirandose
   en el resto (1fr). Eso funciona... hasta que no funciona: el buscador
   agranda su columna minmax() hasta el tope ANTES de que el nav (1fr) vea
   una sola migaja (asi es como reparte espacio CSS Grid), asi que en
   cualquier ancho donde "logo + buscador tope + nav completo + acciones"
   no entre en una fila, el nav se pisa con los iconos. Subir el corte
   evitaba el pise, pero tiene un costo peor: a 1280px -- uno de los anchos
   de pantalla mas comunes que hay -- el menu desaparecia entero y quedaba
   la version mobile con hamburguesa, que es peor que el bug.

   La solucion de fondo no es correr el corte: es dejar de competir por la
   MISMA fila. Con el nav en su propia fila, ya no compite por ancho con el
   buscador ni con los iconos -- tiene el ancho completo del header para el
   solo, así que vuelve a entrar comodo desde 960px (el corte de siempre).
   Fila 1: logo | buscador (centrado, con techo fijo, nunca se estira de
   punta a punta) | favoritos y carrito. Fila 2, con una linea fina arriba:
   el nav, centrado. */
@media (min-width: 960px) {
  .encabezado__barra {
    grid-template-columns: 1fr minmax(0, 26rem) 1fr;
    grid-template-areas:
      "logo    buscador acciones"
      "nav     nav       nav";
    column-gap: 1.25rem;
    row-gap: 0.35rem;
  }

  /* El buscador nunca ocupa todo el ancho: la columna ya lo tapa en
     26rem, y esto lo deja explicito y centrado si algun dia la columna
     terminara siendo mas ancha que el. Es "protagonista" por contraste y
     ubicacion, no por estirarse de punta a punta -- un campo de texto
     vacio de mas de 500px se ve roto, no importante. */
  .buscador {
    max-width: 26rem;
    width: 100%;
    margin: 0 auto;
  }

  .nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    min-width: 0;
    border-top: 1px solid var(--borde);
  }

  .boton-menu,
  .nav-mobil,
  .nav-mobil__fondo {
    display: none;
  }
}

/* =========================================================================
   Franja de confianza
   ========================================================================= */
.franja-confianza {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.franja-confianza__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.9rem 1rem;
}
.franja-confianza__item {
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* =========================================================================
   Footer
   ========================================================================= */
.pie {
  background: var(--superficie);
  color: var(--tinta);
}

.pie__contenido {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 1rem 1.5rem;
}

.pie__columna { min-width: 0; }

.pie__titulo {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-bottom: 0.85rem;
}
.pie__titulo--espaciado { margin-top: 1.5rem; }

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pie__lista li {
  min-width: 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.pie__lista a { color: var(--tinta); }
.pie__lista a:hover,
.pie__lista a:focus-visible { color: var(--acento); }

.pie__inferior {
  border-top: 1px solid var(--borde);
  padding: 1rem;
  text-align: center;
}
.pie__inferior p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

@media (min-width: 640px) {
  .pie__contenido {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .pie__contenido {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* =========================================================================
   Home (Task 6) — hero de video, beneficios, elegí por nivel/estilo,
   destacadas, quiz CTA, marcas, guías. Todo mobile first; los grids de
   tarjetas usan auto-fill/minmax en vez de breakpoints a mano, así que se
   acomodan solos entre 360px y pantallas grandes sin listas nuevas de
   @media por cada sección.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Botones — un solo set de variantes para todo el sitio. --volt vive
   SOLO en .boton--volt, que se usa una única vez (el CTA del hero). Ningún
   otro botón, hover ni borde toca ese token.
   ------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.boton--grande {
  padding: 1rem 2.25rem;
  font-size: 0.95rem;
}

.boton--primario {
  background: var(--acento);
  color: #fff;
}
.boton--primario:hover,
.boton--primario:focus-visible {
  background: var(--acento-fuerte);
}

.boton--fantasma {
  background: transparent;
  border-color: var(--borde);
  color: var(--tinta);
}
.boton--fantasma:hover,
.boton--fantasma:focus-visible {
  border-color: var(--acento);
  color: var(--acento);
}

/* Sobre el video oscuro del hero: borde blanco translúcido, nunca --acento
   (perdería legibilidad sobre la capa oscura, que ya es azulada). */
.boton--hero {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--hero-texto);
  backdrop-filter: blur(2px);
}
.boton--hero:hover,
.boton--hero:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

/* El único uso de --volt en todo el sitio. Texto oscuro fijo (no --tinta):
   ver el comentario de --tinta-sobre-volt en :root. */
.boton--volt {
  background: var(--volt);
  color: var(--tinta-sobre-volt);
}
.boton--volt:hover,
.boton--volt:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .boton--volt:hover,
  .boton--volt:focus-visible {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Encabezado de sección genérico, lo reusan beneficios/destacadas/marcas/
   guías/elegí-por.
   ------------------------------------------------------------------------- */
.seccion {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.75rem 1.25rem;
}
.seccion__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}
.seccion__titulo {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}
.seccion__ver-todo {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--acento);
  white-space: nowrap;
}
.seccion__ver-todo:hover,
.seccion__ver-todo:focus-visible {
  color: var(--acento-fuerte);
}

/* =========================================================================
   1. Hero — video de fondo con capa oscura obligatoria
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 78vh;
  min-height: 78dvh; /* las unidades dinámicas ganan donde el navegador las entiende */
  color: var(--hero-texto);
  background: #0A0D12; /* se ve una fracción de segundo antes de que pinte el poster */
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/* La capa NO es decorativa: baja el magenta de la cancha del video a un
   fondo profundo para que el título se lea sobre oscuro (--acento y el
   magenta del video son casi complementarios y vibran juntos si quedan
   uno al lado del otro sin nada en el medio). Más densa abajo, donde se
   apoyan el título y los CTA. */
.hero__capa {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--hero-capa-arriba) 0%,
    var(--hero-capa-medio) 55%,
    var(--hero-capa-abajo) 100%
  );
}

.hero__contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.hero__titulo {
  max-width: 18ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 1.35rem + 4vw, 3.5rem);
  line-height: 1.05;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .hero { min-height: 82vh; min-height: 82dvh; }
}

/* =========================================================================
   2. Beneficios — franja fina
   ========================================================================= */
.beneficios {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.beneficios__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}
.beneficios__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
}
.beneficios__item svg { flex: 0 0 auto; color: var(--acento); }

/* =========================================================================
   3-4. Elegí por nivel / Elegí por estilo
   ========================================================================= */
.elegi-por__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .elegi-por__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.elegi-por__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.elegi-por__tarjeta:hover,
.elegi-por__tarjeta:focus-visible {
  border-color: var(--acento);
  box-shadow: var(--sombra-suave);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .elegi-por__tarjeta:hover,
  .elegi-por__tarjeta:focus-visible { transform: none; }
}
.elegi-por__titulo { font-size: 1.15rem; }
.elegi-por__texto {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.92rem;
  line-height: 1.45;
}
.elegi-por__enlace {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--acento);
}

/* =========================================================================
   5. Paletas destacadas — pestañas más vendidas / novedades / ofertas
   ========================================================================= */
.destacadas__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.destacadas__boton {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.destacadas__boton:hover { color: var(--tinta); }

/* Estado activo: por defecto (y en navegadores sin :has()) la primera
   pestaña queda marcada, que es la que también se ve por defecto -- ver
   el mismo razonamiento en .destacadas__panel más abajo. */
label[for="tab-mas-vendidas"].destacadas__boton {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.destacadas__tabs:has(#tab-novedades:checked) label[for="tab-mas-vendidas"],
.destacadas__tabs:has(#tab-ofertas:checked) label[for="tab-mas-vendidas"] {
  background: var(--superficie);
  border-color: var(--borde);
  color: var(--tinta-suave);
}
.destacadas__tabs:has(#tab-novedades:checked) label[for="tab-novedades"],
.destacadas__tabs:has(#tab-ofertas:checked) label[for="tab-ofertas"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* Panel visible: por defecto (y sin soporte de :has()) se ve "más
   vendidas", que es la pestaña que arranca marcada con `checked` en el
   HTML -- el fallback y el estado inicial son el mismo caso, no dos.
   Nota: NO se puede usar ":first-of-type" acá -- el primer <div> hijo de
   ".destacadas__tabs" es ".destacadas__botones" (también un div), no el
   panel, así que ":first-of-type" nunca matchea ninguno de los tres
   paneles. Se apunta al panel por id en su lugar. */
.destacadas__panel { display: none; }
#panel-mas-vendidas { display: block; }
.destacadas__tabs:has(#tab-novedades:checked) #panel-mas-vendidas,
.destacadas__tabs:has(#tab-ofertas:checked) #panel-mas-vendidas {
  display: none;
}
.destacadas__tabs:has(#tab-novedades:checked) #panel-novedades { display: block; }
.destacadas__tabs:has(#tab-ofertas:checked) #panel-ofertas { display: block; }

.destacadas__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.25rem;
}
.destacadas__vacio {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tinta-suave);
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

/* =========================================================================
   Tarjeta de paleta — la usan home, catálogo y quiz (vistas/partes.js)
   ========================================================================= */
.tarjeta-paleta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tarjeta-paleta:hover,
.tarjeta-paleta:focus-within {
  border-color: var(--acento);
  box-shadow: var(--sombra-suave);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-paleta:hover,
  .tarjeta-paleta:focus-within { transform: none; }
}

.tarjeta-paleta__foto-enlace {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--fondo);
}
.tarjeta-paleta__foto {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tarjeta-paleta__foto--vacia {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--borde);
}

.tarjeta-paleta__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tarjeta-paleta__badge--oferta { background: var(--oferta); }

.tarjeta-paleta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem 1.25rem;
}
.tarjeta-paleta__marca {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.tarjeta-paleta__modelo {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
}
.tarjeta-paleta__modelo a { color: var(--tinta); }
.tarjeta-paleta__modelo a:hover,
.tarjeta-paleta__modelo a:focus-visible { color: var(--acento); }

.tarjeta-paleta__rasgos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0 0 0.15rem;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}
.tarjeta-paleta__rasgos li:not(:last-child)::after {
  content: '·';
  margin-left: 0.5rem;
}

.tarjeta-paleta__precios {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.3rem 0 0.6rem;
}
.tarjeta-paleta__precio-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.tarjeta-paleta__precio {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tinta);
}
.tarjeta-paleta__precio-anterior {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  text-decoration: line-through;
}
.tarjeta-paleta__descuento-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--oferta);
}
.tarjeta-paleta__detalle-precio {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.tarjeta-paleta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.tarjeta-paleta__acciones .boton {
  flex: 1 1 auto;
  padding: 0.65rem 1rem;
  font-size: 0.75rem;
}

/* =========================================================================
   6. Encontrá tu paleta — sección estrella, sigue siendo CLARA (el hero es
   la única zona oscura del sitio). NO usa --volt.
   ========================================================================= */
.quiz-cta__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.75rem;
  text-align: center;
  background: var(--superficie);
  border: 2px solid var(--acento);
  border-radius: calc(var(--radio) * 2);
}
.quiz-cta__ojo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}
.quiz-cta__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
}
.quiz-cta__texto {
  margin: 0 0 0.75rem;
  max-width: 34rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}

/* =========================================================================
   7. Marcas
   ========================================================================= */
.marcas__grilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.marcas__tarjeta {
  display: grid;
  place-items: center;
  min-width: 9rem;
  padding: 1.1rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.marcas__tarjeta:hover,
.marcas__tarjeta:focus-visible {
  border-color: var(--acento);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .marcas__tarjeta:hover,
  .marcas__tarjeta:focus-visible { transform: none; }
}
.marcas__logo { max-height: 2.5rem; width: auto; }
.marcas__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tinta);
}

/* =========================================================================
   8. Guías
   ========================================================================= */
.guias__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .guias__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.guias__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.guias__tarjeta:hover,
.guias__tarjeta:focus-visible {
  border-color: var(--acento);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .guias__tarjeta:hover,
  .guias__tarjeta:focus-visible { transform: none; }
}
.guias__titulo { font-size: 1.05rem; text-transform: none; letter-spacing: 0; }
.guias__resumen { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; line-height: 1.45; }
.guias__enlace {
  margin-top: auto;
  padding-top: 0.3rem;
  font-family: var(--fuente-titulos);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--acento);
}
.guias__vacio {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tinta-suave);
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

/* =========================================================================
   Barras (control · potencia · manejabilidad · salida_bola · punto_dulce).
   Las escribe/exporta esta tarea (vistas/partes.js), las usan la ficha de
   producto y el comparador en tareas siguientes.
   ========================================================================= */
.barras {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.barra-eje {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.barra-eje__etiqueta {
  font-size: 0.82rem;
  color: var(--tinta-suave);
}
.barra-eje__segmentos {
  display: flex;
  gap: 0.25rem;
}
.barra-eje__segmento {
  flex: 1 1 0;
  height: 0.5rem;
  border-radius: 999px;
  /* --borde a secas (pensado para líneas de 1px) se perdía contra --fondo
     en los dos temas -- un segmento "vacío" tiene que leerse como "vacío",
     no como invisible. --tinta-suave con opacidad reducida da un track
     visible sin tomar prestado ningún color nuevo (mismo token, los dos
     temas ya lo redefinen en :root). */
  background: var(--tinta-suave);
  opacity: 0.35;
}
.barra-eje__segmento--lleno { background: var(--acento); opacity: 1; }

/* =========================================================================
   Catálogo con filtros (Task 7). Mobile first: el panel de filtros arranca
   como offcanvas con un botón fijo FILTRAR (mismo truco de checkbox+label
   que .nav-toggle en el header, sin JS) y pasa a sidebar estático desde el
   breakpoint de escritorio (960px, el mismo que usa el header para el nav
   de escritorio). No usa --volt en ningún lado: ese verde es solo del CTA
   del quiz en la home.
   ========================================================================= */
.catalogo {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6.5rem;
}
@media (min-width: 960px) {
  .catalogo { padding-bottom: 2.75rem; }
}

.catalogo__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 1rem;
}
.catalogo__titulo { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
.catalogo__contador {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* Atajos: PRINCIPIANTES · CONTROL · POTENCIA · LIVIANAS · OFERTAS. Scroll
   horizontal PROPIO si no entran en una fila -- el que no puede
   desbordarse es el body, no un contenedor interno que declara su propio
   overflow-x a propósito. */
.catalogo__atajos { margin-bottom: 1rem; }
.catalogo__atajos-lista {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}
.catalogo__atajo {
  display: inline-block;
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-family: var(--fuente-titulos);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinta);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.catalogo__atajo:hover,
.catalogo__atajo:focus-visible { border-color: var(--acento); color: var(--acento); }
.catalogo__atajo--activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* Chips de filtros activos: cada uno se puede sacar de a uno, con un clic.
   Se muestran también cuando SÍ hay resultados (no solo en el estado
   vacío) porque es la misma información y no cuesta nada tenerla siempre
   a mano. */
.catalogo__chips-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1.25rem;
}
.catalogo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.catalogo__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.35rem 0.35rem 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  font-size: 0.78rem;
  color: var(--tinta);
}
.catalogo__chip span {
  overflow-wrap: anywhere;
}
.catalogo__chip-quitar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  color: var(--tinta-suave);
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.catalogo__chip-quitar:hover,
.catalogo__chip-quitar:focus-visible { background: var(--fondo); color: var(--oferta); }
.catalogo__borrar-todo {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--acento);
  white-space: nowrap;
}
.catalogo__borrar-todo:hover,
.catalogo__borrar-todo:focus-visible { color: var(--acento-fuerte); }

/* Cuerpo: sidebar de filtros + resultados. Una sola columna en mobile (el
   sidebar sale de flujo como panel fijo, ver más abajo); dos columnas
   desde escritorio. */
.catalogo__cuerpo { display: block; min-width: 0; }
@media (min-width: 960px) {
  .catalogo__cuerpo {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

/* Fondo oscuro detrás del panel en mobile: oculto por default, aparece (y
   se puede tocar para cerrar) cuando el checkbox de arriba está marcado.
   Mismo patrón que .nav-toggle/.nav-mobil__fondo del header. */
.catalogo__fondo-filtros {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(10, 13, 18, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.filtros-toggle:checked ~ .catalogo__cuerpo .catalogo__fondo-filtros {
  opacity: 1;
  pointer-events: auto;
}

.catalogo__filtros {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 151;
  width: min(88vw, 22rem);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.filtros-toggle:checked ~ .catalogo__cuerpo .catalogo__filtros {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .catalogo__filtros,
  .catalogo__fondo-filtros { transition: none; }
}

.catalogo__filtros-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.catalogo__filtros-cabecera h2 { font-size: 1.1rem; }
.catalogo__cerrar-filtros {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  cursor: pointer;
}
.catalogo__cerrar-filtros:hover { background: var(--fondo); }

.catalogo__grupo { margin-bottom: 1.35rem; }
.catalogo__grupo-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
}
.catalogo__grupo-lista { display: flex; flex-direction: column; gap: 0.1rem; }
.catalogo__sin-grupos {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* Cada opción de un grupo: la cantidad siempre está, la opción en cero
   queda deshabilitada en vez de desaparecer (Task 7, requisito duro). */
.filtro-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.filtro-opcion a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--tinta);
  overflow-wrap: anywhere;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filtro-opcion a:hover,
.filtro-opcion a:focus-visible { background: var(--fondo); color: var(--acento); }
.filtro-opcion--activa a { color: var(--acento); font-weight: 700; }
.filtro-opcion__cantidad {
  flex: 0 0 auto;
  min-width: 1.6rem;
  padding: 0 0.35rem;
  text-align: right;
  font-size: 0.78rem;
  color: var(--tinta-suave);
}
.filtro-opcion--deshabilitada {
  padding: 0.4rem 0.5rem;
  min-width: 0;
  color: var(--tinta-suave);
  opacity: 0.55;
}
.filtro-opcion--deshabilitada span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

/* Botón FILTRAR fijo abajo, solo mobile. Desaparece en escritorio junto
   con el resto de la maquinaria de panel (fondo, botón cerrar): ahí el
   sidebar ya está siempre visible. */
.catalogo__boton-filtrar {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 120;
  box-shadow: var(--sombra-suave);
}
@media (min-width: 960px) {
  .catalogo__boton-filtrar,
  .catalogo__fondo-filtros,
  .catalogo__cerrar-filtros { display: none; }
  .catalogo__filtros {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0 1.5rem 0 0;
    background: none;
    border-left: 0;
    border-right: 1px solid var(--borde);
    transform: none;
    transition: none;
  }
}

.catalogo__orden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.catalogo__orden select {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
}

.catalogo__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.25rem;
}

.catalogo__vacio {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}
.catalogo__vacio-titulo { margin: 0 0 0.4rem; font-weight: 700; }
.catalogo__vacio-texto { margin: 0 0 1.25rem; color: var(--tinta-suave); }

/* =========================================================================
   Ficha de producto (Task 8). Mobile first: galería e info apiladas, pasan
   a dos columnas desde 840px. NO usa --volt en ningún lado -- ese verde es
   exclusivo del CTA del quiz (hero + sección 6 de la home).
   ========================================================================= */
.ficha {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.ficha__seccion-titulo {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
}

/* -------------------------------------------------------------------------
   Bloque principal: galería + info
   ------------------------------------------------------------------------- */
.ficha__principal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 840px) {
  .ficha__principal {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

/* -- Galería -------------------------------------------------------------
   Radio + label sin JS, misma técnica que el resto del sitio (panel de
   filtros, pestañas de destacadas). Los radios son hijos directos de
   .ficha__galeria; con eso el mismo ":checked" puede alcanzar, por índice,
   tanto la foto grande como su miniatura, aunque vivan en contenedores
   hermanos distintos. Las reglas de abajo son genéricas (índices 1 a 8, no
   ids de paleta): sirven para cualquier ficha, tenga las fotos que tenga. */
.ficha__galeria { min-width: 0; }

.ficha__foto-grande {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--fondo);
  border-radius: var(--radio);
  overflow: hidden;
}
.ficha__foto-grande--vacia {
  display: grid;
  place-items: center;
  color: var(--borde);
}

.ficha__imagen {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha__radio-foto:nth-of-type(1):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(1),
.ficha__radio-foto:nth-of-type(2):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(2),
.ficha__radio-foto:nth-of-type(3):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(3),
.ficha__radio-foto:nth-of-type(4):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(4),
.ficha__radio-foto:nth-of-type(5):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(5),
.ficha__radio-foto:nth-of-type(6):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(6),
.ficha__radio-foto:nth-of-type(7):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(7),
.ficha__radio-foto:nth-of-type(8):checked ~ .ficha__foto-grande .ficha__imagen:nth-of-type(8) {
  display: block;
}

.ficha__miniaturas {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}
.ficha__miniatura {
  flex: 0 0 auto;
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--borde);
  background: var(--fondo);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ficha__miniatura img { width: 100%; height: 100%; object-fit: contain; }
.ficha__miniatura:hover,
.ficha__miniatura:focus-visible { border-color: var(--acento); }

.ficha__radio-foto:nth-of-type(1):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(1),
.ficha__radio-foto:nth-of-type(2):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(2),
.ficha__radio-foto:nth-of-type(3):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(3),
.ficha__radio-foto:nth-of-type(4):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(4),
.ficha__radio-foto:nth-of-type(5):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(5),
.ficha__radio-foto:nth-of-type(6):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(6),
.ficha__radio-foto:nth-of-type(7):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(7),
.ficha__radio-foto:nth-of-type(8):checked ~ .ficha__miniaturas .ficha__miniatura:nth-of-type(8) {
  border-color: var(--acento);
}

/* -- Info ------------------------------------------------------------- */
.ficha__info { min-width: 0; }

.ficha__marca {
  margin: 0 0 0.15rem;
  font-weight: 700;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}
.ficha__titulo {
  margin: 0 0 0.75rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  line-height: 1.1;
}

.ficha__badge-editorial {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ficha__badge-editorial--oferta { background: var(--oferta); }

.ficha__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}
.ficha__badge {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--tinta-suave);
}

.ficha__jugador {
  margin: 0 0 0.9rem;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.ficha__precios { margin: 1rem 0; }
.ficha__precio-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}
.ficha__precio {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 700;
}
.ficha__precio-anterior {
  color: var(--tinta-suave);
  text-decoration: line-through;
  font-size: 1rem;
}
.ficha__descuento-pct {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--oferta);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.ficha__precio-detalle {
  margin: 0.3rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.ficha__stock {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--acento);
}
.ficha__stock--sin { color: var(--tinta-suave); font-weight: 500; }

.ficha__envio-garantia {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}
.ficha__envio-garantia li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ficha__envio-garantia svg { flex: 0 0 auto; color: var(--acento); }

.ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.ficha__acciones .boton { flex: 1 1 14rem; }
.ficha__cta-comprar[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Motivo del botón apagado -- un CTA gris sin explicación se lee como un
   error de la página, no como una decisión. */
.ficha__cta-nota {
  margin: -0.25rem 0 0.75rem;
  color: var(--tinta-suave);
  font-size: 0.85rem;
  line-height: 1.4;
}

.ficha__acciones-secundarias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ficha__acciones-secundarias .boton {
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.78rem;
}

/* -------------------------------------------------------------------------
   Resumen técnico -- tarjeta visual con los nueve datos objetivos. Cada
   fila que falte ya viene omitida desde vistas/ficha.js (no hay "undefined"
   ni "-" que esconder acá) -- y por eso la cantidad de celdas varía de
   ficha en ficha (6, 8, 9...).

   auto-fit (no auto-fill): cuando hay MENOS datos que columnas posibles
   (por ejemplo 6), las columnas sobrantes colapsan a 0 y las que sí tienen
   datos se reparten el ancho entero -- no queda una fila corrida a la
   izquierda con hueco a la derecha.

   El "efecto grilla" ya NO sale de un fondo en el contenedor asomando por
   gaps de 1px (esa técnica es la que dejaba un bloque gris entero cuando
   una fila quedaba incompleta: el contenedor tiene fondo, pero las celdas
   que ninguna paleta ocupa no son gap de 1px, son toda una columna vacía).
   Ahora cada celda dibuja su propio borde (derecha + abajo) y el contenedor
   no tiene fondo propio -- si una fila queda incompleta, lo que se ve
   detrás es el fondo de la página, no un rectángulo sólido.
   ------------------------------------------------------------------------- */
.ficha__resumen-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.ficha__resumen-item {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.ficha__resumen-item dt {
  margin: 0 0 0.25rem;
  color: var(--tinta-suave);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ficha__resumen-item dd {
  margin: 0;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Barras ("Cómo juega") -- .barras/.barra-eje ya vienen con la etiqueta a
   la izquierda y la barra a la derecha (Task 6). Lo que faltaba era el
   ancho: estiradas sobre los 1200px de la página, una escala de 1 a 5 es
   difícil de leer de un vistazo. Se acota SOLO acá (no en la regla base
   .barras, que es compartida) para no afectar quién más la use -- en
   mobile el ancho disponible ya es menor al máximo, así que no hace falta
   una media query aparte.
   ------------------------------------------------------------------------- */
.ficha__barras-seccion .barras {
  max-width: 26rem; /* ~416px, dentro del rango 380-480px */
}

/* -------------------------------------------------------------------------
   Para quién / tecnologías
   ------------------------------------------------------------------------- */
.ficha__para-quien-texto {
  max-width: 62ch;
  margin: 0;
  color: var(--tinta-suave);
  line-height: 1.55;
}

.ficha__tecnologias-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ficha__tecnologia {
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.ficha__tecnologia-nombre {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}
.ficha__tecnologia-explicacion {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Recomendaciones -- reusa .tarjeta-paleta (vistas/partes.js) tal cual, con
   una etiqueta chica arriba que dice por qué está (similar, más económica,
   más potencia, más control).
   ------------------------------------------------------------------------- */
.ficha__recomendaciones-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.5rem 1.25rem;
}
.ficha__recomendacion-etiqueta {
  margin: 0 0 0.5rem;
  color: var(--acento);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   Barra fija de mobile: precio + COMPRAR (requisito duro de la tarea). Es
   el ÚLTIMO hijo de .ficha, con position:sticky + bottom:0 -- así deja de
   flotar apenas termina el contenido de la ficha (recomendaciones
   incluidas) y nunca tapa la franja de confianza ni el footer que vienen
   después. Solo en mobile: desde 700px el CTA de la columna de info ya
   está siempre a la vista, así que la barra sobra.
   ------------------------------------------------------------------------- */
.ficha__cta-movil {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -4px 16px rgba(17, 22, 29, 0.08);
}
.ficha__cta-movil-precio {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 700;
}
.ficha__cta-movil-nota {
  color: var(--tinta-suave);
  font-size: 0.85rem;
  line-height: 1.3;
}
.ficha__cta-movil .boton { flex: 0 0 auto; }

@media (min-width: 700px) {
  .ficha__cta-movil { display: none; }
}

/* -------------------------------------------------------------------------
   404 de ficha -- página propia (código HTTP 404 real, lo pone la ruta).
   ------------------------------------------------------------------------- */
.ficha-404 {
  max-width: 32rem;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  text-align: center;
  color: var(--tinta-suave);
}
.ficha-404 svg { margin: 0 auto 1.25rem; color: var(--borde); }
.ficha-404__titulo { margin: 0 0 0.6rem; color: var(--tinta); }
.ficha-404__texto { margin: 0 0 1.5rem; }

/* =========================================================================
   Quiz "Encontrá tu paleta" (Task 11) -- la pantalla que diferencia al
   sitio. Mobile first, botones grandes cómodos para el pulgar. NO usa
   --volt en ningún lado: ese verde es el único del botón del hero (spec
   sección 10) -- acá todo va en --acento. Sin scroll horizontal a 360px:
   el ancho del contenedor angosto (34rem) y `width: 100%` en botones y
   barra de progreso lo garantizan sin necesidad de overflow-x en ningún
   lado.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Pantalla de pregunta -- contenedor angosto y centrado, como un paso de
   formulario, no como una sección ancha de catálogo.
   ------------------------------------------------------------------------- */
.quiz {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.quiz--pregunta {
  max-width: 34rem;
}

.quiz__progreso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.quiz__progreso-texto {
  flex: 0 0 auto;
  color: var(--tinta-suave);
  font-family: var(--fuente-titulos);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.quiz__progreso-barra {
  flex: 1 1 auto;
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}
.quiz__progreso-relleno {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.quiz__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  font-weight: 600;
}
.quiz__volver:hover,
.quiz__volver:focus-visible {
  color: var(--acento);
}

.quiz__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.15;
}
.quiz--resultados .quiz__titulo {
  font-size: 1.5rem;
  max-width: 40ch;
}

/* Copy de aliento para "No sé" (sensación, peso): va debajo de la
   pregunta, no pegada a esa única opción -- no la señala aparte, solo
   tranquiliza a quien la va a elegir. */
.quiz__ayuda {
  margin: 0 0 1.5rem;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Opciones como botones amplios, uno debajo del otro -- cómodos para el
   pulgar en mobile, que es el uso principal de esta pantalla. "No sé" usa
   exactamente esta misma clase que el resto: nada la marca como una salida
   menor. */
.quiz__opciones {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.quiz__opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.quiz__opcion:hover,
.quiz__opcion:focus-visible {
  border-color: var(--acento);
  color: var(--acento);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .quiz__opcion:hover,
  .quiz__opcion:focus-visible {
    transform: none;
  }
}

/* La opción ya elegida (se vuelve a mostrar al usar "Volver", ver
   vistas/quiz.js). Se nota que está seleccionada -- borde y tinte de
   --acento, más el check -- pero sigue siendo un botón normal: se puede
   elegir cualquier otra igual que antes. */
.quiz__opcion--activa {
  border-color: var(--acento);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, var(--superficie));
}
.quiz__opcion-check {
  flex: 0 0 auto;
  color: var(--acento);
  font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
   Pantalla de resultados
   ------------------------------------------------------------------------- */

/* El aviso de "pocas en presupuesto" -- va arriba de las tarjetas. Tinte
   suave de --acento (no --oferta: ese rojo queda reservado a
   precio/descuento, esto es una aclaración, no una alarma). */
.quiz__aviso {
  margin: 1.25rem 0 2rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--acento) 10%, var(--superficie));
  border: 1px solid var(--acento);
  border-radius: var(--radio);
}
.quiz__aviso p {
  margin: 0;
  color: var(--tinta);
  line-height: 1.5;
}

.quiz__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 2rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.quiz__resultado {
  display: flex;
  flex-direction: column;
}

/* Cartel de "por encima del presupuesto" -- visible, no un texto chiquito
   escondido: requisito duro de la tarea (no se esconde ni se disimula). */
.quiz__por-encima {
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--oferta) 12%, var(--superficie));
  border: 1px solid var(--oferta);
  border-radius: var(--radio);
  color: var(--oferta);
  font-size: 0.82rem;
  font-weight: 700;
}

/* El "porqué" -- el corazón de la pantalla. */
.quiz__porque {
  margin: 0.75rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.92rem;
  line-height: 1.5;
}
.quiz__porque strong {
  color: var(--tinta);
}

.quiz__vacio {
  margin-top: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}
.quiz__vacio-titulo { margin: 0 0 0.4rem; font-weight: 700; }
.quiz__vacio-texto { margin: 0; color: var(--tinta-suave); }

.quiz__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}
.quiz__acciones .boton {
  flex: 1 1 14rem;
}

@media (min-width: 640px) {
  .quiz__opciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   Buscador — sugerencias en vivo y página de resultados (Task 9).
   No usa --volt en ningún lado: la opción resaltada del desplegable usa
   --acento, igual que el resto de los estados interactivos del sitio.
   ========================================================================= */

/* .buscador ya está definido en vistas/partes.js (no se toca ese archivo);
   acá se le agrega SOLO lo que falta para anclar el desplegable -- una
   regla más para el mismo selector, no una reescritura. */
.buscador {
  position: relative;
}

.buscador__sugerencias {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: min(70vh, 26rem);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-suave);
  padding: 0.4rem 0;
}

.buscador__grupo-titulo {
  padding: 0.45rem 1rem 0.2rem;
  font-family: var(--fuente-titulos);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.buscador__opcion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
  min-width: 0;
}
.buscador__opcion-modelo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--tinta);
}
.buscador__opcion-marca {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}
.buscador__opcion:hover,
.buscador__opcion--activa {
  background: var(--acento);
}
.buscador__opcion:hover .buscador__opcion-modelo,
.buscador__opcion:hover .buscador__opcion-marca,
.buscador__opcion--activa .buscador__opcion-modelo,
.buscador__opcion--activa .buscador__opcion-marca {
  color: #fff;
}

/* Página de resultados (/buscar): reusa .catalogo / .catalogo__cabecera /
   .catalogo__titulo / .catalogo__contador / .catalogo__grilla /
   .catalogo__vacio* de la sección del catálogo -- son clases genéricas del
   sistema de diseño (no de vistas/catalogo.js, que no se tocó para nada de
   esto). Acá solo se agregan las dos piezas que le faltan a ese sistema:
   las acciones del estado vacío en fila. */
.busqueda__vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* =========================================================================
   Comparador (Task 10) -- vistas/comparar.js + public/js/tienda.js.
   Se agrega acá abajo, al final del archivo, sin tocar los bloques de
   arriba (regla de la tarea). Dos tokens nuevos, uno por tema, para el
   fondo de la celda ganadora: mismo criterio que ya usan --hero-capa-* más
   arriba (colores derivados de --acento pero declarados aparte porque
   necesitan alpha, y --acento a secas no lo tiene). No usa --volt en
   ningún lado -- ver spec sección 10, es exclusivo del CTA del hero.
   ========================================================================= */
:root {
  --acento-tenue: rgba(18, 80, 140, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --acento-tenue: rgba(62, 143, 212, 0.16);
  }
}

/* -------------------------------------------------------------------------
   Página /comparar -- título + estado "hacen falta al menos dos" + tabla.
   padding-bottom generoso (mismo valor que ya usa .catalogo más arriba)
   porque la barra flotante de tienda.js es position:fixed y si no hay aire
   abajo tapa la última fila (los botones VER PALETA / WHATSAPP).
   ------------------------------------------------------------------------- */
.comparador {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6.5rem;
}
.comparador__titulo {
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  margin-bottom: 1rem;
}

.comparador__aviso {
  margin: 0 0 1.25rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radio);
  border-left: 3px solid var(--acento);
  background: var(--acento-tenue);
  color: var(--tinta);
  font-size: 0.88rem;
}

.comparador--vacio { text-align: center; }
.comparador__vacio {
  max-width: 30rem;
  margin: 2rem auto 0;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--tinta-suave);
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}
.comparador__vacio svg { color: var(--borde); }
.comparador__vacio-texto { margin: 0; color: var(--tinta); font-size: 1rem; }

/* -------------------------------------------------------------------------
   Tabla. Requisito duro: en mobile scrollea horizontal DENTRO de su propio
   contenedor (nunca el body -- ver html,body{overflow-x:hidden} más arriba,
   que ya es la red de seguridad, no la solución) y la primera columna
   (las etiquetas de fila) queda fija con position:sticky para no perder de
   vista qué atributo se está mirando mientras se desliza entre paletas.
   ------------------------------------------------------------------------- */
.comparador__tabla-envoltorio {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.comparador__tabla {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
}
.comparador__etiqueta {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--superficie);
  text-align: left;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  padding: 0.75rem 0.9rem;
  min-width: 8rem;
  max-width: 8rem;
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.comparador__celda {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--borde);
  text-align: center;
  min-width: 9.5rem;
  vertical-align: middle;
}
.comparador__fila:last-child .comparador__etiqueta,
.comparador__fila:last-child .comparador__celda {
  border-bottom: 0;
}

/* Fila donde las N paletas coinciden: se atenúa ENTERA (etiqueta incluida)
   -- si todas dicen lo mismo, esa fila no aporta nada a la decisión y no
   tiene que competir por la atención con las que sí difieren. */
.comparador__fila--igual { opacity: 0.55; }

/* Celda ganadora: solo en las filas con un criterio objetivo (precio más
   barato, barra más alta) -- ver el comentario de filaHtml() en
   vistas/comparar.js sobre por qué el resto de las filas (forma, balance,
   dureza, nivel...) nunca marca ganador. */
.comparador__celda--gana {
  background: var(--acento-tenue);
  color: var(--acento);
  font-weight: 700;
  border-radius: 6px;
}
.comparador__medalla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1;
  vertical-align: middle;
}

.comparador__celda--foto { padding: 1rem 0.75rem; }
.comparador__foto-enlace { display: inline-block; }
.comparador__foto {
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 auto;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--fondo);
}
.comparador__foto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--borde);
  border: 1px dashed var(--borde);
}

.comparador__segmentos { max-width: 7rem; margin: 0 auto; }

/* El <td> se queda con su display de tabla por defecto (table-cell) --
   ponerle display:flex directamente lo saca del layout de tabla y las
   columnas se apilan todas en la primera (bug reportado por el
   coordinador, reproducido y confirmado con Playwright). El flex vive un
   nivel adentro, en .comparador__acciones-grupo. */
.comparador__fila--acciones .comparador__celda {
  padding: 1rem 0.75rem;
}
.comparador__acciones-grupo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.comparador__fila--acciones .boton { width: 100%; white-space: normal; }

/* -------------------------------------------------------------------------
   Barra flotante de selección (public/js/tienda.js). A diferencia de
   .ficha__cta-movil (sticky DENTRO de .ficha, se va cuando termina la
   ficha, para no tapar el footer de una sola paleta), acá es
   position:fixed de verdad: la selección es una decisión que viaja CON la
   persona mientras navega el sitio entero, no algo local a una página --
   mismo patrón que un carrito flotante de e-commerce.
   ------------------------------------------------------------------------- */
.comparador-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -4px 16px rgba(17, 22, 29, 0.12);
}
.comparador-barra[hidden] { display: none; }

.comparador-barra__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 14rem;
  min-width: 0;
}
.comparador-barra__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 12rem;
  min-width: 0;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 0.78rem;
}
.comparador-barra__etiqueta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comparador-barra__quitar {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--tinta-suave);
}
.comparador-barra__quitar:hover,
.comparador-barra__quitar:focus-visible { background: var(--borde); color: var(--tinta); }

.comparador-barra__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.comparador-barra__contador { font-size: 0.78rem; color: var(--tinta-suave); white-space: nowrap; }
.comparador-barra__falta { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); white-space: nowrap; max-width: 12rem; }
.comparador-barra__comparar { white-space: nowrap; }
.comparador-barra__vaciar {
  font-size: 0.78rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  white-space: nowrap;
}
.comparador-barra__vaciar:hover,
.comparador-barra__vaciar:focus-visible { color: var(--acento); }

/* Aviso corto cuando se toca un botón COMPARAR deshabilitado por el tope
   de 4. Vive fuera de la barra (puede haber CERO paletas elegidas todavía
   -- no debería pasar, pero por las dudas -- así que no depende de que
   .comparador-barra exista). */
.comparador-aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  z-index: 70;
  max-width: min(92vw, 26rem);
  padding: 0.6rem 1rem;
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--fondo);
  font-size: 0.82rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.4rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.comparador-aviso-flotante--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .comparador-aviso-flotante { transition: none; }
}

/* -------------------------------------------------------------------------
   Estado del botón COMPARAR de una tarjeta (vistas/partes.js) o de la
   ficha (vistas/ficha.js) una vez que tienda.js le da vida. Van al final
   del archivo a propósito: misma especificidad que .boton--fantasma /
   .boton--primario, así que ganan por orden de aparición sin necesidad de
   selectores más específicos.
   ------------------------------------------------------------------------- */
.boton--comparar-activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.boton--comparar-activo:hover,
.boton--comparar-activo:focus-visible {
  background: var(--acento-fuerte);
  border-color: var(--acento-fuerte);
  color: #fff;
}
[data-comparar][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (min-width: 640px) {
  .comparador-barra { padding: 0.85rem 1.5rem; }
}

/* =========================================================================
   Task 12 — Carrito y WhatsApp. Se agrega acá abajo, al final del
   archivo, sin tocar los bloques de arriba (misma regla que ya siguió el
   comparador). No usa --volt en ningún lado (spec sección 10): el botón
   flotante de ayuda y el de FINALIZAR PEDIDO van en --acento, como
   cualquier otro CTA primario del sitio.
   ========================================================================= */

/* Nuevo botón COMPRAR de la tarjeta (vistas/partes.js#tarjetaPaleta): se
   agrega DESPUÉS de VER PALETA / COMPARAR en el HTML (para no tocar esas
   dos líneas) pero se quiere ARRIBA de las dos, ocupando el ancho
   completo -- es la acción que cierra la venta, la más importante de la
   tarjeta. order()+flex-basis lo reacomodan sin tocar el markup de los
   otros dos botones ni el contenedor flex que ya los envuelve. */
.tarjeta-paleta__comprar {
  order: -1;
  flex: 1 1 100%;
}

/* -------------------------------------------------------------------------
   Botón flotante de ayuda por WhatsApp (spec sección 9) -- vive en TODAS
   las páginas (vistas/partes.js#header lo agrega siempre). Un <a> normal,
   funciona sin JavaScript (requisito duro): tienda.js solo le reescribe el
   "?text=" según el contexto. bottom:5.5rem (no 1.1rem) a propósito, el
   mismo valor que ya usa .comparador-aviso-flotante para no chocar con
   .comparador-barra -- acá además evita tapar .ficha__cta-movil (mobile)
   y .catalogo__boton-filtrar, los dos casos que pide verificar la tarea:
   la barra de la ficha es sticky a bottom:0 (~3.2rem de alto) y el botón
   FILTRAR está centrado en bottom:1.1rem, así que 5.5rem los deja arriba
   de los dos con margen de sobra, sin necesidad de detectar en qué
   página está. */
.whatsapp-flotante {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  box-shadow: var(--sombra-suave);
  transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  background: var(--acento-fuerte);
  transform: translateY(-1px);
}
.whatsapp-flotante svg { flex: 0 0 auto; }
.whatsapp-flotante span {
  font-family: var(--fuente-titulos);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante { transition: none; }
}
/* Pantallas muy angostas (360px, requisito duro de "sin scroll
   horizontal"): el texto completo no entra cómodo al lado del ícono, así
   que el botón queda circular -- el texto sigue disponible para lectores
   de pantalla vía aria-label, nunca desaparece del todo. */
@media (max-width: 420px) {
  .whatsapp-flotante {
    padding: 0.8rem;
    border-radius: 50%;
  }
  .whatsapp-flotante span { display: none; }
}
/* La ficha de producto agrega su propia barra fija SOLO en mobile
   (.ficha__cta-movil, vistas/ficha.js, ~5rem de alto) -- 5.5rem de
   distancia de por sí ya la despeja de sobra en su posición de reposo,
   pero medido con Playwright DURANTE la transición del position:sticky
   (antes de que termine de "pegarse" al fondo) los 8px de margen que
   quedaban eran insuficientes: el flotante llegaba a taparla (requisito
   duro de la tarea). :has() no necesita JavaScript -- se resuelve solo
   con CSS, así que el botón sigue funcionando igual si el script no
   carga (requisito duro aparte). Mismo breakpoint que usa esa barra para
   aparecer (max-width: 699px, ver .ficha__cta-movil más arriba).
   ------------------------------------------------------------------------- */
@media (max-width: 699px) {
  body:has(.ficha__cta-movil) .whatsapp-flotante {
    bottom: 7rem;
  }
}
/* public/js/tienda.js (gestionarSolapamientoAyuda) mide las dos posiciones
   reales en cada scroll y agrega esta clase nada más que mientras se
   solapan de verdad -- cubre la franja de transición del position:sticky
   que el offset fijo de arriba, por sí solo, no puede predecir. Sin
   JavaScript el botón no se oculta nunca (se queda con el margen fijo de
   7rem, que ya cubre la enorme mayoría de los casos) -- sigue funcionando,
   que es el requisito duro. */
.whatsapp-flotante--oculto {
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Panel lateral del carrito (public/js/tienda.js) -- enteramente creado
   por JS, mismo patrón que .comparador-barra: no existe sin JavaScript
   (el carrito es una mejora, requisito duro), pero el ícono del header sí
   se renderea siempre. Fondo oscuro + aside deslizante, mismo mecanismo
   que .catalogo__filtros/.catalogo__fondo-filtros (Task 7), pero con
   clases propias porque acá no hay checkbox de por medio (el panel se
   abre/cierra con clases que agrega/saca tienda.js).
   ------------------------------------------------------------------------- */
body.carrito-abierto { overflow: hidden; }

.carrito-panel__fondo {
  position: fixed;
  inset: 0;
  z-index: 154;
  background: rgba(10, 13, 18, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.carrito-panel__fondo--visible { opacity: 1; }

.carrito-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 155;
  width: min(92vw, 26rem);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  box-shadow: var(--sombra-suave);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.carrito-panel--visible { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .carrito-panel,
  .carrito-panel__fondo { transition: none; }
}

.carrito-panel__cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--borde);
}
.carrito-panel__titulo {
  margin: 0;
  font-size: 1.2rem;
}
.carrito-panel__cerrar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--tinta-suave);
}
.carrito-panel__cerrar:hover,
.carrito-panel__cerrar:focus-visible { background: var(--fondo); color: var(--tinta); }

.carrito-panel__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.25rem 1.25rem;
}

/* Estado vacío (requisito duro: nunca un panel en blanco). */
.carrito-panel__vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2.5rem 1rem;
  text-align: center;
}
.carrito-panel__vacio-texto {
  margin: 0;
  color: var(--tinta-suave);
}
.carrito-panel__vacio .boton { width: 100%; }

.carrito-panel__lista {
  display: flex;
  flex-direction: column;
}
.carrito-panel__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--borde);
  min-width: 0;
}
.carrito-panel__item-foto {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  background: var(--fondo);
  border-radius: 6px;
}
.carrito-panel__item-foto--vacia { border: 1px dashed var(--borde); }

.carrito-panel__item-info { min-width: 0; }
.carrito-panel__item-marca {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.carrito-panel__item-modelo {
  margin: 0.1rem 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.carrito-panel__item-precio-unit {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--tinta-suave);
}

.carrito-panel__cantidad {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.carrito-panel__cantidad-boton {
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--tinta);
  line-height: 1;
  font-size: 0.9rem;
}
.carrito-panel__cantidad-boton:hover,
.carrito-panel__cantidad-boton:focus-visible { border-color: var(--acento); color: var(--acento); }
.carrito-panel__cantidad-valor {
  min-width: 1.2rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
}

.carrito-panel__item-lateral {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  text-align: right;
}
.carrito-panel__item-subtotal {
  font-weight: 700;
  white-space: nowrap;
}
.carrito-panel__item-quitar {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  text-decoration: underline;
  white-space: nowrap;
}
.carrito-panel__item-quitar:hover,
.carrito-panel__item-quitar:focus-visible { color: var(--oferta); }

.carrito-panel__totales {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--borde);
}
.carrito-panel__total-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--tinta-suave);
}
.carrito-panel__total-linea--final {
  margin-top: 0.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tinta);
}

.carrito-panel__acciones-secundarias {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  font-size: 0.8rem;
}
.carrito-panel__vaciar,
.carrito-panel__seguir {
  color: var(--tinta-suave);
  text-decoration: underline;
}
.carrito-panel__vaciar:hover,
.carrito-panel__vaciar:focus-visible,
.carrito-panel__seguir:hover,
.carrito-panel__seguir:focus-visible { color: var(--acento); }

/* El botón que cierra la venta -- el más grande y el más visible del
   panel, a propósito. */
.carrito-panel__finalizar {
  display: flex;
  width: 100%;
}
.carrito-panel__sin-whatsapp {
  margin: 0;
  padding: 0.75rem;
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta-suave);
  font-size: 0.85rem;
  text-align: center;
}

/* =========================================================================
   Guías de compra (Task 13) -- /guias (listado) y /guias/:slug (artículo).
   No usa --volt en ningún lado (reservado para el CTA del hero). Reusa
   .guias__grilla/.guias__tarjeta/.guias__resumen/.guias__enlace/.guias__vacio,
   que ya definió la Task 6 para la sección de guías de la home: el listado
   completo muestra las mismas tarjetas, solo que las ocho en vez de tres.
   ========================================================================= */
.guias-pagina {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}
.guias-pagina__titulo {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
}
.guias-pagina__intro {
  margin: 0 0 2rem;
  max-width: 60ch;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------------------
   Artículo. Columna angosta (65ch, el requisito duro de la tarea) para que
   el ojo no pierda la línea en pantallas anchas -- el título va igual de
   angosto que el cuerpo, no a todo el ancho de 1400px, para que la página
   se lea como un artículo y no como una sección de catálogo.
   ------------------------------------------------------------------------- */
.guia {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}
.guia__titulo {
  max-width: 38rem;
  margin: 0 auto 1.75rem;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.15;
}
.guia__cuerpo {
  max-width: 65ch;
  margin: 0 auto;
  color: var(--tinta);
  line-height: 1.7;
}
.guia__cuerpo h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.2rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
}
.guia__cuerpo h2:first-child { margin-top: 0; }
.guia__cuerpo h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
}
.guia__cuerpo p {
  margin: 0 0 1.1rem;
}
.guia__cuerpo ul {
  list-style: disc;
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
  display: block;
}
.guia__cuerpo li {
  margin: 0 0 0.5rem;
}
.guia__cuerpo strong {
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Bloque de cierre "Seguí eligiendo" -- el puente entre leer y comprar.
   Misma columna angosta que el cuerpo, para que se lea como el cierre
   natural del artículo, no como un anuncio pegado aparte.
   ------------------------------------------------------------------------- */
.guia__seguir {
  max-width: 65ch;
  margin: 2.5rem auto 0;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.guia__seguir-titulo {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.guia__seguir-texto {
  margin: 0 0 1.1rem;
  color: var(--tinta-suave);
}
.guia__seguir-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* -------------------------------------------------------------------------
   404 de guía -- misma estructura que .ficha-404 (vistas/ficha.js), sin
   reusar esa clase porque vive en otra vista y este archivo no se toca
   para esta tarea del lado de vistas/ficha.js.
   ------------------------------------------------------------------------- */
.guia-404 {
  max-width: 32rem;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  text-align: center;
  color: var(--tinta-suave);
}
.guia-404__titulo { margin: 0 0 0.6rem; color: var(--tinta); }
.guia-404__texto { margin: 0 0 1.5rem; }