/* ==========================================================================
   LUMAT · Sistema visual único · v2
   --------------------------------------------------------------------------
   Un taller de ingeniería de precisión, de noche.
   Grafito, aluminio mecanizado, una lámpara de trabajo y un objeto iluminado.

   Este archivo es la ÚNICA fuente de verdad del estilo. Ninguna página
   define colores, sombras ni tipografías por su cuenta.

   Las tres reglas que gobiernan todo (docs/01):
     1. Ninguna superficie oscura es de un solo color  → degradado + filo claro
     2. La luz viene de arriba a la izquierda, siempre → sombras abajo-derecha
     3. Un solo acento por pantalla                    → --acento, no literales

   ÍNDICE
     01 · Reinicio
     02 · Tokens
     03 · Base, atmósfera y tipografía
     04 · Disposición
     05 · Superficies
     06 · Iconografía
     07 · Botones
     08 · Chips, sellos y etiquetas
     09 · Sello de latón
     10 · Precio
     11 · Marcador de posición de imagen
     12 · Tarjeta de producto
     13 · Selector de calidad AA / AAA
     14 · Cinta de confianza
     15 · Barra fija de celular
     16 · Botón flotante de WhatsApp
     17 · Formularios
     18 · Acordeón, pasos y datos
     19 · Movimiento
     20 · Galería del producto
     21 · Comparación de precio
     22 · Cuadros de exhibición · el upsell
     23 · Detalle en macro
     24 · Navegación del sitio · la landing NO la lleva
     25 · Pie de página
     26 · Accesibilidad y utilidades
     27 · Migas de pan y casillas de autorización
     28 · Tarjetas apiladas · el bloque que se queda quieto
     29 · Datos encima de la foto · la variante que Gio quiere comparar
     30 · Aire en celular
     31 · Legibilidad a la luz del día
     32 · Sección apilada
     33 · Entradas laterales
     34 · Hero de partición · la página principal
     35 · Captura de datos · el bloque y la barra discreta
     36 · Aviso de cookies
     37 · Catálogo con filtro
     38 · Menú de celular
     39 · La página principal como abrebocas
     40 · Escenarios de domótica
     41 · Comparativa de calidad AA / AAA
     42 · "Solo el cuadro"
     43 · El catálogo en celular
   ========================================================================== */


/* ==========================================================================
   01 · REINICIO
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, p,
figure, blockquote,
dl, dd,
ul, ol { margin: 0; padding: 0; }

ul[class], ol[class] { list-style: none; }

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

table {
  border-collapse: collapse;
  width: 100%;
}


/* ==========================================================================
   02 · TOKENS
   Ningún color literal fuera de este bloque.
   ========================================================================== */

:root {

  /* --- Superficies · nunca planas, siempre con degradado --------------- */
  --grafito:       #0E1013;
  --grafito-alto:  #12151A;
  --acero:         #191C21;
  --acero-claro:   #1E2228;
  --acero-alto:    #22262C;
  --linea:         rgba(255,255,255,.07);
  --linea-fuerte:  rgba(255,255,255,.14);
  --filo:          rgba(255,255,255,.12);

  /* --- Texto ----------------------------------------------------------- */
  --papel:         #F2F3F0;
  --papel-2:       #B9BEC5;
  --papel-3:       #7C838C;

  /* --- Acentos · SEÑALIZACIÓN, no decoración --------------------------- */
  --senal:         #F04E23;
  --senal-claro:   #FF6A3D;
  --senal-oscuro:  #C33A17;
  --senal-suave:   rgba(240,78,35,.12);
  --senal-medio:   rgba(240,78,35,.22);
  --senal-borde:   rgba(240,78,35,.40);
  --senal-sombra:  rgba(240,78,35,.35);

  --hielo:         #37C6E0;
  --hielo-claro:   #5BD9EF;
  --hielo-oscuro:  #1E93AC;
  --hielo-suave:   rgba(55,198,224,.12);
  --hielo-medio:   rgba(55,198,224,.22);
  --hielo-borde:   rgba(55,198,224,.40);
  --hielo-sombra:  rgba(55,198,224,.35);

  /* --- Latón · SOLO el sello de calidad AAA. Nunca en un botón. --------
     No es "amarillo": es metal. Por eso son cinco paradas de color, no una:
     reflejo, luz, sombra, rebote y filo. Un color plano se ve a plástico. */
  --laton:         #C9A227;
  --laton-luz:     #F5E08C;
  --laton-claro:   #E3C155;
  --laton-medio:   #A8841A;
  --laton-sombra:  #6E5410;
  --laton-tinta:   #2A1F03;
  --laton-suave:   rgba(201,162,39,.12);
  --laton-borde:   rgba(240,217,122,.55);

  /* --- Semántica ------------------------------------------------------- */
  --ok:            #4ADE80;
  --alerta:        #FBBF24;
  --error:         #F87171;
  --whatsapp:      #25D366;

  /* --- ACENTO ACTIVO · regla 3 ----------------------------------------- */
  --acento:        var(--senal);
  --acento-claro:  var(--senal-claro);
  --acento-oscuro: var(--senal-oscuro);
  --acento-suave:  var(--senal-suave);
  --acento-medio:  var(--senal-medio);
  --acento-borde:  var(--senal-borde);
  --acento-sombra: var(--senal-sombra);

  /* --- Sombras · regla 2 · SIEMPRE dos capas ---------------------------- */
  --sombra-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --sombra-2: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -12px rgba(0,0,0,.7);
  --sombra-3: 0 4px 8px rgba(0,0,0,.55), 0 40px 80px -16px rgba(0,0,0,.8);

  /* --- Tipografía ------------------------------------------------------ */
  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dato:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --t-hero:    clamp(2.6rem, 7vw, 5rem);
  --t-h1:      clamp(2rem, 4.5vw, 3.2rem);
  --t-h2:      clamp(1.5rem, 3vw, 2.1rem);
  --t-h3:      1.25rem;
  --t-precio:  clamp(2.2rem, 5vw, 3.4rem);
  --t-base:    1.0625rem;
  --t-small:   .9375rem;
  --t-label:   .75rem;

  --ancho-display: "wdth" 118;

  /* --- Espaciado · escala de 4 ----------------------------------------- */
  --e1:   4px;  --e2:   8px;  --e3:  12px;  --e4:  16px;  --e5:  24px;
  --e6:  32px;  --e7:  48px;  --e8:  64px;  --e9:  96px;  --e10:128px;

  --seccion: var(--e9);
  --contenedor: 1200px;
  --contenedor-estrecho: 760px;

  /* --- Forma ----------------------------------------------------------- */
  --r-tarjeta: 14px;
  --r-boton:    8px;
  --r-chip:     4px;

  /* --- Movimiento ------------------------------------------------------ */
  --curva: cubic-bezier(.2,.8,.2,1);
  --rebote: cubic-bezier(.34,1.56,.64,1);
  --v-rapida: 180ms;
  --v-media:  200ms;
  --v-lenta:  400ms;

  /* --- Alturas fijas --------------------------------------------------- */
  --alto-cinta: 30px;
  --alto-barra: 68px;
}

@media (min-width: 768px) {
  :root { --seccion: var(--e10); }
}

[data-linea="domotica"] {
  --acento:        var(--hielo);
  --acento-claro:  var(--hielo-claro);
  --acento-oscuro: var(--hielo-oscuro);
  --acento-suave:  var(--hielo-suave);
  --acento-medio:  var(--hielo-medio);
  --acento-borde:  var(--hielo-borde);
  --acento-sombra: var(--hielo-sombra);
}

[data-linea="coleccionables"] {
  --acento:        var(--senal);
  --acento-claro:  var(--senal-claro);
  --acento-oscuro: var(--senal-oscuro);
  --acento-suave:  var(--senal-suave);
  --acento-medio:  var(--senal-medio);
  --acento-borde:  var(--senal-borde);
  --acento-sombra: var(--senal-sombra);
}


/* ==========================================================================
   03 · BASE, ATMÓSFERA Y TIPOGRAFÍA
   ========================================================================== */

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--papel);
  background-color: var(--grafito);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- Capa 1 · la rejilla del plano técnico -----------------------------
   Una cuadrícula de 64 px, casi invisible, que se desvanece hacia abajo.
   No se ve conscientemente: se siente. Es lo que separa "fondo negro" de
   "mesa de taller". Va en ::before para no pelear con nada más.          */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, transparent 70%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, transparent 70%);
}

/* --- Capa 2 · la lámpara de trabajo ------------------------------------
   Entra por arriba a la izquierda (regla 2) y respira muy lento.
   No es un degradado animado de discoteca: son 20 s y un 6 % de cambio.
   Se apaga sola con prefers-reduced-motion.                              */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1100px 640px at 10% -10%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(820px 520px at 90% 6%, var(--acento-suave), transparent 62%);
  animation: respirar 20s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* --- Familias --------------------------------------------------------- */

.display,
.t-hero, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.t-hero { font-size: var(--t-hero); }
.t-h1   { font-size: var(--t-h1); }
.t-h2   { font-size: var(--t-h2); font-weight: 800; line-height: 1.08; }
.t-h3   { font-size: var(--t-h3); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

.display--normal { text-transform: none; letter-spacing: -.025em; }

/* Titular con la luz encima: el degradado va de papel puro a gris,
   como si la lámpara le diera arriba. Sutil, pero quita la sensación de
   "texto blanco pegado". */
.display--iluminado {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--papel) 42%, #A9AFB7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-dato,
.dato {
  font-family: var(--f-dato);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.etiqueta::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--acento);
  flex: none;
}

.etiqueta--simple::before { display: none; }
.etiqueta--acento { color: var(--acento); }

/* --- Texto corrido ----------------------------------------------------- */

.texto { max-width: 68ch; color: var(--papel-2); }
.texto--centrado { margin-inline: auto; }

.t-small { font-size: var(--t-small); }
.apagado { color: var(--papel-3); }
.secundario { color: var(--papel-2); }
.acentuado { color: var(--acento); }

strong, b { font-weight: 600; color: var(--papel); }

a {
  color: var(--acento);
  text-decoration-color: var(--acento-borde);
  text-underline-offset: 3px;
}

a:hover { text-decoration-color: var(--acento); }


/* ==========================================================================
   04 · DISPOSICIÓN
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--e5);
}

@media (min-width: 768px) { .contenedor { padding-inline: var(--e6); } }

.contenedor--estrecho { max-width: var(--contenedor-estrecho); }

.seccion { padding-block: var(--seccion); }
.seccion--corta { padding-block: var(--e8); }

.seccion--franja {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022) 0%, transparent 40%),
    var(--grafito-alto);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid rgba(0,0,0,.4);
}

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e7);
}

.rejilla { display: grid; gap: var(--e5); }

@media (min-width: 640px)  { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.rejilla--hero { gap: var(--e7); }

@media (min-width: 1024px) {
  .rejilla--hero { grid-template-columns: 55fr 45fr; align-items: start; gap: var(--e8); }
}

.fila { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

.pila { display: flex; flex-direction: column; }
.pila--2 { gap: var(--e2); }
.pila--3 { gap: var(--e3); }
.pila--4 { gap: var(--e4); }
.pila--5 { gap: var(--e5); }
.pila--6 { gap: var(--e6); }

.separador {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--linea-fuerte) 20%, var(--linea-fuerte) 80%, transparent);
  margin-block: var(--e6);
}


/* ==========================================================================
   05 · SUPERFICIES · regla 1
   ========================================================================== */

.superficie {
  position: relative;
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
}

.superficie--alta {
  background: linear-gradient(180deg, #262A31 0%, var(--acero-alto) 100%);
  border-top-color: rgba(255,255,255,.16);
  box-shadow: var(--sombra-2);
}

.superficie--baja {
  background: linear-gradient(180deg, #14171B 0%, #171A1F 100%);
  border-color: rgba(0,0,0,.5);
  border-top-color: rgba(0,0,0,.6);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}

.superficie--acento {
  border-color: var(--acento-borde);
  border-top-color: var(--acento-borde);
  background:
    linear-gradient(180deg, var(--acento-suave) 0%, transparent 55%),
    linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
}

.superficie__cuerpo { padding: var(--e5); }

@media (min-width: 768px) { .superficie__cuerpo { padding: var(--e6); } }

/* Brillo especular del filo superior: la línea de luz sobre el metal. */
.superficie--pulida::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 22%, rgba(255,255,255,.06) 70%, transparent);
  pointer-events: none;
}


/* ==========================================================================
   06 · ICONOGRAFÍA
   Íconos dibujados a mano en SVG, con trazo de 1,5 px para que combinen
   con el peso de la tipografía. Se usan con <svg class="ico"><use .../></svg>
   sobre el sprite que imprime inc/iconos.php.
   ========================================================================== */

.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
}

.ico--sm { width: 14px; height: 14px; }
.ico--md { width: 18px; height: 18px; }
.ico--lg { width: 24px; height: 24px; }
.ico--xl { width: 32px; height: 32px; }

.ico--relleno { fill: currentColor; stroke: none; }
.ico--acento  { color: var(--acento); }


/* ==========================================================================
   07 · BOTONES
   ========================================================================== */

.btn {
  --btn-alto: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--btn-alto);
  padding-inline: var(--e5);
  border: 1px solid transparent;
  border-radius: var(--r-boton);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--v-rapida) var(--curva),
    box-shadow var(--v-rapida) var(--curva),
    background-color var(--v-rapida) var(--curva),
    border-color var(--v-rapida) var(--curva);
}

@media (min-width: 768px) { .btn { --btn-alto: 56px; } }

.btn--bloque { display: flex; width: 100%; }

.btn > * { position: relative; z-index: 1; }

/* --- Principal --------------------------------------------------------- */

.btn-principal {
  background: linear-gradient(180deg, var(--acento-claro) 0%, var(--acento) 100%);
  color: var(--grafito);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 4px 14px var(--acento-sombra);
}

.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 10px 28px var(--acento-sombra);
}

.btn-principal:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px var(--acento-sombra);
}

/* --- Secundario · NUNCA dos principales juntos ------------------------- */

.btn-secundario {
  background: transparent;
  border-color: var(--linea-fuerte);
  color: var(--papel);
}

.btn-secundario:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-2px);
}

.btn-secundario:active { transform: translateY(1px); }

/* --- WhatsApp ---------------------------------------------------------- */

