/* =============================================================================
   Sitio público de la cotizadora
   Orden: franja demo · encabezado · filtros · galería · detalle · carrusel ·
          info de la tienda · pie · barra fija · pop-up · animaciones
   ========================================================================== */

/* --- Tamaño del texto (tienda.tamano_texto) ---------------------------------
   Normal: la base. Grande: todo el texto ≈ +12 % (la raíz pasa a 112,5 %, así
   16 px → 18 px). Compacto: solo achica títulos, precios grandes y espacios;
   el texto común sigue en 16 px y los títulos usan max(1rem, …), así que nada
   baja de 16 px. */
:root { --t-titulo: 1; --t-espacio: 1; }
:root[data-tamano="compacto"] { --t-titulo: .84; --t-espacio: .72; }
:root[data-tamano="grande"] { font-size: 112.5%; }

/* --- Primer pintado en portugués --------------------------------------------
   Con el idioma guardado en "pt", el script del <head> marca data-traduciendo:
   los textos del HTML (en español) no se ven hasta que traducirDom() los
   cambia. Ocupan su lugar, así que no mueven nada (CLS). */
:root[data-traduciendo] [data-t] { visibility: hidden; }

/* --- Franja demo ----------------------------------------------------------- */
.franja-demo {
  padding: 10px var(--gutter);
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--aviso) 25%, transparent);
}

/* --- Encabezado ------------------------------------------------------------ */
.encabezado {
  position: relative;
  isolation: isolate;
  background: var(--secundario);
  color: var(--sobre-secundario);
  /* Abajo deja aire entre el título y la tarjeta de filtros, que sube 64 px:
     unos 52 px en celular y 72 px en escritorio (× --t-espacio). */
  padding: calc(20px * var(--t-espacio)) 0 calc(clamp(116px, 10vw, 136px) * var(--t-espacio));
  overflow: hidden;
}
/* Brillos decorativos (en ::before y ::after para no tocar el contraste del
   texto): uno del color primario arriba a la derecha y uno suave abajo. */
.encabezado::before, .encabezado::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.encabezado::before {
  inset: -40% -20% auto auto;
  width: 70vmax; height: 70vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primario) 38%, transparent), transparent 70%);
  opacity: .55;
}
.encabezado::after {
  inset: auto auto -55% -25%;
  width: 60vmax; height: 60vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sobre-secundario) 9%, transparent), transparent 70%);
}
/* Entrada suave del título: solo se mueve y se enfoca; la opacidad no cambia,
   así el título se ve (y cuenta para el LCP) desde el primer pintado. */
@media (prefers-reduced-motion: no-preference) {
  .titulo { animation: titulo-entra 900ms var(--curva); }
  .marca { animation: titulo-entra 700ms var(--curva); }
}
@keyframes titulo-entra { from { transform: translateY(14px); filter: blur(6px); } }
.marca {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  font-weight: 700; font-size: 1.0625rem;
}
.marca-logo { display: inline-flex; align-items: center; }
.marca-logo img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.marca-logo .logo-generico { width: 40px; height: 40px; }
.titulo {
  margin-top: calc(clamp(28px, 6vw, 56px) * var(--t-espacio));
  max-width: 15ch;
  font-size: max(1rem, calc(clamp(2.125rem, 7.2vw, 4rem) * var(--t-titulo)));
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}

