/* ============================================================
   3 GORILAS - web publica
   Estructura tomada de las tiendas grandes (cabecera fija con
   buscador central, franja de utilidades, migas, tira de
   secciones, rejilla de productos) sobre la identidad propia:
   navy #0a2540 y azul #0d6efd.
   ============================================================ */

:root {
  --navy:        #0a2540;
  --navy-2:      #0e1a2b;
  --navy-3:      #17375e;

  /* Cabecera: SIGUE EL TEMA. En modo claro va clara -fondo papel, letra y
     logo navy- y en oscuro va navy con letra y logo blancos, para que el
     encabezado se integre con el resto de la pagina en vez de ser una franja
     azul suelta que "se separa". Todo el chrome de la cabecera pasa por estos
     tokens; el pie se queda navy siempre (ver .pie). El servidor NO los pisa:
     el fondo claro no es el color de marca, es el papel de la pagina. */
  --cab-bg:     var(--blanco);
  --cab-bg2:    var(--superficie-2);
  --cab-fg:     var(--texto-fuerte);
  --cab-fg-rgb: 10, 37, 64;
  --cab-borde:  var(--borde);

  --azul:        #0d6efd;
  --azul-hover:  #0a58ca;
  /* Estos dos los recalcula el servidor con el color que eligio el
     equipo. Aca quedan los de fabrica, por si alguna pantalla se
     dibuja sin ese bloque. */
  --azul-brillo: #3b87fd;
  --azul-grad-1: #0d6efd;
  --azul-grad-2: #0c62e2;
  --azul-borde-boton: #0b62e0;
  --acento-rgb: 13, 110, 253;
  --acento-en-marca-rgb: 42, 127, 253;
  --sobre-acento: #ffffff;
  --sobre-marca: #ffffff;
  --azul-en-marca: #7db3ff;
  --azul-suave:  #eaf2ff;
  --azul-borde:  #c7dcff;

  --fondo:       #f4f7fb;
  --blanco:      #ffffff;
  --gris:        #f8fafc;
  --superficie-2:#f7f9fc;   /* el gris de apoyo: cajas dentro de una tarjeta */
  --gris-brillo: #eef3f9;   /* el gris de los esqueletos de carga */
  /* Este par va SOBRE una foto, no sobre el fondo de la pagina: es una
     superficie fija y por eso NO se redefine en el bloque oscuro. Si alguna
     vez se agrega alli "por consistencia", el boton vuelve a quedar blanco
     sobre blanco. */
  --pastilla-fija:       #ffffff;
  --pastilla-fija-texto: #0a2540;

  --texto:       #0a2540;
  /* El azul marino de la marca sirve para FONDOS (la cabecera, el pie) y
     tambien se usaba como color de TEXTO en titulos y menus. De noche eso
     era letra azul marino sobre fondo azul marino: invisible. El fondo
     sigue siendo --navy; el texto pasa a este, que si cambia de noche. */
  --texto-fuerte:#0a2540;
  --texto-2:     #5b6b7b;
  --texto-3:     #626e7d;

  --borde:       #e2e9f2;
  --borde-2:     #cfdaea;

  --verde:       #0e7c3e;
  --verde-fondo: #e8f9ef;
  --ambar:       #96631a;
  --ambar-fondo: #fdf5e3;
  --rojo:        #c02d38;
  --rojo-fondo:  #fdeef0;
  --oferta:      #cc0c39;

  --sombra:      0 1px 3px rgba(10, 37, 64, .07);
  --sombra-2:    0 8px 28px rgba(10, 37, 64, .13);
  --radio:       10px;
  --radio-s:     6px;
  --pill:        999px;

  --ancho:       1400px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 15px/1.6 Poppins, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-hover); text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; text-wrap: balance; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.2rem; }

/* ==================================================== iconos */
/* Heredan el color del texto, asi que sirven sobre cualquier fondo. */
.ico { display: block; flex: 0 0 auto; }
.con-ico { display: flex; align-items: center; gap: .5rem; }
.con-ico > span { display: flex; flex-direction: column; line-height: 1.25; }

/* Recuadro suave detras de un icono: categorias y estados vacios */
.marco-ico {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--azul-suave); color: var(--azul);
  border: 1px solid var(--azul-borde);
  transition: background .16s, color .16s, border-color .16s;
}
.marco-ico.grande { width: 72px; height: 72px; border-radius: 20px; margin: 0 auto .9rem; }

/* ============================================ barra de utilidades
   La franja fina de arriba de todo: promesas a la izquierda, redes y pais a la
   derecha. Va SIEMPRE en navy (como el pie), no sigue el tema: es un remate
   oscuro y delgado. No es pegajosa; la cabecera de abajo si. */