.btn-whatsapp {
  background: linear-gradient(180deg, #3BE07C 0%, var(--whatsapp) 100%);
  color: #06301A;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 14px rgba(37,211,102,.3);
}

.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.34); }

/* --- Fantasma ---------------------------------------------------------- */

.btn-fantasma {
  background: rgba(255,255,255,.05);
  border-color: var(--linea);
  color: var(--papel-2);
}

.btn-fantasma:hover { background: rgba(255,255,255,.09); color: var(--papel); }

/* --- Tamaños ----------------------------------------------------------- */

.btn--sm { --btn-alto: 40px; padding-inline: var(--e4); font-size: .8125rem; }
.btn--lg { --btn-alto: 64px; font-size: 1.0625rem; padding-inline: var(--e6); }

/* --- Estados ----------------------------------------------------------- */

.btn:disabled,
.btn[aria-disabled="true"],
.btn--inactivo {
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* --- LLAMADA DE ATENCIÓN · cada 6 s, no continua ----------------------
   Dos cosas a la vez y luego 5,4 s de silencio absoluto:
     · el botón da un salto corto con rebote
     · un destello de luz barre la superficie de izquierda a derecha
   El barrido es lo que hace que se note de reojo sin ser molesto.       */

.btn--pulso { animation: pulso-boton 6s var(--curva) infinite; }

@keyframes pulso-boton {
  0%, 88%, 100% { transform: translateY(0)    scale(1); }
  90%           { transform: translateY(-3px) scale(1.025); }
  93%           { transform: translateY(1px)  scale(.992); }
  96%           { transform: translateY(0)    scale(1.006); }
}

.btn--pulso::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: destello-boton 6s linear infinite;
  pointer-events: none;
}

@keyframes destello-boton {
  0%, 86%   { left: -60%; }
  97%, 100% { left: 130%; }
}

/* Al pasar el cursor, el destello no espera: responde de una. */
.btn--pulso:hover::after { animation: destello-boton 900ms linear infinite; }


/* ==========================================================================
   08 · CHIPS, SELLOS Y ETIQUETAS
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--e1) var(--e2);
  border-radius: var(--r-chip);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--linea);
  border-top-color: var(--linea-fuerte);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--papel-2);
  white-space: nowrap;
}

.chip .ico { color: var(--acento); }

.chip--acento {
  background: var(--acento-suave);
  border-color: var(--acento-borde);
  color: var(--acento);
}

.chip--descuento {
  background: linear-gradient(180deg, var(--acento-claro), var(--acento));
  border-color: transparent;
  color: var(--grafito);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}

.chip--ok     { background: rgba(74,222,128,.12);  border-color: rgba(74,222,128,.35);  color: var(--ok); }
.chip--alerta { background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.35);  color: var(--alerta); }
.chip--error  { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: var(--error); }

.chip--ok .ico, .chip--alerta .ico, .chip--error .ico, .chip--acento .ico { color: currentColor; }

/* --- FICHA BAJO LA FOTO ------------------------------------------------
   Los datos NO van encima de la imagen. Encima siempre pasan dos cosas:
   le quitan protagonismo al producto —que es el 70 % de la venta en esta
   categoría— y su legibilidad depende de qué tan clara salga la foto. Una
   foto clara un día, otra oscura al siguiente, y el mismo chip se lee bien
   en una y mal en la otra.

   Van en una tira pegada al borde inferior de la foto, dentro del mismo
   marco: la imagen queda 100 % limpia, los datos quedan a cero píxeles
   —se leen en la misma mirada— y el contraste es siempre el mismo.       */

.ficha-foto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--linea);
  border-top: 0;
  border-radius: 0 0 var(--r-tarjeta) var(--r-tarjeta);
  background: linear-gradient(180deg, #1B1F25 0%, #16191E 100%);
  overflow: hidden;
}

.ficha-foto__dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--e3) var(--e2);
  text-align: center;
}

.ficha-foto__dato + .ficha-foto__dato { border-left: 1px solid var(--linea); }
.ficha-foto__dato .ico { width: 15px; height: 15px; color: var(--acento); margin-bottom: 2px; }

.ficha-foto__valor {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: .9375rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  letter-spacing: -.01em;
}

.ficha-foto__rotulo {
  font-family: var(--f-dato);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--papel-3);
}

@media (min-width: 480px) { .ficha-foto__valor { font-size: 1.0625rem; } }

/* La foto pierde el redondeo de abajo para fundirse con la tira */
.galeria__principal--con-ficha { border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0; }

/* Las etiquetas y el stock SÍ van encima de la foto en las tarjetas del
   catálogo, porque ahí no hay sitio debajo. Llevan vidrio y sombra en el
   texto para que se lean con cualquier imagen. */
.tarjeta__etiquetas .etiqueta-linea,
.tarjeta__etiquetas .stock {
  background: rgba(14,16,19,.48);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

/* Etiqueta "Desde" encima del precio */
.precio__desde {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel-3);
}

/* Garantías junto al botón · bajan la ansiedad justo al decidir */
.garantia-linea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e4);
  flex-wrap: wrap;
  padding-top: var(--e3);
}

.garantia-linea span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-dato);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.garantia-linea .ico { width: 13px; height: 13px; color: var(--ok); }

/* Medios de pago aceptados, dentro de cada opción */
.medios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e2); }

.medio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--e2);
  border-radius: var(--r-chip);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--papel-2);
}

.medio .ico { width: 12px; height: 12px; color: var(--acento); }
.medio--costo { border-color: rgba(251,191,36,.3); color: var(--alerta); }

/* --- Chip de filtro · redondeo completo permitido ---------------------- */

.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 38px;
  padding: 0 var(--e4);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--linea);
  border-top-color: var(--linea-fuerte);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-2);
  cursor: pointer;
  transition: all var(--v-rapida) var(--curva);
}

.chip-filtro:hover { background: rgba(255,255,255,.09); color: var(--papel); }

.chip-filtro[aria-selected="true"],
.chip-filtro.esta-activo {
  background: var(--acento-suave);
  border-color: var(--acento-borde);
  color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento-suave), 0 4px 12px var(--acento-suave);
}

/* --- Indicador de stock · redondeo completo permitido ------------------ */

.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--e3) 3px var(--e2);
  border-radius: 999px;
  background: rgba(14,16,19,.78);
  border: 1px solid var(--linea-fuerte);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--papel-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

.stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}

.stock--ok      { color: var(--ok);     border-color: rgba(74,222,128,.3); }
.stock--bajo    { color: var(--alerta); border-color: rgba(251,191,36,.3); }
.stock--agotado { color: var(--error);  border-color: rgba(248,113,113,.3); }
.stock--pronto  { color: var(--papel-2); }

/* El punto de "disponible" late despacio: está vivo, hay unidades. */
.stock--ok::before { animation: latir 2.4s ease-in-out infinite; }

@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  50%      { box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}

/* --- Etiqueta de línea ------------------------------------------------- */

.etiqueta-linea {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--e1) var(--e2);
  border-radius: var(--r-chip);
  background: rgba(14,16,19,.8);
  border: 1px solid var(--acento-borde);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.etiqueta-linea .ico { width: 12px; height: 12px; }

/* --- Sello Próximamente ------------------------------------------------ */

.sello-pronto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--e2) var(--e3);
  border-radius: var(--r-chip);
  background: rgba(14,16,19,.86);
  border: 1px solid var(--linea-fuerte);
  border-top-color: rgba(255,255,255,.22);
  font-family: var(--f-dato);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra-1);
}


/* ==========================================================================
   09 · SELLO DE LATÓN · el único sitio del sistema con este color
   --------------------------------------------------------------------------
   Qué es el latón: la aleación dorada de la que se hacen las placas
   conmemorativas y los instrumentos de precisión. NO es "amarillo".
   Un color plano se lee a plástico; lo que lo hace metal son cuatro cosas:
     1. Degradado diagonal con cinco paradas (reflejo → luz → sombra → rebote)
     2. Filo claro arriba y filo oscuro abajo, dibujados por dentro
     3. Texto en tinta oscura, no blanco: sobre metal claro se graba, no se pinta
     4. Un halo cálido muy tenue, como si la lámpara le rebotara
   ========================================================================== */

/* Latón ENVEJECIDO, no oro pulido.
   Un dorado brillante sobre fondo oscuro grita y rompe la página entera:
   se lleva la mirada que debería ir al producto y al botón de comprar.
   Esta versión es una placa de latón oscurecida por el tiempo — se lee
   como metal noble, pero vive DENTRO del sistema en vez de encima de él. */
.sello-aaa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--e3) 5px var(--e2);
  border-radius: var(--r-chip);
  background:
    linear-gradient(160deg,
      rgba(201,162,39,.26) 0%,
      rgba(168,132,26,.18) 46%,
      rgba(110,84,16,.14) 100%);
  border: 1px solid rgba(201,162,39,.42);
  border-top-color: rgba(227,193,85,.5);
  box-shadow:
    0 1px 0 rgba(245,224,140,.14) inset,
    0 -1px 0 rgba(0,0,0,.28) inset;
  font-family: var(--f-dato);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D9BC63;
  white-space: nowrap;
}

.sello-aaa .ico {
  width: 13px;
  height: 13px;
  color: #D9BC63;
  stroke-width: 1.8;
}

/* Versión grande, para la tarjeta de calidad AAA: medallón troquelado */
.sello-aaa--medallon {
  padding: var(--e2) var(--e4) var(--e2) var(--e3);
  font-size: 12px;
  letter-spacing: .16em;
}

.sello-aaa--medallon .ico { width: 16px; height: 16px; }

/* Marco de latón alrededor de la tarjeta AAA seleccionada */
.borde-laton {
  border-color: var(--laton-borde) !important;
  box-shadow:
    0 0 0 1px rgba(201,162,39,.18),
    var(--sombra-2),
    0 0 32px rgba(201,162,39,.14) !important;
}


/* ==========================================================================
   10 · PRECIO
   ========================================================================== */

.precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e3); }

/* --- "DESDE" · pedido por Gio el 03/09/2026 ---------------------------
   Va en el acento y en mayúsculas de dato, no en gris pequeño: su trabajo
   es que se LEA. El producto tiene dos calidades con precios distintos y
   esta palabra es la que evita que la persona se ancle en la cifra baja y
   sienta que le cambiaron el precio al entrar a la ficha.

   flex-basis 100% en celular: se pone en su propio renglón, encima del
   precio, para que no le robe ancho a la cifra —que es lo que de verdad
   tiene que dominar. */
.precio__desde {
  flex: 0 0 100%;
  font-family: var(--f-dato);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--acento);
}

@media (min-width: 480px) {
  .precio__desde { flex: 0 0 auto; }
}

.precio--sm .precio__desde { font-size: .6875rem; letter-spacing: .12em; }

.precio__antes {
  font-family: var(--f-dato);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--papel-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.precio__ahora {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: var(--t-precio);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  transition: color var(--v-media) var(--curva);
}

.precio__ahora.esta-cambiando { color: var(--acento); }

.precio--sm .precio__ahora { font-size: 1.5rem; }
.precio--sm .precio__antes { font-size: .8125rem; }


/* ==========================================================================
   11 · MARCADOR DE POSICIÓN DE IMAGEN
   ========================================================================== */

.media { position: relative; overflow: hidden; background: var(--grafito); }

.media--4-3  { aspect-ratio: 4 / 3; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--1-1  { aspect-ratio: 1 / 1; }
.media--21-9 { aspect-ratio: 21 / 9; }

.media > img,
.media > video { width: 100%; height: 100%; object-fit: cover; }

.marcador {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  width: 100%;
  height: 100%;
  padding: var(--e4);
  text-align: center;
  background-color: #15181D;
  background-image:
    radial-gradient(420px 260px at 30% 20%, rgba(255,255,255,.05), transparent 70%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px,
      transparent 1px, transparent 9px);
  color: var(--papel-3);
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.marcador .ico { width: 28px; height: 28px; opacity: .55; }

.marcador__nota {
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(124,131,140,.72);
  text-transform: none;
}


/* ==========================================================================
   12 · TARJETA DE PRODUCTO
   ========================================================================== */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--v-rapida) var(--curva),
    box-shadow var(--v-rapida) var(--curva),
    border-top-color var(--v-rapida) var(--curva);
}

.tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-top-color: rgba(255,255,255,.22);
}

.tarjeta__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grafito);
  border-bottom: 1px solid var(--linea);
}

.tarjeta__media > img,
.tarjeta__media > video { width: 100%; height: 100%; object-fit: cover; }

/* Viñeta: oscurece las esquinas de la foto para que el producto salga
   del fondo y las etiquetas siempre se lean, con foto clara o con foto
   oscura. Es lo que hace que la rejilla se vea pareja aunque las fotos
   vengan de días distintos. */
.tarjeta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,16,19,.5) 0%, transparent 28%, transparent 62%, rgba(14,16,19,.42) 100%);
}

.tarjeta__etiquetas {
  position: absolute;
  inset: var(--e3) var(--e3) auto var(--e3);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e2);
  pointer-events: none;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
  flex: 1;
}

@media (min-width: 768px) { .tarjeta__cuerpo { padding: var(--e5); } }

.tarjeta__nombre {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--papel);
  text-wrap: balance;
}

.tarjeta__ficha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--papel-3);
  font-variant-numeric: tabular-nums;
}

.tarjeta__ficha .ico { width: 13px; height: 13px; color: var(--papel-3); }

.tarjeta__ficha span { display: inline-flex; align-items: center; gap: 5px; }

.tarjeta__pie { margin-top: auto; padding-top: var(--e3); }

.tarjeta--agotado .tarjeta__media > .marcador,
.tarjeta--agotado .tarjeta__media > img { filter: grayscale(1); opacity: .5; }
.tarjeta--agotado .precio__ahora { color: var(--papel-2); }

.tarjeta--pronto .tarjeta__media > .marcador,
.tarjeta--pronto .tarjeta__media > img { filter: grayscale(.85) brightness(.7); }

.tarjeta__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(14,16,19,.25) 0%, rgba(14,16,19,.72) 100%);
  pointer-events: none;
}


/* ==========================================================================
   13 · SELECTOR DE CALIDAD AA / AAA
   La escogida no cambia de color: cambia de TAMAÑO y de ALTURA.
   Se sale de la fila y se acerca. Eso se lee de reojo; un borde no.
   ========================================================================== */