/* --- Filtros --------------------------------------------------------------- */
.filtros-envoltura { position: relative; z-index: 2; margin-top: calc(-64px * var(--t-espacio)); }
.filtros {
  display: grid;
  gap: calc(22px * var(--t-espacio));
  padding: calc(clamp(18px, 3.5vw, 28px) * var(--t-espacio));
  /* Vidrio: la tarjeta al 92 % deja ver un poco el encabezado, desenfocado.
     Con 92 % el texto suave sigue sobre 4,5:1 aun sobre un fondo negro o blanco. */
  background: color-mix(in srgb, var(--tarjeta) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(22px);
  backdrop-filter: saturate(1.6) blur(22px);
  border: 1px solid color-mix(in srgb, var(--borde) 75%, transparent);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
:root[data-tema="oscuro"] .filtros { box-shadow: var(--sombra-2), inset 0 1px 0 rgba(255, 255, 255, .06); }
.filtro { display: grid; gap: 10px; align-content: start; min-width: 0; }
.filtro-pregunta { font-weight: 700; font-size: 1.0625rem; }

.segmentado {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 5px;
  background: var(--superficie);
  border-radius: 16px;
}
/* Indicador que se desliza entre "Nuevo" y "Usado" (--i y --visible los pone
   filtros.js). El botón marcado toma su propio fondo apenas termina el
   deslizamiento, así el contraste no depende del indicador. */
.segmentado::before {
  content: "";
  position: absolute; z-index: -1;
  top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 8px);
  border-radius: 12px;
  background: var(--primario);
  box-shadow: 0 6px 16px -8px var(--primario);
  opacity: var(--visible, 0);
  transform: translateX(calc(var(--i, 0) * (100% + 6px)));
  transition: transform 420ms var(--curva), opacity 200ms ease;
}
.segmento {
  min-height: 52px;
  border: 0; border-radius: 12px;
  background: transparent;
  font-weight: 700; font-size: 1.0625rem;
  color: var(--texto);
  transition: background-color var(--medio) var(--curva), color var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.segmento[aria-pressed="true"] {
  background: var(--primario);
  color: var(--sobre-primario);
  transition: background-color 0s 380ms, color 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .segmentado::before { transition: none; }
  .segmento[aria-pressed="true"] { transition: none; }
}
@media (hover: hover) {
  .segmento[aria-pressed="false"]:hover { background: var(--superficie-2); }
}

/* Lista desplegable propia */
.desplegable { position: relative; }
.desplegable-boton {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 62px;
  padding: 10px 16px;
  background: var(--fondo);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 16px;
  text-align: left; font-weight: 600; font-size: 1.0625rem;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.desplegable-boton[aria-expanded="true"] { border-color: var(--primario-texto); }
.desplegable-boton .valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desplegable-boton .valor--vacio { color: var(--texto-suave); font-weight: 500; }
.desplegable-boton svg { width: 20px; height: 20px; flex: none; transition: transform var(--medio) var(--curva); }
.desplegable-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.desplegable-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: 20;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  max-height: min(420px, 60vh);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-3);
  overflow: hidden;
  transform-origin: top center;
}
.desplegable-buscar { padding: 10px; border-bottom: 1px solid var(--borde); }
.desplegable-buscar .entrada { min-height: 48px; }
.desplegable-lista { margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.desplegable-grupo {
  padding: 12px 12px 6px;
  color: var(--texto-suave);
  font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.desplegable-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.desplegable-opcion .cantidad {
  flex: none;
  min-width: 32px; padding: 2px 10px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 1rem; font-weight: 700; text-align: center;
}
.desplegable-opcion { transition: background-color var(--rapido); }
.desplegable-opcion[aria-selected="true"] { color: var(--primario-texto); font-weight: 700; }
/* Marca de elegido: un visto dibujado con bordes */
.desplegable-opcion[aria-selected="true"]::after {
  content: ""; flex: none;
  width: 7px; height: 13px; margin: -4px 6px 0 2px;
  border: solid var(--primario-texto); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.desplegable-opcion.activa { background: var(--superficie); box-shadow: inset 3px 0 0 var(--primario-texto); }
@media (hover: hover) { .desplegable-opcion:hover { background: var(--superficie); } }
.desplegable-vacio { padding: 14px 12px; color: var(--texto-suave); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; align-items: center; }
.chip {
  min-height: 48px; min-width: 64px;
  padding: 10px 18px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--fondo);
  font-weight: 700;
  transition: background-color var(--medio) var(--curva), color var(--medio) var(--curva), border-color var(--medio) var(--curva), opacity var(--medio), transform var(--medio) var(--curva);
}
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); box-shadow: 0 6px 16px -10px var(--primario); }
.chip[aria-pressed="true"]::before {
  content: ""; flex: none;
  width: 6px; height: 11px; margin-top: -3px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
@media (hover: hover) { .chip[aria-pressed="false"]:hover { border-color: var(--primario-texto); background: var(--superficie); } }
@media (prefers-reduced-motion: no-preference) { .chip:active, .segmento:active { transform: scale(.97); } }
.chips-vacio { color: var(--texto-suave); }

.filtros-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.contador { font-weight: 700; font-size: 1.0625rem; }
/* Antes de que lleguen los datos (0041, CLS): el contador y la lista de
   modelos ocupan ya su lugar, para que el resto no salte al dibujarlos. */
.contador:empty::before { content: "\00a0"; }
.desplegable:empty { min-height: 62px; }

.limpiado { animation: limpiado 700ms var(--curva); }
@keyframes limpiado {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primario) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

@media (min-width: 900px) {
  .filtros { grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.25fr) minmax(240px, 1.25fr); column-gap: 28px; }
  .filtros-pie { grid-column: 1 / -1; }
}

/* --- Galería --------------------------------------------------------------- */
.galeria-envoltura {
  /* Aire arriba y abajo de la zona de equipos (cuadrícula y carrusel):
     40 px en celular, 64 px en escritorio (× --t-espacio). */
  padding-block: calc(clamp(40px, 5vw, 64px) * var(--t-espacio));
  outline: none;
}
.galeria {
  position: relative;
  display: grid; gap: calc(14px * var(--t-espacio));
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18px * var(--t-espacio)); } }
@media (min-width: 960px) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Vista "Carrusel" (tienda.vista_equipos = "carrusel") --------------------
   La tarjeta del centro al frente; las vecinas más chicas y desvanecidas hacia
   los bordes (máscara). Las posiciones las pone carrusel-equipos.js. */
.carrusel-equipos { position: relative; display: grid; justify-items: center; gap: 10px; }
.carrusel-equipos .ce-ventana {
  position: relative; width: 100%;
  overflow: hidden; overflow: clip;
  padding-block: 10px 14px;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.carrusel-equipos.ce-una .ce-ventana { -webkit-mask-image: none; mask-image: none; }
.carrusel-equipos.ce-arrastrando .ce-ventana { cursor: grabbing; user-select: none; }
.galeria--carrusel { display: block; position: relative; min-height: 136px; }
.galeria--carrusel > .tarjeta {
  position: absolute; top: 0; left: 0;
  width: min(300px, 68vw);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* Sin transición de transform/opacity: las mueve el JS cuadro a cuadro */
.galeria--carrusel > .tarjeta { transition: box-shadow var(--medio) var(--curva), border-color var(--medio); }
.galeria--carrusel > .tarjeta:not([data-centro]) { box-shadow: none; }
/* Profundidad: las vecinas se desenfocan un poco y una capa del color del
   fondo las desvanece según su distancia (son tarjetas inactivas: aria-hidden
   y fuera del orden de tabulación). */
.galeria--carrusel > .tarjeta { filter: blur(calc(min(var(--distancia, 0), 2) * 1.2px)); }
.galeria--carrusel > .tarjeta::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--fondo);
  opacity: calc(min(var(--distancia, 0), 2) * .32);
  pointer-events: none;
}
.galeria--carrusel > .tarjeta[data-centro] { box-shadow: var(--sombra-2); }
.galeria--carrusel .tarjeta-boton { grid-template-columns: 1fr; align-items: start; padding: 14px; }
.galeria--carrusel .tarjeta-medio { aspect-ratio: 4 / 4.2; }
.galeria--carrusel img { -webkit-user-drag: none; user-select: none; }
.ce-flecha {
  position: absolute; top: calc(50% - 40px); z-index: 120;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--borde-fuerte); border-radius: 50%;
  background: var(--tarjeta); color: var(--texto);
  box-shadow: var(--sombra-1);
}
.ce-flecha svg { width: 22px; height: 22px; }
.ce-anterior { left: 0; }
.ce-siguiente { right: 0; }
.ce-indicador { color: var(--texto-suave); font-weight: 600; min-height: 1.5em; }
@media (hover: hover) { .ce-flecha:hover { border-color: var(--primario-texto); color: var(--primario-texto); } }
@media (min-width: 900px) { .ce-anterior { left: 8px; } .ce-siguiente { right: 8px; } }