.barra-utilidad {
  background: var(--navy); color: rgba(var(--sobre-marca-rgb), .85);
  font-size: .78rem;
}
.barra-utilidad .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px; flex-wrap: wrap;
}
.util-info { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.util-info a {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  color: rgba(var(--sobre-marca-rgb), .85);
}
.util-info a:hover { color: var(--sobre-marca, #fff); text-decoration: none; }
.util-info svg { opacity: .8; }
.util-sep { width: 1px; height: 14px; background: rgba(var(--sobre-marca-rgb), .25); }
.util-lado { display: flex; align-items: center; gap: .5rem; }
.util-sigue { color: rgba(var(--sobre-marca-rgb), .7); }
.util-red {
  display: inline-flex; padding: .3rem; border-radius: 50%; line-height: 0;
  color: rgba(var(--sobre-marca-rgb), .85); transition: background .16s, color .16s;
}
.util-red:hover {
  color: var(--sobre-marca, #fff); background: rgba(var(--sobre-marca-rgb), .14);
  text-decoration: none;
}
.util-pais {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: .3rem;
  padding-left: .75rem; border-left: 1px solid rgba(var(--sobre-marca-rgb), .25);
  color: rgba(var(--sobre-marca-rgb), .85); white-space: nowrap; font-weight: 600;
}
/* En el telefono queda solo redes + pais a la derecha; las promesas de la
   izquierda ya estan en el pie y en la franja de confianza. */
@media (max-width: 640px) {
  .util-info { display: none; }
  .barra-utilidad .contenedor { justify-content: flex-end; min-height: 34px; }
}

/* ==================================================== cabecera */
.cabecera { position: sticky; top: 0; z-index: 60; box-shadow: var(--sombra); }

/* --- fila 1: marca, buscador, cuenta, carrito --- */
/* Todo lo que va ENCIMA del color de marca o del acento usa la letra que
   calcula el servidor, no un blanco fijo: con una marca clara el blanco no se
   lee. El valor de respaldo mantiene el blanco si la pantalla se dibuja sin
   el bloque inyectado. */
.barra-principal { background: var(--cab-bg); }
.barra-principal .contenedor {
  display: flex; align-items: center; gap: 1.2rem;
  padding-top: .7rem; padding-bottom: .7rem;
}

.marca { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.marca:hover { text-decoration: none; }
/* El simbolo va con el color que corresponde ENCIMA del color de marca, no
   con el que herede. Estaba dentro de un <a>, asi que tomaba el color de los
   enlaces -- el ACENTO -- sobre una cabecera pintada con la MARCA: medido,
   1.69 a 1 en modo oscuro. El valor de respaldo no es opcional: --sobre-marca
   solo existe en el bloque que inyecta el servidor, y sin el la regla se
   descarta y vuelve el mismo error, callado. */
.marca .simbolo-marca {
  width: auto; display: block; flex: 0 0 auto;
  color: var(--cab-fg, #fff);
}
.marca-texto { color: var(--cab-fg, #fff); line-height: 1.1; }
.marca-texto b { display: block; font-size: 1.05rem; font-weight: 700; }
.marca-texto span { font-size: .68rem; color: rgba(var(--cab-fg-rgb), .7); }

.buscador {
  display: flex; flex: 1 1 320px; max-width: 680px; min-width: 220px; height: 46px;
  /* Un fondo apenas visible (la tinta de la cabecera al 6-8%) separa el
     buscador del fondo sin recuadro duro. Con la cabecera clara ese tinte es
     un gris muy suave; con la oscura, un blanco tenue. El borde acompana. */
  background: rgba(var(--cab-fg-rgb), .06); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--cab-borde);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.buscador:hover { background: rgba(var(--cab-fg-rgb), .10); }
.buscador:focus-within {
  background: rgba(var(--cab-fg-rgb), .12);
  border-color: transparent; box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .45);
}
.buscador select {
  flex: 0 0 auto; max-width: 160px; border: none; background: transparent;
  color: var(--cab-fg, rgba(255,255,255,.9)); font: inherit; font-size: .84rem;
  /* mas aire a los lados y sitio para la flechita: "Todo" ya no queda pegado */
  padding: 0 1.6rem 0 1.1rem; cursor: pointer;
  /* la flechita, dibujada. Va navy para la cabecera clara; en el bloque oscuro
     mas abajo se cambia por la blanca. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none' stroke='%230a2540' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
}
/* una linea divisoria SEPARADA del texto, con aire a cada lado */
.buscador select { position: relative; }
.buscador .div-buscador,
.buscador select { border-right: 1px solid var(--cab-borde); }
.buscador select option { background: var(--cab-bg); color: var(--cab-fg, #fff); }
.buscador input {
  flex: 1; min-width: 0; border: none; font: inherit; font-size: .9rem;
  padding: 0 1.1rem; color: var(--cab-fg, #fff); background: transparent;
}
.buscador input::placeholder { color: rgba(var(--cab-fg-rgb, 255,255,255), .6); font-size: .85rem; }
/* De noche el buscador va con UN SOLO tono parejo: el CONTENEDOR lleva el
   relleno (superficie-2) y el select y el input van transparentes, asi "Todo"
   y "Buscar productos" quedan del mismo color (antes el input tomaba
   superficie-2 por la regla generica de los input y salia mas claro que el
   select). La flechita del select pasa a blanca; repeat/position van repetidos
   para que no se tesele si otra regla toca el atajo `background`. */
:root[data-tema="oscuro"] .buscador,
:root[data-tema="oscuro"] .buscador:hover,
:root[data-tema="oscuro"] .buscador:focus-within { background-color: var(--superficie-2); }
:root[data-tema="oscuro"] .buscador select,
:root[data-tema="oscuro"] .buscador input { background-color: transparent; }
:root[data-tema="oscuro"] .buscador select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}
.buscador input:focus { outline: none; }
.buscador button {
  flex: 0 0 54px; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--azul-grad-1) 0%, var(--azul-grad-2) 100%);
  color: var(--sobre-acento, #fff); font-size: 1.05rem; display: grid; place-items: center;
  transition: filter .16s ease, background .16s ease;
}
.buscador button:hover { background: var(--azul-hover); filter: brightness(1.05); }

.acciones-cabecera { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.accion {
  display: flex; flex-direction: column; justify-content: center;
  color: var(--cab-fg, #fff); font-size: .82rem; line-height: 1.25; white-space: nowrap;
  padding: .35rem .7rem; border-radius: var(--radio-s);
  transition: background .16s ease, color .16s ease;
}
.accion:hover { background: rgba(var(--cab-fg-rgb), .10); text-decoration: none; color: var(--cab-fg, #fff); }
.accion small { color: rgba(var(--cab-fg-rgb), .7); font-size: .72rem; }
.accion b { font-size: .88rem; font-weight: 600; }

/* --- barra de SOLO ICONOS con globo de ayuda (tooltip) --- */
/* Todos los accesos con la MISMA pinta: hover redondo del mismo tamano. Antes
   el de Tema era una pastilla con relleno y borde entre iconos pelados y se
   veia suelto; ahora es un icono mas. */
.acciones-cabecera.solo-iconos .accion { padding: .55rem; border-radius: 50%; }
.acciones-cabecera.solo-iconos .boton-tema {
  background: transparent; border: 0; color: var(--cab-fg, #fff);
  padding: .55rem; min-height: 0; gap: 0; border-radius: 50%;
}
.acciones-cabecera.solo-iconos .boton-tema:hover {
  background: rgba(var(--cab-fg-rgb), .10); color: var(--cab-fg, #fff);
  border-color: transparent; transform: none;
}
.acciones-cabecera.solo-iconos .rotulo,
.acciones-cabecera.solo-iconos .rotulo-tema { display: none; }
.acciones-cabecera [data-tip] { position: relative; }
.acciones-cabecera [data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy-2, #0a1a30); color: var(--sobre-marca, #fff);
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  padding: .3rem .55rem; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease; z-index: 80;
}
.acciones-cabecera [data-tip]:hover::after,
.acciones-cabecera [data-tip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .acciones-cabecera [data-tip]::after { transition: none; }
}
/* En el telefono no hay "pasar el cursor": el texto va SIEMPRE, chiquito y
   debajo del icono (el mismo data-tip que en escritorio es tooltip). */
@media (max-width: 860px) {
  /* mas aire entre los iconos: en el telefono sobra ancho y apretados se ven
     mal. Cada uno es icono + textito centrados. */
  .acciones-cabecera.solo-iconos { gap: .35rem; }
  .acciones-cabecera.solo-iconos .accion,
  .acciones-cabecera.solo-iconos .accion-carrito,
  .acciones-cabecera.solo-iconos .accion-avisos,
  .acciones-cabecera.solo-iconos .boton-tema {
    flex-direction: column !important; align-items: center; gap: 3px;
    padding: .4rem .7rem; min-width: 62px;
  }
  .acciones-cabecera.solo-iconos [data-tip]::after {
    content: attr(data-tip);
    position: static; opacity: 1; transform: none; pointer-events: none;
    background: none; box-shadow: none; border-radius: 0;
    color: rgba(var(--cab-fg-rgb), .85);
    font-size: .64rem; font-weight: 600; padding: 0; white-space: nowrap;
  }
}

.accion-carrito, .accion-avisos { align-items: center; }
/* el globo suelto (lo usan otras pantallas, p.ej. el carrito) */
.globo {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding: 0 .35rem; background: var(--azul); color: var(--sobre-acento, #fff);
  border-radius: var(--pill); font-size: .76rem; font-weight: 700;
}

/* Contador de Avisos y de Carrito: el numero va como insignia FLOTANTE arriba
   a la derecha del icono, en rojo, y desaparece en cero. Los DOS usan el mismo
   estilo: antes el carrito era una pastilla azul en linea y Avisos una insignia
   roja, y se veian como dos cosas distintas. */
.accion-avisos .icono-avisos,
.accion-carrito .icono-carrito { position: relative; display: inline-flex; }
.globo-avisos, .globo-carrito {
  position: absolute; top: -7px; right: -9px;
  display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem;
  padding: 0 .28rem; background: var(--oferta, #cc0c39);
  color: var(--sobre-oferta, #fff);
  border-radius: var(--pill); font-size: .66rem; font-weight: 700; line-height: 1;
  /* el anillo que separa la insignia del icono es del color de la cabecera */
  border: 2px solid var(--cab-bg);
}
.globo-avisos.vacio, .globo-carrito.vacio { display: none; }

/* --- fila 2: utilidades y categorias --- */
/* Un pelo mas oscura/clara que la fila 1 y con hairlines arriba y abajo: con
   la cabecera clara eso delimita el encabezado sobre el fondo de la pagina. */
.barra-secundaria {
  background: var(--cab-bg2);
  border-top: 1px solid var(--cab-borde);
  border-bottom: 1px solid var(--cab-borde);
}
.barra-secundaria .contenedor {
  display: flex; align-items: center; gap: .2rem;
  flex-wrap: wrap;
}
.barra-secundaria a,
.barra-secundaria .menu-catalogo summary {
  color: rgba(var(--cab-fg-rgb), .88); font-size: .86rem; font-weight: 500;
  white-space: nowrap; padding: .6rem .85rem; border-bottom: 3px solid transparent;
  /* icono + texto alineados */
  display: inline-flex; align-items: center; gap: .45rem;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.barra-secundaria a svg, .barra-secundaria summary svg { flex: 0 0 auto; opacity: .85; }
/* El hover de Catalogo (un <summary>) usa el MISMO color que los demas enlaces:
   antes usaba --sobre-marca (blanco, para fondo navy) y sobre esta barra CLARA
   el texto se volvia blanco y "desaparecia". Con --cab-fg toma el color que
   contrasta con la barra en cualquier tema. */
.barra-secundaria a:hover,
.barra-secundaria .menu-catalogo > summary:hover { color: var(--cab-fg, #fff); background: rgba(var(--cab-fg-rgb), .08); text-decoration: none; }
/* activo: SUBRAYADO del acento (como la referencia), sin caja de fondo */
.barra-secundaria a.activo {
  color: var(--cab-fg, #fff); font-weight: 600; border-bottom-color: var(--azul);
}
.barra-secundaria a.activo svg { opacity: 1; color: var(--azul); }
/* El foco NO dibuja una caja: usa el MISMO subrayado naranja que el estado
   activo. Asi "Catalogo" (un <summary>) se ve igual que "Nosotros" (un enlace)
   -una linea naranja abajo- y no como un recuadro suelto. Sirve de indicador
   de foco para el teclado y a la vez es consistente con el resto de la barra. */
.barra-secundaria a:focus,
.barra-secundaria .menu-catalogo summary:focus { outline: none; }
.barra-secundaria a:focus-visible,
.barra-secundaria .menu-catalogo summary:focus-visible {
  outline: none; border-bottom-color: var(--azul);
}
.barra-secundaria .separador {
  width: 1px; height: 20px; background: rgba(var(--cab-fg-rgb), .2); margin: 0 .6rem;
}
.dato-tienda {
  display: flex; align-items: center; gap: .4rem; margin-left: auto;
  color: rgba(var(--cab-fg-rgb), .8); font-size: .8rem; white-space: nowrap; padding-left: 1rem;
}

/* ==================================================== migas */
.migas { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.migas .contenedor {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding-top: .6rem; padding-bottom: .6rem; font-size: .82rem; color: var(--texto-2);
}
.migas a { color: var(--texto-2); }
.migas a:hover { color: var(--azul); }
.migas .sep { color: var(--texto-3); }
.migas b { color: var(--texto); font-weight: 600; }

/* ==================================================== contenido */
main { padding-bottom: 4rem; }
.seccion { padding-top: 2.2rem; }
.titulo-seccion {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.titulo-seccion h2 { font-size: 1.5rem; font-weight: 700; }
.titulo-seccion p { margin: .2rem 0 0; color: var(--texto-2); font-size: .9rem; }

/* ==================================================================
   CAPA DE ACABADO
   Lo de abajo no cambia la estructura de ninguna pagina: solo le da
   profundidad, ritmo y movimiento a lo que ya existe. Se agrego despues
   de tener todo funcionando, a proposito, para poder quitarlo entero si
   alguna vez estorba.
   ================================================================== */

/* --- la primera pantalla, con o sin foto ---------------------------------
   Cuando no hay foto cargada, el hero era un rectangulo de color liso y se
   veia vacio. Estas dos capas le dan textura y profundidad sin depender de
   ninguna imagen: una trama de puntos finisima y un segundo halo del otro
   lado, que equilibra el que ya venia desde la izquierda. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 88% 18%, rgba(125, 179, 255, .16), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0);
  background-size: auto, 22px 22px;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* la union con lo que sigue deja de ser un corte recto */
.hero .contenedor { z-index: 1; }
.hero + * { position: relative; }

/* --- encabezados de seccion ----------------------------------------------
   Antes eran un h2 suelto. Una barra corta de acento arriba le da jerarquia
   y hace que cada bloque de la pagina se lea como una parada, no como un
   parrafo mas. */
.titulo-seccion h2 {
  position: relative;
  font-size: clamp(1.5rem, 1.25rem + .7vw, 1.9rem);
  letter-spacing: -.02em;
}
.titulo-seccion > div > h2::before {
  content: ""; display: block;
  width: 34px; height: 3px; margin-bottom: .7rem;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--azul), var(--azul-brillo));
}

/* El revelado escalonado NO se hace aca: lo pone publico.js:171 en el estilo
   del elemento (--retraso: i * 55ms). Una regla CSS equivalente no llegaria
   nunca a aplicarse, porque el estilo en linea le gana. */

/* --- tarjetas de categoria ------------------------------------------------
   Se les marca el borde superior al pasar el mouse: dice "esto se puede
   tocar" antes que la sombra, que llega despues. */
.tarjeta-categoria { position: relative; overflow: hidden; }
.tarjeta-categoria::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--azul), var(--azul-brillo));
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.tarjeta-categoria:hover::before { transform: scaleX(1); }
.tarjeta-categoria .ir { transition: gap .2s ease; }
.tarjeta-categoria:hover .ir { gap: .6rem; }

/* --- tarjetas de producto ------------------------------------------------ */
/* la foto se separa del texto con una linea finisima, no con un salto seco */
.producto-foto { border-bottom: 1px solid var(--borde); }
/* la sombra al pasar el mouse, mas cerca del azul de la marca */
.producto:hover {
  box-shadow: 0 14px 34px -14px rgba(var(--acento-rgb), .35),
              0 4px 12px -6px rgba(10, 37, 64, .18);
}
/* el boton de agregar acompana el mismo gesto que la tarjeta */
.producto .agregar { transition: transform .18s ease, box-shadow .18s ease; }
.producto:hover .agregar { box-shadow: 0 6px 16px -6px rgba(var(--acento-rgb), .55); }

/* --- la barra de ordenar del catalogo -------------------------------------
   Estaba con estilos escritos a mano en la plantilla y sin proteger el
   rotulo: en cuanto la pantalla se angostaba, "Ordenar por" se partia en dos
   lineas y el desplegable quedaba apretado contra el borde. */
.orden-catalogo {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--texto-2);
}
.orden-catalogo > span { white-space: nowrap; }
.orden-catalogo select { min-width: 11rem; }
@media (max-width: 560px) {
  .orden-catalogo { width: 100%; }
  .orden-catalogo select { flex: 1; min-width: 0; }
}

/* --- el pie ---------------------------------------------------------------
   Una linea de acento arriba, para que no parezca que la pagina se corta. */
.pie { position: relative; }
.pie::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--azul), var(--azul-brillo), var(--azul));
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-categoria::before { transition: none; }
  .producto .agregar { transition: none; }
}

/* ==================================================== hero */
.hero { background: var(--navy); color: var(--sobre-marca, #fff); overflow: hidden; position: relative; }
/* halo suave detras del texto, en lugar de un degradado de lado a lado */
.hero::before {
  content: ""; position: absolute; inset: -40% 45% -40% -20%;
  background: radial-gradient(closest-side, rgba(var(--acento-rgb), .38), transparent 70%);
  pointer-events: none;
}
.hero .contenedor {
  position: relative;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center;
  padding-top: 3.6rem; padding-bottom: 3.6rem;
}
/* el renglon chico de valores, arriba del titular, en el color de acento */
.hero-valores {
  display: block; color: var(--azul-en-marca);
  font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .7rem;
}
.hero .etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(var(--sobre-marca-rgb), .1);
  border: 1px solid rgba(var(--sobre-marca-rgb), .22); border-radius: var(--pill);
  padding: .38rem 1rem .38rem .8rem; font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.1rem;
  /* Era #cfe1ff, un celeste fijo que no salia de ningun ajuste: con una
     marca amarilla quedaba celeste palido sobre amarillo. */
  color: var(--sobre-marca);
}
.hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.15rem); font-weight: 700;
  line-height: 1.1; letter-spacing: -.025em;
}
.hero h1 em { font-style: normal; color: var(--azul-en-marca); }
.hero p { margin: 1.1rem 0 2rem; font-size: 1.05rem; color: rgba(var(--sobre-marca-rgb), .82); max-width: 46ch; }
.hero-botones { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ventajas dentro del hero, en vez de tarjetas con numeros sueltos */
.hero-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hero-lista li {
  display: flex; align-items: flex-start; gap: .9rem;
  background: rgba(var(--sobre-marca-rgb), .06);
  border: 1px solid rgba(var(--sobre-marca-rgb), .13);
  border-radius: var(--radio); padding: .95rem 1.1rem;
  transition: background .16s, border-color .16s;
}
.hero-lista li:hover { background: rgba(var(--sobre-marca-rgb), .1); border-color: rgba(var(--sobre-marca-rgb), .24); }
.hero-lista .ico { color: var(--azul-en-marca); margin-top: .1rem; }
.hero-lista span { font-size: .87rem; color: rgba(var(--sobre-marca-rgb), .75); line-height: 1.45; }
.hero-lista b { display: block; color: var(--sobre-marca, #fff); font-size: .95rem; font-weight: 600; }

/* ==================================================== tira de ventajas */
.ventajas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--borde); border-bottom: 1px solid var(--borde);
}
.ventaja {
  background: var(--blanco); padding: 1.1rem 1.3rem;
  display: flex; align-items: center; gap: .9rem;
}
.ventaja .ico { font-size: 1.6rem; flex: 0 0 auto; }
.ventaja b { display: block; font-size: .92rem; font-weight: 600; }
.ventaja span { font-size: .8rem; color: var(--texto-2); }
/* el dibujo no se achica con font-size: un SVG necesita su propio tamano */
.ventaja > .ico { flex: 0 0 auto; color: var(--azul); }

/* La franja en el telefono y la tablet: se ACOMODA, no se desliza.

   El duenio lo definio asi: en el telefono lo unico que se arrastra de costado
   son las barras de arriba -las acciones de la cabecera y el menu-. El resto
   de la pagina se adapta al ancho.

   Dos por fila y CON el texto de abajo. La primera version escondia los
   cuatro subtitulos para ahorrar alto, y entre 561 y 860 la cuarta ventaja
   caia sola a otra fila. Dos por fila evita las dos cosas.

   minmax(0, 1fr) y no 1fr: una palabra larga no puede ensanchar su columna y
   empujar la pagina de costado.

   Solo en esta hoja y no en la plantilla: un servidor con la pagina compilada
   de antes la sigue mandando igual. */
@media (max-width: 860px) {
  .ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* el dibujo arriba y no centrado: cuando el texto baja a dos renglones,
     centrado quedaba flotando a media altura */
  .ventaja { padding: .75rem .85rem; gap: .6rem; align-items: flex-start; }
  .ventaja b { font-size: .84rem; line-height: 1.3; }
  .ventaja span { display: block; font-size: .74rem; line-height: 1.35; margin-top: .1rem; }
}

/* ==================================================== categorias */
.rejilla-categorias {
  display: grid; gap: 1rem;
  /* auto-fill y no auto-fit: con dos categorias, auto-fit vacia las columnas
     que sobran y reparte todo el ancho entre las dos, asi que quedan dos
     tarjetas gigantes de media pantalla cada una. auto-fill deja las columnas
     vacias donde estan y la tarjeta conserva su tamano. */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tarjeta-categoria {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.4rem; color: var(--texto);
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.tarjeta-categoria:hover {
  text-decoration: none; color: var(--texto);
  box-shadow: var(--sombra-2); transform: translateY(-3px); border-color: var(--azul-borde);
}
.tarjeta-categoria .marco-ico { margin-bottom: .85rem; }
.tarjeta-categoria:hover .marco-ico { background: var(--azul); color: var(--sobre-acento, #fff); border-color: var(--azul); }
.tarjeta-categoria b {
  /* dos lineas como maximo y alto reservado: con "Snacks" al lado de
     "Gaseosas y aguas minerales" el "Ver" de cada tarjeta terminaba a
     distinta altura */
  font-size: 1.05rem; font-weight: 600; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-categoria .cuenta { font-size: .84rem; color: var(--texto-2); }
.tarjeta-categoria .ir {
  /* auto y no un margen fijo: empuja el "Ver" al piso de la tarjeta, asi
     queda alineado con el de las demas */
  display: flex; align-items: center; gap: .3rem;
  margin-top: auto; padding-top: .8rem;
  font-size: .84rem; font-weight: 600; color: var(--azul);
}

/* ==================================================== catalogo */
.disposicion-catalogo {
  display: grid; grid-template-columns: 260px 1fr; gap: 1.4rem; align-items: start;
  padding-top: 1.6rem;
}
.filtros {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.2rem; position: sticky; top: 130px;
}
.filtros h3 { font-size: 1rem; margin-bottom: .8rem; }
.filtros h4 { font-size: .88rem; margin: 1.2rem 0 .5rem; color: var(--texto); }
.lista-filtros { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.lista-filtros a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .4rem .6rem; border-radius: var(--radio-s);
  color: var(--texto-2); font-size: .88rem;
}
/* azul-hover y no azul: el azul normal sobre el azul suave da 4.0, por
   debajo del minimo legible. El oscuro llega a 5.7. */
.lista-filtros a:hover { background: var(--azul-suave); color: var(--azul-hover); text-decoration: none; }
.lista-filtros a.activo { background: var(--azul-suave); color: var(--azul-hover); font-weight: 600; }
.lista-filtros .n { color: var(--texto-2); font-size: .8rem; flex: none; }
.lista-filtros .nombre-filtro {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-filtros .nombre-filtro .ico { flex: none; color: var(--texto-3); }
.lista-filtros a:hover .ico, .lista-filtros a.activo .ico { color: var(--azul); }

.barra-orden {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .8rem 1.1rem; margin-bottom: 1.1rem;
}
.barra-orden .conteo { font-size: .9rem; color: var(--texto-2); }
.barra-orden .conteo b { color: var(--texto); }
.barra-orden select {
  font: inherit; font-size: .88rem; padding: .45rem .7rem;
  border: 1px solid var(--borde-2); border-radius: var(--radio-s); background: var(--blanco);
}

/* ==================================================== producto
   La foto ocupa todo el ancho arriba, sobre un fondo suave que la separa de
   la tarjeta. Debajo el texto, y el pie anclado abajo para que en una fila
   los botones queden todos a la misma altura aunque los nombres midan
   distinto. */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.1rem;
}

.producto {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.producto:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-4px);
  border-color: var(--azul-borde);
}

/* --- la foto ------------------------------------------------------------- */
.producto-foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;          /* todas las tarjetas miden igual */
  background: linear-gradient(160deg, #f8fbff 0%, #eef3fa 100%);
  overflow: hidden;
}
.producto-foto img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .9rem;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.producto:hover .producto-foto img { transform: scale(1.06); }

.producto-foto .sin-foto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--texto-3); opacity: .5;
}
/* Este blanco NO se toca: el velo va sobre la FOTO del producto, no sobre
   el color de marca. Tiene que ser claro para que la palabra "agotado" se
   lea encima de cualquier foto. */
.velo-agotado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .72);
  font: 600 .82rem/1 Poppins, sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-2);
  backdrop-filter: blur(1px);
}

/* --- pastillas de oferta y novedad ---------------------------------------- */
.marcas {
  position: absolute; top: .65rem; left: .65rem; z-index: 3;
  display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
}
/* Las dos pastillas comparten la forma pero NO el fondo: una cae sobre el
   color de ofertas y la otra sobre el de los botones, y los dos los elige el
   equipo. Compartian tambien el color de letra, un blanco a mano, y por eso
   --sobre-oferta se calculaba, se inyectaba y no lo leia nadie: con un color
   de oferta claro la pastilla quedaba blanca sobre amarillo. */
.marca-oferta, .marca-nuevo {
  font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .34rem .6rem; border-radius: var(--pill);
  box-shadow: 0 2px 8px rgba(10, 37, 64, .2);
}
.marca-oferta { background: var(--oferta); color: var(--sobre-oferta); }
.marca-nuevo  { color: var(--sobre-acento); }
.marca-nuevo  { background: var(--verde); }

/* --- el texto ------------------------------------------------------------- */
.producto-cuerpo {
  display: flex; flex-direction: column;
  flex: 1;
  padding: .95rem 1rem 1.05rem;
}
.producto .cat {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-3);
}
.producto h3 {
  /* Dos lineas fijas, siempre. Sin esto un nombre largo empujaba la
     descripcion y el precio hacia abajo, y en una fila de cuatro tarjetas
     cada una terminaba con el precio a distinta altura. El clamp va en el
     <a> y no en el <h3>: sobre el h3 recorta el anillo de foco del teclado. */
  margin: .3rem 0 0;
  font-size: 1rem; font-weight: 600; line-height: 1.32;
  min-height: 2.64em;
}
.producto h3 a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.producto h3 a { color: var(--texto); }
.producto h3 a:hover { color: var(--azul); text-decoration: none; }
.producto .desc {
  /* alto reservado: un producto con descripcion y otro sin ella tienen que
     medir lo mismo, o el precio queda a distinta altura entre tarjetas */
  margin: .4rem 0 0; min-height: 3em;
  font-size: .84rem; line-height: 1.5; color: var(--texto-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- el pie, siempre abajo ------------------------------------------------ */
.producto-pie {
  margin-top: auto; padding-top: .9rem;
  display: grid; gap: .6rem;
}
.fila-precio {
  /* El precio y el estado del stock en UNA sola linea, como en las tiendas
     grandes: antes iban en dos filas del grid y la tarjeta crecia de mas.
     min-height reserva el alto para que todas las tarjetas de una fila
     tengan el precio a la misma altura, con chip o sin el.
     flex-wrap queda en wrap a proposito: con nowrap, a 375px el chip se
     sale de la tarjeta y overflow:hidden lo corta. */
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  min-height: 1.9rem;
}
.fila-precio .chip { margin-left: auto; align-self: center; white-space: nowrap; }

/* color propio y no --texto: el equipo puede elegirlo, y el respaldo
   mantiene lo de siempre si la pantalla se dibuja sin el bloque del servidor */
.precio { color: var(--precio, var(--texto)); line-height: 1; white-space: nowrap; }
.precio .simbolo { font-size: .78rem; font-weight: 600; vertical-align: top; position: relative; top: .35em; }
.precio .entero { font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; }
.precio .dec { font-size: .78rem; font-weight: 600; vertical-align: top; position: relative; top: .35em; }
.precio.grande .entero { font-size: 2.4rem; }
.precio.chico .entero { font-size: 1.15rem; }

/* el precio viejo se queda en gris a proposito: no sigue al color elegido,
   o los dos numeros competirian entre si */
.precio-antes {
  font-size: .85rem; color: var(--texto-3);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.precio-antes .simbolo { font-size: .8em; }
.precio-antes .entero { font-size: 1em; font-weight: 500; }
.precio-antes .dec { font-size: .8em; }

/* el estado del stock como pastilla, no como texto de color suelto */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; font-weight: 600; line-height: 1;
  padding: .34rem .6rem; border-radius: var(--pill);
}
.chip-ok   { background: var(--verde-fondo); color: var(--verde); }
.chip-poco { background: var(--ambar-fondo); color: var(--ambar); }
.chip-no   { background: var(--rojo-fondo);  color: var(--rojo); }

.fila-compra { display: flex; align-items: stretch; gap: .5rem; }
.fila-compra .boton { flex: 1; justify-content: center; }
.selector-cant {
  display: inline-flex; align-items: center; border: 1px solid var(--borde-2);
  border-radius: var(--radio-s); background: var(--gris); overflow: hidden;
}
.cant-btn {
  width: 2rem; height: 2.2rem; border: none; background: none; font-size: 1rem;
  color: var(--texto); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background .15s;
}
.cant-btn:hover { background: var(--bordes); }
.cant-btn:disabled { opacity: .3; cursor: default; }
.cant-input {
  width: 2.2rem; height: 2.2rem; border: none; border-left: 1px solid var(--borde-2);
  border-right: 1px solid var(--borde-2); background: var(--blanco); text-align: center;
  font: inherit; font-size: .88rem; color: var(--texto); -moz-appearance: textfield;
  padding: 0;
}
.cant-input::-webkit-outer-spin-button, .cant-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* en telefonos entran dos por fila sin que se aplasten */
@media (max-width: 560px) {
  .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
  .producto-cuerpo { padding: .8rem .8rem .9rem; }
  .producto h3 { font-size: .92rem; min-height: 2.7em; }
  .producto h3 a { -webkit-line-clamp: 3; }
  .producto .desc { display: none; }
  /* con una sola columna no hay con que alinearse: el alto reservado solo
     dejaria un renglon vacio debajo de cada nombre */
  .tarjeta-categoria b { min-height: 0; }
  .precio .entero { font-size: 1.3rem; }
  .fila-compra { flex-direction: column; }
  .selector-cant { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .producto:hover { transform: none; }
  .producto:hover .producto-foto img { transform: none; }
}

/* --- estado del stock en la ficha y el carrito ---------------------------- */
.stock-ok, .stock-poco, .stock-no {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem;
}
.stock-ok { color: var(--verde); font-weight: 500; }
.stock-poco { color: var(--ambar); font-weight: 600; }
.stock-no { color: var(--rojo); font-weight: 600; }

/* ==================================================== ficha */
.ficha { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.2rem; padding-top: 1.6rem; }
.ficha-foto {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  display: grid; place-items: center; padding: 1.5rem; min-height: 380px;
}
.ficha-foto img { max-height: 420px; object-fit: contain; }
.ficha-foto.vacia { color: var(--texto-3); font-size: 5rem; }
.ficha h1 { font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin: .3rem 0 .5rem; }
.caja-compra {
  background: var(--blanco); border: 1px solid var(--borde-2); border-radius: var(--radio);
  padding: 1.3rem; margin-top: 1.3rem; display: grid; gap: .9rem;
}
.detalle-lista { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .5rem; }
.detalle-lista li {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .88rem; color: var(--texto-2); line-height: 1.5;
}
.detalle-lista > li > .ico { color: var(--azul); margin-top: .1rem; }

/* ==================================================== carrito */
.disposicion-carrito {
  display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem;
  align-items: start; padding-top: 1.6rem;
}
.panel {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.4rem; margin-bottom: 1.1rem;
}
.panel h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.panel h3 { font-size: 1.02rem; margin-bottom: .8rem; }

.linea-carrito {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 1.1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--borde);
}
.linea-carrito:last-child { border-bottom: none; }
.linea-carrito .mini {
  width: 110px; height: 110px; display: grid; place-items: center; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-s);
}
.linea-carrito .mini img { max-height: 110px; object-fit: contain; }
.linea-carrito .mini.vacia { background: var(--gris); color: var(--texto-3); font-size: 2rem; }
.linea-carrito h4 { font-size: 1rem; font-weight: 600; margin-bottom: .2rem; }
.linea-carrito .controles { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; flex-wrap: wrap; }

.resumen { position: sticky; top: 130px; }
.resumen .linea {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; font-size: .93rem;
}
.resumen .linea.total {
  border-top: 2px solid var(--borde); margin-top: .4rem; padding-top: .7rem;
  font-size: 1.25rem; font-weight: 700;
}
.resumen .gratis { color: var(--verde); font-weight: 600; }

/* ==================================================== formularios */
.formulario { display: grid; gap: 1rem; }
.formulario label { display: grid; gap: .3rem; font-size: .86rem; font-weight: 600; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
input, select, textarea {
  font: inherit; font-size: .93rem; color: var(--texto); width: 100%;
  background: var(--blanco); border: 1px solid var(--borde-2);
  border-radius: var(--radio-s); padding: .6rem .8rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .14);
}
textarea { resize: vertical; }
.ayuda { font-size: .78rem; color: var(--texto-2); font-weight: 400; }

.opciones { display: grid; gap: .7rem; }
.opcion {
  display: flex; align-items: flex-start; gap: .85rem; cursor: pointer;
  border: 1.5px solid var(--borde-2); border-radius: var(--radio); padding: .95rem 1.1rem;
  background: var(--blanco);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .06s;
}
.opcion:hover { border-color: var(--azul-borde); background: var(--gris); }
.opcion:active { transform: scale(.995); }
/* Radio PROPIO (no el nativo, que se veia chico y distinto en cada navegador):
   un circulo que se llena con el color de acento al elegir. */
.opcion input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  /* medida fija y a prueba de reglas generales de formulario: sin esto salia
     ovalado porque heredaba ancho/padding de los input de texto */
  flex: 0 0 20px; width: 20px; height: 20px; min-width: 20px; min-height: 20px;
  padding: 0; margin: .15rem 0 0; box-sizing: border-box;
  border: 2px solid var(--borde-2); border-radius: 50%; background: var(--blanco);
  cursor: pointer; position: relative; transition: border-color .15s;
}
.opcion input[type="radio"]:checked { border-color: var(--azul); }
.opcion input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--azul);
}
.opcion input[type="radio"]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* La tarjeta elegida: borde y fondo de acento + un anillo suave que la hace
   sentir un boton apretado, no solo un radio marcado. */
.opcion.elegida {
  border-color: var(--azul); background: var(--azul-suave);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .12);
}
.opcion b { display: block; font-size: .95rem; color: var(--texto-fuerte); }
.opcion span { font-size: .82rem; color: var(--texto-2); }

/* ============================ Libro de Reclamaciones (formulario publico) */
.libro-cab { display: flex; align-items: center; gap: .9rem; }
.libro-sello {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 12px; background: var(--azul-suave); color: var(--azul-hover);
}
/* cada paso del formulario, en su propio recuadro */
.libro-grupo {
  border: 1px solid var(--borde); border-radius: 12px; padding: 1rem 1.1rem;
  margin: 0 0 1rem; display: grid; gap: .9rem; min-width: 0;
}
.libro-grupo legend {
  font-weight: 700; color: var(--texto-fuerte); font-size: .92rem; padding: 0 .4rem;
}
/* las dos opciones lado a lado (reclamo/queja, producto/servicio) */
.opciones-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.opciones-fila .opcion small { display: block; font-size: .76rem; color: var(--texto-2); font-weight: 500; }
/* la casilla "es menor de edad": fila, no columna */
.formulario label.check {
  grid-template-columns: auto 1fr; align-items: center; gap: .5rem; font-weight: 500;
}
.formulario label.check input { width: auto; }
@media (max-width: 560px) { .opciones-fila { grid-template-columns: 1fr; } }

/* ==================================================== botones */
/* Los botones de la tienda. El principal lleva un brillo interior arriba y
   una sombra de color abajo: es lo que le da relieve sin recargarlo. */
.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .72rem 1.5rem; border-radius: var(--pill);
  cursor: pointer; white-space: nowrap;
  border: 1px solid var(--borde-2);
  background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%);
  color: var(--texto); font: inherit; font-size: .92rem; font-weight: 600;
  letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .06);
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .12s ease, color .18s ease;
}
.boton:hover {
  background: linear-gradient(180deg, #fff 0%, var(--azul-suave) 100%);
  border-color: var(--azul-borde); color: var(--texto);
  box-shadow: 0 4px 12px rgba(10, 37, 64, .12);
  transform: translateY(-1px);
  text-decoration: none;
}
.boton:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(10, 37, 64, .1); }
.boton:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.boton:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
  background: var(--gris); box-shadow: none;
}

/* Todo sale del color que eligio el equipo: el degradado, el borde, la
   sombra y la LETRA. El relieve se aleja del texto (con letra blanca se
   oscurece hacia abajo, con letra oscura se aclara hacia arriba) y el
   servidor lo recorta si al hacerlo el texto dejaria de leerse. */
.boton.principal {
  background: linear-gradient(180deg, var(--azul-grad-1) 0%, var(--azul-grad-2) 100%);
  border-color: var(--azul-borde-boton); color: var(--sobre-acento);
  box-shadow: 0 4px 14px -4px rgba(var(--acento-rgb), .55),
              inset 0 1px 0 rgba(var(--sobre-acento-rgb), .25);
}
.boton.principal:hover {
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-hover) 100%);
  border-color: var(--azul-hover); color: var(--sobre-acento);
  box-shadow: 0 8px 22px -6px rgba(var(--acento-rgb), .6),
              inset 0 1px 0 rgba(var(--sobre-acento-rgb), .25);
}
.boton.principal:active { box-shadow: 0 2px 8px -2px rgba(var(--acento-rgb), .5); }
.boton.principal:disabled {
  /* Era blanco sobre --borde-2, un gris claro: 1.9 de contraste con los
     colores de fabrica, o sea ilegible antes de que nadie tocara nada. Un
     boton apagado tiene que verse apagado, no invisible. */
  background: var(--borde-2); border-color: var(--borde-2); color: var(--texto-3);
  box-shadow: none;
}

/* sobre el fondo oscuro de la portada */
/* Va SOBRE la primera pantalla, que es del color de marca: por eso todo lo
   de aca sale de --sobre-marca y no de un blanco fijo. Con una marca clara,
   ese blanco dejaba el boton sin borde y sin letra. */
.boton.claro {
  background: rgba(var(--sobre-marca-rgb), .16); color: var(--sobre-marca);
  border-color: rgba(var(--sobre-marca-rgb), .42);
  backdrop-filter: blur(4px); box-shadow: none;
}
.boton.claro:hover {
  background: rgba(var(--sobre-marca-rgb), .28); color: var(--sobre-marca);
  border-color: rgba(var(--sobre-marca-rgb), .6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.boton.ancho { width: 100%; }
.boton.chico { padding: .48rem 1rem; font-size: .82rem; }
.boton .ico { margin-inline-start: -.1rem; transition: transform .18s ease; }
.boton.principal:hover .ico { transform: translateX(3px); }

.boton.texto {
  background: none; border-color: transparent;
  color: var(--texto-2); box-shadow: none;
}
.boton.texto:hover {
  color: var(--rojo); background: var(--rojo-fondo);
  border-color: transparent; box-shadow: none; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .boton, .boton .ico { transition: none; }
  .boton:hover { transform: none; }
}

.aviso {
  padding: .9rem 1.1rem; border-radius: var(--radio); font-size: .9rem;
  border: 1px solid; display: flex; gap: .6rem; align-items: flex-start;
}
.aviso.info { background: var(--azul-suave); color: var(--azul-hover); border-color: var(--azul-borde); }
.aviso.ok { background: var(--verde-fondo); color: var(--verde); border-color: #b9e8cc; }
.aviso.alerta { background: var(--ambar-fondo); color: var(--ambar); border-color: #f0dcb4; }
.aviso.error { background: var(--rojo-fondo); color: var(--rojo); border-color: #f0c4c8; }

.vacio { text-align: center; color: var(--texto-2); padding: 3.5rem 1rem; }
.vacio > .ico {
  display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 1rem;
  border-radius: 18px; background: var(--gris); color: var(--texto-3);
  border: 1px solid var(--borde);
}
.vacio .titulo-vacio { font-size: 1.15rem; font-weight: 600; color: var(--texto); margin: 0 0 .3rem; }
.vacio .marco-ico.grande { background: var(--gris); color: var(--texto-3); border-color: var(--borde); }

/* ==================================================== pie */
.pie { background: var(--navy); color: rgba(var(--sobre-marca-rgb), .82); margin-top: 3rem; }
.pie .contenedor { padding-top: 2.8rem; padding-bottom: 1.5rem; }
.pie-columnas {
  /* Columnas EXPLICITAS y horizontales: la marca/datos mas ancha a la izquierda
     y las tres listas de enlaces al lado. (Antes era `1.4fr repeat(auto-fit,...)`
     que en la practica colapsaba a UNA sola columna y apilaba todo vertical.) */
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(var(--sobre-marca-rgb), .15);
}
/* en tablet, la marca arriba a lo ancho y los tres enlaces en fila debajo */
@media (max-width: 780px) {
  .pie-columnas { grid-template-columns: repeat(3, 1fr); }
  .pie-columnas > :first-child { grid-column: 1 / -1; }
}
/* en telefono, de a dos */
@media (max-width: 460px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .pie-columnas > :first-child { grid-column: 1 / -1; }
}
.pie h2 { color: var(--sobre-marca, #fff); font-size: .95rem; margin-bottom: .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie a { color: rgba(var(--sobre-marca-rgb), .82); font-size: .88rem; }
.pie a:hover { color: var(--sobre-marca, #fff); }
.pie p { font-size: .88rem; margin: 0 0 .5rem; }
.pie .simbolo-marca { margin-bottom: .5rem; }
.pie-nombre {
  display: block; color: var(--sobre-marca, #fff); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; margin-bottom: .9rem;
}
.pie-legal {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.2rem; font-size: .8rem; color: rgba(var(--sobre-marca-rgb), .6);
}
.pie-datos { list-style: none; display: grid; gap: .5rem; margin: .9rem 0 0; padding: 0; }
.pie-datos li { display: flex; align-items: flex-start; gap: .6rem; font-size: .87rem; }
.pie-datos .ico { color: rgba(var(--sobre-marca-rgb), .55); margin-top: .12rem; }

.libro {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem;
  border: 1px solid rgba(var(--sobre-marca-rgb), .35); border-radius: var(--radio-s);
  padding: .5rem .9rem; font-size: .82rem; color: var(--sobre-marca, #fff);
}
.libro:hover { background: rgba(var(--sobre-marca-rgb), .12); text-decoration: none; color: var(--sobre-marca, #fff); }

/* ==================================================== avisos flotantes */
.tostadas { position: fixed; right: 1.2rem; bottom: 1.2rem; display: grid; gap: .55rem; z-index: 90; }
.tostada {
  min-width: 250px; max-width: 380px; padding: .85rem 1.1rem;
  background: var(--navy); color: var(--sobre-marca, #fff); border-radius: var(--radio);
  box-shadow: var(--sombra-2); font-size: .88rem; animation: entrar .2s ease-out;
}
.tostada.ok { border-left: 4px solid #36d56e; }
.tostada.error { border-left: 4px solid #ff8a92; }
.tostada.saliendo { animation: salir .25s ease-in forwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
@keyframes salir { to { opacity: 0; transform: translateX(24px); } }

/* ==================================================== responsive */
@media (max-width: 1100px) {
  .disposicion-catalogo { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .disposicion-carrito { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .ficha { grid-template-columns: 1fr; gap: 1.4rem; }
  .hero .contenedor { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .barra-principal .contenedor { flex-wrap: wrap; gap: .7rem; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .marca .simbolo-marca { height: 28px; }
  /* El nombre de la tienda ya no se esconde: en el telefono era lo unico que
     decia de que tienda se trata. El logo baja a 28px para hacerle lugar. */
  .marca-texto b { font-size: .88rem; }
  .formulario .fila { grid-template-columns: 1fr; }
  .linea-carrito { grid-template-columns: 80px 1fr; }
  .linea-carrito .mini { width: 80px; height: 80px; }
  .linea-carrito .mini img { max-height: 80px; }
}

@media (max-width: 560px) {
  .rejilla-productos { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .foto { height: 140px; }
  .foto img { max-height: 140px; }
  /* Los rotulos de las acciones ya NO se esconden: van en la fila deslizable
     de arriba. Lo unico que se guarda es el lema de la marca, que en 360px
     le quitaria media fila a las acciones y repite lo que dice la portada. */
  .marca-texto span { display: none; }
}

/* ------------------------------------------ la fila de arriba en el telefono
   De 860px para abajo la marca y las acciones comparten el primer renglon, y
   las acciones SE DESLIZAN con el dedo en vez de esconder sus rotulos. Antes
   el logo iba solo en una fila entera, se escondian el nombre de la tienda,
   "Ir al panel" y "Carrito", y dos botones quedaban en 33 y 34px.

   Todo en esta hoja y nada en la plantilla, a proposito: un servidor que ya
   tiene la pagina compilada de antes la sigue mandando igual, y esto se ve
   bien con esa pagina. */
@media (max-width: 860px) {
  .barra-principal .contenedor { gap: .5rem .7rem; }
  .acciones-cabecera {
    flex: 1 1 0; min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* el arrastre no arrastra la pagina */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .acciones-cabecera::-webkit-scrollbar { display: none; }
  /* Cuando entra todo, la primera accion empuja al grupo contra el borde
     derecho, donde estuvo siempre. Cuando no entra, ese margen vale cero y se
     arrastra desde el principio. Con justify-content: flex-end, en cambio, lo
     que sobra por la izquierda queda afuera y no hay forma de llegar. */
  .acciones-cabecera > :first-child { margin-left: auto; }
  .acciones-cabecera > * { flex: 0 0 auto; min-height: 44px; }
  /* el boton de tema trae min-height: 34px mas abajo en esta hoja, y a
     igualdad de peso gana la regla que viene despues */
  .acciones-cabecera .boton-tema { min-height: 44px; }
  /* La pista de que hay mas, sin JavaScript: dos tapas del color de la
     cabecera que viajan con el contenido y dos sombras pegadas a la ventanita.
     En un extremo la tapa borra la sombra; al arrastrar, aparece. */
  .acciones-cabecera {
    background:
      linear-gradient(to right, var(--cab-bg) 30%, transparent) left / 24px 100% no-repeat local,
      linear-gradient(to left,  var(--cab-bg) 30%, transparent) right / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(var(--cab-fg-rgb), .30), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(var(--cab-fg-rgb), .30), transparent) right / 12px 100% no-repeat scroll;
  }
}

/* ==================================================== movimiento
   Animaciones de entrada de la web publica.

   Regla de oro: solo se ocultan los elementos si el JavaScript pudo
   marcar el documento con .js-mov. Si el JavaScript falla o tarda, la
   pagina se ve completa y quieta, nunca en blanco.

   Al final del bloque, todo se apaga para quien pidio menos movimiento
   en la configuracion de su sistema. */

html { scroll-behavior: smooth; }

/* --- foco visible: se ve al navegar con el teclado, no al hacer clic --- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* --- revelado al bajar por la pagina --- */
.js-mov [data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
              transform .5s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--retraso, 0ms);
}
.js-mov [data-revelar].visible {
  opacity: 1;
  transform: none;
}

/* --- entrada de la portada, escalonada --- */
@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.js-mov .hero-texto > *,
.js-mov .hero-lista li {
  opacity: 0;
  animation: subir .55s cubic-bezier(.22, .61, .36, 1) forwards;
}
.js-mov .hero-texto > *:nth-child(1) { animation-delay: .06s; }
.js-mov .hero-texto > *:nth-child(2) { animation-delay: .14s; }
.js-mov .hero-texto > *:nth-child(3) { animation-delay: .22s; }
.js-mov .hero-texto > *:nth-child(4) { animation-delay: .30s; }
.js-mov .hero-lista li:nth-child(1)  { animation-delay: .26s; }
.js-mov .hero-lista li:nth-child(2)  { animation-delay: .34s; }
.js-mov .hero-lista li:nth-child(3)  { animation-delay: .42s; }
.js-mov .hero-lista li:nth-child(4)  { animation-delay: .50s; }

/* --- la cabecera se despega al bajar --- */
.cabecera { transition: box-shadow .22s ease; }
.cabecera.elevada { box-shadow: 0 6px 26px rgba(10, 37, 64, .22); }

/* --- el globo del carrito late cuando cambia --- */
@keyframes latido {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.38); }
  100% { transform: scale(1); }
}
.globo.late, .globo-carrito.late { animation: latido .42s cubic-bezier(.34, 1.56, .64, 1); }

/* --- esqueleto mientras carga el catalogo --- */
@keyframes brillo { to { background-position-x: -160%; } }
.esqueleto {
  /* el brillo sale de dos tokens y no de un gris escrito a mano: asi en modo
     oscuro no queda una franja casi blanca cruzando la pantalla */
  border-radius: var(--radio);
  background: linear-gradient(90deg,
              var(--gris) 8%, var(--gris-brillo) 18%, var(--gris) 33%) right / 320% 100%;
  animation: brillo 1.1s linear infinite;
}
.esqueleto-tarjeta { height: 320px; }
.esqueleto-linea   { height: 145px; }

/* --- detalles de las transiciones que ya existian --- */
.tarjeta-categoria .marco-ico { transition: background .18s, color .18s, border-color .18s; }
.producto { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
.producto .foto img { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }

/* --- quien pide menos movimiento no ve ninguno --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-mov [data-revelar],
  .js-mov .hero-texto > *,
  .js-mov .hero-lista li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .globo.late, .globo-carrito.late,
  .esqueleto { animation: none; }
  .producto:hover { transform: none; }
  .producto:hover .foto img { transform: none; }
}

/* ============================================== destacados de la portada
   La banda que publica el equipo desde el panel. Se arrastra de lado y las
   imagenes van mas lentas que su tarjeta, que es lo que da la profundidad.

   Cada imagen se pinta dos veces: detras ampliada y desenfocada para rellenar
   el recuadro, y delante entera sin recortar. Asi una foto cuadrada chica y
   una apaisada grande se ven bien las dos, sin cortar nada importante. */

.banda-destacados { padding-top: 2.6rem; }

.pista-arrastre {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--texto-3);
  border: 1px solid var(--borde); border-radius: var(--pill);
  padding: .4rem .85rem; white-space: nowrap; user-select: none;
}
.pista-arrastre .ico { opacity: .7; }

.carril {
  margin-top: 1.2rem;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.carril::-webkit-scrollbar { display: none; }
.carril.arrastrando { cursor: grabbing; scroll-snap-type: none; }

.carril-pista {
  display: flex; gap: 1.1rem;
  padding: .4rem max(1.2rem, calc((100vw - var(--ancho)) / 2 + 1.2rem)) 1.6rem;
  width: max-content;
}

.destacado {
  position: relative; flex: 0 0 auto;
  width: min(88vw, 680px);
  aspect-ratio: 16 / 9;          /* proporcion fija: la fila queda pareja */
  min-height: 300px;
  border-radius: 20px; overflow: hidden;
  background: var(--navy); color: var(--sobre-marca, #fff); text-decoration: none;
  scroll-snap-align: center;
  box-shadow: 0 2px 10px rgba(10, 37, 64, .1);
  transition: box-shadow .3s ease, transform .3s ease;
  isolation: isolate;
}
.destacado:hover {
  box-shadow: 0 18px 40px -12px rgba(10, 37, 64, .45);
  transform: translateY(-5px);
  /* La misma tinta que en reposo. Estaba en #fff y con una marca clara la
     tarjeta se volvia ilegible justo al pasarle el mouse por encima. */
  color: var(--sobre-marca); text-decoration: none;
}

/* El aro del teclado. El azul plano que usa el resto de la pagina, sobre una
   tarjeta grande y oscura, se lee como un recuadro mal dibujado. Aca va en
   navy con un hueco blanco, siguiendo la curva de la tarjeta. */
.destacado:focus-visible {
  outline: 3px solid var(--texto-fuerte);   /* el anillo de foco tambien se pierde de noche */
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--blanco),
              0 18px 40px -12px rgba(10, 37, 64, .45);
}

/* --- las dos capas de imagen --------------------------------------------- */
.destacado-fondo { position: absolute; inset: 0 -12% 0 -12%; z-index: 0; }

.fondo-difuso {
  position: absolute; inset: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(26px) saturate(1.25) brightness(.72);
  transform: scale(1.08);
  display: none;                 /* solo hace falta en el modo "completa" */
}
.fondo-nitido {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* Las tres primeras cubren toda la tarjeta y recortan lo que sobra. Lo unico
   que cambia entre ellas es por donde recortan: con una foto vertical, elegir
   "arriba" salva la cara o la etiqueta del producto, que es justo lo que el
   recorte al centro se comia. */
.ajuste-llenar .fondo-nitido,
.ajuste-arriba .fondo-nitido,
.ajuste-abajo  .fondo-nitido { object-fit: cover; }
.ajuste-llenar .fondo-nitido { object-position: center; }
.ajuste-arriba .fondo-nitido { object-position: center top; }
.ajuste-abajo  .fondo-nitido { object-position: center bottom; }

/* Las dos ultimas muestran la imagen entera, sin recortar nada. Para logos,
   carteles o fotos cuadradas donde cortar arruinaria el contenido. Cambia con
   que se rellena el hueco: la misma foto ampliada y desenfocada, o un color
   liso, que se ve mas limpio cuando la imagen ya trae su propio fondo. */
.ajuste-completa .fondo-nitido,
.ajuste-liso .fondo-nitido {
  object-fit: contain;
  object-position: right center;
  padding: 7% 5% 7% 40%;         /* el texto vive a la izquierda */
}
.ajuste-completa .fondo-difuso { display: block; }
.ajuste-liso .destacado-fondo { background: var(--navy-2); }
.destacado:hover .fondo-nitido { transform: scale(1.05); }

/* velo en degradado: el texto se lee sobre cualquier foto */
.destacado::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(7, 26, 46, .96) 0%,
              rgba(7, 26, 46, .88) 34%, rgba(7, 26, 46, .42) 62%,
              rgba(7, 26, 46, .12) 100%);
}
.destacado-descuento::after {
  background: linear-gradient(100deg, rgba(96, 10, 34, .96) 0%,
              rgba(120, 16, 44, .86) 34%, rgba(80, 12, 34, .38) 62%,
              rgba(7, 26, 46, .12) 100%);
}
.destacado-nuevo::after {
  background: linear-gradient(100deg, rgba(6, 52, 44, .96) 0%,
              rgba(9, 72, 60, .86) 34%, rgba(7, 50, 44, .38) 62%,
              rgba(7, 26, 46, .12) 100%);
}

/* --- el texto ------------------------------------------------------------- */
.destacado-texto {
  position: relative; z-index: 2;
  height: 100%; padding: 1.7rem 1.6rem;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 68%;
}
.destacado-etiqueta {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: var(--pill);
  border: 1px solid rgba(var(--sobre-marca-rgb), .38);
  background: rgba(var(--sobre-marca-rgb), .14);
  backdrop-filter: blur(4px);
  margin-bottom: 1rem;
}
.destacado-texto h3 {
  margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 700;
  line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;
}
.destacado-texto p {
  margin: .65rem 0 0; font-size: .92rem; line-height: 1.5;
  color: rgba(var(--sobre-marca-rgb), .86);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* el boton: siempre esta, aunque el equipo no escriba nada */
.destacado-boton {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 600; line-height: 1;
  padding: .72rem 1.15rem;
  border-radius: var(--pill);
  background: var(--pastilla-fija); color: var(--pastilla-fija-texto);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: transform .22s ease, box-shadow .22s ease;
}
.destacado-boton .ico { transition: transform .22s ease; }
.destacado:hover .destacado-boton {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.destacado:hover .destacado-boton .ico { transform: translateX(4px); }

/* --- las tres formas de mostrar la portada -------------------------------
   El equipo elige cual desde Ajustes, sin tocar codigo. */

/* Mosaico: se ven todas a la vez, en rejilla. Sirve cuando hay pocas y se
   quiere que ninguna quede escondida. */
.carril.portada-mosaico {
  overflow: visible; cursor: default;
  padding-inline: max(1.2rem, calc((100vw - var(--ancho)) / 2 + 1.2rem));
}
.carril.portada-mosaico .carril-pista {
  display: grid; width: auto; padding-inline: 0;
  /* auto-fill: con pocas tarjetas no se estiran a lo ancho de la pantalla */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.carril.portada-mosaico .destacado { width: auto; }

/* Grande: una sola por fila, a todo el ancho. La mas llamativa. */
.carril.portada-grande {
  overflow: visible; cursor: default;
  padding-inline: max(1.2rem, calc((100vw - var(--ancho)) / 2 + 1.2rem));
}
.carril.portada-grande .carril-pista {
  display: grid; width: auto; padding-inline: 0; gap: 1.2rem;
}
.carril.portada-grande .destacado {
  width: auto; aspect-ratio: 21 / 9; min-height: 340px;
}
.carril.portada-grande .destacado-texto { max-width: 54%; padding: 2.4rem 2.2rem; }
.carril.portada-grande .destacado-texto h3 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }

@media (max-width: 760px) {
  .carril.portada-grande .destacado { aspect-ratio: 4 / 3; min-height: 0; }
  .carril.portada-grande .destacado-texto { max-width: 100%; padding: 1.4rem 1.3rem; }
}

@media (max-width: 640px) {
  .destacado { width: 86vw; aspect-ratio: 4 / 3; }
  .destacado-texto { max-width: 100%; padding: 1.3rem 1.2rem; }
  .ajuste-completa .fondo-nitido,
  .ajuste-liso .fondo-nitido { padding: 5% 5% 46% 5%; object-position: center top; }
  .destacado::after {
    background: linear-gradient(190deg, rgba(7, 26, 46, .3) 0%,
                rgba(7, 26, 46, .8) 42%, rgba(7, 26, 46, .96) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .destacado-fondo { transform: none !important; }
  .destacado:hover { transform: none; }
  .destacado:hover .fondo-nitido { transform: none; }
  .carril { scroll-behavior: auto; }
}

/* ============================================== portada con mas cuerpo
   Del builder de GoDaddy: fondo con degradado en vez de plano, titular mas
   apretado y pesado, y un halo suave detras del boton principal. */
.hero {
  background: radial-gradient(120% 140% at 12% 0%, #143a63 0%, #0a2540 46%, #071a2e 100%);
}
.hero h1 { letter-spacing: -.025em; }
.hero h1 em { font-style: italic; }

.hero .boton.principal { position: relative; }
.hero .boton.principal::before {
  content: ""; position: absolute; inset: -6px; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 50%, rgba(var(--acento-rgb), .55), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
.hero .boton.principal:hover::before { opacity: 1; }

@media (max-width: 640px) {
  .destacado { width: 84vw; min-height: 230px; }
  .destacado-texto h3 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .destacado-fondo { transform: none !important; }
  .destacado:hover { transform: none; }
  .carril { scroll-behavior: auto; }
}

/* --- Principal y secundarias -----------------------------------------------
   La primera tarjeta manda y las demas la acompanan debajo. Es la forma que
   usan las tiendas grandes cuando hay una promocion que importa mas. */
.carril.portada-principal {
  overflow: visible; cursor: default;
  padding-inline: max(1.2rem, calc((100vw - var(--ancho)) / 2 + 1.2rem));
}
.carril.portada-principal .carril-pista {
  display: grid; width: auto; padding-inline: 0; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.carril.portada-principal .destacado { width: auto; }
/* la primera ocupa toda la fila y es mas alta */
.carril.portada-principal .destacado:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9; min-height: 330px;
}
.carril.portada-principal .destacado:first-child .destacado-texto {
  max-width: 56%; padding: 2.2rem 2rem;
}
.carril.portada-principal .destacado:first-child h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

/* --- Tarjetas verticales ----------------------------------------------------
   Foto arriba y texto abajo, tipo afiche. A diferencia de las otras formas,
   aca el texto no va encima de la foto sino debajo, sobre el color de la
   tarjeta. */
.carril.portada-vertical {
  overflow: visible; cursor: default;
  padding-inline: max(1.2rem, calc((100vw - var(--ancho)) / 2 + 1.2rem));
}
.carril.portada-vertical .carril-pista {
  display: grid; width: auto; padding-inline: 0; gap: 1.4rem;
  /* auto-fill y no auto-fit: con dos o tres tarjetas, auto-fit las estira
     hasta ocupar toda la fila y quedan enormes. auto-fill deja los huecos
     vacios y las tarjetas conservan su tamano de afiche. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.carril.portada-vertical .destacado {
  width: auto; aspect-ratio: auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 12px;                 /* el marco alrededor de la foto */
}

/* La foto va enmarcada, no a sangre: separada del borde y con sus propias
   esquinas. Asi las dos maneras de acomodarla ("llenar" y "completa") quedan
   parejas en la fila, que era lo que hacia ver el bloque desprolijo. */
.carril.portada-vertical .destacado-fondo {
  position: relative; inset: 0;
  aspect-ratio: 4 / 3; flex: none;
  border-radius: 12px; overflow: hidden;
  background: var(--navy-2);
}
/* El texto ya no va encima, asi que se anula el relleno del diseno
   horizontal, que reservaba el 40% izquierdo para el titular: si se deja, la
   imagen queda aplastada contra el borde derecho. */
.carril.portada-vertical .fondo-nitido {
  position: absolute; padding: 0;
}
.carril.portada-vertical .destacado.ajuste-completa .fondo-nitido,
.carril.portada-vertical .destacado.ajuste-liso .fondo-nitido {
  object-position: center; padding: 6%;
}
/* el relleno desenfocado, mas suave y mas oscuro: en un recuadro chico el
   desenfoque fuerte se veia como una mancha de color */
.carril.portada-vertical .fondo-difuso {
  filter: blur(16px) saturate(1.05) brightness(.48);
  transform: scale(1.2);
}
/* sin velo en degradado: el texto ya no va sobre la foto */
.carril.portada-vertical .destacado::after { display: none; }

/* --- el texto, debajo de la foto --- */
.carril.portada-vertical .destacado-texto {
  position: static;              /* la pastilla se cuelga de la tarjeta */
  max-width: 100%; height: auto; flex: 1;
  padding: .9rem 0 .35rem;       /* alineado con el borde de la foto */
  gap: .45rem;
}
.carril.portada-vertical .destacado-texto h3 {
  font-size: 1.15rem; line-height: 1.22;
}
.carril.portada-vertical .destacado-texto p {
  margin: 0; font-size: .85rem; -webkit-line-clamp: 2;
}

/* La pastilla se sube a la foto: el texto gana aire y de un vistazo se ve de
   que trata la tarjeta. Va en solido, no traslucida, para que se lea igual
   sobre una foto clara que sobre una oscura. */
.carril.portada-vertical .destacado-etiqueta {
  position: absolute; top: 22px; left: 22px; z-index: 3;
  margin: 0;
  background: rgba(7, 26, 46, .78);
  border-color: rgba(var(--sobre-marca-rgb), .22);
}
/* el boton siempre abajo del todo: asi quedan alineados entre tarjetas
   aunque una tenga mas texto que la otra */
.carril.portada-vertical .destacado-boton {
  margin-top: auto;
  padding: .62rem 1rem; font-size: .85rem;
}

@media (max-width: 760px) {
  .carril.portada-principal .destacado:first-child {
    aspect-ratio: 4 / 3; min-height: 0;
  }
  .carril.portada-principal .destacado:first-child .destacado-texto {
    max-width: 100%; padding: 1.4rem 1.3rem;
  }
}

/* ============================================== catalogo desplegable
   Con muchas categorias no entran en fila, asi que van en un panel que se
   abre. Se usa <details>, que ya abre y cierra solo sin JavaScript. */
.menu-catalogo { position: relative; }
/* el resumen tiene que verse igual que los demas enlaces de la barra:
   mismo color, tamano, peso y espaciado */
.menu-catalogo > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .8rem;
  font-size: .86rem; font-weight: 500;
  color: rgba(var(--sobre-marca-rgb), .88); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.menu-catalogo > summary:hover {
  color: var(--sobre-marca, #fff); background: rgba(var(--sobre-marca-rgb), .1);
}
/* El prefijo .barra-secundaria es a proposito: sin el, la regla base
   `.barra-secundaria .menu-catalogo summary` (mas especifica) pisaba este
   subrayado y el Catalogo activo/abierto quedaba SIN la linea naranja -por eso
   se veia distinto de "Nosotros". Con el prefijo gana y sale el mismo subrayado. */
.barra-secundaria .menu-catalogo > summary.activo,
.barra-secundaria .menu-catalogo[open] > summary {
  border-bottom-color: var(--azul); color: var(--cab-fg, #fff); font-weight: 600;
}
.menu-catalogo > summary::-webkit-details-marker { display: none; }
/* el chevron del juego de iconos apunta a la derecha: se gira un cuarto de
   vuelta para que mire hacia abajo, y otro medio al abrirse */
.menu-catalogo > summary .ico {
  transform: rotate(90deg);
  transition: transform .18s ease; opacity: .8;
}
.menu-catalogo[open] > summary .ico { transform: rotate(-90deg); }

.menu-panel {
  position: absolute; z-index: 60; top: calc(100% + .35rem); left: 0;
  min-width: 268px; padding: .5rem;
  display: grid; gap: .1rem;
  background: var(--blanco); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: var(--sombra-2);
}
.menu-panel a {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; column-gap: .65rem; row-gap: .1rem;
  padding: .55rem .7rem; border-radius: 8px;
  color: var(--texto); text-decoration: none;
}
/* el dibujo ocupa las dos filas del texto, centrado contra las dos */
.menu-panel a > .ico { grid-row: 1 / 3; color: var(--texto-3); }
.menu-panel a:hover > .ico, .menu-panel a.activo > .ico { color: var(--azul); }
.menu-panel a:hover { background: var(--azul-suave); text-decoration: none; }
.menu-panel a.activo { background: var(--azul-suave); }
.menu-panel a b { font-size: .92rem; font-weight: 600; }
.menu-panel a span { font-size: .78rem; color: var(--texto-2); }
.menu-vacio {
  padding: .7rem; font-size: .82rem; color: var(--texto-3); text-align: center;
}

/* Aca habia una capa invisible de pantalla completa, colgada del resumen
   abierto, para que "tocar afuera" cerrara el menu. Cerraba, si, pero se
   tragaba ese toque: con el menu abierto NINGUN boton de la pagina respondia
   al primer intento -el de tema, el buscador, "Ir al panel"-, y parecia que
   la tienda estaba trabada. Ahora cierra publico.js escuchando el clic, sin
   interponerse: el menu se cierra Y el boton recibe su clic. */

/* ------------------------------------------------ el carril de la barra
   De 861px para arriba la fila entra sola y no cambia nada.
   De 860 para abajo la fila NO se parte en dos renglones -"Contacto" caia
   solo abajo- ni esconde nada -el horario desaparecia-: pasa a ser un
   carril de una sola linea que se arrastra con el dedo.

   SIN tocar el HTML, a proposito. La primera version metia un div nuevo para
   el carril, y un servidor que ya tenia la pagina armada de antes -Flask la
   compila una sola vez, al arrancar- mandaba el HTML viejo con esta hoja
   nueva: la barra salia desarmada, un enlace debajo del otro. Con todo el
   cambio aca, se ve bien con cualquiera de las dos paginas.

   Por que no se recorta el panel de Catalogo: una caja que se desplaza
   recorta lo que cuelga de ella, SALVO lo que se posiciona contra algo que
   esta por fuera. Por eso el ancla pasa a ser .barra-secundaria, que envuelve
   a la fila, y la fila y el boton quedan sin position. Como la barra no tiene
   otra cosa adentro que esta fila, el 100% del panel cae justo en su borde
   de abajo. Y el panel no se mueve al arrastrar, porque no vive adentro de
   lo que se desplaza.

   Los tres cambios -la fila que se desplaza, el ancla afuera y el boton sin
   position- tienen que encenderse en el MISMO punto: `overflow: auto` recorta
   aunque no llegue a aparecer la barra de desplazamiento. */
@media (max-width: 860px) {
  .barra-secundaria { position: relative; }
  .barra-secundaria .contenedor {
    position: static;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* el arrastre no arrastra la pagina */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 1.2rem;    /* que nada frene cortado contra el filo */
  }
  .barra-secundaria .contenedor::-webkit-scrollbar { display: none; }
  /* ninguno se aprieta: adentro de un carril, dejar que se encojan es volver
     al problema con otro nombre */
  .barra-secundaria .contenedor > * { flex: 0 0 auto; }
  /* SOLO los hijos directos: los enlaces del panel de Catalogo tambien estan
     adentro de la barra, y con `.barra-secundaria a` esta regla les pisaba el
     display: grid y desarmaba el menu. */
  .barra-secundaria .contenedor > a, .menu-catalogo > summary {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* El horario va al OTRO EXTREMO de la fila tambien aca: no se le pisa el
     margin-left: auto. Cuando entra todo -una tablet- lo manda a la punta;
     cuando la fila no entra, ese margen vale cero y el horario queda al final
     del arrastre, justo despues de Contacto. */
  .dato-tienda { padding-left: .6rem; }

  .menu-catalogo { position: static; }
  .menu-panel {
    min-width: 0; left: 1.2rem; right: 1.2rem;
    max-height: min(70vh, 460px); overflow-y: auto;
  }

  /* La pista de que hay mas, sin JavaScript: dos tapas del color de la barra
     que viajan con el contenido y dos sombras pegadas a la ventanita. En un
     extremo la tapa borra la sombra; al arrastrar, aparece. Si no hay nada
     que arrastrar, no hay sombra. */
  .barra-secundaria .contenedor {
    background:
      linear-gradient(to right, var(--cab-bg2) 30%, transparent) left / 28px 100% no-repeat local,
      linear-gradient(to left,  var(--cab-bg2) 30%, transparent) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(var(--cab-fg-rgb), .30), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(var(--cab-fg-rgb), .30), transparent) right / 14px 100% no-repeat scroll;
  }
}

/* ============================================== foto de fondo del hero
   Cuando el equipo sube una foto, va detras del texto con un velo encima
   para que el titular se siga leyendo sobre cualquier imagen. */
.hero-fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none;
}
.hero.con-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(7, 26, 46, .93) 0%,
              rgba(7, 26, 46, .82) 45%, rgba(7, 26, 46, .5) 100%);
}
.hero.con-foto .contenedor { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .hero.con-foto::after {
    background: linear-gradient(180deg, rgba(7, 26, 46, .88) 0%,
                rgba(7, 26, 46, .95) 100%);
  }
}


/* ============================================================
   MODO OSCURO
   Solo se redefinen las variables: ninguna regla concreta cambia, asi que
   todo lo que ya usa var(--...) se adapta solo. Se enciende poniendo
   data-tema="oscuro" en <html>; lo hace tema.js segun lo que eligio la
   persona, o segun la configuracion de su sistema si nunca eligio.
   ============================================================ */
:root[data-tema="oscuro"] {
  --fondo:        #0d1622;
  --blanco:       #16212f;   /* el "papel" de las tarjetas */
  --superficie-2: #1b2836;
  --gris:         #1b2836;

  /* De noche la cabecera vuelve al navy con letra blanca: aca el navy SI es el
     fondo que corresponde y el logo blanco se integra. --navy y --sobre-marca
     los inyecta el servidor con el color que eligio el equipo. */
  --cab-bg:     var(--navy);
  --cab-bg2:    var(--navy-3);
  --cab-fg:     var(--sobre-marca, #fff);
  --cab-fg-rgb: var(--sobre-marca-rgb, 255,255,255);
  --cab-borde:  rgba(255,255,255,.16);

  --texto:        #e8eef6;
  --texto-fuerte: #f2f6fb;
  --texto-2:      #a3b2c4;
  --texto-3:      #8496ad;

  --borde:        #263547;
  --borde-2:      #34465c;

  /* el azul se aclara: el de dia queda apagado sobre fondo oscuro */
  --azul:         #4d94ff;
  --azul-hover:   #79aeff;
  --azul-brillo:  #6aa6ff;
  --azul-grad-1: #4d94ff;
  --azul-grad-2: #3d84ef;
  --azul-borde-boton: #6aa6ff;
  --acento-rgb: 77, 148, 255;
  --acento-en-marca-rgb: 77, 148, 255;
  /* La calcula el servidor y la inyecta la plantilla, que va despues
     de esta hoja. Se deja un valor por si la plantilla no llega a
     inyectar nada, pero el que manda es el calculado. */
  --sobre-acento: #08131f;
  --azul-en-marca:#79aeff;
  --azul-suave:   #16273f;
  --azul-borde:   #2c4a6e;
  --gris-brillo:  #263547;   /* el brillo del esqueleto, tambien de noche */

  --verde:        #3ddc84;
  --verde-fondo:  #122a1e;
  --ambar:        #e8b64c;
  --ambar-fondo:  #2b2416;
  --rojo:         #ff7a85;
  --rojo-fondo:   #2c1a1d;
  --oferta:       #ff7a8a;

  --sombra:       0 2px 8px rgba(0, 0, 0, .45);
  --sombra-2:     0 10px 28px rgba(0, 0, 0, .55);
}

/* Los diez lugares que tenian el blanco escrito a mano en vez de la variable.
   Sin esto quedaban tarjetas blancas sobre fondo oscuro. */
:root[data-tema="oscuro"] .tarjeta,
:root[data-tema="oscuro"] .producto,
:root[data-tema="oscuro"] .tarjeta-categoria,
:root[data-tema="oscuro"] .kpi,
:root[data-tema="oscuro"] .ventaja,
:root[data-tema="oscuro"] .tarjeta-resumen,
:root[data-tema="oscuro"] .tarjeta-destacado,
:root[data-tema="oscuro"] .acceso-motivos div,
:root[data-tema="oscuro"] .desplegable-panel,
:root[data-tema="oscuro"] .modal,
:root[data-tema="oscuro"] .boton.google {
  background: var(--blanco);
  color: var(--texto);
}

/* la foto del producto va sobre un fondo neutro, no sobre un celeste de dia */
:root[data-tema="oscuro"] .producto-foto {
  background: linear-gradient(160deg, #1b2836 0%, #131e2b 100%);
}
:root[data-tema="oscuro"] .velo-agotado {
  background: rgba(13, 22, 34, .78); color: var(--texto-2);
}

/* los recuadros de los formularios */
:root[data-tema="oscuro"] input,
:root[data-tema="oscuro"] select,
:root[data-tema="oscuro"] textarea {
  /* background-color, NO el atajo `background`: el atajo resetea
     background-repeat/position/image, y en el select del buscador -que lleva
     una flechita dibujada- eso la teselaba en un zigzag por toda la caja. */
  background-color: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borde-2);
}
/* Igual que en el panel: esta regla pesa mas que .boton.X y de noche las
   aplanaba a todas. Cada variante lleva su propia linea al final del
   archivo, despues de sus :hover. */
:root[data-tema="oscuro"] .boton {
  background: linear-gradient(180deg, #1e2c3d 0%, #16212f 100%);
  color: var(--texto);
  border-color: var(--borde-2);
}
:root[data-tema="oscuro"] .boton:hover {
  background: linear-gradient(180deg, #24344a 0%, #1a2634 100%);
  border-color: var(--azul-borde);
}

/* el boton de claro/oscuro: muestra el sol o la luna segun donde estas */
/* Estaba escrito para una barra oscura: borde blanco al 25%. Pero las dos
   cabeceras son blancas, asi que el boton era un circulo blanco sobre blanco
   y practicamente no se veia. Ahora usa los colores del tema, que cambian
   solos en claro y en oscuro. */
.boton-tema {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 34px; padding: .3rem .7rem; flex: 0 0 auto;
  background: var(--superficie-2); color: var(--texto-2); cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--pill);
  font: inherit; font-size: .78rem; font-weight: 600; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease;
}
.boton-tema .ico-sol, .boton-tema .ico-luna { flex: 0 0 auto; }
.boton-tema:hover {
  background: var(--azul-suave); border-color: var(--azul-borde);
  color: var(--azul); transform: translateY(-1px);
}
.boton-tema .ico { display: block; }
.boton-tema .ico-sol { display: none; }
:root[data-tema="oscuro"] .boton-tema .ico-luna { display: none; }
:root[data-tema="oscuro"] .boton-tema .ico-sol  { display: inline; }
@media (prefers-reduced-motion: reduce) { .boton-tema { transition: none; } }

/* El azul de modo oscuro es mas claro, asi que el texto blanco encima se
   pierde. Estos son los lugares donde el azul se usa como FONDO. */
/* Los colores semanticos se ACLARAN de noche, asi que donde van de FONDO el
   texto encima tiene que ser oscuro. Sin esto queda blanco sobre pastel. */
:root[data-tema="oscuro"] .globo,
:root[data-tema="oscuro"] .boton.principal,
:root[data-tema="oscuro"] .marca-nuevo,
:root[data-tema="oscuro"] .marca-oferta {
  /* Era #08131f fijo, de cuando el acento de noche era siempre un celeste
     pastel. Con un acento oscuro elegido por el equipo, ese oscuro fijo se
     comia el contraste justo en el boton principal. La tinta la calcula el
     servidor midiendo. */
  color: var(--sobre-acento);
}
:root[data-tema="oscuro"] .boton.principal {
  background: linear-gradient(180deg, var(--azul-brillo) 0%, var(--azul) 100%);
  border-color: transparent;
}

/* ============================================ aviso de pago en /gracias
   El comprador de la web paga por Yape o Plin y nos deja el numero de
   operacion. Es un aviso, no un cobro: por eso el bloque no usa el verde
   de "listo" hasta que la tienda confirma de verdad. */
.aviso-pago { border-color: var(--azul-borde); }
.aviso-pago h3 { display: flex; align-items: center; gap: .5rem; }
.aviso-pago.pagado { border-color: var(--verde); }
.aviso-pago.pagado h3 { color: var(--verde); }

.aviso-pago .caja-qr {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin: 1rem 0; padding: 1.1rem;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.aviso-pago .caja-qr img {
  width: 180px; height: 180px; object-fit: contain; flex: none;
  background: #fff; padding: .4rem;
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.aviso-pago .caja-qr > div { min-width: 180px; flex: 1; }
.aviso-pago .caja-qr p { margin: 0 0 .25rem; }
.aviso-pago .monto {
  font-size: 1.5rem; font-weight: 700; color: var(--texto); margin-bottom: .5rem;
}

.aviso-pago .fila-operacion {
  display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap;
}
.aviso-pago .fila-operacion label { flex: 1; min-width: 210px; }
.aviso-pago .fila-operacion .boton { flex: none; }
.aviso-pago .letra-chica { margin-top: .8rem; font-size: .78rem; }

@media (max-width: 520px) {
  .aviso-pago .caja-qr { justify-content: center; text-align: center; }
  .aviso-pago .fila-operacion .boton { width: 100%; }
}

/* ============================== titulos de pagina que faltaban
   El catalogo, el carrito y el checkout no tenian ningun <h1>: la pagina no
   declaraba de que trata. Se ven como los titulos que ya habia. */
.titulo-catalogo {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700;
  color: var(--texto); margin: 0 0 .9rem;
}
.titulo-panel-h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.titulo-checkout {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 700;
  color: var(--texto); margin: 0 0 1rem;
}


/* ================================================= respuesta al tacto
   En un telefono no hay :hover. Sin un :active, tocar un boton no producia
   ninguna senal y la tienda se sentia muerta: la persona no sabia si le
   habia hecho caso. Se anima solo transform, que no obliga al navegador a
   recalcular la pagina. */
.boton:active {
  transform: scale(.97);
  box-shadow: 0 1px 3px rgba(10, 37, 64, .1);
}
.buscador button:active { transform: scale(.94); }
.accion:active          { transform: scale(.96); }
.tarjeta-categoria:active { transform: scale(.985); }
.menu-panel a:active    { transform: scale(.98); }
/* .destacado va DESPUES de su propio :hover, que esta mas abajo en el archivo */
.destacado:active       { transform: scale(.99); }
/* A proposito NO hay .producto:active: el :active sube por los padres, asi
   que apretar "Agregar" encogeria la tarjeta entera. La senal va en la foto. */
.producto-foto:active img { transform: scale(1.02); }

/* --- la foto de la ficha, igual que las del catalogo --------------------- */
.ficha-foto { overflow: hidden; }
.ficha-foto img { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.ficha-foto:hover img { transform: scale(1.05); }

/* --- confirmacion al agregar al carrito ---------------------------------
   Antes solo cambiaba una palabra dentro del boton y aparecia un aviso
   flotante arriba. Ahora el boton se pone verde un segundo: la senal esta
   donde la persona esta mirando. Va despues de .boton.principal:hover, o el
   hover del escritorio le gana y no se ve nunca. */
.agregar.listo,
.agregar.listo:hover {
  background: var(--verde); border-color: var(--verde); color: #fff;
  box-shadow: 0 4px 14px -4px rgba(18, 161, 80, .5);
}
/* de noche --verde se aclara, asi que la letra encima va oscura */
:root[data-tema="oscuro"] .agregar.listo,
:root[data-tema="oscuro"] .agregar.listo:hover { color: #08131f; }

/* el destello de la tarjeta: opacity y no transform, porque transform ya lo
   usa el hover para levantarla y se pisarian */
.producto { position: relative; }
.producto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0;
  box-shadow: inset 0 0 0 2px var(--verde);
  transition: opacity .3s ease;
}
.producto.confirmado::after { opacity: 1; }

/* --- las fotos entran con un fundido en vez de aparecer de golpe -------- */
.js-mov .producto-foto img:not(.cargada) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .boton:active, .buscador button:active, .accion:active,
  .tarjeta-categoria:active, .menu-panel a:active, .destacado:active,
  .producto-foto:active img { transform: none; }
  .ficha-foto img, .ficha-foto:hover img { transition: none; transform: none; }
  .producto::after { transition: none; }
  .js-mov .producto-foto img:not(.cargada) { opacity: 1; }
  /* los avisos flotantes tambien: antes se seguian deslizando */
  .tostada { animation: none; }
  .tostada.saliendo { animation: none; opacity: 0; }
}

/* Un enlace dentro de un aviso heredaba el azul de la marca, que sobre el
   fondo ambar de un aviso da 3.5 y no se lee bien. Hereda el color del propio
   aviso, que ya esta medido contra su fondo. */
.aviso a { color: inherit; text-decoration: underline; font-weight: 600; }
/* el numero de la categoria seleccionada, sobre el azul suave */
.lista-filtros a.activo .n { color: var(--azul-hover); }

/* el navegador tiene que saber que la pagina esta oscura, o pinta sus propios
   controles (calendarios, desplegables, barras) con el tema claro */
:root[data-tema="oscuro"] { color-scheme: dark; }
::placeholder { color: var(--texto-3); opacity: 1; }

/* ================================================= la seccion de videos
   Marcado propio y no el de los destacados: alli la tarjeta entera es un
   enlace, y un video con controles adentro de un enlace hace que tocar play
   te lleve a otra pagina. */
.rejilla-videos { display: grid; gap: 1.2rem; }

/* Una fila que se arrastra. El tope de ancho de la tarjeta crece con la
   pantalla: estaba clavado en 340px, o sea que en un monitor de 1440 el video
   ocupaba 340 de 1362 y quedaban mas de mil pixeles de fila vacia al lado. La
   tarjeta de un destacado, ahi mismo, mide 680. */
.rejilla-videos.forma-banda {
  grid-auto-flow: column; grid-auto-columns: minmax(280px, 420px);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: .6rem; touch-action: pan-y;
}
.rejilla-videos.forma-banda > * { scroll-snap-align: start; }
@media (min-width: 1100px) {
  .rejilla-videos.forma-banda { grid-auto-columns: minmax(380px, 520px); }
}

/* auto-fill y no auto-fit: con dos videos, auto-fit los estira a media
   pantalla cada uno */
.rejilla-videos.forma-mosaico { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.rejilla-videos.forma-vertical { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* ------------------------------------------------- las formas nuevas
   Ninguna necesita una libreria: son cuatro reglas de grid. */

/* CINE: uno solo, grande, centrado. Es la forma para cuando hay UN video que
   vale la pena y no una lista. En una pantalla de 1440 la tarjeta pasa de 340
   a 1000 pixeles. */
.rejilla-videos.forma-cine {
  grid-template-columns: minmax(0, 1000px); justify-content: center;
}

/* PRIMERO GRANDE: el primero ocupa el ancho entero y los demas van abajo en
   una fila. Es como se acomoda una portada de diario. */
.rejilla-videos.forma-destacado { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rejilla-videos.forma-destacado > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .rejilla-videos.forma-destacado > :first-child .marco-video { aspect-ratio: 21 / 9; }
}

/* DE A DOS: dos por fila, parejos y grandes. Sin arrastrar y sin huecos.
   En telefono se apilan. */
.rejilla-videos.forma-duo { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .rejilla-videos.forma-duo { grid-template-columns: 1fr 1fr; }
}

/* ALTERNADO: el video de un lado y su texto del otro, y se da vuelta en cada
   fila. Es la forma para contar algo, no para mostrar una lista. */
.rejilla-videos.forma-alternado { grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 860px) {
  .rejilla-videos.forma-alternado .tarjeta-video {
    display: grid; grid-template-columns: 1.4fr 1fr; align-items: center;
  }
  .rejilla-videos.forma-alternado .tarjeta-video:nth-child(even) .marco-video {
    order: 2;
  }
  .rejilla-videos.forma-alternado .cuerpo-video { padding: 1.4rem 1.6rem; }
  .rejilla-videos.forma-alternado .cuerpo-video h3 { font-size: 1.25rem; }
}

.tarjeta-video {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-video:hover { box-shadow: var(--sombra-2); border-color: var(--azul-borde); }

.marco-video {
  position: relative; background: var(--navy-2);
  aspect-ratio: 16 / 9; overflow: hidden;
}
.forma-vertical .marco-video { aspect-ratio: 9 / 16; }
.marco-video video { width: 100%; height: 100%; display: block; }
.ajuste-llenar video { object-fit: cover; }
.ajuste-arriba video { object-fit: cover; object-position: center top; }
.ajuste-abajo  video { object-fit: cover; object-position: center bottom; }
.ajuste-liso   video { object-fit: contain; }

/* El boton de play tapa el video entero: da un blanco grande para tocar en un
   telefono, que es donde mas cuesta. Se va en cuanto arranca.

   Su blanco NO sale de --sobre-marca a proposito: cae sobre el VIDEO, con su
   propio velo oscuro encima, y no sobre el color de la tienda. Ahi el blanco
   siempre es la eleccion correcta. */
.boton-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10, 37, 64, .28); border: 0; cursor: pointer;
  color: #fff; transition: background .18s ease, opacity .18s ease;
}
.boton-play:hover { background: rgba(10, 37, 64, .12); }
.boton-play .ico { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }
.tarjeta-video.andando .boton-play { opacity: 0; pointer-events: none; }

.cuerpo-video { padding: .9rem 1rem 1.1rem; display: grid; gap: .35rem; }
.cuerpo-video h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.cuerpo-video p { margin: 0; font-size: .85rem; color: var(--texto-2); }
.cuerpo-video .boton { justify-self: start; margin-top: .3rem; }

/* A diferencia de las fotos, el video NO se agranda al pasar el mouse: esa
   transformacion obliga al navegador a recomponer la capa en cada cuadro del
   video, no solo mientras dura el efecto. */
.tarjeta-video:hover .marco-video video { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-video { transition: none; }
  .boton-play { transition: none; }
}

/* El logo que sube el equipo. Tope de ancho ademas de alto: una imagen con
   una proporcion cualquiera empujaria el buscador de la cabecera. */
.logo-subido { width: auto; max-width: 200px; object-fit: contain; }
/* El logo de la cabecera va mas grande que el simbolo vectorial: como trae el
   nombre adentro (y al lado ya no se escribe el texto), tiene que leerse.
   drop-shadow (no box-shadow) respeta las esquinas redondeadas de la placa,
   asi se despega del fondo tanto sobre el navy como sobre el blanco. */
.marca .logo-subido { height: 66px; max-width: 300px; }
@media (max-width: 860px) { .marca .logo-subido { height: 52px; } }

/* ============================================ el texto que escribe el equipo
   Los terminos, la privacidad, el libro de reclamaciones, "Nosotros" y la
   ficha del producto. Es lo unico de la tienda que se imprime SIN escapar,
   asi que lo que puede aparecer aca es exactamente la lista blanca de
   backend/servicios/texto_rico.py y nada mas: no hay img, ni style, ni class.
   Por eso alcanza con estilar las etiquetas. */
.texto-legal { color: var(--texto-2); line-height: 1.7; }
.texto-legal > :first-child { margin-top: 0; }
.texto-legal p { margin: 0 0 .9rem; }
.texto-legal h3 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--texto); }
.texto-legal h4 { font-size: 1rem; margin: 1.2rem 0 .5rem; color: var(--texto); }
.texto-legal ul, .texto-legal ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.texto-legal li { margin-bottom: .35rem; }
.texto-legal b, .texto-legal strong { color: var(--texto); font-weight: 700; }
.texto-legal a { color: var(--azul); text-decoration: underline; }
.texto-legal blockquote {
  margin: 1rem 0; padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--azul-borde); color: var(--texto-3);
}
/* El resaltado tiene que leerse tambien de noche: un amarillo fijo sobre
   fondo oscuro deja letra clara sobre amarillo claro. */
.texto-legal mark {
  background: #fff3b0; color: #3a2c00; padding: 0 .2em; border-radius: 3px;
}
:root[data-tema="oscuro"] .texto-legal mark { background: #6b5a12; color: #fff8dc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .texto-legal mark { background: #6b5a12; color: #fff8dc; }
}
/* Suelto: cuando va adentro de otra cosa y no tiene que abrir espacio. */
.texto-legal.suelto p { margin: .2rem 0 0; }
.texto-legal.suelto { display: inline-block; }

/* ================================ los botones en el telefono
   Lo mismo que en el panel: 44px de lado es lo minimo que un dedo acierta.
   Y el de "Ver el catalogo" de la primera pantalla se quedaba 4px corto y
   cortaba la ultima letra. */
@media (max-width: 640px) {
  .boton { min-height: 44px; padding: .65rem 1.2rem; }
  .boton.chico { min-height: 40px; padding: .5rem .85rem; font-size: .82rem; }
  /* A lo ancho, y con menos relleno a los lados: con 1.2rem de cada lado el
     texto se quedaba 4px corto y se comia la ultima letra. Un boton que ya
     ocupa todo el ancho no necesita relleno lateral para verse grande. */
  .hero .boton {
    width: 100%; justify-content: center;
    padding-left: .7rem; padding-right: .7rem;
  }
  /* La fila de agregar al carrito: el selector de cantidad no puede
     comprimir al boton hasta que el texto no entre. */
  .fila-agregar { gap: .5rem; }
  .fila-agregar .agregar { flex: 1 1 auto; min-width: 0; }
  .fila-agregar select { flex: 0 0 auto; min-height: 44px; }
}

/* ============================ los filtros plegados en el telefono
   En una pantalla de 375px la columna de filtros mide 221px de alto y va
   ARRIBA de los productos: lo primero que ve quien entra al catalogo desde
   el celular no son los productos, son los filtros. Plegados, la lista
   empieza donde tiene que empezar y el que quiere filtrar toca una vez. */

/* ============================================== novedades de un pedido */
/* Se llaman .novedad y no .aviso porque .aviso ya es la tarjeta de mensaje
   de este mismo archivo: usar el mismo nombre hacia que las dos reglas se
   pelearan y ganara la que estuviera mas abajo. */
.lista-novedades { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.novedad { display: flex; gap: .75rem; padding: .75rem 0;
           border-bottom: 1px solid var(--borde); }
.novedad:last-child { border-bottom: none; }
.marca-novedad { flex: 0 0 auto; width: 4px; border-radius: 99px;
                 background: var(--texto-3); align-self: stretch; min-height: 30px; }
.novedad.nivel-ok .marca-novedad     { background: var(--verde); }
.novedad.nivel-alerta .marca-novedad { background: var(--rojo); }
.novedad.nivel-info .marca-novedad   { background: var(--azul); }
.cuerpo-novedad { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cuerpo-novedad b { font-size: .95rem; line-height: 1.35; }
.cuerpo-novedad span { font-size: .85rem; color: var(--texto-2); line-height: 1.4; }
.cuerpo-novedad time { font-size: .76rem; color: var(--texto-3); }

.abrir-filtros { display: none; }
.filtros.plegable, .panel-filtros.plegable { padding: 0; overflow: visible; }
.filtros.plegable .abrir-filtros,
.panel-filtros.plegable .abrir-filtros {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; padding: .7rem 1rem;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--texto-fuerte);
}
.filtros.plegable .abrir-filtros i,
.panel-filtros.plegable .abrir-filtros i {
  width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .18s ease; margin-bottom: 4px;
}
.filtros.plegable.cerrado .abrir-filtros i,
.panel-filtros.plegable.cerrado .abrir-filtros i { transform: rotate(-45deg); margin: 4px 0 0; }
.filtros.plegable .cuerpo-filtros,
.panel-filtros.plegable .cuerpo-filtros { padding: 0 1rem 1.1rem; }
.filtros.plegable.cerrado .cuerpo-filtros,
.panel-filtros.plegable.cerrado .cuerpo-filtros { display: none; }
@media (prefers-reduced-motion: reduce) {
  .abrir-filtros i { transition: none; }
}

/* ================================ como se ven los botones
   Tres estilos y una animacion, elegibles desde Edicion de la tienda. El de
   fabrica es "relieve", el que ya habia. Los colores NO cambian: siguen
   saliendo del motor con su control de contraste. Lo que cambia es el
   acabado. */

/* PLANO: un solo color, sin degradado ni sombra. */
[data-botones="plano"] .boton.primario,
[data-botones="plano"] .boton.principal {
  background: var(--azul); box-shadow: none; border-color: var(--azul);
}

/* BRILLANTE: lustre arriba, sombra de color abajo, y un barrido de luz que
   cruza al pasar el mouse. El barrido va en un ::after con overflow oculto,
   no en un fondo animado: asi no repinta el boton entero en cada cuadro. */
[data-botones="brillante"] .boton.primario,
[data-botones="brillante"] .boton.principal {
  background: linear-gradient(180deg, var(--azul-brillo) 0%, var(--azul) 52%,
                              var(--azul-hover) 100%);
  box-shadow: 0 6px 18px -4px rgba(var(--acento-rgb), .55),
              inset 0 1px 0 rgba(var(--sobre-acento-rgb), .45),
              inset 0 -1px 0 rgba(0, 0, 0, .16);
  position: relative; overflow: hidden;
}
[data-botones="brillante"] .boton.primario::after,
[data-botones="brillante"] .boton.principal::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent,
              rgba(var(--sobre-acento-rgb), .3), transparent);
  pointer-events: none;
}
[data-botones="brillante"][data-animacion="1"] .boton.primario:hover::after,
[data-botones="brillante"][data-animacion="1"] .boton.principal:hover::after {
  animation: barrido .65s ease;
}
@keyframes barrido { to { left: 120%; } }

/* La animacion al tocar: se levanta apenas y se hunde al apretar. Es lo que
   hace que un boton se sienta un boton y no una figura pegada. */
[data-animacion="1"] .boton { transition: transform .16s ease, box-shadow .16s ease; }
[data-animacion="1"] .boton:hover:not(:disabled) { transform: translateY(-1px); }
[data-animacion="1"] .boton:active:not(:disabled) { transform: translateY(1px); }

/* Quien pidio menos movimiento en su sistema no recibe ninguno, elija lo que
   elija el equipo: es una preferencia de accesibilidad, no un gusto. */
@media (prefers-reduced-motion: reduce) {
  [data-animacion="1"] .boton { transition: none; }
  [data-animacion="1"] .boton:hover:not(:disabled),
  [data-animacion="1"] .boton:active:not(:disabled) { transform: none; }
  [data-botones="brillante"] .boton.primario:hover::after,
  [data-botones="brillante"] .boton.principal:hover::after { animation: none; }
}

/* El logo de noche. Van los dos en la pagina y se muestra el que toca: el
   tema lo decide el navegador, no el servidor, asi que no se puede elegir al
   dibujar. Si no hay logo de noche, el de dia no lleva estas clases y se ve
   siempre. */
/* el par de clases (0,2,0) le gana a `.marca .simbolo-marca { display:block }`,
   que si no dejaba los DOS logos encendidos a la vez en modo claro */
.simbolo-marca.logo-noche { display: none; }
:root[data-tema="oscuro"] .simbolo-marca.logo-dia { display: none; }
:root[data-tema="oscuro"] .simbolo-marca.logo-noche { display: block; }

/* ========================================== Animaciones visuales
   Todo controlado por data-animacion="1" en <body>. El admin lo activa o
   desactiva desde Edicion de la tienda. Quien tenga prefers-reduced-motion
   no recibe ninguna. */

/* --- tarjetas de producto: sombra y elevacion al pasar el mouse --- */
[data-animacion="1"] .producto {
  transition: transform .22s ease, box-shadow .22s ease;
}
[data-animacion="1"] .producto:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 37, 64, .15);
}

/* --- tarjetas de categoria: elevacion + borde brillante --- */
[data-animacion="1"] .tarjeta-categoria {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
[data-animacion="1"] .tarjeta-categoria:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(10, 37, 64, .12);
  border-color: var(--azul);
}

/* --- links de la barra de navegacion: glow sutil al pasar --- */
[data-animacion="1"] .barra-secundaria a:not(.menu-catalogo summary) {
  transition: color .18s ease, text-shadow .18s ease;
}
[data-animacion="1"] .barra-secundaria a:not(.menu-catalogo summary):hover {
  text-shadow: 0 0 8px rgba(var(--acento-rgb), .4);
}

/* --- logo: brillo sutil al cargar la pagina --- */
@keyframes logo-brillo {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}
[data-animacion="1"] .marca-texto b {
  animation: logo-brillo .8s ease .3s;
}

/* --- secciones: entrada escalonada mas fluida --- */
@keyframes seccion-entra {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
[data-animacion="1"] .titulo-seccion.visible {
  animation: seccion-entra .5s cubic-bezier(.22, .61, .36, 1) forwards;
}

/* --- boton primario: glow al pasar el mouse --- */
[data-animacion="1"] .boton.primario:hover,
[data-animacion="1"] .boton.principal:hover {
  box-shadow: 0 4px 18px rgba(var(--acento-rgb), .35);
}

/* --- footer: las columnas aparecen una a una --- */
@keyframes footer-subir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
[data-animacion="1"] .pie-columnas > div {
  opacity: 0;
  animation: footer-subir .45s cubic-bezier(.22, .61, .36, 1) forwards;
}
[data-animacion="1"] .pie-columnas > div:nth-child(1) { animation-delay: .05s; }
[data-animacion="1"] .pie-columnas > div:nth-child(2) { animation-delay: .12s; }
[data-animacion="1"] .pie-columnas > div:nth-child(3) { animation-delay: .19s; }
[data-animacion="1"] .pie-columnas > div:nth-child(4) { animation-delay: .26s; }

/* --- highlights de precios y ofertas: pulso sutil --- */
@keyframes precio-pulso {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
[data-animacion="1"] .producto:hover .precio {
  animation: precio-pulso .35s ease;
}

/* --- modal login: entrada con efecto resbalon --- */
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(-16px) scale(.95); }
}
@keyframes velo-entra { from { opacity: 0; } }

/* --- modal login: cierre suave --- */
@keyframes modal-sale {
  to { opacity: 0; transform: translateY(-10px) scale(.97); }
}

/* --- paginas: transicion suave al cargar --- */
@keyframes pagina-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[data-animacion="1"] body {
  animation: pagina-entra .3s ease;
}

/* --- accesibilidad: sin animaciones si el sistema lo pide --- */
@media (prefers-reduced-motion: reduce) {
  [data-animacion="1"] .producto,
  [data-animacion="1"] .tarjeta-categoria,
  [data-animacion="1"] .barra-secundaria a { transition: none; }
  [data-animacion="1"] .producto:hover,
  [data-animacion="1"] .tarjeta-categoria:hover { transform: none; box-shadow: none; }
  [data-animacion="1"] .boton.primario:hover,
  [data-animacion="1"] .boton.principal:hover { box-shadow: none; }
  [data-animacion="1"] .marca-texto b,
  [data-animacion="1"] .titulo-seccion.visible,
  [data-animacion="1"] .pie-columnas > div,
  [data-animacion="1"] .producto:hover .precio,
  [data-animacion="1"] body { animation: none; }
}

/* ===================================================== Modal de login
   Flotante sobre la pagina: el cliente toca "Iniciar sesion" y le sale el
   formulario sin irse de donde esta. */
.modal-login {
  border: none; border-radius: var(--radio); background: var(--blanco);
  color: var(--texto); padding: 1.8rem 1.5rem; width: min(92vw, 400px);
  box-shadow: 0 24px 60px rgba(10, 37, 64, .28);
}
.modal-login::backdrop { background: rgba(10, 37, 64, .5); backdrop-filter: blur(2px); }
.modal-login[open] { animation: modal-entra .2s cubic-bezier(.22, .61, .36, 1); }
.modal-login[open]::backdrop { animation: velo-entra .2s ease; }
.modal-login h2 { margin: 0 0 .3rem; font-size: 1.2rem; color: var(--texto-fuerte); }
.modal-login .tenue { margin: 0 0 1.2rem; font-size: .85rem; color: var(--texto-2); }
.modal-login label { display: block; margin-bottom: .9rem; }
.modal-login input {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--borde);
  border-radius: var(--radio-s); background: var(--superficie-2); color: var(--texto);
  font: inherit; font-size: .9rem; margin-top: .3rem;
}
.modal-login input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 2px rgba(var(--acento-rgb), .25); }
.modal-login .boton.primario { margin-top: .3rem; }
.modal-login .pie-modal { text-align: center; margin: 1rem 0 0; font-size: .85rem; color: var(--texto-2); }
.modal-login .pie-modal a { color: var(--azul); }
.cerrar-modal {
  position: absolute; top: .6rem; right: .8rem; background: none; border: none;
  font-size: 1.4rem; color: var(--texto-2); cursor: pointer; line-height: 1;
}
.cerrar-modal:hover { color: var(--texto); }

.sep-o { text-align: center; margin: 1rem 0 .8rem; font-size: .8rem; color: var(--texto-2); position: relative; }
.sep-o::before, .sep-o::after { content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--bordes); }
.sep-o::before { left: 0; }
.sep-o::after { right: 0; }
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .65rem 1rem; border: 1px solid var(--bordes);
  border-radius: 8px; background: var(--blanco); color: var(--texto);
  font-size: .9rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.boton-google:hover { background: var(--fondo); }

@keyframes modal-entra { from { opacity: 0; transform: scale(.92); } }
@keyframes velo-entra { from { opacity: 0; } }

/* ============================================ calificaciones y resenas */
/* Estrellas: la capa "llena" (dorada) se recorta en ancho sobre la capa vacia,
   asi salen medias estrellas para promedios como 4.5. */
.estrellas { display: inline-flex; align-items: center; gap: .4rem; line-height: 1; }
.estrellas-glifos { position: relative; display: inline-block; white-space: nowrap; font-size: .92rem; }
.estrellas-base { color: var(--borde-2); letter-spacing: 2px; }
/* de noche --borde-2 es un azul muy oscuro: las estrellas vacias casi no se
   veian. Un gris-azul mas claro las hace visibles sin robarle el show a las
   llenas (doradas). */
:root[data-tema="oscuro"] .estrellas-base,
:root[data-tema="oscuro"] .estrellas-input label { color: var(--texto-3); }
.estrellas-lleno { position: absolute; left: 0; top: 0; overflow: hidden; color: #f6a609; letter-spacing: 2px; }
.estrellas-n { color: var(--texto-2); font-size: .78rem; font-weight: 500; }

.producto-cal { margin: .15rem 0; }
.ficha-cal { display: inline-flex; margin: .5rem 0 .1rem; }
.ficha-cal:hover { text-decoration: none; }

.resenas { scroll-margin-top: 90px; }
.resenas-caja {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.4rem; margin-bottom: 1.4rem;
}
/* Resumen: la nota grande a la izquierda y el reparto por estrella a la
   derecha, como una ficha de calificacion. Si no hay datos, queda el texto. */
.resenas-resumen.con-datos {
  display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.resenas-nota {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .9rem 1.2rem; border-radius: var(--radio);
  background: var(--superficie-2); text-align: center;
}
.nota-numero { display: flex; align-items: baseline; gap: .18rem; }
.resenas-nota b { font-size: 2.9rem; line-height: 1; font-weight: 800; color: var(--texto-fuerte); }
.nota-sobre { font-size: .95rem; font-weight: 600; color: var(--texto-2); }
.resenas-nota .estrellas-glifos { font-size: 1.05rem; }
.nota-total { color: var(--texto-2); font-size: .8rem; }
.resenas-reparto { flex: 1 1 200px; display: grid; gap: .4rem; }
.reparto-fila {
  display: grid; grid-template-columns: 2.4rem 1fr 2.2rem; align-items: center;
  gap: .55rem; font-size: .82rem; color: var(--texto-2);
}
.reparto-e {
  display: inline-flex; align-items: center; gap: .12rem; white-space: nowrap;
  font-weight: 600; color: var(--texto);
}
.reparto-e i { color: #f6a609; font-style: normal; }
.reparto-barra { height: 10px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.reparto-barra i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #f6a609, #f8bd46);
}
.reparto-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.resenas-vacio { color: var(--texto-2); }

.resenas-form-cab { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; }
.resenas-form h3 { font-size: 1.05rem; }
.chip-verificada {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--verde-fondo); color: var(--verde);
  border-radius: var(--pill); padding: .2rem .6rem; font-size: .74rem; font-weight: 600;
}
.chip-verificada.peq { font-size: .68rem; padding: .12rem .45rem; }
.resenas-form textarea {
  width: 100%; border: 1px solid var(--borde-2); border-radius: var(--radio-s);
  padding: .7rem .8rem; font: inherit; font-size: .9rem; resize: vertical; margin: .5rem 0;
  background: var(--blanco); color: var(--texto);
}
.resenas-form textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .14); }

/* el selector de estrellas para opinar: 5..1 en el marcado + row-reverse */
.estrellas-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 1.7rem; line-height: 1; }
.estrellas-input input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.estrellas-input label { color: var(--borde-2); cursor: pointer; padding: 0 .08rem; transition: color .12s; }
.estrellas-input input:checked ~ label,
.estrellas-input label:hover,
.estrellas-input label:hover ~ label { color: #f6a609; }
.estrellas-input input:focus-visible + label { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

.resenas-login { color: var(--texto-2); }
.resenas-login p { margin-bottom: .7rem; }

.lista-resenas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.resena { border-top: 1px solid var(--borde); padding-top: 1rem; }
.resena-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.resena-autor { font-weight: 600; color: var(--texto-fuerte); }
.resena-fecha { color: var(--texto-3); font-size: .78rem; margin-left: auto; }
.resena p { margin: .35rem 0 0; color: var(--texto-2); font-size: .92rem; white-space: pre-line; }

/* mensajes del servidor en la web publica (flash) */
.avisos-web { margin: 1rem auto; display: grid; gap: .5rem; }
.aviso-web {
  padding: .7rem 1rem; border-radius: var(--radio); font-size: .9rem; font-weight: 500;
  background: var(--azul-suave); color: var(--texto-fuerte); border: 1px solid var(--azul-borde);
}
.aviso-web.ok { background: var(--verde-fondo); color: var(--verde); border: 0; }
.aviso-web.error { background: var(--rojo-fondo); color: var(--rojo); border: 0; }

/* Tienda en pausa: cartel amable, centrado, con las promesas y el contacto */
.pausada {
  max-width: 560px; margin: 3.5rem auto; padding: 2.6rem 1.6rem; text-align: center;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px;
  box-shadow: 0 10px 34px rgba(10, 37, 64, .06);
}
.pausada-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 86px; height: 86px; border-radius: 50%; margin-bottom: 1.2rem;
  background: var(--azul-suave); color: var(--azul);
}
.pausada-titulo { font-size: 1.9rem; margin: 0 0 .5rem; color: var(--texto-fuerte); }
.pausada-sub {
  color: var(--texto-2); max-width: 44ch; margin: 0 auto 1.7rem; line-height: 1.55;
}
.pausada-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.9rem;
}
.pausada-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: var(--pill);
  background: var(--superficie-2); color: var(--texto); font-size: .82rem; font-weight: 600;
}
.pausada-chip svg { color: var(--azul); flex: 0 0 auto; }
.pausada-wa { display: inline-flex; align-items: center; gap: .5rem; }
.pausada-datos {
  list-style: none; margin: 1.9rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--borde); display: grid; gap: .65rem; justify-items: center;
}
.pausada-datos li {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--texto-2); font-size: .9rem;
}
.pausada-datos svg { color: var(--azul); flex: 0 0 auto; }

/* Cuenta castigada: banda de alerta arriba del contenido en toda la web */
.aviso-castigo {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 1rem 0; padding: .9rem 1.1rem; border-radius: var(--radio);
  background: var(--rojo-fondo); color: var(--rojo); border: 1px solid #f0c4c8;
}
.aviso-castigo svg { flex: 0 0 auto; margin-top: .1rem; }
.aviso-castigo b { color: var(--rojo); }
.aviso-castigo p { margin: .2rem 0 0; color: var(--texto); font-size: .9rem; }

/* Mis compras: el historial del cliente */
.lista-compras { display: grid; gap: .7rem; }
.compra {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 1rem;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .9rem 1.1rem;
}
.compra-datos { display: flex; flex-direction: column; }
.compra-codigo { color: var(--texto-fuerte); }
.compra-estado { display: flex; gap: .4rem; flex-wrap: wrap; }
.compra-total { font-size: 1.05rem; color: var(--texto-fuerte); white-space: nowrap; }
.compra-acciones { display: flex; gap: .4rem; }
.chip-estado, .chip-pago {
  font-size: .72rem; font-weight: 700; padding: .18rem .55rem; border-radius: var(--pill);
  background: var(--superficie-2); color: var(--texto-2); white-space: nowrap;
}
.chip-estado.e-entregado { background: var(--verde-fondo); color: var(--verde); }
.chip-estado.e-cancelado { background: var(--rojo-fondo); color: var(--rojo); }
.chip-pago.si { background: var(--verde-fondo); color: var(--verde); }
.chip-pago.no { background: var(--ambar-fondo); color: var(--ambar); }
@media (max-width: 640px) {
  .compra { grid-template-columns: 1fr auto; }
  .compra-estado { grid-column: 1 / -1; order: 3; }
  .compra-acciones { grid-column: 1 / -1; order: 4; }
}

@media (max-width: 720px) { .resenas-caja { grid-template-columns: 1fr; } }