.calidades {
  display: grid;
  gap: var(--e4);
  /* Sitio para que la seleccionada crezca sin recortarse contra el borde */
  padding: var(--e2);
  margin: calc(var(--e2) * -1);
}

@media (min-width: 480px) { .calidades { grid-template-columns: repeat(2, 1fr); } }

.calidad {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5) var(--e4) var(--e4);
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  transition:
    transform var(--v-media) var(--rebote),
    border-color var(--v-rapida) var(--curva),
    box-shadow var(--v-media) var(--curva),
    background-color var(--v-rapida) var(--curva);
}

.calidad:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }

.calidad__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }

/* La franja de color en el filo de arriba. En reposo no existe;
   al seleccionar aparece a todo el ancho. */
.calidad::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  border-radius: var(--r-tarjeta) 0 0 0;
  background: linear-gradient(90deg, var(--acento-claro), var(--acento));
  transition: width var(--v-lenta) var(--curva);
}

.calidad__nombre {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--papel);
}

.calidad__precio {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  transition: font-size var(--v-media) var(--curva), color var(--v-media) var(--curva);
}

.calidad__antes {
  font-family: var(--f-dato);
  font-size: 12px;
  color: var(--papel-3);
  text-decoration: line-through;
}

.calidad__beneficios {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-small);
  color: var(--papel-2);
}

/* CORREGIDO EL 02/09/2026 · ESTABA display:flex Y PARTÍA LAS FRASES.
   Con flex, CADA hijo del span es una columna. Mientras las viñetas eran
   tres palabras sueltas no se notó, pero al meter una en negrilla —"te
   devolvemos TODO EL DINERO QUE PAGASTE, sin descuentos"— el navegador
   hacía tres columnas y el texto quedaba ilegible. Se veía en el bloque
   de la devolución y en la política de datos.

   Con block + sangría y el ícono posicionado encima, el texto fluye como
   texto normal y admite negrillas, enlaces y lo que sea. */
.calidad__beneficios span {
  display: block;
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}

.calidad__beneficios .ico {
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  color: var(--acento);
}

/* --- SELECCIONADA -----------------------------------------------------
   Cinco señales a la vez, porque una sola no se nota:
     1. Crece un 3 % y sube 4 px  → parece más grande y más cerca
     2. Franja de acento arriba, a todo el ancho
     3. Tono superior del degradado más fuerte
     4. Borde de acento + halo de color alrededor
     5. El precio crece y se pone en el acento                            */

.calidad:has(.calidad__input:checked),
.calidad.esta-seleccionada {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--acento-borde);
  border-top-color: var(--acento-borde);
  background:
    linear-gradient(180deg, var(--acento-medio) 0%, var(--acento-suave) 30%, transparent 72%),
    linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  box-shadow:
    0 0 0 1px var(--acento-borde),
    var(--sombra-3),
    0 0 40px var(--acento-suave);
  z-index: 2;
}

.calidad:has(.calidad__input:checked)::before,
.calidad.esta-seleccionada::before { width: 100%; border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0; }

.calidad:has(.calidad__input:checked) .calidad__precio,
.calidad.esta-seleccionada .calidad__precio { font-size: 1.75rem; color: var(--acento); }

/* La marca de verificación en la esquina */
.calidad__marca {
  position: absolute;
  top: var(--e4);
  right: var(--e3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--grafito);
  box-shadow: 0 0 14px var(--acento-sombra);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--v-media) var(--rebote), transform var(--v-media) var(--rebote);
}

.calidad__marca .ico { width: 14px; height: 14px; stroke-width: 2.6; }

.calidad:has(.calidad__input:checked) .calidad__marca,
.calidad.esta-seleccionada .calidad__marca { opacity: 1; transform: scale(1); }

/* La AAA seleccionada usa el latón en el marco, no el acento */
.calidad--premium:has(.calidad__input:checked),
.calidad--premium.esta-seleccionada {
  border-color: rgba(201,162,39,.42);
  background:
    linear-gradient(180deg, rgba(201,162,39,.14) 0%, rgba(201,162,39,.05) 32%, transparent 72%),
    linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  box-shadow:
    0 0 0 1px rgba(201,162,39,.32),
    var(--sombra-3),
    0 0 32px rgba(201,162,39,.10);
}

.calidad--premium:has(.calidad__input:checked)::before,
.calidad--premium.esta-seleccionada::before {
  background: linear-gradient(90deg, #D9BC63, rgba(168,132,26,.7));
}

.calidad--premium:has(.calidad__input:checked) .calidad__precio,
.calidad--premium.esta-seleccionada .calidad__precio { color: #D9BC63; }

.calidad--premium .calidad__marca {
  background: linear-gradient(180deg, #D9BC63, #A8841A);
  color: #1A1305;
  box-shadow: 0 0 12px rgba(201,162,39,.3);
}

.calidad--premium .calidad__beneficios .ico { color: #C9A961; }

.calidad:has(.calidad__input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 4px; }

/* Agotada */
.calidad--agotada { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.calidad--agotada:hover { transform: none; box-shadow: var(--sombra-1); }

/* --- Tabla comparativa ------------------------------------------------- */

.tabla-comparativa {
  width: 100%;
  font-size: var(--t-small);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: var(--e3) var(--e4);
  text-align: left;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tabla-comparativa tr:last-child th,
.tabla-comparativa tr:last-child td { border-bottom: 0; }

.tabla-comparativa thead th {
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-3);
  background: rgba(255,255,255,.03);
  border-bottom-color: var(--linea-fuerte);
}

.tabla-comparativa thead th:last-child { color: var(--laton-claro); }

.tabla-comparativa tbody th {
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--papel-3);
  width: 34%;
}

.tabla-comparativa td { color: var(--papel-2); }

.tabla-scroll { overflow-x: auto; }


/* ==========================================================================
   14 · CINTA DE CONFIANZA
   Va en TODAS las páginas, arriba de todo, dentro de inc/nav.php.
   Sigue siendo una barra de servicio —no compite con el titular— pero
   ahora cada frase lleva su ícono y el texto se lee de verdad.
   ========================================================================== */

/* --------------------------------------------------------------------------
   POR QUÉ ESTE COLOR Y NO OTRO

   La cinta tiene un trabajo psicológico concreto: bajarle el miedo a alguien
   que llegó de un anuncio y no conoce la marca. Ese trabajo lo hace la
   PERMANENCIA (está siempre ahí, no se va al bajar), no el grito.

   · Verde puro daría "seguridad", pero aquí el verde ya es WhatsApp y
     confundiría dos cosas distintas.
   · Naranja pleno de fondo la volvería un botón, y competiría de tú a tú
     con el de comprar. Regla 3: un solo acento por pantalla, y ese acento
     le pertenece a la acción de compra.
   · La solución es el naranja en MUY baja opacidad sobre el vidrio: el ojo
     registra "esta franja es de la marca y es importante" en la periferia,
     pero la mirada no se queda ahí. La atención sigue yendo al producto.

   Cambiar el tinte es cambiar --cinta-tinte y --cinta-borde, nada más.
   -------------------------------------------------------------------------- */
.cinta {
  --cinta-tinte: rgba(240,78,35,.13);
  --cinta-borde: rgba(240,78,35,.30);

  position: sticky;
  top: 0;
  z-index: 45;
  height: var(--alto-cinta);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--cinta-tinte) 0%, rgba(240,78,35,.05) 100%),
    rgba(16,18,23,.62);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--cinta-borde);
}

/* En domótica la cinta toma el hielo, para no romper la línea */
[data-linea="domotica"] .cinta {
  --cinta-tinte: rgba(55,198,224,.13);
  --cinta-borde: rgba(55,198,224,.30);
}

/* Las frases se desplazan en bucle continuo. Al pasar el cursor se detienen
   para poder leerlas completas. */
.cinta__pista {
  display: flex;
  flex: none;
  align-items: center;
  width: max-content;
  animation: cinta-desplazar 38s linear infinite;
}

.cinta:hover .cinta__pista { animation-play-state: paused; }

.cinta__grupo { display: flex; align-items: center; flex: none; }

.cinta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: var(--e4);
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--papel);
  white-space: nowrap;
}

.cinta__item .ico { width: 13px; height: 13px; color: var(--senal-claro); stroke-width: 1.7; }

/* El respaldo es el argumento más fuerte que hay: va en latón apagado */
.cinta__item--fuerte .ico { color: #D9BC63; }
.cinta__item--fuerte b { font-weight: 600; color: #D9BC63; }

/* Separador entre frases */
.cinta__item::after {
  content: "";
  width: 3px;
  height: 3px;
  margin-left: var(--e4);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  flex: none;
}

@keyframes cinta-desplazar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Con movimiento nunca desborda, así que todas las frases se muestran
   siempre, también en celular. */
.cinta__item--md,
.cinta__item--lg { display: inline-flex; }


/* ==========================================================================
   15 · BARRA FIJA DE CELULAR
   ========================================================================== */

/* --------------------------------------------------------------------------
   UNA SOLA BARRA, ABAJO — no dos

   La tentación es poner un resumen arriba y el botón abajo. En un celular
   normal la pantalla útil son ~660 px: cinta (30) + resumen (52) + botón
   (68) = 150 px de marcos, el 23 % de la pantalla, antes de que el cliente
   vea un solo producto.

   Esta barra lleva TODO —carro, calidad, cuadro, total y cuánto paga hoy—
   en un solo bloque abajo, que es donde está el pulgar. Y el botón viaja
   con la información: la decisión y la acción quedan a un centímetro una
   de la otra, en vez de separadas por toda la pantalla.
   -------------------------------------------------------------------------- */
.barra-compra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(28,32,38,.97) 0%, rgba(18,21,25,.99) 100%);
  border-top: 1px solid var(--acento-borde);
  box-shadow: 0 -2px 4px rgba(0,0,0,.5), 0 -24px 48px -12px rgba(0,0,0,.75);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* Filo de acento arriba: marca que esta franja es la zona de decisión */
.barra-compra::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acento) 30%, var(--acento) 70%, transparent);
  opacity: .5;
}

.barra-compra__interior {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: var(--e2) var(--e3);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
}

/* Lo que llevas escogido. Se desliza a lo ancho si no cabe, sin barra. */
.bc-seleccion {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bc-seleccion::-webkit-scrollbar { display: none; }

.bc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 3px var(--e2);
  border-radius: var(--r-chip);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--papel-2);
  white-space: nowrap;
}

.bc-chip .ico { width: 12px; height: 12px; color: var(--acento); flex: none; }
.bc-chip b { color: var(--papel); font-weight: 600; }
.bc-chip--vacio { opacity: .5; }
.bc-chip--vacio .ico { color: var(--papel-3); }

.bc-accion { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

.bc-total { display: flex; flex-direction: column; line-height: 1.1; flex: none; }

.bc-total > span {
  font-family: var(--f-dato);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.bc-total b {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  transition: color var(--v-media) var(--curva);
}

.bc-total b.esta-cambiando { color: var(--acento); }

.bc-total small {
  font-family: var(--f-dato);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--papel-3);
}

.barra-compra .btn { flex: 1; max-width: 60%; }

@media (min-width: 900px) {
  .barra-compra__interior {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--e5);
  }
  .bc-seleccion { flex: 1; overflow: visible; }
  .bc-chip { font-size: 11px; padding: 4px var(--e3); }
  .bc-accion { flex: none; gap: var(--e5); }
  .barra-compra .btn { max-width: none; min-width: 240px; }
}

/* Espacio al final del documento para que la barra no tape el pie */
.hay-barra-fija { padding-bottom: calc(var(--alto-barra) + var(--e6)); }


/* ==========================================================================
   16 · BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.flotante-wa {
  position: fixed;
  right: var(--e4);
  bottom: var(--e4);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3BE07C 0%, var(--whatsapp) 100%);
  color: #06301A;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 4px 14px rgba(37,211,102,.35), 0 12px 32px -8px rgba(0,0,0,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.94);
  transition:
    opacity var(--v-lenta) var(--curva),
    transform var(--v-lenta) var(--curva),
    visibility var(--v-lenta) var(--curva),
    bottom var(--v-media) var(--curva);
}

.flotante-wa.esta-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.flotante-wa:hover { transform: translateY(-2px) scale(1.04); }
.flotante-wa svg { width: 28px; height: 28px; }

.hay-barra-fija .flotante-wa {
  bottom: calc(var(--alto-barra) + var(--e4) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .hay-barra-fija .flotante-wa { bottom: var(--e5); }
  .flotante-wa { right: var(--e5); bottom: var(--e5); }
}


/* ==========================================================================
   17 · FORMULARIOS
   ========================================================================== */

.campo { display: flex; flex-direction: column; gap: 6px; }

.campo__rotulo {
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.campo__rotulo .req { color: var(--acento); }

.campo__control {
  width: 100%;
  min-height: 52px;
  padding: var(--e3) var(--e4);
  background: linear-gradient(180deg, #14171B 0%, #171A1F 100%);
  border: 1px solid var(--linea);
  border-top-color: rgba(0,0,0,.5);
  border-radius: var(--r-boton);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  color: var(--papel);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  transition: border-color var(--v-rapida) var(--curva), box-shadow var(--v-rapida) var(--curva);
}

textarea.campo__control { min-height: 96px; resize: vertical; }

.campo__control::placeholder { color: var(--papel-3); }
.campo__control:hover { border-color: var(--linea-fuerte); }

.campo__control:focus {
  outline: none;
  border-color: var(--acento-borde);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px var(--acento-suave);
}

.campo__ayuda { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--papel-3); }
.campo__ayuda .ico { width: 13px; height: 13px; }

.campo--error .campo__control { border-color: rgba(248,113,113,.55); }
.campo--error .campo__ayuda   { color: var(--error); }
.campo--ok .campo__control { border-color: rgba(74,222,128,.45); }
.campo--ok .campo__ayuda   { color: var(--ok); }

.cupon { display: flex; gap: var(--e2); }
.cupon .campo__control { flex: 1; }

/* --- Opción de pago ---------------------------------------------------- */

.opcion-pago {
  position: relative;
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  cursor: pointer;
  transition:
    border-color var(--v-rapida) var(--curva),
    background-color var(--v-rapida) var(--curva),
    transform var(--v-media) var(--rebote),
    box-shadow var(--v-media) var(--curva);
}

.opcion-pago:hover { border-top-color: rgba(255,255,255,.22); }

.opcion-pago__input { position: absolute; opacity: 0; width: 0; height: 0; }

.opcion-pago__marca {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  background: #14171B;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  position: relative;
}

.opcion-pago:has(.opcion-pago__input:checked),
.opcion-pago.esta-seleccionada {
  transform: scale(1.015);
  border-color: var(--acento-borde);
  border-top-color: var(--acento-borde);
  background:
    linear-gradient(180deg, var(--acento-medio) 0%, var(--acento-suave) 34%, transparent 74%),
    linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  box-shadow: 0 0 0 1px var(--acento-borde), var(--sombra-2), 0 0 28px var(--acento-suave);
}

.opcion-pago:has(.opcion-pago__input:checked) .opcion-pago__marca::after,
.opcion-pago.esta-seleccionada .opcion-pago__marca::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--acento);
  box-shadow: 0 0 10px var(--acento-sombra);
}