.tarjeta {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--medio) var(--curva), border-color var(--medio), transform var(--medio) var(--curva);
}
.tarjeta-boton {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px; align-items: center;
  width: 100%; height: 100%;
  padding: 12px;
  background: none; border: 0; border-radius: inherit;
  text-align: left;
}
.tarjeta-medio {
  display: grid; place-items: center;
  aspect-ratio: 1;
  /* Fondo de la foto: un degradado suave, más claro arriba al centro */
  background:
    radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--fondo) 75%, var(--superficie)) 0%, transparent 62%),
    linear-gradient(180deg, var(--superficie) 0%, color-mix(in srgb, var(--superficie-2) 70%, var(--superficie)) 100%);
  border-radius: 14px;
  overflow: hidden;
}
.tarjeta-medio img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-medio .ilustracion-telefono { width: 62%; height: auto; }
.tarjeta-cuerpo { display: grid; gap: 6px; min-width: 0; }
.tarjeta-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.tarjeta-nombre { font-size: max(1rem, calc(1.125rem * var(--t-titulo))); font-weight: 800; letter-spacing: -.02em; }
.tarjeta-sub { color: var(--texto-suave); }
.tarjeta-precio {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin-top: 2px;
  font-size: max(1rem, calc(1.25rem * var(--t-titulo))); font-weight: 800; letter-spacing: -.02em;
}
.tarjeta-precio .desde { font-size: 1rem; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.muestras { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; padding: 0; list-style: none; }
/* Muestras finas en forma de píldora */
.tarjeta .muestra { width: 22px; height: 10px; }
.muestra {
  width: 22px; height: 22px;
  border-radius: 999px;
  /* Sin hexadecimal en la fuente: muestra neutra rayada (no se inventa el color) */
  background: var(--c, repeating-linear-gradient(45deg, #C9CDD3 0 3px, #E9EBEF 3px 6px));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px var(--tarjeta), 0 0 0 3px var(--borde);
}

@media (min-width: 640px) {
  .tarjeta-boton { grid-template-columns: 1fr; align-items: start; padding: 14px; }
  .tarjeta-medio { aspect-ratio: 4 / 4.2; }
}

/* --- Más vendido ---------------------------------------------------------------
   Etiqueta con el color primario (texto con contraste AA calculado en tema.js),
   halo suave y un borde con una luz que recorre el contorno. La luz es un
   cono que gira (solo transform) dentro de un anillo de 2 px recortado con
   máscara; corre solo en las tarjetas que se ven (data-en-pantalla, máximo 3,
   galeria.js). Con reduced-motion o sin máscara: el anillo quieto. */
.etiqueta-pildora--mas-vendido { background: var(--primario); color: var(--sobre-primario); }
.tarjeta--mas-vendido {
  border-color: color-mix(in srgb, var(--primario) 45%, var(--borde));
  box-shadow: var(--sombra-1), 0 12px 32px -14px color-mix(in srgb, var(--primario) 60%, transparent);
}
.tarjeta-brillo {
  position: absolute; inset: -1px;
  padding: 2px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--primario) 55%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tarjeta-brillo > span {
  position: absolute; left: 50%; top: 50%;
  width: 250%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(transparent 0 58%, color-mix(in srgb, var(--primario) 70%, #fff) 78%, #fff 84%, var(--primario) 90%, transparent 100%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .tarjeta--mas-vendido .tarjeta-brillo > span { animation: brillo-gira 4.8s linear infinite paused; }
  .tarjeta--mas-vendido[data-en-pantalla] .tarjeta-brillo > span { opacity: 1; animation-play-state: running; }
}
@keyframes brillo-gira {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .tarjeta-brillo { display: none; }
  .tarjeta--mas-vendido { border-color: var(--primario-texto); }
}
.galeria--carrusel > .tarjeta--mas-vendido[data-centro] {
  box-shadow: var(--sombra-2), 0 14px 36px -14px color-mix(in srgb, var(--primario) 60%, transparent);
}

@media (hover: hover) {
  .tarjeta:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
  .tarjeta--mas-vendido:hover { box-shadow: var(--sombra-2), 0 14px 36px -14px color-mix(in srgb, var(--primario) 60%, transparent); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tarjeta:hover { transform: translateY(-3px); }
  .tarjeta:hover .tarjeta-medio img, .tarjeta:hover .tarjeta-medio svg { transform: scale(1.035); }
  .tarjeta-medio img, .tarjeta-medio svg { transition: transform 600ms var(--curva); }
}

/* Tarjetas esqueleto mientras cargan los datos: la forma de una tarjeta (foto
   y tres líneas) y un brillo que pasa por encima (::after). Mismo alto que
   antes: sin saltos al llegar las tarjetas. */
.tarjeta--esqueleto {
  min-height: 136px;
  overflow: hidden;
  --hueso: var(--superficie-2);
  background:
    linear-gradient(var(--hueso), var(--hueso)) 12px 12px / 112px 112px no-repeat,
    linear-gradient(var(--hueso), var(--hueso)) 138px 28px / 30% 14px no-repeat,
    linear-gradient(var(--hueso), var(--hueso)) 138px 56px / 45% 18px no-repeat,
    linear-gradient(var(--hueso), var(--hueso)) 138px 92px / 35% 16px no-repeat,
    var(--tarjeta);
}
.tarjeta--esqueleto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--fondo) 60%, transparent) 50%, transparent 70%) 0 0 / 300% 100%;
  animation: brillo 1.4s linear infinite;
}
@media (min-width: 640px) {
  .tarjeta--esqueleto {
    min-height: 380px;
    background:
      linear-gradient(var(--hueso), var(--hueso)) 14px 14px / calc(100% - 28px) 62% no-repeat,
      linear-gradient(var(--hueso), var(--hueso)) 14px 72% / 28% 14px no-repeat,
      linear-gradient(var(--hueso), var(--hueso)) 14px 82% / 60% 18px no-repeat,
      linear-gradient(var(--hueso), var(--hueso)) 14px 92% / 40% 16px no-repeat,
      var(--tarjeta);
  }
}
@media (prefers-reduced-motion: reduce) { .tarjeta--esqueleto::after { animation: none; } }
@keyframes brillo { to { background-position: -150% 0; } }

.aviso-carga {
  padding: 14px 16px;
  border-radius: var(--radio-md);
  background: var(--error-fondo); color: var(--error);
  font-weight: 600;
}

.vacio {
  display: grid; justify-items: center; gap: 18px;
  padding: 40px 20px;
  text-align: center;
  background: var(--superficie);
  border-radius: var(--radio);
}
.vacio-texto { font-size: max(1rem, calc(1.1875rem * var(--t-titulo))); font-weight: 700; max-width: 28ch; }

/* --- Detalle --------------------------------------------------------------- */
.detalle-en-linea { padding-block: 16px calc(32px * var(--t-espacio)); }
.detalle-en-linea > .detalle {
  padding: clamp(14px, 3vw, 28px);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}
.detalle { display: grid; gap: calc(24px * var(--t-espacio)); }
@media (min-width: 900px) {
  .detalle { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(40px * var(--t-espacio)); align-items: start; }
  .detalle-medios { position: sticky; top: 16px; }
}
.detalle-ficha { display: grid; gap: calc(18px * var(--t-espacio)); align-content: start; }
.detalle-encabezado { display: grid; gap: 8px; }
.detalle-nombre { font-size: max(1rem, calc(clamp(1.625rem, 4vw, 2.25rem) * var(--t-titulo))); font-weight: 800; letter-spacing: -.03em; }
.detalle-variante { color: var(--texto-suave); font-size: 1.0625rem; font-weight: 600; }

.precio-bloque {
  display: grid; gap: 2px;
  padding: 16px 18px;
  background: var(--superficie);
  border-radius: 16px;
}
.precio-etiqueta { color: var(--texto-suave); font-weight: 600; }
.precio-valor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: max(1rem, calc(clamp(2.25rem, 8vw, 3rem) * var(--t-titulo)));
  font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
}
.precio-valor .etiqueta-demo { font-size: 1rem; letter-spacing: .08em; }

.datos-usado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.datos-usado div { padding: 12px 14px; border: 1px solid var(--borde); border-radius: 14px; }
.datos-usado dt { color: var(--texto-suave); font-size: 1rem; font-weight: 600; }
.datos-usado dd { margin: 2px 0 0; font-weight: 700; }
.datos-usado .ancho { grid-column: 1 / -1; }

.detalle-texto { white-space: pre-line; }

.ficha-tecnica { border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; }
.ficha-tecnica summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 56px; padding: 14px 18px;
  font-weight: 700;
  cursor: pointer; list-style: none;
}
.ficha-tecnica summary::-webkit-details-marker { display: none; }
.ficha-tecnica summary svg { width: 20px; height: 20px; transition: transform var(--medio) var(--curva); }
.ficha-tecnica[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) { .ficha-tecnica summary:hover { background: var(--superficie); } }
.ficha-tecnica dl { margin: 0; padding: 0 18px 10px; }
/* Celular: el nombre de la categoría arriba y el dato abajo; desde 480 px,
   en dos columnas. Los datos de varias líneas conservan sus saltos. */