.opcion-pago:has(.opcion-pago__input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 3px; }

.opcion-pago__titulo {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--papel);
}

.opcion-pago__nota { font-size: var(--t-small); color: var(--papel-2); }

/* --- Resumen ----------------------------------------------------------- */

.resumen { display: flex; flex-direction: column; gap: var(--e2); }

.resumen__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  font-size: var(--t-small);
  color: var(--papel-2);
}

.resumen__fila dt { color: var(--papel-3); }

.resumen__fila dd {
  margin: 0;
  font-family: var(--f-dato);
  font-variant-numeric: tabular-nums;
  color: var(--papel-2);
}

.resumen__fila--descuento dd { color: var(--ok); }

.resumen__fila--total {
  padding-top: var(--e3);
  border-top: 1px solid var(--linea-fuerte);
  font-size: var(--t-base);
}

.resumen__fila--total dt { color: var(--papel); font-weight: 600; }

.resumen__fila--total dd {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--papel);
}


/* ==========================================================================
   18 · ACORDEÓN, PASOS Y DATOS
   ========================================================================== */

.acordeon { border-bottom: 1px solid var(--linea); }

.acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.005em;
  color: var(--papel);
  transition: color var(--v-rapida) var(--curva);
}

.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--acento); }

.acordeon summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  color: var(--papel-3);
  transition: transform var(--v-media) var(--curva), color var(--v-rapida) var(--curva);
}

.acordeon[open] summary::after { transform: rotate(45deg); color: var(--acento); }

.acordeon__cuerpo { padding-bottom: var(--e5); max-width: 68ch; color: var(--papel-2); }

/* --- Pasos ------------------------------------------------------------- */

.pasos { display: grid; gap: var(--e4); }

@media (min-width: 768px) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e5) var(--e4) var(--e4);
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* La franja de color arriba conecta un paso con el siguiente y da la
   sensación de avance. Sin ella los cuatro se leen como cuatro cajas
   sueltas, que es exactamente lo que se sentía plano. */
.paso::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acento) 0%, var(--acento-suave) 100%);
}

.paso__cabeza { display: flex; align-items: center; gap: var(--e3); }

.paso__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  font-family: var(--f-dato);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}

.paso__titulo {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--papel);
}

.paso__nota { font-size: var(--t-small); color: var(--papel-2); }

/* --- Dato grande ------------------------------------------------------- */

.dato-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding: var(--e5) var(--e4);
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  text-align: center;
}

.dato-grande .ico { width: 26px; height: 26px; color: var(--acento); }

.dato-grande__valor {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  letter-spacing: -.02em;
}

.dato-grande__rotulo {
  font-family: var(--f-dato);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--papel-3);
}


/* ==========================================================================
   19 · MOVIMIENTO
   ========================================================================== */

.rotativo { display: inline-grid; vertical-align: bottom; color: var(--acento); }

/* El fundido no es simétrico a propósito: la palabra que sale se va en
   220 ms y la que entra espera 180 ms. Si cruzaran a la vez se leerían
   superpuestas y se vería sucio. */
.rotativo__palabra {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 220ms var(--curva);
  white-space: nowrap;
}

.rotativo__palabra.esta-visible { opacity: 1; transition: opacity 380ms var(--curva) 180ms; }

@supports (animation-timeline: view()) {
  .aparece {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 40% entry 100%;
  }

  /* CORREGIDO EL 02/09/2026 · ERROR GRAVE QUE DEJABA MEDIA PÁGINA EN BLANCO.
     En una animación guiada por el scroll, animation-delay en milisegundos
     NO se aplica como en una animación normal: deja el elemento congelado en
     el fotograma inicial, que aquí es opacity:0. Las tarjetas 2, 3 y 4 de
     "Por qué cuesta lo que cuesta" quedaban invisibles PERO seguían ocupando
     su espacio: dos pantallas de vacío en el celular.

     El escalonado se hace corriendo el RANGO, no con retardo. */
  .aparece--r1,
  .aparece--r2,
  .aparece--r3,
  .aparece--r4 { animation-delay: 0s; }

    .aparece  { animation-range: entry 40% entry 100%; }
  .aparece--r2 { animation-range: entry 45% entry 100%; }
  .aparece--r3 { animation-range: entry 50% entry 100%; }
  .aparece--r4 { animation-range: entry 55% entry 100%; }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fuera del @supports el retardo sí es válido: ahí no hay animación de
   scroll y estas clases no hacen nada, pero se dejan por si algún día se
   usa `aparecer` con una animación normal. */
@supports not (animation-timeline: view()) {
  .aparece--r1 { animation-delay: 0ms; }
  .aparece--r2 { animation-delay: 80ms; }
  .aparece--r3 { animation-delay: 160ms; }
  .aparece--r4 { animation-delay: 240ms; }
}

.progreso-scroll {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 2px;
  background: linear-gradient(90deg, var(--acento-oscuro), var(--acento-claro));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .progreso-scroll { animation: progresar linear both; animation-timeline: scroll(); }
}

@keyframes progresar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* ==========================================================================
   20 · GALERÍA DEL PRODUCTO
   La foto principal cambia al PASAR el cursor sobre una miniatura, no al
   hacer clic. Nada de carrusel automático: le quita el control a quien
   está mirando, que es justo quien está a punto de comprar.
   ========================================================================== */

.galeria { display: flex; flex-direction: column; gap: var(--e3); }

.galeria__principal {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-tarjeta);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  background: linear-gradient(180deg, #16191E 0%, #121519 100%);
  box-shadow: var(--sombra-2);
}

.galeria__principal > img,
.galeria__principal > video { width: 100%; height: 100%; object-fit: cover; }

.galeria__minis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--e2);
}

.mini {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-chip);
  border: 1px solid var(--linea);
  background: #15181D;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}

.mini > img { width: 100%; height: 100%; object-fit: cover; }
.mini .marcador { font-size: 9px; letter-spacing: .06em; }
.mini .marcador .ico { width: 16px; height: 16px; }
.mini .marcador__nota { display: none; }

.mini:hover,
.mini:focus-visible { border-color: var(--acento-borde); transform: translateY(-2px); }

.mini.esta-activa {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento-borde), 0 0 16px var(--acento-suave);
}


/* ==========================================================================
   21 · COMPARACIÓN DE PRECIO
   El dato que más vende: la competencia lo tiene más caro y agotado.
   ========================================================================== */

.comparacion {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r-tarjeta);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  background: linear-gradient(90deg, var(--acento-suave) 0%, transparent 45%),
              linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
}

.comparacion__titulo {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--papel);
}

.comparacion__nota { font-size: var(--t-small); color: var(--papel-2); }


/* ==========================================================================
   22 · CUADROS DE EXHIBICIÓN · el upsell
   Misma regla de selección que el selector de calidad: la escogida crece,
   se levanta y se marca. Coherencia en todo el sitio.
   ========================================================================== */

.cuadros {
  display: grid;
  gap: var(--e3);
  padding: var(--e2);
  margin: calc(var(--e2) * -1);
}

@media (min-width: 700px) { .cuadros { grid-template-columns: repeat(3, 1fr); } }

.cuadro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  overflow: hidden;
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  transition:
    transform var(--v-media) var(--rebote),
    border-color var(--v-rapida) var(--curva),
    box-shadow var(--v-media) var(--curva);
}

.cuadro:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }

.cuadro__input { position: absolute; opacity: 0; width: 0; height: 0; }

.cuadro__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #15181D;
  border-bottom: 1px solid var(--linea);
}

.cuadro__media > img { width: 100%; height: 100%; object-fit: cover; }

.cuadro__cuerpo { display: flex; flex-direction: column; gap: 4px; padding: var(--e3) var(--e4) var(--e4); }

.cuadro__nombre {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--papel);
}

.cuadro__precio {
  font-family: var(--f-dato);
  font-weight: 500;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--papel-2);
  transition: color var(--v-media) var(--curva);
}

.cuadro__insignia {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  z-index: 2;
}

.cuadro__marca {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--grafito);
  box-shadow: 0 0 14px var(--acento-sombra);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--v-media) var(--rebote), transform var(--v-media) var(--rebote);
}

.cuadro__marca .ico { width: 14px; height: 14px; stroke-width: 2.6; }

.cuadro:has(.cuadro__input:checked),
.cuadro.esta-seleccionada {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--acento-borde);
  border-top-color: var(--acento-borde);
  box-shadow: 0 0 0 1px var(--acento-borde), var(--sombra-3), 0 0 32px var(--acento-suave);
  z-index: 2;
}

.cuadro:has(.cuadro__input:checked) .cuadro__marca,
.cuadro.esta-seleccionada .cuadro__marca { opacity: 1; transform: scale(1); }

.cuadro:has(.cuadro__input:checked) .cuadro__precio,
.cuadro.esta-seleccionada .cuadro__precio { color: var(--acento); }

.cuadro:has(.cuadro__input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 4px; }


/* ==========================================================================
   23 · DETALLE EN MACRO
   Lo que justifica el precio y lo que la foto de catálogo nunca muestra.
   ========================================================================== */

.macro {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
}

.macro__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #15181D;
  border-bottom: 1px solid var(--linea);
}

.macro__media > img { width: 100%; height: 100%; object-fit: cover; }

.macro__cuerpo { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4); }

.macro__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--papel);
}

.macro__titulo .ico { width: 18px; height: 18px; color: var(--acento); }
.macro__nota { font-size: var(--t-small); color: var(--papel-2); }


/* ==========================================================================
   24 · NAVEGACIÓN DEL SITIO · la landing NO la lleva
   ========================================================================== */

.nav {
  position: sticky;
  top: var(--alto-cinta);
  z-index: 44;
  background: rgba(14,16,19,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

.nav__interior {
  display: flex;
  align-items: center;
  gap: var(--e5);
  min-height: 64px;
}

.nav__marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  text-decoration: none;
  color: var(--papel);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* El texto solo aparece si el logo no cargó: nunca los dos a la vez */
.nav__marca span { display: none; }
.nav__marca--texto span { display: inline; }

.nav__links { display: none; gap: var(--e5); margin-right: auto; }

@media (min-width: 860px) { .nav__links { display: flex; } }

.nav__links a {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-2);
  text-decoration: none;
  transition: color var(--v-rapida) var(--curva);
}

.nav__links a:hover { color: var(--papel); }
.nav__links a[aria-current="page"] { color: var(--acento); }

.nav .btn { margin-left: auto; }

@media (min-width: 860px) { .nav .btn { margin-left: 0; } }


/* ==========================================================================
   25 · PIE DE PÁGINA
   ========================================================================== */

.pie {
  padding-block: var(--e8) var(--e6);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
  border-top: 1px solid var(--linea);
}

.pie__superior {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 768px) {
  .pie__superior { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

.pie__marca { display: flex; flex-direction: column; gap: var(--e2); }

.pie__marca-texto {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pie__respaldo { font-size: var(--t-small); color: var(--papel-2); max-width: 46ch; }

.pie__contacto { display: flex; flex-direction: column; gap: var(--e3); align-items: flex-start; }

.pie__punto {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  font-size: var(--t-small);
  color: var(--papel-2);
}

.pie__punto .ico { width: 18px; height: 18px; color: var(--acento); margin-top: 3px; }
.pie__punto small { color: var(--papel-3); }

.pie__secciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--linea);
}

.pie__secciones a {
  font-family: var(--f-dato);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-2);
  text-decoration: none;
}

.pie__secciones a:hover { color: var(--acento); }

.pie__legal { display: flex; flex-direction: column; gap: var(--e2); padding-top: var(--e5); }
.pie__legal p { font-size: var(--t-small); color: var(--papel-3); }
.pie__legal a { color: var(--papel-2); text-decoration-color: var(--linea-fuerte); }
.pie__legal a:hover { color: var(--acento); }

.pie__aviso { font-size: 12px !important; color: var(--papel-3); }
.pie__aviso--legal { max-width: 70ch; color: rgba(124,131,140,.7); }


/* ==========================================================================
   26 · ACCESIBILIDAD Y UTILIDADES
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--e3) var(--e4);
  background: var(--acento);
  color: var(--grafito);
  font-weight: 600;
}

.salto-contenido:focus { left: var(--e4); top: var(--e4); }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.centrado    { text-align: center; }
.sin-margen  { margin: 0; }
.ancho-total { width: 100%; }

/* --- Movimiento reducido · OBLIGATORIO -------------------------------- */

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

  body::after { animation: none; opacity: 1; }

  .rotativo__palabra { opacity: 0; }
  .rotativo__palabra:first-child { opacity: 1; }

  /* Sin desplazamiento la cinta se centra y muestra lo que quepa */
  .cinta__pista { animation: none; transform: none; }
  .cinta { justify-content: center; }

  .btn--pulso::after { display: none; }
  .progreso-scroll { display: none; }
  .stock--ok::before { animation: none; }
}

/* --- Impresión --------------------------------------------------------- */

@media print {
  .cinta, .barra-fija, .flotante-wa, .progreso-scroll { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}


/* ==========================================================================
   27 · MIGAS DE PAN Y CASILLAS DE AUTORIZACIÓN
   --------------------------------------------------------------------------
   Agregado el 01/09/2026 con producto.php. No redefine ningún color: usa
   los tokens que ya estaban.
   ========================================================================== */

/* --- Migas de pan ------------------------------------------------------
   Le dicen a la persona dónde está. Van discretas: informan, no compiten
   con el nombre del producto, que es lo que tiene que leerse primero. */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  padding-top: var(--e4);
  font-family: var(--f-dato);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--papel-3);
}