.ficha-tecnica dl div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--borde); }
@media (min-width: 480px) { .ficha-tecnica dl div { grid-template-columns: minmax(120px, 34%) 1fr; gap: 16px; } }
.ficha-tecnica dt { color: var(--texto-suave); font-weight: 700; letter-spacing: .01em; }
.ficha-tecnica dd { margin: 0; white-space: pre-line; line-height: 1.5; font-variant-numeric: tabular-nums; }

.info-compra { display: grid; gap: 12px; }
.info-compra section { display: grid; gap: 4px; }
.info-compra h3 { font-size: 1rem; font-weight: 700; }
.info-compra ul { margin: 0; padding-left: 20px; }
.info-compra p { white-space: pre-line; color: var(--texto); }

.detalle-cta { display: grid; gap: 10px; }
.icono-wa { width: 24px; height: 24px; }

/* --- Carrusel -------------------------------------------------------------- */
.carrusel { display: grid; gap: 14px; }
.carrusel-marco {
  position: relative;
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
}
.carrusel-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: inherit;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista:focus-visible { outline-offset: -3px; }
.diapositiva {
  flex: 0 0 100%;
  display: grid; place-items: center;
  aspect-ratio: 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.diapositiva img { width: 100%; height: 100%; object-fit: contain; }
.diapositiva .ilustracion-telefono { width: 50%; height: auto; }
.carrusel-flecha {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--tarjeta) 88%, transparent);
  color: var(--texto);
  box-shadow: var(--sombra-2);
  transition: opacity var(--rapido), background-color var(--rapido);
}
.carrusel-flecha svg { width: 22px; height: 22px; }
.carrusel-flecha--ant { left: 12px; }
.carrusel-flecha--sig { right: 12px; }
.carrusel-flecha:disabled { opacity: 0; pointer-events: none; }
.carrusel-contador {
  position: absolute; right: 12px; bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tarjeta) 88%, transparent);
  font-size: 1rem; font-weight: 700;
}
.carrusel-puntos { display: flex; justify-content: center; gap: 0; }
.punto {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none;
}
.punto::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--borde-fuerte);
  transition: width var(--medio) var(--curva), background-color var(--medio);
}
.punto[aria-current="true"]::before { width: 22px; background: var(--primario); }

.miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.miniatura {
  flex: none;
  width: 64px; height: 64px; padding: 0;
  border: 2px solid transparent; border-radius: 12px;
  background: var(--superficie);
  overflow: hidden;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura[aria-current="true"] { border-color: var(--primario-texto); }
.miniatura .ilustracion-telefono { width: 58%; height: auto; }
.miniatura { display: grid; place-items: center; }
/* Miniatura del video: la primera foto (si hay) con el ícono de reproducir */
.miniatura--video { position: relative; }
.miniatura--video .icono-play { position: absolute; width: 30px; height: 30px; }
.detalle-video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.colores { display: grid; gap: 10px; }
.colores-titulo { font-weight: 600; }
.colores-titulo strong { font-weight: 800; }
.colores-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.color-boton {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 6px;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo);
  font-weight: 600;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.color-boton .muestra { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.color-boton[aria-current="true"] { border-color: var(--primario-texto); box-shadow: 0 0 0 1px var(--primario-texto); }

/* --- Hoja / ventana del detalle --------------------------------------------- */
.hoja {
  width: 100%; max-width: 100%;
  height: 100%; max-height: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: var(--fondo);
  color: var(--texto);
  overscroll-behavior: contain;
}
.hoja::backdrop { background: rgba(8, 10, 14, .55); backdrop-filter: blur(2px); }
.hoja[open] { display: flex; flex-direction: column; }
.hoja-cabecera {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 6px 12px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(8px);
  touch-action: none;
  cursor: grab;
}
.hoja-agarradera { width: 44px; height: 5px; border-radius: 999px; background: var(--borde-fuerte); }
.hoja-cerrar { position: absolute; right: 10px; top: 6px; }
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 4px var(--gutter) 0; overscroll-behavior: contain; }

@media (min-width: 900px) {
  .hoja {
    width: min(1120px, calc(100vw - 64px));
    height: auto; max-height: calc(100vh - 64px);
    margin: auto;
    border-radius: 24px;
    box-shadow: var(--sombra-3);
  }
  .hoja-cabecera { min-height: 64px; justify-content: flex-end; cursor: default; }
  .hoja-agarradera { display: none; }
  .hoja-cerrar { position: static; }
  .hoja-cuerpo { padding: 0 32px 32px; }
}

/* Barra de compra: fija abajo en celular (dentro de la hoja o sobre la página) */
.barra-compra, .hoja-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .2);
}
.barra-precio { display: grid; line-height: 1.15; min-width: 0; }
.barra-precio span { color: var(--texto-suave); font-size: 1rem; font-weight: 600; }
.barra-precio strong { font-size: max(1rem, calc(1.25rem * var(--t-titulo))); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.barra-compra .boton, .hoja-barra .boton { flex: 1; min-width: 0; }
.hoja-barra { position: sticky; margin: 20px calc(-1 * var(--gutter)) 0; }
@media (min-width: 900px) {
  .barra-compra, .hoja-barra { display: none !important; }
}
@media (max-width: 899.98px) {
  .hoja .detalle-cta .boton--primario { display: none; }
}

/* --- Reseñas (resenas.js) -------------------------------------------------------
   Celular: una fila que se desliza con el dedo (scroll-snap). Desde 900 px:
   mosaico. El visor es un <dialog> a pantalla completa en celular. */
.resenas { padding-block: calc(clamp(40px, 5vw, 64px) * var(--t-espacio)) calc(clamp(24px, 3vw, 40px) * var(--t-espacio)); }
.resenas-titulo { font-size: max(1rem, calc(clamp(1.5rem, 4vw, 2rem) * var(--t-titulo))); font-weight: 800; letter-spacing: -.02em; }
.resenas-lista {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); gap: 14px;
  margin: 18px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 14px;
  list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}