.migas a {
  color: var(--papel-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.migas a:hover {
  color: var(--papel-2);
  border-bottom-color: var(--linea-fuerte);
}

/* El último es dónde estás: no es un enlace y se corta si no cabe, para
   que un nombre largo no empuje la fila a tres renglones en el celular. */
.migas [aria-current="page"] {
  color: var(--papel-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --- Casilla de autorización -------------------------------------------
   Ley 1581 de 2012: la autorización tiene que ser expresa e informada, así
   que el texto se lee de verdad. Nada de 10 px en gris sobre gris: eso es
   justo lo que un juez llama consentimiento no informado.
   El área de toque es la etiqueta completa, no el cuadrito. */

.permiso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin-top: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--r-boton);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--papel-2);
  transition: border-color 180ms ease, background 180ms ease;
}

.permiso:hover { border-color: var(--linea-fuerte); }

.permiso input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--acento);
  cursor: pointer;
}

.permiso:has(input:checked) {
  border-color: var(--acento-borde);
  background: var(--acento-suave);
}

.permiso:has(input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.permiso a {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.permiso a:hover { color: var(--acento); }


/* ==========================================================================
   28 · TARJETAS APILADAS · el bloque que se queda quieto
   --------------------------------------------------------------------------
   Pedido por Gio el 01/09/2026 para "Por qué cuesta lo que cuesta" y para
   "¿Dónde lo vas a poner?".

   QUÉ HACE: al bajar, la sección se queda fija y cada tarjeta se monta
   encima de la anterior. Cuando se acaban, la página sigue normal.

   CÓMO: position:sticky puro. Ni una línea de JavaScript, ni una librería.
   Cada tarjeta se pega a una altura un poco mayor que la anterior, así
   siempre asoma el filo de las de abajo y se ve la pila de verdad.

   El desfase lo pone PHP con --i (0, 1, 2, 3…) en cada tarjeta.
   ========================================================================== */

.apilado {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

.apilado__tarjeta {
  position: sticky;

  /* 88px deja libre la cinta de confianza, que va pegada arriba.
     14px por tarjeta es lo que asoma de la anterior: suficiente para
     entender que hay una pila, sin robarle altura a la de encima. */
  top: calc(88px + (var(--i, 0) * 14px));

  display: grid;
  gap: var(--e4);

  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

/* La de más abajo en la pila se oscurece un poco al quedar tapada:
   da profundidad sin mover nada. */
.apilado__tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grafito);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms linear;
}

.apilado__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--grafito-alto);
  overflow: hidden;
}

.apilado__media > img,
.apilado__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apilado__media .marcador { height: 100%; border: 0; border-radius: 0; }

.apilado__cuerpo {
  padding: var(--e4) var(--e5) var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

/* El número de orden dentro de la pila. Dice "vas en la 2 de 4" sin
   tener que escribirlo. */
.apilado__paso {
  font-family: var(--f-dato);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}

.apilado__titulo {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--papel);
  display: flex;
  align-items: center;
  gap: var(--e3);
  text-wrap: balance;
}

.apilado__titulo .ico { color: var(--acento); flex: 0 0 auto; }

.apilado__nota {
  color: var(--papel-2);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 60ch;
}

/* --- Escritorio: foto a la izquierda, texto a la derecha -------------- */
@media (min-width: 860px) {
  .apilado__tarjeta {
    grid-template-columns: 46fr 54fr;
    gap: 0;
    align-items: stretch;
  }
  .apilado__media { aspect-ratio: auto; min-height: 340px; }
  .apilado__cuerpo { padding: var(--e6); justify-content: center; }
  .apilado__titulo { font-size: var(--t-h2); }
  .apilado__nota   { font-size: var(--t-base); }
}

/* --- Pantallas bajas: sin pila ----------------------------------------
   Si la tarjeta no cabe en la pantalla, quedarse pegado es peor que
   pasar de largo: el contenido se sale por abajo y no hay forma de leerlo. */
@media (max-height: 620px) {
  .apilado__tarjeta { position: static; }
}

/* --- Quien pidió menos movimiento -------------------------------------
   La pila SE QUEDA. position:sticky no es una animación: nada se mueve
   solo, la tarjeta solo se detiene mientras la persona baja. Lo que sí
   se apaga es el oscurecido, que sí es una transición. */
@media (prefers-reduced-motion: reduce) {
  .apilado__tarjeta::after { display: none; }
}


/* ==========================================================================
   29 · DATOS ENCIMA DE LA FOTO · la variante que Gio quiere comparar
   --------------------------------------------------------------------------
   La decisión aprobada (docs/07, 2.0) es que los datos van DEBAJO de la
   foto. Gio pidió el 01/09 ver la otra versión en el celular antes de
   decidir, así que existen las dos y se cambian con ?datos=encima en la URL.

   NO se borró la de debajo. Cuando Gio escoja, se quita la que sobre.
   ========================================================================== */

.galeria--encima { position: relative; }

.ficha-foto--encima {
  position: absolute;
  left: var(--e3);
  right: var(--e3);
  bottom: var(--e3);
  z-index: 2;

  display: grid;
  gap: var(--e2);

  /* Cristal esmerilado: deja ver la foto detrás pero el dato se lee
     igual salga clara u oscura. El respaldo sólido va primero, para
     los navegadores que no soportan backdrop-filter. */
  background: rgba(14,16,19,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-boton);
  padding: var(--e3);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .ficha-foto--encima {
    background: rgba(14,16,19,.42);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

.ficha-foto--encima .ficha-foto__dato {
  border: 0;
  padding: 0;
  gap: 2px;
}

.ficha-foto--encima .ficha-foto__dato + .ficha-foto__dato {
  border-left: 1px solid rgba(255,255,255,.12);
}

.ficha-foto--encima .ficha-foto__valor  { font-size: 1.05rem; }
.ficha-foto--encima .ficha-foto__rotulo { font-size: .625rem; }
.ficha-foto--encima .ico { width: 16px; height: 16px; }

/* Con los datos encima la foto puede crecer: ese era el punto. */
.galeria--encima .galeria__principal { aspect-ratio: 4 / 5; }

@media (min-width: 860px) {
  .galeria--encima .galeria__principal { aspect-ratio: 4 / 3; }
}

/* Un velo abajo para que el cristal nunca quede sobre una zona clara */
.galeria--encima .galeria__principal::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(14,16,19,.55));
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   28.b · TARJETAS APILADAS QUE ADEMÁS SE ESCOGEN
   --------------------------------------------------------------------------
   El bloque del cuadro es una DECISIÓN DE COMPRA, no solo información.
   Se apila como el de arriba, pero cada tarjeta sigue siendo seleccionable:
   el precio va grande y siempre visible, y la escogida se marca en el
   acento. La barra de abajo muestra en todo momento cuál va ganando, que
   es lo que reemplaza el poder verlas las tres al tiempo.
   -------------------------------------------------------------------------- */

.apilado__tarjeta--opcion {
  cursor: pointer;
  transition: border-color 180ms ease;
}

.apilado__tarjeta--opcion:hover { border-color: var(--linea-fuerte); }

.apilado__opcion-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.apilado__marca {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linea-fuerte);
  background: rgba(14,16,19,.72);
  color: transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.apilado__marca .ico { width: 18px; height: 18px; }

.apilado__tarjeta--opcion:has(.apilado__opcion-input:checked) {
  border-color: var(--acento-borde);
}

.apilado__tarjeta--opcion:has(.apilado__opcion-input:checked) .apilado__marca {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--grafito);
}

.apilado__tarjeta--opcion:has(.apilado__opcion-input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* Refuerzo para navegadores sin :has() · lumat.js pone la clase */
.apilado__tarjeta--opcion.esta-seleccionada { border-color: var(--acento-borde); }
.apilado__tarjeta--opcion.esta-seleccionada .apilado__marca {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--grafito);
}

.apilado__precio {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 118;
  font-weight: 900;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
  margin-top: auto;
}

.apilado__precio small {
  display: block;
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--papel-3);
  margin-top: 2px;
}

.apilado__tarjeta--opcion:has(.apilado__opcion-input:checked) .apilado__precio,
.apilado__tarjeta--opcion.esta-seleccionada .apilado__precio { color: var(--acento); }


/* ==========================================================================
   30 · AIRE EN CELULAR · corrección del 02/09/2026
   --------------------------------------------------------------------------
   Gio revisó la landing en celular y señaló "partes con mucho espacio".
   Tenía razón, y venía de dos sitios:

     1. Un error en la animación de aparición dejaba tarjetas invisibles
        ocupando espacio. Corregido arriba, en la sección 19.

     2. El aire pensado para escritorio se estaba aplicando igual en una
        pantalla de 375 px. 48 px entre la foto y el precio son elegantes
        en un monitor; en un celular empujan el titular fuera de la
        pantalla, y el titular es lo que dice qué se está vendiendo.

   El aire sigue siendo el 80 % de la sensación de lujo (docs/01). Esto no
   lo quita: lo pone a escala de la pantalla.
   ========================================================================== */

@media (max-width: 640px) {

  /* ARRIBA DE LA FOTO · imagen 1 · Gio pidió quitar tres cuartos.
     Eran 64 px entre la cinta y la foto, en una pantalla donde cada
     píxel cuenta para que el titular no quede fuera. Quedan 16 px. */
  main > .seccion:first-of-type { padding-top: var(--e4); }

  /* ENTRE SECCIONES · imágenes 3 y 6 · Gio pidió quitar la mitad.
     --seccion son 96 px arriba y 96 abajo: casi una pantalla de celular
     en blanco entre un bloque y el siguiente. La mitad sigue siendo aire
     de sobra para que respire, sin que el dedo se canse. */
  .seccion        { padding-block: var(--e7); }
  .seccion--corta { padding-block: var(--e6); }

  /* ANTES DE "QUÉ VIENE EN LA CAJA" · imagen 5 · tres cuartos menos.
     Dos secciones seguidas suman su aire de abajo y el de arriba: donde
     se tocan quedaba el doble de espacio que en cualquier otro sitio. */
  .seccion + .seccion--corta { padding-top: var(--e4); }

  /* BAJO EL TÍTULO DE SECCIÓN · imagen 4 · la mitad */
  .encabezado-seccion { margin-bottom: var(--e5); }

  /* Entre la galería y la columna de compra */
  .rejilla--hero { gap: var(--e5); }

  /* Las miniaturas no necesitan tanto respiro debajo de la foto */
  .galeria__minis { margin-top: var(--e2) !important; }

  /* Un titular de tres líneas en Archivo 900 ya es bastante peso:
     el interlineado de escritorio le sobra. */
  .t-hero { line-height: 1.02; }
  .t-h1   { line-height: 1.06; }
}


/* ==========================================================================
   31 · LEGIBILIDAD A LA LUZ DEL DÍA
   --------------------------------------------------------------------------
   Gio, 02/09/2026: "a la luz del día no se define el fondo negro con el
   negro zafiro". Tiene razón y es un problema real, no de gusto.

   EL DIAGNÓSTICO: entre el fondo (#0E1013) y las tarjetas (#191C21) hay
   muy poca diferencia de luminosidad. En un monitor a oscuras se ve
   perfecto; en un celular en la calle, con brillo automático y reflejo,
   las tarjetas desaparecen y la página se lee como un bloque plano.

   LO QUE **NO** SE HACE: aclarar el fondo. Eso mataría la identidad —
   el producto se ve mejor sobre grafito y es lo que comunica lujo.

   LO QUE SÍ: subir el BORDE, que es lo que dibuja la silueta. Un borde
   más definido separa la tarjeta del fondo sin tocar ni un color de
   superficie. Y el filo superior —la regla 2 de docs/01, la luz que
   viene de arriba— se sube un poco más, que es justo lo que hace que
   la caja se lea como metal y no como un rectángulo.
   ========================================================================== */

:root {
  --linea:        rgba(255,255,255,.11);   /* antes .07 */
  --linea-fuerte: rgba(255,255,255,.20);   /* antes .14 */
  --filo:         rgba(255,255,255,.17);   /* antes .12 */
}

/* Con mucha luz ambiente el navegador avisa. Ahí se sube todavía más:
   no se inventa un tema claro, se hace legible el oscuro. */
@media (prefers-contrast: more) {
  :root {
    --linea:        rgba(255,255,255,.18);
    --linea-fuerte: rgba(255,255,255,.30);
    --filo:         rgba(255,255,255,.26);
    --papel-2:      #C9CED4;
    --papel-3:      #939AA3;
  }
}

/* En celular la tarjeta además se levanta del fondo con su propia sombra
   de contacto: en la calle, la sombra define tanto como el borde. */
@media (max-width: 640px) {
  .superficie,
  .tarjeta,
  .macro,
  .cuadro,
  .calidad,
  .opcion-pago,
  .apilado__tarjeta {
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--sombra-1);
  }
}


/* ==========================================================================
   32 · SECCIÓN APILADA · el título se queda y las tarjetas pasan por debajo
   --------------------------------------------------------------------------
   Lo que Gio describió el 02/09/2026:

     "dejar siempre visible POR QUÉ CUESTA LO QUE CUESTA y que la tarjeta
      se sobreponga una sobre otra. Cuando llegue la última tarjeta se
      vaya el título con la tarjeta"

   CÓMO FUNCIONA, sin una línea de JavaScript para el efecto:

   El título y la pila son hermanos dentro del mismo contenedor. Los dos
   son position:sticky. Un elemento sticky solo se queda pegado mientras
   su PADRE siga en pantalla — por eso, cuando se acaba la última tarjeta
   se acaba el contenedor, y el título se va con ella. Exactamente lo
   que pidió.

   Cada tarjeta se pega 12 px más abajo que la anterior, así asoma el
   filo de las de abajo y se ve la pila de verdad.

   El único JavaScript que interviene mide la altura real del título y de
   la cinta, porque cambian con el ancho de pantalla. Está en lumat.js.
   ========================================================================== */

.apilar { --fondo-apilar: var(--grafito); }
.seccion--franja.apilar { --fondo-apilar: var(--grafito-alto); }