.resena { scroll-snap-align: start; min-width: 0; }
.resena-boton {
  display: grid; align-content: start; gap: 10px;
  width: 100%; height: 100%; padding: 10px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--tarjeta); color: var(--texto);
  box-shadow: var(--sombra-1);
  text-align: left; cursor: pointer;
  transition: box-shadow var(--medio) var(--curva), border-color var(--medio);
}
@media (hover: hover) { .resena-boton:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); } }
.resena-medio {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie-2) 100%);
}
.resena-medio img { width: 100%; height: 100%; object-fit: cover; }
.resena-play { display: grid; justify-items: center; gap: 6px; color: var(--texto-suave); font-weight: 700; }
.resena-play svg { width: 56px; height: 56px; color: var(--primario-texto); }
.resena-texto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.resena-origen { color: var(--texto-suave); font-weight: 600; }
@media (min-width: 900px) {
  .resenas-lista { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-columns: auto; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

.visor {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: var(--fondo); color: var(--texto);
}
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 12px; padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom)); }
.visor::backdrop { background: rgba(8, 10, 14, .7); }
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.visor-titulo { font-weight: 700; }
.visor-cerrar {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--borde); border-radius: 50%; background: var(--tarjeta); color: var(--texto);
}
.visor-cerrar svg { width: 22px; height: 22px; }
.visor-medio { display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 14px; background: var(--superficie); }
.visor-medio img, .visor-medio video { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-medio video { width: 100%; background: #000; }
.visor-texto { white-space: pre-line; line-height: 1.5; }
.visor-origen { color: var(--texto-suave); font-weight: 600; }
.visor-nav { display: flex; gap: 10px; }
.visor-nav .boton { flex: 1; }
@media (min-width: 900px) {
  .visor { width: min(880px, calc(100vw - 64px)); height: min(860px, calc(100dvh - 64px)); margin: auto; border-radius: 24px; box-shadow: var(--sombra-3); }
}
@media (prefers-reduced-motion: no-preference) {
  .visor[open] { animation: aparecer 220ms ease; }
}

/* --- Información de la tienda ---------------------------------------------- */
.info-tienda {
  margin-top: calc(16px * var(--t-espacio));
  padding-block: calc(clamp(40px, 5vw, 64px) * var(--t-espacio));
  background: var(--superficie);
}
.info-grilla { display: grid; gap: 24px; }
.info-tienda h2 { font-size: max(1rem, calc(clamp(1.5rem, 4vw, 2rem) * var(--t-titulo))); font-weight: 800; }
.info-datos { display: grid; gap: 14px; margin: 18px 0 0; }
.info-datos div { display: grid; gap: 2px; }
.info-datos dt { color: var(--texto-suave); font-weight: 600; }
.info-datos dd { margin: 0; font-weight: 600; white-space: pre-line; }
.info-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.redes { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
@media (min-width: 900px) { .info-grilla { grid-template-columns: 1.2fr 1fr; align-items: start; } .info-acciones { justify-content: flex-end; } .redes { justify-content: flex-end; } }

/* --- Pie --------------------------------------------------------------------- */
/* Fondo: el color secundario de la tienda. El texto usa --sobre-secundario y
   --sobre-secundario-suave, calculados en tema.js con 4,5:1 o más (claro y
   oscuro, con cualquier color). */
.pie {
  /* 48 px arriba y abajo en celular, 72 px en escritorio (× --t-espacio) */
  --pie-aire: calc(clamp(48px, 6vw, 72px) * var(--t-espacio));
  padding-block: var(--pie-aire) calc(var(--pie-aire) + env(safe-area-inset-bottom));
  background: var(--secundario);
  color: var(--sobre-secundario-suave);
}
.pie-grilla { display: grid; gap: calc(clamp(18px, 2vw, 24px) * var(--t-espacio)); }
.pie-tienda { color: var(--sobre-secundario); font-weight: 700; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sobre-secundario); font-weight: 600; }
.pie :focus-visible { outline-color: var(--sobre-secundario); }
.pie-boton {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--sobre-secundario);
  font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pie-boton[hidden] { display: none; }

/* --- Banner de cookies (consentimiento.js) -------------------------------------
   Fijo abajo: no mueve nada de la página (sin CLS). Los tres botones iguales. */
.banner-cookies {
  position: fixed; z-index: 40;
  inset: auto 0 0 0;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.banner-cookies[hidden] { display: none; }
.banner-cookies-caja {
  pointer-events: auto;
  display: grid; gap: 12px;
  max-width: 760px; margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--borde); border-radius: var(--radio-md);
  background: var(--tarjeta); color: var(--texto);
  box-shadow: var(--sombra-3);
  max-height: calc(100dvh - 24px); overflow-y: auto;
}
.banner-cookies-titulo { font-size: 1.0625rem; font-weight: 800; }
.banner-cookies-titulo:focus { outline: none; }
.banner-cookies-texto { font-size: 1rem; line-height: 1.5; }
.banner-cookies-texto a { color: var(--primario-texto); font-weight: 700; }
.banner-cookies-botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.banner-cookies-botones .boton { min-height: 48px; padding-inline: 8px; width: 100%; }
.banner-cookies-config { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--borde); }
.cookie-categoria { display: grid; gap: 2px; }
.cookie-categoria-texto { color: var(--texto-suave); font-size: 1rem; padding-left: 58px; }
.interruptor-cookie { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; cursor: pointer; }
.interruptor-cookie input {
  appearance: none; flex: none; position: relative;
  width: 46px; height: 28px; margin: 0;
  border-radius: 999px; background: var(--borde-fuerte); cursor: pointer;
}
.interruptor-cookie input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.interruptor-cookie input:checked { background: var(--primario); }
.interruptor-cookie input:checked::after { left: 21px; }
.interruptor-cookie input:disabled { cursor: not-allowed; opacity: .75; }
.interruptor-cookie input:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .interruptor-cookie input::after { transition: left var(--rapido); } }
@media (min-width: 900px) { .banner-cookies { padding-bottom: 20px; } }