.apilar__cabeza {
  position: sticky;
  top: var(--alto-cinta, 44px);
  z-index: 4;

  /* Opaco a la fuerza: las tarjetas pasan POR DEBAJO y si el fondo fuera
     transparente se leerían encima del título. */
  background: var(--fondo-apilar);
  padding-block: var(--e4) var(--e5);

  /* Un degradado corto abajo para que la tarjeta no aparezca cortada en
     seco al pasar bajo el título. */
  box-shadow: 0 12px 12px -12px var(--fondo-apilar);
}

.apilar__cabeza .encabezado-seccion { margin-bottom: 0; }

.apilar .apilado__tarjeta {
  top: calc(var(--alto-cinta, 44px) + var(--alto-cabeza, 96px) + (var(--i, 0) * 12px));
}

/* En celular el título fijo no puede comerse media pantalla: se compacta
   para dejarle sitio a la tarjeta, que es lo que la persona vino a ver. */
@media (max-width: 640px) {
  .apilar__cabeza { padding-block: var(--e3) var(--e4); }
  .apilar__cabeza .t-h1 { font-size: 1.75rem; line-height: 1.05; }
  .apilar .apilado__tarjeta { --i: 0; }
  .apilar .apilado__tarjeta:nth-child(2) { top: calc(var(--alto-cinta,44px) + var(--alto-cabeza,80px) + 10px); }
  .apilar .apilado__tarjeta:nth-child(3) { top: calc(var(--alto-cinta,44px) + var(--alto-cabeza,80px) + 20px); }
  .apilar .apilado__tarjeta:nth-child(4) { top: calc(var(--alto-cinta,44px) + var(--alto-cabeza,80px) + 30px); }
}

/* Pantalla muy baja: lista normal. Si la tarjeta no cabe en la pantalla,
   quedarse pegado es peor que pasar de largo. */
@media (max-height: 620px) {
  .apilar__cabeza { position: static; }
  .apilar .apilado__tarjeta { position: static; }
}

/* CORREGIDO EL 02/09/2026 · AQUÍ HABÍA UNA REGLA QUE APAGABA EL EFECTO
   cuando el navegador pedía menos movimiento. Estaba mal pensada:
   position:sticky NO es una animación. Nada se mueve solo — el título
   simplemente se queda quieto mientras la persona baja. Quien activa
   "reducir movimiento" (iOS y Windows lo traen puesto en ahorro de
   batería) sigue necesitando que la página funcione.

   Se detectó porque el efecto no aparecía en una pantalla real. */


/* --------------------------------------------------------------------------
   32.b · LOS DOS BOTONES DE LA BARRA
   --------------------------------------------------------------------------
   Gio, 02/09/2026: "el botón debería ocupar por lo menos la mitad del
   espacio a lo ancho y tiene que ser a costado derecho, y el espacio que
   va a sobrar deberíamos ponérselo al botón donde dice apartar".

   EL PROBLEMA QUE HABÍA: la regla .barra-compra .btn (más específica que
   .bc-wa) le daba flex:1 y 24 px de relleno a los DOS botones. Resultado:
   86 px cada uno y el texto cortado en "APARTA".

   AHORA: los dos van dentro de .bc-botones, que ocupa la mitad derecha.
   WhatsApp es un cuadrado fijo y todo lo que sobra se lo lleva el de
   comprar, que es el que tiene que pesar. El total gana la otra mitad y
   deja de verse encerrado.
   -------------------------------------------------------------------------- */

/* --alto-boton lo comparten los dos, así que no pueden quedar desiguales
   por accidente: cambiar uno cambia los dos. Gio preguntó expresamente si
   quedaban a la misma altura y del mismo alto — aquí queda garantizado. */
.bc-botones {
  --alto-boton: 52px;

  flex: 1 1 50%;
  min-width: 50%;
  display: flex;
  align-items: center;      /* mismo eje: quedan alineados arriba y abajo */
  justify-content: flex-end;
  gap: var(--e2);
}

/* WhatsApp va DESPUÉS del botón de comprar en el HTML, así que queda al
   borde derecho. El orden lo decide el HTML, no el CSS: así el lector de
   pantalla también lo lee en ese orden. */
/* min-height además de height: .btn trae min-height:var(--btn-alto) y sin
   esto le ganaba, así que la barra nunca bajaba de 103 px por más que se
   pidiera 46. Se detectó midiendo en el celular, no leyendo el código. */
.barra-compra .bc-botones > .btn {
  height: var(--alto-boton);
  min-height: var(--alto-boton);
}

/* Doble clase para ganarle a .barra-compra .btn, que es la que daba el
   ancho equivocado. Sin esto, WhatsApp vuelve a crecer. */
.barra-compra .bc-botones .bc-wa {
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.barra-compra .bc-botones .bc-wa .ico { width: 24px; height: 24px; }

.barra-compra .bc-botones .btn-principal {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--e3);
  white-space: nowrap;
}

.barra-compra .bc-total { flex: 1 1 auto; min-width: 0; }

@media (min-width: 640px) {
  .barra-compra .bc-botones .bc-wa { flex: 0 0 56px; width: 56px; min-width: 56px; }
}


/* --------------------------------------------------------------------------
   32.c · RESEÑAS DE CLIENTES
   Solo se ven cuando hay reseñas REALES en assets/resenas.txt. Si el
   archivo está vacío, la sección entera no se imprime.
   -------------------------------------------------------------------------- */

.resena__estrellas {
  display: flex;
  gap: 2px;
  color: var(--laton);
}

.resena__firma {
  font-family: var(--f-dato);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--papel-3);
}

.resena__firma b { color: var(--papel-2); font-weight: 500; }


/* ==========================================================================
   33 · ENTRADAS LATERALES · el movimiento que hace que se lea
   --------------------------------------------------------------------------
   Gio, 02/09/2026: "que aparezcan de izquierda a derecha o derecha a
   izquierda... para que el movimiento llame el ojo y lea".

   Tiene razón en el fondo: una línea que aparece deslizándose se lee; una
   línea que ya estaba, se salta. Se usa en las tres cosas que más pesan
   para la decisión: las garantías, el respaldo Distrisel y los 4 pasos.

   ALTERNANDO LADOS a propósito. Si todas entran del mismo lado el ojo se
   acostumbra en la segunda y deja de mirar. Alternando, cada una vuelve a
   pedir atención.

   Es CSS puro guiado por el scroll: no hay JavaScript, no hay librería, y
   si el navegador no lo soporta el contenido simplemente ya está ahí.
   ========================================================================== */

@keyframes entrar-izq {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes entrar-der {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@supports (animation-timeline: view()) {
  .entra-izq,
  .entra-der {
    animation: linear both;
    animation-timeline: view();

    /* AJUSTADO EL 02/09/2026 · Gio: "inician desde muy abajo... se alcanza
       a ver que algo sale abajo, pero no llama tanto la atención".

       Estaba en "entry 5% cover 30%": arrancaba apenas el elemento asomaba
       por el borde inferior y terminaba con él todavía abajo, casi fuera
       del campo de visión. El movimiento pasaba donde nadie mira.

       Ahora empieza cuando el elemento ya entró un 45 % y termina cuando
       está completamente dentro: la animación ocurre a media pantalla,
       que es donde el ojo está puesto. */
    animation-range: entry 45% entry 100%;
  }
  .entra-izq { animation-name: entrar-izq; }
  .entra-der { animation-name: entrar-der; }
}

/* Quien pidió menos movimiento ve el contenido quieto y completo.
   Aquí SÍ corresponde apagarlo: esto sí es una animación. */
@media (prefers-reduced-motion: reduce) {
  .entra-izq,
  .entra-der { animation: none; opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   33.b · LAS GARANTÍAS, UNA DEBAJO DE OTRA
   Gio pidió que las tres frases vayan apiladas en vez de en fila. Son las
   tres cosas que quitan el miedo justo antes del botón: en fila se leen
   como una lista de adorno; una debajo de otra, se leen una por una.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .garantia-linea {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e3);
  }
  .garantia-linea span { width: 100%; }
}


/* --------------------------------------------------------------------------
   33.c · LA BARRA DE ABAJO, MÁS BAJA
   Gio, 02/09: "no ocupe tanto... tiene mucha altura porque le quita
   espacio a la página". Medida real en su celular: 106 px, el 13 % de la
   pantalla. Se aprieta a ~84 px sin quitar información:
   la fila de chips baja de tamaño y el aire se reparte mejor.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .barra-compra__interior { padding-block: var(--e2); gap: var(--e2); }
  .bc-seleccion  { gap: var(--e2); }
  .bc-chip       { padding: 2px 8px; font-size: .625rem; line-height: 1.4; }
  .bc-chip .ico  { width: 12px; height: 12px; }
  .bc-total > span { font-size: .625rem; }
  .bc-total b      { font-size: 1.5rem; line-height: 1.1; }
  .bc-total small  { font-size: .6875rem; }
  /* Un solo valor para los dos: no se pueden desalinear. */
  .bc-botones { --alto-boton: 46px; }
}


/* --------------------------------------------------------------------------
   33.d · MÁS CONTRASTE TODAVÍA A LA LUZ DEL DÍA
   Gio lo pidió dos veces. La primera subida (sección 31) nunca le llegó
   porque el navegador seguía usando el CSS guardado: la dirección decía
   ?v=3 desde hacía cinco versiones. Ya se arregló atándolo a la versión.

   Aun así se sube un punto más el borde de las TARJETAS, que es donde se
   nota. El fondo no se toca: el producto se ve mejor sobre grafito.
   -------------------------------------------------------------------------- */

:root {
  --linea:        rgba(255,255,255,.13);
  --linea-fuerte: rgba(255,255,255,.22);
  --filo:         rgba(255,255,255,.20);
}

/* Las cajas que llevan contenido —no las decorativas— llevan además un
   borde superior claro de verdad: es lo que separa la tarjeta del fondo
   cuando hay reflejo en la pantalla. */
.superficie,
.tarjeta,
.macro,
.cuadro,
.calidad,
.opcion-pago,
.apilado__tarjeta,
.dato-grande,
.paso {
  border-color: var(--linea);
  border-top-color: var(--filo);
}


/* --------------------------------------------------------------------------
   33.e · LA PROMESA DE DEVOLUCIÓN
   Va junto al botón de comprar. Se resalta porque es lo que quita el
   último miedo — "y si no me gusta" —, pero con el asterisco a la vista:
   una promesa sin su condición al lado es publicidad engañosa.
   -------------------------------------------------------------------------- */

.retracto-promesa {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin-top: var(--e3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--papel-2);
}

.retracto-promesa .ico { color: var(--ok); flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }
.retracto-promesa strong { color: var(--papel); font-weight: 600; }

.retracto-asterisco {
  color: var(--papel-3);
  text-decoration: none;
  font-weight: 700;
  padding: 0 4px;
}

.retracto-asterisco:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   33.f · LA LETRA DE LA DEVOLUCIÓN
   Discreta a propósito: es la condición de una promesa, no un argumento
   de venta. Tiene que estar y poder leerse, no competir con el producto.
   -------------------------------------------------------------------------- */

.retracto {
  padding-block: var(--e6);
  border-top: 1px solid var(--linea);
  background: var(--grafito-alto);
}

.retracto__titulo {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--papel-2);
}

.retracto__titulo .ico { color: var(--papel-3); flex: 0 0 auto; margin-top: 4px; }
.retracto__titulo strong { color: var(--papel); font-weight: 600; }

.retracto__lista {
  margin: var(--e4) 0 0;
  padding-left: 18px;
  list-style: disc;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--papel-3);
}

.retracto__lista li { margin-bottom: var(--e2); }
.retracto__lista li::marker { color: var(--linea-fuerte); }
.retracto__lista strong { color: var(--papel-2); font-weight: 600; }

.retracto__pie { margin-top: var(--e4); font-size: var(--t-small); }
.retracto__pie a { color: var(--papel-2); }
.retracto__pie a:hover { color: var(--acento); }

/* Al llegar desde el asterisco, el bloque se marca un momento. */
#retracto:target { border-top-color: var(--acento-borde); }


/* --------------------------------------------------------------------------
   33.g · EL PRECIO EN EL PRIMER VISTAZO
   Gio, 02/09: "cuando la persona abra, vea de una vez el producto con el
   valor más económico". El precio pasó de la columna de la derecha —que en
   celular cae después del titular— a justo debajo de las medidas.
   -------------------------------------------------------------------------- */

.precio-hero {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}

@media (min-width: 1024px) {
  /* En pantalla grande las dos columnas van lado a lado y el precio ya se
     ve sin bajar, así que no necesita separarse tanto. */
  .precio-hero { margin-top: var(--e3); padding-top: var(--e3); }
}


/* --------------------------------------------------------------------------
   33.h · LAS CUATRO FORMAS DE PAGO, PAREJAS
   Gio, 02/09: "contra entrega 20.000 pesos hoy está muy largo... todas
   esas casillas deberían tener más o menos la misma dimensión". Y en
   "Recoger en el Restrepo −5 %" el símbolo % se caía a la línea de abajo.

   Ahora el título es corto y a la izquierda, y el dato que cambia
   —descuento o valor— va como insignia a la derecha, sin partirse nunca.
   Los cuatro miden lo mismo y se comparan de un vistazo.
   -------------------------------------------------------------------------- */

.opcion-pago__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
}

.opcion-pago__insignia {
  flex: 0 0 auto;
  white-space: nowrap;          /* el % nunca se cae a la línea siguiente */
  font-family: var(--f-dato);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--acento);
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-chip);
  padding: 3px 8px;
}

/* La de contra entrega no es un descuento sino lo que hay que pagar hoy:
   va en gris para que no se lea como una rebaja. */
.opcion-pago__input[value="contra"] ~ * .opcion-pago__insignia {
  color: var(--papel-2);
  background: rgba(255,255,255,.06);
  border-color: var(--linea-fuerte);
}


/* ==========================================================================
   34 · HERO DE PARTICIÓN · el momento memorable de la página principal
   --------------------------------------------------------------------------
   Es el ÚNICO momento fuerte del sitio (docs/01, sección 5). Dos mitades
   con una costura diagonal: coleccionables en naranja, domótica en hielo.
   Al pasar el cursor, una crece y la otra se atenúa.

   POR QUÉ ESTÁ HECHO CON LUZ Y NO CON FOTOS:
   el brief pedía un monoplaza grande a la izquierda y una sala iluminada a
   la derecha. De domótica no hay ni una foto, y no va a haberla pronto. Un
   hero que dependa de fotos que no existen se ve roto, no se ve "pendiente".
   Así que lo que sostiene cada mitad es un resplandor del color de su línea
   detrás de un titular grande — que es material propio y siempre está.
   La foto entra encima como una capa opcional: el día que exista, se ve;
   mientras no exista, nadie nota que falta. Ver .particion__foto.
   ========================================================================== */

.particion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--grafito);
}

.particion__mitad {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 55vh;
  padding: var(--e6) var(--e5) var(--e7);
  background: linear-gradient(180deg, var(--grafito-alto) 0%, var(--grafito) 100%);
  transition: opacity var(--v-lenta) var(--curva), flex-grow var(--v-lenta) var(--curva);
}

/* El resplandor. Es lo que le da temperatura a la mitad en vez de dejarla
   como un rectángulo gris. Nace arriba a la izquierda, como toda la luz
   del sitio (regla 2 de docs/01). */
.particion__brillo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 18% 8%,  var(--acento-medio) 0%, transparent 62%),
    radial-gradient(90% 70% at 82% 100%, var(--acento-suave) 0%, transparent 70%);
  opacity: .85;
  transition: opacity var(--v-lenta) var(--curva);
}

/* La foto, cuando exista. Va detrás del texto, atenuada y difuminada hacia
   abajo para que el titular siempre se lea encima. Si el archivo no está,
   el onerror la esconde y queda solo el resplandor. */
.particion__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 78%, transparent 100%);
}

.particion__cuerpo {
  position: relative;
  width: 100%;
  max-width: 30rem;
}

.particion__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--f-dato);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}

.particion__titulo {
  margin-block: var(--e3) var(--e4);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--papel);
}

.particion__texto {
  margin-bottom: var(--e5);
  max-width: 34ch;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--papel-2);
}

/* --- De 900 px para arriba: la diagonal --------------------------------
   Las dos mitades se solapan y cada una se recorta en diagonal, así la
   costura queda inclinada sin una sola imagen de por medio. */
@media (min-width: 900px) {

  .particion {
    flex-direction: row;
    gap: 0;
    height: min(88vh, 820px);
    min-height: 560px;
  }

  .particion__mitad {
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
    padding: var(--e8) var(--e7);
  }

  .particion__mitad--izq {
    clip-path: polygon(0 0, 100% 0, calc(100% - 9vw) 100%, 0 100%);
    padding-right: calc(var(--e7) + 5vw);
    justify-content: flex-end;
  }

  .particion__mitad--der {
    margin-left: -9vw;
    clip-path: polygon(9vw 0, 100% 0, 100% 100%, 0 100%);
    padding-left: calc(var(--e7) + 5vw);
  }

  /* El filo de luz sobre la costura: es lo que hace que se lea como dos
     planos de metal y no como dos colores pegados. */
  .particion__mitad--der::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, rgba(255,255,255,.14) 0 1px, transparent 1px);
    pointer-events: none;
  }

  /* --- El gesto: la señalada RESALTA, la otra se retira ---------------
     :focus-within va junto a :hover para que quien navega con el teclado
     reciba exactamente la misma respuesta que quien usa el mouse.

     CORREGIDO EL 03/09/2026 · lo cazó Gio mirando la vista previa.
     Antes esto estaba escrito así:

         .particion:hover .particion__mitad          { opacity:.58 }
         .particion__mitad:hover                     { opacity:1   }

     y se veía justo al contrario de lo buscado: al señalar una mitad se
     oscurecía ELLA también. El motivo es la especificidad. La primera
     regla vale 3 (dos clases y una pseudoclase) y la segunda solo 2, así
     que la que apaga le ganaba a la que ilumina incluso sobre la mitad
     señalada. Medido en el navegador: 0,58 en las dos.

     La solución es que la regla que apaga NO alcance a la señalada, con
     :not(). Así no hay pelea de especificidad que perder. */
  .particion:hover .particion__mitad:not(:hover),
  .particion:focus-within .particion__mitad:not(:focus-within) {
    opacity: .5;
  }

  /* Y la señalada no se queda igual: crece y su luz sube. Resaltar es más
     claro que apagar al vecino — es lo que pidió Gio. */
  .particion__mitad:hover,
  .particion__mitad:focus-within {
    flex-grow: 1.63;
  }

  .particion__mitad:hover .particion__brillo,
  .particion__mitad:focus-within .particion__brillo { opacity: 1; }

  .particion__mitad:hover .particion__foto,
  .particion__mitad:focus-within .particion__foto { opacity: .55; }

  .particion:hover .particion__mitad:not(:hover) .particion__brillo,
  .particion:focus-within .particion__mitad:not(:focus-within) .particion__brillo {
    opacity: .35;
  }
}

/* La firma de abajo: quién responde por todo esto. Va pequeña y centrada,
   debajo de la partición y antes del catálogo. */
.particion__firma {
  padding: var(--e5) var(--e5) 0;
  text-align: center;
  font-family: var(--f-dato);
  font-size: .75rem;
  letter-spacing: .08em;
  line-height: 1.8;
  color: var(--papel-3);
}

.particion__firma b { color: var(--papel-2); font-weight: 500; }


/* ==========================================================================
   35 · CAPTURA DE DATOS · el bloque y la barra discreta
   --------------------------------------------------------------------------
   Lo que se decidió y NO se cambia sin hablarlo con Gio
   (PARA-GIO/PROMPT-PARA-LA-PAGINA-WEB.txt, "LA CAPTURA DE DATOS"):

     · nunca una ventana emergente, y nunca en la primera visita
     · nunca en las landings de campaña
     · el celular primero, el correo opcional
     · dos casillas separadas, porque la Ley 1581 de 2012 prohíbe
       condicionar el servicio a que el cliente acepte publicidad
       (la casilla es .permiso, sección 27)

   Son dos piezas: el bloque que vive DENTRO de la página, al final del
   catálogo, y la barra de abajo, que aparece una sola vez por visitante
   después de que baje media página y no vuelve nunca más.
   ========================================================================== */

.captura {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 12% 0%, var(--acento-suave) 0%, transparent 58%),
    linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--acento-borde);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
}

.captura__cuerpo {
  display: grid;
  gap: var(--e6);
  padding: var(--e6) var(--e5);
}

@media (min-width: 900px) {
  .captura__cuerpo {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--e8);
    padding: var(--e8) var(--e7);
  }
}

.captura__titulo {
  margin-block: var(--e3);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--papel);
}

.captura__texto {
  max-width: 46ch;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--papel-2);
}

/* Las tres cosas que va a recibir. Es una promesa concreta, no un adorno:
   es la diferencia entre "suscríbete a novedades" y un dato de verdad. */
.captura__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e5);
}

.captura__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--papel-2);
}

.captura__lista .ico { flex: 0 0 auto; margin-top: 2px; color: var(--acento); }

/* El celular y el correo, uno debajo del otro. El celular va primero y es
   el único obligatorio: en Colombia una lista de correos se muere y una de
   WhatsApp se usa al día siguiente. */
.captura__campos { display: flex; flex-direction: column; gap: var(--e4); }

.captura__nota {
  margin-top: var(--e4);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--papel-3);
}

.captura__nota a { color: var(--papel-2); }

/* El estado de "ya quedaste anotado". Reemplaza al formulario entero: si
   el formulario se quedara ahí, la persona no sabe si funcionó. */
.captura__listo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e5);
  border: 1px solid var(--acento-borde);
  border-radius: var(--r-boton);
  background: var(--acento-suave);
}

.captura__listo .ico { color: var(--acento); width: 32px; height: 32px; }


/* --- LA BARRA DE ABAJO --------------------------------------------------
   La regla que la gobierna: NO TAPA EL CONTENIDO. Por eso el cuerpo de la
   página recibe un relleno del alto de la barra mientras está abierta, en
   vez de que la barra se le monte encima al último bloque.

   Aparece una sola vez por visitante. Se cierra y no vuelve nunca. */

.barra-captura {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(110%);
  transition: transform var(--v-lenta) var(--curva);
  background: linear-gradient(180deg, var(--acero-alto) 0%, var(--acero) 100%);
  border-top: 1px solid var(--acento-borde);
  box-shadow: 0 -2px 4px rgba(0,0,0,.4), 0 -24px 48px -12px rgba(0,0,0,.7);
}

.barra-captura[data-abierta="si"] { transform: translateY(0); }

.barra-captura__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
  /* El relleno de la derecha le deja el sitio al botón flotante de
     WhatsApp, que vive en esa misma esquina. */
  padding: var(--e4) calc(var(--e5) + 56px) var(--e4) var(--e5);
}

@media (min-width: 900px) {
  .barra-captura__interior {
    flex-wrap: nowrap;
    padding-block: var(--e3);
  }
}

.barra-captura__texto {
  flex: 1 1 16rem;
  min-width: 0;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--papel-2);
}

.barra-captura__texto b {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--papel);
}

.barra-captura__acciones {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--e3);
}

/* La X de cerrar. Tiene 44 px de área de toque aunque el dibujo sea más
   chico: por debajo de eso, en un celular no se acierta. */
.barra-captura__cerrar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--papel-3);
  cursor: pointer;
  transition: color var(--v-rapida) ease, background var(--v-rapida) ease;
}

.barra-captura__cerrar:hover {
  color: var(--papel);
  background: rgba(255,255,255,.06);
}


/* ==========================================================================
   36 · AVISO DE COOKIES
   --------------------------------------------------------------------------
   Una línea discreta abajo, que se cierra. NO un muro que bloquee la
   página: en Colombia un muro de consentimiento no agrega nada legalmente
   y sí cuesta ventas. El píxel de Meta se declara en /politica-datos, que
   es donde la ley pide que esté, y ya está declarado.

   Nunca se muestra al tiempo con la barra de captura: lo controla lumat.js.
   ========================================================================== */

.cookies {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(110%);
  transition: transform var(--v-lenta) var(--curva);
  background: rgba(18,21,26,.96);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea);
}

.cookies[data-abierta="si"] { transform: translateY(0); }

.cookies__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e3) var(--e4);
  padding: var(--e3) calc(var(--e5) + 56px) var(--e3) var(--e5);
  text-align: center;
}

.cookies__texto {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--papel-3);
}

.cookies__texto a {
  color: var(--papel-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookies__texto a:hover { color: var(--acento); }


/* --- El relleno que evita que cualquiera de las dos tape el contenido ---
   Lo pone lumat.js con la medida real de la barra, no con un número
   escrito a mano: el texto cambia de alto según el ancho del celular. */
body.hay-barra-abajo { padding-bottom: var(--alto-barra-abajo, 0px); }


/* --- Movimiento reducido ------------------------------------------------
   Quien pidió menos movimiento no pierde la función: la barra aparece,
   simplemente no se desliza. */
@media (prefers-reduced-motion: reduce) {
  .barra-captura,
  .cookies { transition: none; }
}


/* ==========================================================================
   37 · CATÁLOGO CON FILTRO · la página principal y las de línea
   --------------------------------------------------------------------------
   Las tarjetas ya están TODAS en el HTML, impresas por PHP. Los chips solo
   muestran y esconden (docs/03). El acento de la sección cambia con el
   filtro porque la sección lleva data-linea; ningún color se escribe aquí.
   ========================================================================== */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  /* Los chips no se apretujan contra el borde en un celular angosto: la
     fila se puede arrastrar y el último se ve completo. */
  margin-bottom: var(--e6);
}

.chip--filtro {
  border-radius: 999px;
  padding: 8px var(--e4);
  min-height: 40px;
  cursor: pointer;
  color: var(--papel-2);
  border: 1px solid var(--linea-fuerte);
  background: rgba(255,255,255,.04);
  transition: color var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva),
              background var(--v-rapida) var(--curva);
}

.chip--filtro:hover {
  color: var(--papel);
  border-color: var(--acento-borde);
}

.chip--filtro.esta-activa {
  color: var(--acento);
  border-color: var(--acento-borde);
  background: var(--acento-suave);
}

/* La transición al filtrar: 200 ms de opacidad y 8 px, como pide docs/03.
   Las tarjetas no aparecen de golpe. */
.catalogo .tarjeta {
  transition: opacity var(--v-media) var(--curva),
              transform var(--v-media) var(--curva);
}

.catalogo .tarjeta.esta-filtrada {
  opacity: 0;
  transform: translateY(8px);
}

/* Cuando un filtro no tiene nada que mostrar. Con 22 productos en
   Proximamente esto casi no se va a ver, pero una rejilla vacía sin una
   sola palabra es un error que la persona cree haber cometido ella. */
.catalogo__vacio {
  padding: var(--e7) var(--e5);
  text-align: center;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-tarjeta);
  color: var(--papel-2);
}

/* El aviso de error de un formulario suelto, el que no vive dentro de un
   .campo. Usa el mismo rojo del sistema, no uno nuevo. */
[data-aviso].es-error { color: var(--error); }


/* ==========================================================================
   38 · MENÚ DE CELULAR
   --------------------------------------------------------------------------
   AGREGADO EL 03/09/2026. Por debajo de 860 px, .nav__links está en
   display:none — o sea que en un celular el sitio no tenía menú. Ni una
   forma de llegar a /carros o a /domotica desde una ficha de producto.
   En Colombia la mayoría del tráfico entra por celular, así que era justo
   donde más dolía.

   Sin librerías: un botón, un panel y doce líneas en lumat.js.
   ========================================================================== */

.nav__boton {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;               /* 44 px es el mínimo para acertarle con el dedo */
  height: 44px;
  margin-left: calc(var(--e3) * -1);
  border-radius: var(--r-boton);
  color: var(--papel);
  cursor: pointer;
  transition: background var(--v-rapida) ease;
}

.nav__boton:hover { background: rgba(255,255,255,.06); }

/* De 860 px para arriba manda la fila de secciones y el botón sobra. */
@media (min-width: 860px) { .nav__boton { display: none; } }

/* Las tres rayas, dibujadas con bordes en vez de tres elementos. Al abrir
   se vuelven una X: es lo que le dice a la persona que el botón que abrió
   es el mismo que cierra. */