/* --- Pop-up de datos --------------------------------------------------------- */
.popup {
  width: 100%; max-width: 100%;
  max-height: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0; border-radius: 24px 24px 0 0;
  background: var(--fondo);
  color: var(--texto);
  box-shadow: var(--sombra-3);
}
.popup::backdrop { background: rgba(8, 10, 14, .6); backdrop-filter: blur(2px); }
.popup-contenido { display: grid; gap: 18px; padding: 20px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.popup-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.popup-titulo { font-size: max(1rem, calc(1.5rem * var(--t-titulo))); font-weight: 800; letter-spacing: -.025em; }
.popup-texto { color: var(--texto-suave); margin-top: 6px; font-size: 1.0625rem; }
.resumen {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--superficie);
}
.resumen-medio { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--fondo); }
.resumen-medio img { width: 100%; height: 100%; object-fit: cover; }
.resumen-medio .ilustracion-telefono { width: 70%; }
.resumen-nombre { font-weight: 800; }
.resumen-sub { color: var(--texto-suave); }
.resumen-precio { font-weight: 800; font-size: 1.125rem; }
.popup-form { display: grid; gap: 16px; }
.telefono { display: flex; align-items: stretch; }
.telefono .prefijo {
  display: grid; place-items: center;
  padding: 0 14px;
  border: 1.5px solid var(--borde-fuerte); border-right: 0;
  border-radius: var(--radio-md) 0 0 var(--radio-md);
  background: var(--superficie);
  font-weight: 700;
}
.telefono .entrada { border-radius: 0 var(--radio-md) var(--radio-md) 0; }
.nota-pequena { color: var(--texto-suave); text-align: center; font-size: 1rem; }
.popup-estado { display: grid; gap: 16px; text-align: center; justify-items: center; padding-block: 8px; }
.popup-estado .codigo { font-weight: 800; }
.popup-alerta {
  padding: 12px 14px;
  border-radius: var(--radio-md);
  background: var(--error-fondo); color: var(--error);
  font-weight: 600;
}
.sello-ok {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--exito-fondo); color: var(--exito);
}
.sello-ok svg { width: 34px; height: 34px; }

@media (min-width: 640px) {
  .popup { width: min(520px, calc(100vw - 48px)); margin: auto; border-radius: 24px; }
  .popup-contenido { padding: 28px; }
}

/* --- Aperturas --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* data-vt: la abre una View Transition; entonces no se suma esta animación */
  .hoja[open]:not([data-vt]) { animation: subir 380ms var(--curva); }
  .popup[open] { animation: subir 340ms var(--curva); }
  .hoja[open]::backdrop, .popup[open]::backdrop { animation: aparecer 300ms ease; }
  .desplegable-panel { animation: desplegar 200ms var(--curva); }
  .detalle-en-linea:not([hidden]) > .detalle { animation: aparecer-arriba 420ms var(--curva); }
  @media (min-width: 640px) {
    .popup[open] { animation: escalar 260ms var(--curva); }
  }
  @media (min-width: 900px) {
    .hoja[open]:not([data-vt]) { animation: escalar 300ms var(--curva); }
  }
  ::view-transition-group(equipo-foto) { animation-duration: 420ms; animation-timing-function: var(--curva); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@keyframes escalar { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes aparecer-arriba { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Página legal */
.legal { padding-block: calc(32px * var(--t-espacio)) calc(56px * var(--t-espacio)); max-width: 760px; }
.legal h1 { font-size: max(1rem, calc(clamp(1.75rem, 5vw, 2.5rem) * var(--t-titulo))); font-weight: 800; margin-bottom: 20px; }
.legal-texto { display: grid; gap: 14px; }
/* Página de solicitudes (/solicitudes/): el formulario del pop-up dentro de la página. */
.solicitudes-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.solicitudes-form legend { padding: 0; margin-bottom: 6px; }
.solicitudes-form fieldset .casilla + .casilla { margin-top: 8px; }
.legal-revision { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--superficie); color: var(--texto-suave); font-weight: 600; }
.legal-texto h2 { font-size: max(1rem, calc(1.375rem * var(--t-titulo))); margin-top: 12px; }
.legal-texto h3 { font-size: 1.125rem; margin-top: 8px; }
.legal-texto ul, .legal-texto ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.legal-volver { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sobre-secundario); }
.encabezado--legal { padding-bottom: 24px; }
.encabezado--legal .marca { justify-content: space-between; flex-wrap: wrap; }

/* Barra de compra en pantallas angostas: precio arriba, botón a todo el ancho */
@media (max-width: 479.98px) {
  .barra-compra, .hoja-barra { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
  .barra-precio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
  .barra-compra .boton, .hoja-barra .boton { flex: none; width: 100%; }
}
.barra-compra .boton, .hoja-barra .boton { white-space: nowrap; }

/* Aviso de privacidad corto del pop-up (0016) */
.popup-aviso-legal { color: var(--texto-suave); font-size: 1rem; line-height: 1.5; }
.popup-aviso-legal p { margin: 0; }
.popup-aviso-legal a { color: var(--primario-texto); font-weight: 700; }

/* Tablas de la Política de cookies (formatoBasico: .tabla-legal) */
.tabla-legal { overflow-x: auto; margin: 4px 0 8px; }
.tabla-legal table { width: 100%; border-collapse: collapse; }
.tabla-legal th, .tabla-legal td { padding: 8px 10px; border: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla-legal thead th { background: var(--superficie); }
.tabla-legal th[scope="row"] { width: 34%; font-weight: 700; }

/* --- Globo de ayuda (ayuda.js, F) ---------------------------------------------
   Fijo abajo a la derecha. Sube por encima de la barra de compra con transform
   (no mueve nada: sin CLS). La onda de radar anima solo transform y opacity,
   cada 3 s, y no existe con reduced-motion. */
.ayuda-globo {
  position: fixed; z-index: 35;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--primario); color: var(--sobre-primario);
  font: 800 1.625rem/1 var(--font);
  box-shadow: var(--sombra-2);
  cursor: pointer;
  transform: translateY(calc(-1 * var(--ayuda-subir, 0px)));
  transition: transform var(--medio) var(--curva);
}
.ayuda-globo[hidden] { display: none; }
.ayuda-globo:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .ayuda-globo::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primario);
    pointer-events: none;
    animation: ayuda-radar 3s ease-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) { .ayuda-globo { transition: none; } }