.nav__hamburguesa,
.nav__hamburguesa::before,
.nav__hamburguesa::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--v-rapida) var(--curva),
              opacity var(--v-rapida) var(--curva);
}

.nav__hamburguesa { position: relative; }

.nav__hamburguesa::before,
.nav__hamburguesa::after { content: ""; position: absolute; left: 0; }
.nav__hamburguesa::before { top: -6px; }
.nav__hamburguesa::after  { top:  6px; }

[aria-expanded="true"] .nav__hamburguesa { background: transparent; }
[aria-expanded="true"] .nav__hamburguesa::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav__hamburguesa::after  { transform: translateY(-6px) rotate(-45deg); }

/* El panel. Cuelga del encabezado, que ya está pegado arriba. */
.nav__panel {
  display: flex;
  flex-direction: column;
  padding: var(--e2) var(--e5) var(--e4);
  background: rgba(14,16,19,.97);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
}

@media (min-width: 860px) { .nav__panel { display: none; } }

.nav__panel a {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel-2);
  text-decoration: none;
}

.nav__panel a:last-child { border-bottom: 0; }
.nav__panel a:hover { color: var(--papel); }

/* Dónde estás. El acento, no una negrita: se ve sin gritar. */
.nav__panel a[aria-current="page"] { color: var(--acento); }

/* En celular el botón de WhatsApp deja solo el ícono: el texto se comía
   el sitio del logo y el menú quedaba apretado contra el borde. */
@media (max-width: 480px) {
  .nav__wa span { display: none; }
  .nav__wa { padding-inline: var(--e3); }
}

/* La línea de apoyo de la barra sobra en un celular: con ella la barra
   medía 182 px de alto, que para algo que se supone discreto es demasiado.
   La pregunta y el botón se bastan solos. */
@media (max-width: 600px) {
  .barra-captura__apoyo { display: none; }
}


/* ==========================================================================
   39 · LA PÁGINA PRINCIPAL COMO ABREBOCAS
   --------------------------------------------------------------------------
   Reestructuración confirmada por Gio el 03/09/2026.

   La home dejó de ser un catálogo. Su trabajo ahora es VENDER LA IDEA y
   repartir hacia las dos líneas; el catálogo vive en carros.php y en
   domotica.php, que es donde la persona ya sabe qué busca.

   Tres razones, y ninguna es de gusto:
     1. Las mismas 25 tarjetas en tres páginas es contenido duplicado.
        Google escoge una y diluye las tres.
     2. Quien escribe "lumat" quiere entender; quien busca "carro para
        armar 1:8" quiere el precio. Una sola página no atiende a los dos.
     3. Una página que vende la idea se sostiene con palabras y tres
        imágenes. Una página catálogo necesita 25 fotos que hoy no existen.

   EL ESPEJO · pedido por Gio: coleccionables se lee de izquierda a derecha
   y domótica al revés. Es una señal que se entiende sin leer: son dos
   mundos distintos. Cuesta una clase.
   ========================================================================== */

.porque {
  display: grid;
  gap: var(--e6);
  align-items: center;
}

@media (min-width: 900px) {
  .porque {
    grid-template-columns: 1fr 1fr;
    gap: var(--e8);
  }

  /* El espejo: en domótica la imagen se va a la izquierda y el texto a la
     derecha. Se hace con order y no con direction para no voltear también
     los números y la puntuación, que en español se leen igual siempre. */
  .porque--espejo .porque__media { order: -1; }
  .porque--espejo .porque__texto { text-align: right; }
  .porque--espejo .porque__lista li { flex-direction: row-reverse; text-align: right; }
  .porque--espejo .porque__acciones { justify-content: flex-end; }
}

.porque__titulo {
  margin-block: var(--e3) var(--e4);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--papel);
}

.porque__entrada {
  max-width: 52ch;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--papel-2);
}

.porque--espejo .porque__entrada { margin-left: auto; }

.porque__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  margin-top: var(--e6);
}

.porque__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
}

.porque__lista .ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--acento);
}

.porque__lista b {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--papel);
}

.porque__lista span {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--papel-2);
}

.porque__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e7);
}

/* --- El montaje de imágenes ---------------------------------------------
   Pedido por Gio: varias fotos una detrás de otra en vez de una sola.
   La de atrás sale girada y más pequeña; la de adelante manda.

   Si solo existe una foto, se ve una foto y ya: no hay hueco ni marco
   vacío. Si no existe ninguna, queda el marcador y el bloque no se rompe.
   Por eso el montaje se arma con lo que haya, no con lo que debería haber. */

.montaje {
  position: relative;
  padding: var(--e5) var(--e4) var(--e6);
}

.montaje__pieza {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tarjeta);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  background: linear-gradient(180deg, #16191E 0%, #121519 100%);
  box-shadow: var(--sombra-2);
}

.montaje__pieza > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La principal, de frente */
.montaje__pieza--1 {
  aspect-ratio: 4 / 5;
  max-width: 70%;
  margin-inline: auto;
  z-index: 3;
}

/* Las de atrás, asomando por los lados. position:absolute para que no
   empujen el alto del bloque. */
.montaje__pieza--2,
.montaje__pieza--3 {
  position: absolute;
  top: 18%;
  width: 42%;
  aspect-ratio: 3 / 4;
  z-index: 1;
  opacity: .7;
}

.montaje__pieza--2 { left: 0;  transform: rotate(-6deg) translateY(-4%); }
.montaje__pieza--3 { right: 0; transform: rotate(5deg)  translateY(6%); }

/* El resplandor de la línea detrás del montaje: es lo que evita que el
   bloque se vea como tres fotos pegadas sobre un fondo plano. */
.montaje::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--acento-medio), transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}

/* En celular se apilan las de atrás detrás de verdad: en 390 px, tres
   fotos lado a lado no se leen. Queda la principal y una asomada. */
@media (max-width: 700px) {
  .montaje__pieza--1 { max-width: 82%; }
  .montaje__pieza--3 { display: none; }
  .montaje__pieza--2 { width: 38%; top: 26%; }
}


/* ==========================================================================
   40 · ESCENARIOS DE DOMÓTICA
   --------------------------------------------------------------------------
   Idea de Gio, 03/09/2026, y es la que cambia esa página entera.

   "El carro se vende con una foto. La domótica hay que explicarla producto
   por producto: la página tiene que vendérsela al cliente."

   Tiene razón, así que domotica.php no va organizada por categoría de
   producto sino POR PROBLEMA, en las palabras del cliente: la luz de la
   niña que se queda prendida todo el día, el deshumidificador que nadie
   quiere estar vigilando, la batería del celular cargando toda la noche.

   Y funciona hoy, con el catálogo vacío: los escenarios se leen y capturan
   el WhatsApp aunque los 7 productos sigan en Proximamente sin precio.
   ========================================================================== */

.escenarios { display: grid; gap: var(--e5); }

@media (min-width: 760px)  { .escenarios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .escenarios { grid-template-columns: repeat(3, 1fr); } }

.escenario {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e5);
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1);
  transition: transform var(--v-rapida) var(--curva),
              box-shadow var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva);
}

.escenario:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-top-color: var(--acento-borde);
}

.escenario__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-boton);
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  color: var(--acento);
}

.escenario__ico .ico { width: 22px; height: 22px; }

/* El problema va en primera persona y entre comillas: es lo que la persona
   diría en voz alta. Si se escribe como característica de producto
   ("temporizador programable"), nadie se reconoce en la frase. */
.escenario__problema {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--papel);
  text-wrap: balance;
}

.escenario__solucion {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--papel-2);
}

/* Lo que hace falta para resolverlo. Va en mono porque es una lista de
   piezas, no prosa. */
.escenario__piezas {
  margin-top: auto;
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: .75rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--papel-3);
}

.escenario__piezas b { color: var(--papel-2); font-weight: 500; }


/* ==========================================================================
   41 · COMPARATIVA DE CALIDAD AA / AAA
   --------------------------------------------------------------------------
   Pedida por Gio el 03/09/2026. "diferencia entre calidad AA y AAA" es una
   búsqueda que se puede ganar, y además resuelve la duda que frena la
   compra justo antes de pagar.

   Todo el contenido sale de las columnas aa_beneficios y aaa_beneficios
   del Sheet. Aquí no hay ni una característica escrita a mano.
   ========================================================================== */

.comparativa {
  display: grid;
  gap: var(--e4);
}

@media (min-width: 760px) {
  .comparativa { grid-template-columns: 1fr 1fr; gap: var(--e5); }
}

.comparativa__col {
  display: flex;
  flex-direction: column;
  padding: var(--e5);
  background: linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
  border: 1px solid var(--linea);
  border-top-color: var(--filo);
  border-radius: var(--r-tarjeta);
}

/* La AAA se marca en latón, no en el acento de la línea. Es el único sitio
   del sistema con ese color y por eso significa algo. */
.comparativa__col--aaa {
  border-color: var(--laton-borde);
  border-top-color: var(--laton-borde);
  background:
    linear-gradient(180deg, var(--laton-suave) 0%, transparent 50%),
    linear-gradient(180deg, var(--acero-claro) 0%, var(--acero) 100%);
}

.comparativa__nombre {
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: var(--t-h3);
  letter-spacing: -.01em;
  color: var(--papel);
}

.comparativa__precio {
  margin-top: var(--e2);
  font-family: var(--f-display);
  font-variation-settings: var(--ancho-display);
  font-weight: 900;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--papel);
}

.comparativa__col--aaa .comparativa__precio { color: var(--laton-claro); }

.comparativa__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e5);
}

.comparativa__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--papel-2);
}

.comparativa__lista .ico { flex: 0 0 auto; margin-top: 2px; color: var(--acento); }
.comparativa__col--aaa .comparativa__lista .ico { color: var(--laton-claro); }


/* ==========================================================================
   42 · "SOLO EL CUADRO" · el sello que evita una devolución
   --------------------------------------------------------------------------
   Lo señaló Gio el 03/09/2026 y no es un detalle de diseño, es de
   devoluciones: las fotos del cuadro muestran el carro montado dentro,
   porque así es como se ve colgado. Quien no lea con cuidado va a creer
   que el carro viene incluido, y eso termina en un reclamo.

   Por eso el aviso va ENCIMA de la foto, no en la descripción: tiene que
   verse en el mismo golpe de vista que genera la confusión.
   ========================================================================== */

.solo-cuadro {
  position: absolute;
  left: var(--e3);
  right: var(--e3);
  bottom: var(--e3);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 6px var(--e3);
  border-radius: var(--r-chip);
  background: rgba(14,16,19,.88);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--alerta);
  font-family: var(--f-dato);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.35;
  text-align: center;
  color: var(--alerta);
}

.solo-cuadro .ico { flex: 0 0 auto; width: 14px; height: 14px; }

/* La versión grande, para la ficha del producto */
.solo-cuadro--ficha {
  position: static;
  justify-content: flex-start;
  text-align: left;
  padding: var(--e4);
  border-radius: var(--r-boton);
  font-size: var(--t-small);
  letter-spacing: 0;
  font-family: var(--f-texto);
  margin-bottom: var(--e4);
}

.solo-cuadro--ficha .ico { width: 20px; height: 20px; }


/* ==========================================================================
   43 · EL CATÁLOGO EN CELULAR · corrección pedida por Gio
   --------------------------------------------------------------------------
   "debes esforzarte más en la versión móvil, es donde más nos van a ver."
   Tiene razón, y con 25 productos en una sola columna el catálogo era un
   scroll interminable. Dos columnas desde 380 px: se ven cuatro productos
   por pantallazo en vez de uno.
   ========================================================================== */

@media (min-width: 380px) {
  .catalogo .rejilla--4 { grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
}

@media (min-width: 640px) {
  .catalogo .rejilla--4 { gap: var(--e5); }
}

/* En dos columnas el nombre y la ficha tienen que encoger, o el texto se
   parte en seis renglones y las tarjetas quedan de alturas distintas. */
@media (max-width: 639px) {
  .catalogo .tarjeta__nombre { font-size: .9375rem; line-height: 1.2; }
  .catalogo .tarjeta__ficha  { font-size: .6875rem; }
  .catalogo .tarjeta__cuerpo { padding: var(--e3); gap: var(--e2); }
  .catalogo .precio--sm .precio__ahora { font-size: 1.125rem; }
  .catalogo .precio--sm .precio__antes { font-size: .6875rem; }
  .catalogo .etiqueta-linea span { display: none; }
}

/* --- Los filtros que se quedan pegados ---------------------------------
   Idea de Gio: "cuando esté abajo puede aparecer botones que me sirvan de
   filtros, que ya no tenga que ir a buscar lo que necesito".

   Se quedan debajo del menú al pasar el encabezado. En celular la fila se
   arrastra de lado, y el degradado del borde derecho es lo que le dice a
   la persona que hay más botones fuera de la pantalla — sin ese degradado
   nadie arrastra, porque nada indica que haya algo más. */
.filtros--pegados {
  position: sticky;
  top: calc(var(--alto-cinta) + 56px);
  z-index: 40;
  margin-inline: calc(var(--e5) * -1);
  padding: var(--e3) var(--e5);
  background: rgba(14,16,19,.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 860px) {
  .filtros--pegados { top: calc(var(--alto-cinta) + 64px); }
}

.filtros--pegados .filtros {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.filtros--pegados .filtros::-webkit-scrollbar { display: none; }
.filtros--pegados .chip--filtro { flex: 0 0 auto; }

@media (min-width: 860px) {
  .filtros--pegados .filtros { flex-wrap: wrap; }
}

/* La línea del cuadro dentro de la tarjeta del carro. Va discreta y en el
   acento: es una oferta, no una advertencia, y no puede competir con el
   precio del producto principal. */
.tarjeta__extra {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--e2);
  padding-top: var(--e3);
  border-top: 1px dashed var(--linea);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--papel-3);
}

.tarjeta__extra .ico { flex: 0 0 auto; margin-top: 2px; color: var(--acento); }
.tarjeta__extra b { color: var(--papel-2); font-weight: 600; }

/* En el catálogo a dos columnas del celular no cabe: la tarjeta ya está
   apretada y esta línea la volvería el doble de alta. Se ve de 640 arriba
   y en la ficha, que es donde el upsell de verdad se decide. */
@media (max-width: 639px) {
  .catalogo .tarjeta__extra { display: none; }
}