@keyframes ayuda-radar {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
.ayuda-dialogo {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radio);
  background: var(--tarjeta); color: var(--texto);
  box-shadow: var(--sombra-3);
}
.ayuda-dialogo::backdrop { background: rgba(8, 10, 14, .6); }
.ayuda-contenido { position: relative; display: grid; gap: 14px; padding: 22px 20px 20px; }
.ayuda-contenido h2 { padding-right: 48px; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.ayuda-cerrar { position: absolute; right: 10px; top: 10px; }
.ayuda-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ayuda-video { display: block; border-radius: 12px; background: #000; }
.ayuda-video--celular { width: auto; max-width: 100%; height: min(60dvh, 520px); aspect-ratio: 9 / 16; margin: 0 auto; }
.ayuda-video--computadora { width: 100%; aspect-ratio: 16 / 9; }

/* --- Banner de promos (0039) -------------------------------------------------
   Fijo arriba, con los colores invertidos del sitio (contraste AA en los dos
   temas). La pista tiene dos mitades iguales y se mueve media pista
   (promo.js pone la duración). Se detiene con el botón, con el mouse encima
   o con el foco adentro; con reduced-motion queda quieto. */
:root { --alto-promo: 0px; }
:root.con-promo { --alto-promo: 48px; }
.promo-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center;
  min-height: 48px;
  background: var(--texto); color: var(--fondo);
  font-weight: 700;
}
.promo-ventana { flex: 1; min-width: 0; overflow: hidden; overflow: clip; }
.promo-pista { display: flex; width: max-content; animation: promo-correr 20s linear infinite; }
.promo-mitad { display: flex; flex: none; }
.promo-item { padding: 0 28px; white-space: nowrap; line-height: 48px; }
.promo-item::after { content: "•"; position: relative; left: 28px; opacity: .7; }
.promo-banner:hover .promo-pista, .promo-banner:focus-within .promo-pista, .promo-pausado .promo-pista { animation-play-state: paused; }
@keyframes promo-correr { to { transform: translateX(-50%); } }
.promo-quieto .promo-pista { width: auto; animation: none; justify-content: center; }
.promo-quieto .promo-item { white-space: normal; text-align: center; line-height: 1.4; padding: 12px var(--gutter); }
.promo-quieto .promo-item::after { content: none; }
.promo-pausa {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: 4px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit;
}
.promo-pausa svg { width: 20px; height: 20px; }
.promo-pausa .icono-seguir { display: none; }
.promo-pausado .promo-pausa .icono-pausa { display: none; }
.promo-pausado .promo-pausa .icono-seguir { display: inline; }
.promo-pausa:focus-visible { outline: 3px solid var(--fondo); outline-offset: -3px; }
@media (min-width: 900px) { .con-promo .detalle-medios { top: calc(16px + var(--alto-promo)); } }
@media (prefers-reduced-motion: reduce) { .promo-pista { animation: none; } }

/* --- Precios: promos (0039) y dólar (0038) ------------------------------------ */
.tarjeta-cuerpo > .precio-tachado { display: block; margin-top: 2px; }
.precio-tachado { color: var(--texto-suave); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-decoration-thickness: 2px; }
.precio-apoyo, .barra-apoyo { display: block; color: var(--texto-suave); font-weight: 700; font-size: 1rem; letter-spacing: 0; }
.precio-cambio { color: var(--texto-suave); font-size: 1rem; margin-top: 4px; }
.etiqueta-pildora--descuento { background: #B42318; color: #FFFFFF; }

/* --- Stock bajo (0040): de 5 (naranja) a 1 (rojo con resplandor) ------------------
   Texto blanco con contraste AA en todos los tonos. */
.stock-bajo {
  display: inline-flex; align-items: center; justify-self: start; width: fit-content;
  margin-top: 6px; padding: 4px 12px;
  border-radius: 999px;
  background: var(--stock, #C2410C); color: #FFFFFF;
  font-weight: 800; font-size: 1rem; letter-spacing: 0;
}
.stock-bajo[data-n="5"] { --stock: #C2410C; }
.stock-bajo[data-n="4"] { --stock: #C1350F; }
.stock-bajo[data-n="3"] { --stock: #BE2A14; }
.stock-bajo[data-n="2"] { --stock: #BB2016; box-shadow: 0 0 10px rgba(220, 38, 38, .35); }
.stock-bajo[data-n="1"] {
  --stock: #B91C1C;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .35), 0 0 18px 2px rgba(220, 38, 38, .7);
  animation: stock-latido 1.6s ease-in-out infinite;
}
@keyframes stock-latido { 50% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .45), 0 0 26px 6px rgba(220, 38, 38, .85); } }
@media (prefers-reduced-motion: reduce) { .stock-bajo[data-n="1"] { animation: none; } }