/* ==========================================================================
   VITALICA — Maqueta e-commerce · Hoja de estilos principal
   --------------------------------------------------------------------------
   Este archivo es el "sistema de diseño" del sitio. Está dividido en
   secciones (ver índice). La idea clave: todo lo visual (colores, tipografía,
   espaciados) vive en VARIABLES al inicio. Si querés cambiar el naranja de la
   marca, lo cambiás en UN solo lugar (--color-primario) y se actualiza todo.

   ÍNDICE
   01. Tokens de marca (variables: colores, tipografía, espaciado, sombras)
   02. Reset y base
   03. Tipografía
   04. Layout (contenedor, secciones, grillas)
   05. Botones
   06. Utilidades (badges, chips, etiquetas)
   07. Estrellas de rating
   08. Card de producto
   09. Encabezado de sección
   --------------------------------------------------------------------------
   NOTA: las secciones de Header, Footer, Hero, Carrito, etc. se agregan más
   abajo a medida que construimos cada parte de la maqueta.
   ========================================================================== */


/* ==========================================================================
   00. TIPOGRAFÍA DE MARCA — Degular (manual de Vitalica, pág. 9)
   --------------------------------------------------------------------------
   Colocá los archivos en assets/fonts/. Si faltan, el sitio cae automática-
   mente a Montserrat / Inter (definidas como fallback en --fuente-titulo).
   ========================================================================== */
@font-face {
  font-family: "Degular";
  src: url("../fonts/Degular-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("../fonts/Degular-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Degular";
  src: url("../fonts/Degular-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}


/* ==========================================================================
   01. TOKENS DE MARCA  (las "perillas" del diseño)
   ========================================================================== */
:root {
  /* --- Colores de marca (del manual de Vitalica) --- */
  --color-primario:        #EF7D2A;  /* naranja Vitalica */
  --color-primario-oscuro: #D2651A;  /* hover / estados activos */
  --color-primario-tinte:  #FDEEE1;  /* fondos suaves naranja */
  --color-primario-texto:  #A85410;  /* naranja oscuro SOLO para texto sobre fondo claro (contraste AA 5.3:1) */

  --color-secundario:        #0B55A3; /* azul navy */
  --color-secundario-oscuro: #083F7A;
  --color-secundario-tinte:  #E7F0FA;

  /* --- Grises de apoyo --- */
  --color-tinta:       #16191D;  /* gris muy oscuro = texto principal */
  --color-tinta-suave: #565C66;  /* texto secundario / apagado */
  --color-linea:       #E6E8EC;  /* bordes y separadores (gris claro) */
  --color-fondo:       #FFFFFF;
  --color-fondo-suave: #F5F6F8;  /* fondos de sección (gris claro) */
  --color-fondo-oscuro:#0F0F10;  /* footer y secciones oscuras (negro de marca del sitio actual) */

  /* --- Colores de apoyo funcionales --- */
  --color-exito:    #1F9D57;
  --color-estrella: #F5A623;  /* dorado para ratings */
  --color-alerta:   #D64545;

  /* --- Tipografía --- */
  /* Degular = tipografía oficial del manual de marca (pág. 9).
     Los .otf van en assets/fonts/. Si no cargan, cae a Montserrat/Inter. */
  --fuente-titulo: "Degular", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto:  "Degular", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala de tamaños (rem = relativo al tamaño base del navegador) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  /* El hero usa clamp(): crece con la pantalla pero con mínimo y máximo */
  --fs-hero: clamp(2.25rem, 5.5vw, 4rem);

  /* --- Espaciado (escala consistente) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* --- Bordes redondeados --- */
  --radio-sm:   6px;
  --radio:      10px;
  --radio-lg:   16px;
  --radio-pill: 999px;  /* pastilla (botones redondeados) */

  /* --- Sombras --- */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sombra:    0 4px 14px rgba(16, 24, 40, 0.08);
  --sombra-lg: 0 14px 40px rgba(16, 24, 40, 0.12);

  /* --- Layout --- */
  --ancho-contenedor: 1240px;  /* ancho máximo del contenido */
  --transicion: 160ms ease;
}


/* ==========================================================================
   02. RESET Y BASE  (emparejar el punto de partida entre navegadores)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--fuente-texto);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-tinta);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; padding: 0; }

/* El atributo [hidden] siempre oculta, aunque el elemento tenga display:flex */
[hidden] { display: none !important; }

/* Accesibilidad: foco visible al navegar con teclado */
:focus-visible {
  outline: 3px solid var(--color-secundario);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}


/* ==========================================================================
   03. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-tinta);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { color: var(--color-tinta); }

.texto-apagado { color: var(--color-tinta-suave); }

/* Texto pequeño en mayúsculas con espaciado (etiquetas/categorías) */
.eyebrow {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-tinta-suave); /* gris legible sobre claro; los eyebrow naranjas van inline sobre bandas oscuras */
}


/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
/* Contenedor centrado con respiración lateral */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Espaciado vertical estándar entre secciones */
.seccion { padding-block: var(--space-8); }
.seccion--suave { background: var(--color-fondo-suave); }

/* Grillas reutilizables y responsivas (se acomodan solas al ancho) */
.grilla {
  display: grid;
  gap: var(--space-5);
}
/* Grilla de productos: tantas columnas como entren, mínimo 240px */
.grilla--productos {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* En desktop, el listado completo (home y productos) usa 5 columnas:
   los 10 productos llenan 2 filas exactas, sin "fila huérfana". */
@media (min-width: 1140px) {
  [data-productos].grilla--productos,
  [data-grilla-productos].grilla--productos {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Helpers de espaciado puntuales */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.centrado { text-align: center; }


/* ==========================================================================
   05. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.9em 1.6em;
  border-radius: var(--radio-pill);
  border: 2px solid transparent;
  transition: transform var(--transicion), background var(--transicion),
              color var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
  text-align: center;
}
.btn:active { transform: translateY(1px); }

/* Primario: naranja de marca */
.btn--primario {
  background: var(--color-primario);
  color: var(--color-tinta); /* texto oscuro sobre naranja: contraste 6.4:1 (WCAG AA) */
}
.btn--primario:hover { background: var(--color-primario-oscuro); }

/* Secundario: navy */
.btn--secundario {
  background: var(--color-secundario);
  color: #fff;
}
.btn--secundario:hover { background: var(--color-secundario-oscuro); }

/* Contorno: borde, fondo transparente */
.btn--contorno {
  background: transparent;
  color: var(--color-tinta);
  border-color: var(--color-linea);
}
.btn--contorno:hover {
  border-color: var(--color-tinta);
  background: var(--color-tinta);
  color: #fff;
}

/* Fantasma sobre fondos oscuros */
.btn--claro {
  background: #fff;
  color: var(--color-tinta);
}
.btn--claro:hover { background: var(--color-fondo-suave); }

/* Modificadores de tamaño y ancho */
.btn--grande { font-size: var(--fs-base); padding: 1.05em 2em; }
.btn--bloque { display: flex; width: 100%; }


/* ==========================================================================
   06. UTILIDADES (badges, chips, etiquetas)
   ========================================================================== */
/* Etiqueta/tag sobre la foto del producto ("Lanzamiento", "Nuevo") */
.tag {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.7em;
  border-radius: var(--radio-sm);
  background: var(--color-tinta);
  color: #fff;
}
.tag--lanzamiento { background: var(--color-primario); color: var(--color-tinta); }
.tag--nuevo       { background: var(--color-secundario); }
.tag--oferta      { background: var(--color-alerta); }

/* Chip (pastilla suave para categorías/filtros visuales) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: var(--radio-pill);
  background: var(--color-fondo-suave);
  color: var(--color-tinta-suave);
}


/* ==========================================================================
   07. ESTRELLAS DE RATING
   --------------------------------------------------------------------------
   Técnica: dos capas de ★★★★★ superpuestas. La de abajo es gris (vacía) y
   la de arriba es dorada, recortada al porcentaje del puntaje (--pct).
   ========================================================================== */
.estrellas {
  --pct: 100%;
  display: inline-block;
  position: relative;
  font-size: 0.95rem;
  line-height: 1;
  font-family: "Times New Roman", serif; /* ★ se ve sólida y pareja */
}
.estrellas::before {
  content: "★★★★★";
  letter-spacing: 2px;
  color: var(--color-linea);
}
.estrellas::after {
  content: "★★★★★";
  letter-spacing: 2px;
  color: var(--color-estrella);
  position: absolute;
  inset: 0;
  width: var(--pct);
  overflow: hidden;
  white-space: nowrap;
}


/* ==========================================================================
   08. CARD DE PRODUCTO  (la pieza que más se repite en el sitio)
   ========================================================================== */
.card-producto {
  display: flex;
  flex-direction: column;
  background: var(--color-fondo);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.card-producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-color: transparent;
}

/* Zona de la imagen (cuadrada, foto centrada sobre gris muy suave) */
.card-producto__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--color-fondo-suave);
  padding: var(--space-5);
}
.card-producto__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* el envase se ve completo, sin recortarse */
  mix-blend-mode: multiply; /* funde el fondo blanco de la foto con el gris */
  transition: transform var(--transicion);
}
.card-producto:hover .card-producto__media img { transform: scale(1.04); }

/* Etiqueta posicionada arriba a la izquierda de la foto */
.card-producto__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
}

/* Cuerpo de texto de la card */
.card-producto__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  flex: 1; /* empuja el botón hacia abajo para alinear todas las cards */
}
.card-producto__categoria {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}
.card-producto__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.25;
}
/* "5 sabores · 2 presentaciones". components.js la escribe en todas las
   tarjetas, pero en este diseño no se muestra: la agregó la propuesta de
   rediseño (assets/css/tema-2026.css) y ahí se enciende. Si la propuesta se
   descarta, se borran esta regla y lineaVariantes() en components.js. */
.card-producto__variantes { display: none; }
.card-producto__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
}
/* margin-top:auto empuja el precio al fondo: queda alineado en toda la fila,
   tenga el nombre 1 o 2 líneas. */
.card-producto__precio { margin-top: auto; padding-top: var(--space-2); }
.card-producto__precio .precio {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-tinta);
}
.card-producto__precio .cuotas {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-tinta-suave);
}

/* ------------------------------------------------------------------
   AVISO DE STOCK (lo decide Vitalica.avisoStock con el dato de Odoo)
   Deliberadamente discreto: es un dato útil, no una oferta. Por eso
   va en texto chico con un punto de color y NO como etiqueta rellena,
   que competiría con los tags LANZAMIENTO / NUEVO de la misma tarjeta.
   ------------------------------------------------------------------ */
.stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Naranja de marca: quedan pocas, pero todavía se puede comprar. */
.stock--bajo    { color: var(--color-primario-texto); }
/* Rojo de alerta: no hay. */
.stock--agotado { color: var(--color-alerta); }
/* En la ficha de producto respira un poco más. */
.producto__precio + .stock,
.producto__precio-nota + .stock { margin-top: var(--space-2); }
/* Pista de acción sutil (reemplaza al botón naranja repetido en cada card) */
.card-producto__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primario-texto);
}
.card-producto__flecha { transition: transform var(--transicion); }
.card-producto:hover .card-producto__flecha { transform: translateX(4px); }
.card-producto:hover .card-producto__nombre { color: var(--color-primario-texto); }


/* ==========================================================================
   09. ENCABEZADO DE SECCIÓN  (título + bajada, centrado o alineado)
   ========================================================================== */
.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.encabezado-seccion.centrado { align-items: center; }
.encabezado-seccion h2 { font-size: var(--fs-2xl); }
.encabezado-seccion p { color: var(--color-tinta-suave); max-width: 60ch; }
.encabezado-seccion.centrado p { text-align: center; }


/* ==========================================================================
   10. BARRA DE ANUNCIOS (superior, rotativa)
   ========================================================================== */
.barra-anuncios {
  background: var(--color-secundario);
  color: #fff;
}
.barra-anuncios__viewport {
  position: relative;
  height: 40px;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
}
.barra-anuncios__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding-inline: var(--space-4);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.barra-anuncios__item.activo { opacity: 1; }


/* ==========================================================================
   11. HEADER (sticky, con mega-menú)
   ========================================================================== */
/* EL ENVOLTORIO DEL CHROME NO TIENE QUE SER UNA CAJA
   --------------------------------------------------------------------------
   El header y la barra de anuncios los inyecta main.js adentro de
   #chrome-top. Ese div medía 97 px de alto — justo lo que ocupan los dos.

   Y ahí estaba el problema: `position: sticky` se pega DENTRO de la caja del
   padre, no de la página. Con un padre de 97 px, el header se despegaba a los
   97 px de desplazamiento y se iba hacia arriba con el resto. O sea que el
   menú no acompañaba al bajar, que es justamente para lo que está el sticky.

   `display: contents` borra la caja del div sin borrar lo que tiene adentro:
   el header pasa a ser hijo directo de <body> y se pega contra la página
   entera. No cambia nada más del maquetado.

   (En @media print el div se oculta igual, porque esa regla nombra también a
   .header-sitio y a .barra-anuncios, no solo al envoltorio.) */
#chrome-top { display: contents; }

.header-sitio {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-linea);
}
.header-sitio__inner {
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.header-sitio__logo { flex-shrink: 0; }
.header-sitio__logo img { height: 50px; width: auto; }

/* Los dos logos del header: Vitalica y Olimp, separados por una línea.
   Marketing pidió que la web siga mostrando los dos, porque juntos dicen lo
   que ninguno dice solo: que Vitalica representa a Olimp en Paraguay. */
.header-sitio__marcas {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.header-sitio__olimp {
  display: flex;
  align-items: center;
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-linea);
}
.header-sitio__olimp img { height: 26px; width: auto; opacity: .78; }
.header-sitio__olimp:hover img { opacity: 1; }

/* LOS DOS LOGOS TAMBIÉN EN CELULAR  ·  corregido el 17/9/2026
   --------------------------------------------------------------------------
   Acá el de Olimp se escondía por debajo de 980 px, con el argumento de que
   no entraban los dos al lado del menú y del carrito. Estaba mal medido: lo
   que no entraba era por otro error —el logo no tenía `flex` y todo se
   amontonaba contra la izquierda— y yo le eché la culpa al espacio.

   La cuenta real en un teléfono de 375 px: 24 de margen + 32 de hamburguesa
   + 72 de acciones + 24 de separaciones = 152 ocupados. Quedan 223 px para
   los logos, y los dos juntos miden alrededor de 130.

   Marketing pidió los dos logos. Van los dos, en todos los tamaños. Lo que
   se achica en celular es el de Olimp, que es el secundario. */
@media (max-width: 980px) {
  .header-sitio__marcas { gap: var(--space-2); }
  .header-sitio__olimp {
    padding-left: var(--space-2);
  }
  .header-sitio__olimp img { height: 20px; }
}

/* Botón hamburguesa (solo en mobile) */
.boton-menu {
  display: none;
  color: var(--color-tinta);
  padding: var(--space-1);
}

/* Navegación principal (desktop) */
.nav-principal { flex: 1; }
.nav-principal__lista {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav-principal__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-tinta);
  border-radius: var(--radio-sm);
  transition: color var(--transicion);
}
.nav-principal__link:hover,
.nav-principal__link.activo { color: var(--color-primario-texto); }
.nav-principal__link svg { transition: transform var(--transicion); }
.tiene-megamenu:hover .nav-principal__link svg { transform: rotate(180deg); }

/* Acciones a la derecha (buscar, carrito) */
.header-sitio__acciones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.icono-accion {
  position: relative;
  display: inline-flex;
  color: var(--color-tinta);
  padding: var(--space-1);
  transition: color var(--transicion);
}
.icono-accion:hover { color: var(--color-primario-texto); }
.boton-carrito__badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radio-pill);
  background: var(--color-primario);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ==========================================================================
   12. MEGA-MENÚ (desktop, una columna por categoría)
   ========================================================================== */
.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-fondo);
  border-top: 1px solid var(--color-linea);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.tiene-megamenu:hover .megamenu,
.tiene-megamenu:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.megamenu__inner {
  display: flex;
  gap: var(--space-6);
  padding-block: var(--space-6);
}
.megamenu__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.megamenu__titulo {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-tinta);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primario);
}
.megamenu__titulo:hover { color: var(--color-primario-texto); }
.megamenu__link {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
  padding: 5px 0;
  transition: color var(--transicion);
}
.megamenu__link:hover { color: var(--color-primario-texto); }

/* Celda promocional del mega-menú */
.megamenu__promo {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radio-lg);
  background: linear-gradient(150deg, var(--color-secundario), var(--color-primario));
  color: #fff;
}
.megamenu__promo-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}
.megamenu__promo-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: var(--fs-xl);
}
.megamenu__promo-cta { font-weight: 600; font-size: var(--fs-sm); margin-top: var(--space-2); }


/* ==========================================================================
   13. MENÚ MÓVIL (drawer lateral)
   ========================================================================== */
.menu-movil { position: fixed; inset: 0; z-index: 100; }
.menu-movil__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 18, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.menu-movil.abierto .menu-movil__overlay { opacity: 1; }
.menu-movil__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 320px;
  max-width: 85vw;
  background: var(--color-fondo);
  box-shadow: var(--sombra-lg);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.menu-movil.abierto .menu-movil__panel { transform: translateX(0); }
.menu-movil__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-linea);
}
.menu-movil__head img { height: 44px; width: auto; }
.menu-movil__cerrar { color: var(--color-tinta); }
.menu-movil__nav { display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
.menu-movil__nav > a,
.menu-movil__acordeon {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-tinta);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-linea);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-movil__acordeon svg { transition: transform var(--transicion); }
.menu-movil__acordeon.abierto svg { transform: rotate(180deg); }
.menu-movil__sub {
  display: grid;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.menu-movil__sub.abierto { max-height: 420px; }
.menu-movil__sub a {
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
}
.menu-movil__sub a:hover { color: var(--color-primario-texto); }
.menu-movil__link-fuerte { color: var(--color-primario-texto) !important; }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer-sitio {
  background: var(--color-fondo-oscuro);
  color: #c4ccd6;
}
.footer-sitio__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-8);
}
.footer-sitio__marca { max-width: 320px; }
/* El logo es gris oscuro: lo volvemos blanco para que se vea sobre el footer */
.footer-sitio__logo { height: 64px; width: auto; filter: brightness(0) invert(1); }
.footer-sitio__marca p { color: #9aa3af; font-size: var(--fs-sm); margin-top: var(--space-3); }
.footer-sitio__olimp {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-sitio__olimp span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; }
.footer-sitio__olimp img { height: 34px; width: auto; align-self: flex-start; opacity: 0.95; }

.footer-sitio__col h4 {
  color: #fff;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.footer-sitio__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-sitio__col a { color: #9aa3af; font-size: var(--fs-sm); transition: color var(--transicion); }
.footer-sitio__col a:hover { color: #fff; }

.footer-sitio__bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-sitio__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.redes { display: flex; gap: var(--space-3); }
.redes a {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--radio-pill);
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: background var(--transicion);
}
.redes a:hover { background: var(--color-primario); }
.pagos { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pago-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radio-sm);
  background: rgba(255,255,255,0.1);
  color: #e5e9ef;
}
.pago-badge--seguro { background: rgba(31,157,87,0.18); color: #6ee7a8; }
.footer-sitio__legal { padding-bottom: var(--space-6); }
.footer-sitio__legal p { font-size: var(--fs-xs); color: #6b7280; }
.footer-sitio__legal strong { color: #9aa3af; }


/* ==========================================================================
   15. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.whatsapp-flotante {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 18px 12px 14px;
  border-radius: var(--radio-pill);
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--sombra-lg);
  transition: transform var(--transicion);
}
.whatsapp-flotante:hover { transform: translateY(-2px); }


/* ==========================================================================
   16. TOAST (aviso flotante)
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: 110;
  background: var(--color-tinta);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radio-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--sombra-lg);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   17. RESPONSIVE — ajustes para mobile / tablet
   ========================================================================== */
@media (max-width: 980px) {
  /* En mobile se oculta el menú desktop y aparece la hamburguesa */
  .nav-principal { display: none; }
  .boton-menu { display: inline-flex; }
  .header-sitio__inner { gap: var(--space-3); }

  /* EL LOGO SE CENTRA ENTRE LA HAMBURGUESA Y LAS ACCIONES
     ----------------------------------------------------------------------
     El `flex: 1` iba en .header-sitio__logo, que era hijo directo del
     contenedor. Al envolver los dos logos en .header-sitio__marcas dejó de
     serlo, la regla apuntó a un nieto y el flex no hizo nada: en celular
     quedó todo amontonado contra el borde izquierdo — hamburguesa, logo,
     lupa y carrito juntos— y media pantalla vacía a la derecha.

     El `flex: 1` tiene que ir en el hijo directo. Y el logo se centra
     adentro de él, que es lo que hace que quede en el medio de la barra. */
  .header-sitio__marcas {
    flex: 1;
    justify-content: center;
  }
  .header-sitio__logo img { height: 44px; }
}

@media (max-width: 760px) {
  .footer-sitio__top { grid-template-columns: 1fr 1fr; }
  .footer-sitio__marca { grid-column: 1 / -1; max-width: none; }
  .whatsapp-flotante__texto { display: none; } /* en celular, solo el ícono */
  .whatsapp-flotante { padding: 14px; }
  h1 { font-size: var(--fs-2xl); }
}

@media (max-width: 480px) {
  .footer-sitio__top { grid-template-columns: 1fr; }
  .contenedor { padding-inline: var(--space-4); }
}


/* ==========================================================================
   18. HOME — HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}
/* Pista del carrusel: las slides se ponen en fila y se desplazan con transform */
.hero__track { display: flex; transition: transform 0.5s ease; }
.hero__slide { flex: 0 0 100%; min-width: 0; }
.hero__slide--1 { background: linear-gradient(120deg, #082247 0%, var(--color-secundario) 60%, #0d4f97 100%); }
.hero__slide--2 { background: linear-gradient(120deg, #16191D 0%, #0B55A3 100%); }
.hero__slide--3 { background: linear-gradient(120deg, #0B3D7A 0%, #0d4f97 60%, #1366c0 100%); }

/* Flechas del carrusel */
.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion);
}
.hero__flecha:hover { background: rgba(255, 255, 255, 0.32); }
.hero__flecha--prev { left: 16px; }
.hero__flecha--next { right: 16px; }

/* Puntos indicadores */
.hero__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.4);
  transition: background var(--transicion), width var(--transicion);
}
.hero__dot.activo { background: #fff; width: 26px; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-8);
}
.hero__eyebrow {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-primario);
  margin-bottom: var(--space-3);
}
.hero__titulo { color: #fff; font-size: var(--fs-hero); line-height: 1.05; }
.hero__texto {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-md);
  margin-top: var(--space-4);
  max-width: 46ch;
}
.hero__texto strong { color: #fff; }
.hero__acciones { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__media { position: relative; display: flex; justify-content: center; }
/* HALO DE LUZ detrás del producto (modo 'producto' del hero).
   El naranja no servía: sobre azul ensuciaba y no separaba nada.
   Blanco a muy baja opacidad sí funciona, porque aclara el fondo justo
   detrás del envase y le da un borde de contraste a los productos
   oscuros (la creatina, el Knockout), que antes se fundían con el azul.
   El degradado termina en rgba(255,255,255,0) y NO en "transparent":
   "transparent" es negro invisible y al degradar hacia él ensucia. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: 95%;
  aspect-ratio: 1;
  background: radial-gradient(circle,
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 255, 255, 0.08) 45%,
                rgba(255, 255, 255, 0) 70%);
  filter: blur(45px);
  z-index: 0;
}
/* Sin sombra proyectada: los envases vienen recortados sobre fondo negro,
   así que el fleco oscuro del borde se sumaba a la sombra y ensuciaba el
   contorno. */
.hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  filter: none;
}


/* ==========================================================================
   19. HOME — TRUST BAR (fila de garantías)
   ========================================================================== */
.trust-bar { background: var(--color-fondo); border-bottom: 1px solid var(--color-linea); }
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
}
.trust-bar__item { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.trust-bar__icono { color: var(--color-primario); display: inline-flex; flex-shrink: 0; }
.trust-bar__texto { display: flex; flex-direction: column; line-height: 1.25; }
.trust-bar__texto strong { font-family: var(--fuente-titulo); font-size: var(--fs-sm); }
.trust-bar__texto span { font-size: var(--fs-xs); color: var(--color-tinta-suave); }


/* ==========================================================================
   20. HOME — CATEGORÍAS ("Comprá por objetivo")
   ========================================================================== */
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.categoria-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  min-height: 180px;
  padding: var(--space-5);
  border-radius: var(--radio-lg);
  color: #fff;
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.categoria-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
/* Envoltorio del texto del mosaico. Acá no hace nada — `display: contents`
   lo borra de la caja y los tres <span> quedan igual que antes, hijos
   directos de la tarjeta. Existe para el tema 2026, donde se convierte en la
   placa de vidrio que va sobre la foto (ver sección 33 de tema-2026.css). */
.categoria-card__texto { display: contents; }

.categoria-card__nombre { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--fs-lg); }
.categoria-card__desc { font-size: var(--fs-sm); opacity: 0.92; }
.categoria-card__cta { font-weight: 700; font-size: var(--fs-sm); margin-top: var(--space-2); }
/* Un gradiente distinto por categoría (orden del data.js) */
.categorias-grid .categoria-card:nth-child(1) { background: linear-gradient(135deg, #EF7D2A, #D2651A); }
.categorias-grid .categoria-card:nth-child(2) { background: linear-gradient(135deg, #0B55A3, #083F7A); }
.categorias-grid .categoria-card:nth-child(3) { background: linear-gradient(135deg, #16191D, #3A4250); }
.categorias-grid .categoria-card:nth-child(4) { background: linear-gradient(135deg, #0B55A3, #083F7A); }
.categorias-grid .categoria-card:nth-child(5) { background: linear-gradient(135deg, #16191D, #3A4250); }
/* Gradientes de las 4 metas (Deporte de resistencia / Fuerza / Recuperación / Salud) */
[data-metas] .categoria-card:nth-child(1) { background: linear-gradient(135deg, #0B55A3, #083F7A); } /* resistencia (navy) */
[data-metas] .categoria-card:nth-child(2) { background: linear-gradient(135deg, #EF7D2A, #D2651A); color: var(--color-tinta); } /* fuerza (naranja, texto oscuro) */
[data-metas] .categoria-card:nth-child(3) { background: linear-gradient(135deg, #0B55A3, #083F7A); } /* recuperación (navy) */
[data-metas] .categoria-card:nth-child(4) { background: linear-gradient(135deg, #EF7D2A, #D2651A); color: var(--color-tinta); } /* salud (naranja, texto oscuro) */


/* ==========================================================================
   21. HOME — BANNER DE COLECCIÓN
   ========================================================================== */
.banner-coleccion {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: var(--space-8);
  border-radius: var(--radio-lg);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(115deg, #16191D 0%, #0B55A3 100%);
}
/* Foto de producto asomando a la derecha (decorativa) */
.banner-coleccion::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 46%;
  background: url('../img/products/redweiler.webp') no-repeat center right / contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}
.banner-coleccion__contenido {
  position: relative;
  z-index: 1;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.banner-coleccion h2 { color: #fff; font-size: var(--fs-2xl); }
.banner-coleccion p { color: rgba(255, 255, 255, 0.85); }


/* ==========================================================================
   22. HOME — BLOG / APRENDÉ (tarjetas de artículo)
   ========================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.card-articulo {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.card-articulo:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.card-articulo__cover {
  position: relative;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.card-articulo__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.acento-naranja { background: linear-gradient(135deg, #EF7D2A, #D2651A); }
.acento-navy    { background: linear-gradient(135deg, #0B55A3, #083F7A); }
.acento-mixto   { background: linear-gradient(135deg, #16191D, #0B55A3); }
.acento-naranja .card-articulo__tema { color: var(--color-tinta); } /* texto oscuro sobre naranja */
.card-articulo__tema {
  position: relative;
  z-index: 1;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.card-articulo__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.card-articulo__titulo { font-size: var(--fs-md); }
.card-articulo__resumen { font-size: var(--fs-sm); color: var(--color-tinta-suave); flex: 1; }
.card-articulo__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
}
.card-articulo__link { color: var(--color-primario-texto); font-weight: 700; }


/* ==========================================================================
   23. HOME — PRUEBA SOCIAL (reviews + testimonios)
   ========================================================================== */
.reviews { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-7); align-items: center; }
.reviews__resumen {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-fondo-suave);
  border-radius: var(--radio-lg);
}
.reviews__puntaje { font-family: var(--fuente-titulo); font-weight: 800; font-size: 3.5rem; line-height: 1; }
.reviews__resumen p { font-size: var(--fs-sm); color: var(--color-tinta-suave); }
.reviews__nota { font-size: var(--fs-xs); color: var(--color-tinta-suave); opacity: 0.7; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.testimonio {
  background: #fff;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testimonio__texto { font-size: var(--fs-sm); }
.testimonio__autor { font-weight: 700; font-size: var(--fs-sm); color: var(--color-tinta-suave); }


/* ==========================================================================
   24. HOME — NEWSLETTER
   ========================================================================== */
.newsletter {
  background: linear-gradient(120deg, var(--color-secundario), var(--color-secundario-oscuro));
  color: #fff;
}
.newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-8);
  flex-wrap: wrap;
}
.newsletter h2 { color: #fff; }
.newsletter p { color: rgba(255, 255, 255, 0.85); margin-top: var(--space-2); }
.newsletter__form { display: flex; gap: var(--space-3); flex: 1; min-width: 280px; max-width: 520px; }
.newsletter__form input {
  flex: 1;
  padding: 0.9em 1.2em;
  border-radius: var(--radio-pill);
  border: none;
  font-size: var(--fs-base);
}


/* ==========================================================================
   25. HOME — responsive
   ========================================================================== */
@media (max-width: 880px) {
  .hero__flecha { display: none; } /* en celular se navega con los puntos / swipe */
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__texto { margin-inline: auto; }
  .hero__acciones { justify-content: center; }
  .hero__media img { max-width: 320px; margin-top: var(--space-6); }
  .reviews { grid-template-columns: 1fr; }
  .trust-bar__inner { grid-template-columns: 1fr 1fr; }
  .banner-coleccion::after { opacity: 0.22; }
}
@media (max-width: 520px) {
  .trust-bar__item { flex-direction: column; text-align: center; gap: var(--space-2); }
  .newsletter__form { flex-direction: column; }
}


/* ==========================================================================
   26. CABECERA DE PÁGINA (catálogo, blog, sobre, contacto)
   ========================================================================== */
.pagina-cabecera {
  background: var(--color-fondo-suave);
  border-bottom: 1px solid var(--color-linea);
  padding-block: var(--space-7);
}
.pagina-cabecera h1 { font-size: var(--fs-2xl); }
.pagina-cabecera p { color: var(--color-tinta-suave); max-width: 60ch; margin-top: var(--space-2); }

/* Navegación por anclas (chips) del catálogo */
.cat-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.cat-nav a,
.cat-nav button {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1.1em;
  border-radius: var(--radio-pill);
  background: #fff;
  border: 1px solid var(--color-linea);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-tinta);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.cat-nav a:hover, .cat-nav button:hover { background: var(--color-tinta); color: #fff; border-color: var(--color-tinta); }
.cat-nav a.activo, .cat-nav button.activo { background: var(--color-primario); color: var(--color-tinta); border-color: var(--color-primario); }

/* Secciones del catálogo: el scroll-margin evita que el header sticky
   tape el título cuando se llega por un enlace con #ancla */
.cat-seccion { scroll-margin-top: 100px; }


/* ==========================================================================
   27. DETALLE DE PRODUCTO
   ========================================================================== */
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-tinta-suave); }
.breadcrumb a:hover { color: var(--color-primario-texto); }
.breadcrumb span { opacity: 0.5; }
.breadcrumb__actual { color: var(--color-tinta); font-weight: 600; opacity: 1; }

.producto { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.producto__media {
  position: relative;
  background: var(--color-fondo-suave);
  border-radius: var(--radio-lg);
  padding: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.producto__media img { max-width: 100%; max-height: 460px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.producto__cat { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-tinta-suave); }
.producto__info h1 { font-size: var(--fs-2xl); margin-top: var(--space-1); }
.producto__rating { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-tinta-suave); }
.producto__precio { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--fs-2xl); margin-top: var(--space-4); }
.producto__precio-nota { font-size: var(--fs-sm); color: var(--color-tinta-suave); margin-top: 2px; }
.producto__resumen { margin-top: var(--space-4); color: var(--color-tinta); }

.producto__compra { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); flex-wrap: wrap; }
.selector-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--color-linea); border-radius: var(--radio-pill); overflow: hidden; }
.selector-cantidad button { width: 44px; height: 48px; font-size: 1.3rem; color: var(--color-tinta); transition: background var(--transicion); }
.selector-cantidad button:hover { background: var(--color-fondo-suave); }
.selector-cantidad input { width: 48px; height: 48px; text-align: center; border: none; border-inline: 1px solid var(--color-linea); font-weight: 700; font-family: var(--fuente-titulo); }
.producto__compra .btn { flex: 1; min-width: 220px; }
.producto__whatsapp { display: inline-flex; margin-top: var(--space-3); }

.producto__detalle { margin-top: var(--space-6); border-top: 1px solid var(--color-linea); padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.producto__detalle h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.producto__detalle p { color: var(--color-tinta-suave); }

.producto-no-encontrado { text-align: center; padding-block: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

@media (max-width: 880px) {
  .producto { grid-template-columns: 1fr; gap: var(--space-5); }
  .producto__compra .btn { min-width: 0; }
}


/* ==========================================================================
   28. CARRITO
   ========================================================================== */
.carrito { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: start; }
.carrito__items { display: flex; flex-direction: column; gap: var(--space-3); }

.carrito-item {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  grid-template-areas: "media info cant sub";
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
}
.carrito-item__media { grid-area: media; width: 90px; height: 90px; background: var(--color-fondo-suave); border-radius: var(--radio); display: flex; align-items: center; justify-content: center; padding: 8px; }
.carrito-item__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.carrito-item__info { grid-area: info; display: flex; flex-direction: column; gap: 3px; }
.carrito-item__nombre { font-family: var(--fuente-titulo); font-weight: 700; }
.carrito-item__nombre:hover { color: var(--color-primario-texto); }
.carrito-item__cat { font-size: var(--fs-xs); text-transform: uppercase; color: var(--color-tinta-suave); letter-spacing: 0.05em; }
.carrito-item__unit { font-size: var(--fs-sm); color: var(--color-tinta-suave); }
.carrito-item__quitar { align-self: flex-start; font-size: var(--fs-sm); color: var(--color-alerta); margin-top: 4px; }
.carrito-item__quitar:hover { text-decoration: underline; }
.selector-cantidad--sm { grid-area: cant; }
.selector-cantidad--sm button { width: 44px; height: 44px; font-size: 1.1rem; }
.selector-cantidad--sm input { width: 40px; height: 44px; }
.carrito-item__subtotal { grid-area: sub; font-family: var(--fuente-titulo); font-weight: 800; min-width: 90px; text-align: right; }

.carrito__resumen {
  position: sticky;
  top: 96px;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #fff;
}
.carrito__resumen h2 { font-size: var(--fs-lg); }
/* El "Editar" va en la misma línea que el título y alineado a la derecha,
   donde cae la mirada cuando uno revisa números. Discreto a propósito: es
   una salida por si te equivocaste, no una invitación a volver atrás. */
.resumen-encabezado { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.resumen-editar { font-size: var(--fs-sm); color: var(--color-tinta-suave); text-decoration: underline; }
.resumen-editar:hover { color: var(--color-primario-texto); }
.resumen-linea { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.resumen-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--color-linea); padding-top: var(--space-3); font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--fs-lg); }
.carrito__resumen .btn { margin-top: var(--space-1); }
.carrito__nota { font-size: var(--fs-xs); color: var(--color-tinta-suave); }

.carrito-vacio { text-align: center; padding-block: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

@media (max-width: 820px) {
  .carrito { grid-template-columns: 1fr; }
  .carrito__resumen { position: static; }
}
@media (max-width: 560px) {
  .carrito-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas: "media info" "cant sub";
    row-gap: var(--space-3);
  }
  .carrito-item__media { width: 72px; height: 72px; }
  .carrito-item__subtotal { text-align: right; align-self: center; }
}


/* ==========================================================================
   29. CHECKOUT
   ========================================================================== */
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); align-items: start; }
.checkout__form { display: flex; flex-direction: column; gap: var(--space-5); }

.form-bloque { border: 1px solid var(--color-linea); border-radius: var(--radio-lg); padding: var(--space-5); }
.form-bloque h2 { font-size: var(--fs-md); margin-bottom: var(--space-2); }
.form-bloque__nota { font-size: var(--fs-sm); color: var(--color-tinta-suave); margin-bottom: var(--space-4); }
.form-bloque__nota:last-child { margin-bottom: 0; margin-top: var(--space-3); }

.campos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.campo:last-child { margin-bottom: 0; }
.campo label { font-size: var(--fs-sm); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  font-size: var(--fs-base);
  font-family: inherit;
  width: 100%;
  background: #fff;
}

.opciones { display: flex; flex-direction: column; gap: var(--space-3); }
.opcion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--color-tinta-suave); }
.opcion:has(input:checked) { border-color: var(--color-primario); background: var(--color-primario-tinte); }
.opcion input { width: 18px; height: 18px; accent-color: var(--color-primario); flex-shrink: 0; }
.opcion__texto { flex: 1; display: flex; flex-direction: column; }
.opcion__texto strong { font-weight: 700; }
.opcion__desc { font-size: var(--fs-sm); color: var(--color-tinta-suave); }
.opcion__precio { font-family: var(--fuente-titulo); font-weight: 800; }

.resumen-linea--sep { border-top: 1px solid var(--color-linea); padding-top: var(--space-2); margin-top: var(--space-2); }

/* Pantalla de confirmación */
.confirmacion {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-6);
}
.confirmacion__icono {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(31, 157, 87, 0.12);
  color: var(--color-exito);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirmacion h1 { font-size: var(--fs-2xl); }
.confirmacion__resumen {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  padding: var(--space-5);
  margin-block: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}
.confirmacion__acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

@media (max-width: 820px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout .carrito__resumen { position: static; }
}
@media (max-width: 480px) {
  .campos-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   30. MEGA-MENÚ — lista plana de productos
   ========================================================================== */
.megamenu__lista {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px var(--space-6);
  align-content: start;
}


/* ==========================================================================
   31. CARRITO DRAWER (panel lateral, estilo BPN)
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(8, 12, 18, 0.55); opacity: 0; transition: opacity 0.25s ease; }
.drawer.abierto .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 400px;
  max-width: 92vw;
  background: #fff;
  box-shadow: var(--sombra-lg);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
}
.drawer.abierto .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-linea);
  flex-shrink: 0;
}
.drawer__head h2 { font-size: var(--fs-lg); }
.drawer__cerrar { color: var(--color-tinta); }
.drawer__cuerpo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.drawer-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-linea);
}
.drawer-item__media { width: 64px; height: 64px; background: var(--color-fondo-suave); border-radius: var(--radio); display: flex; align-items: center; justify-content: center; padding: 6px; }
.drawer-item__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.drawer-item__info { display: flex; flex-direction: column; gap: 6px; }
.drawer-item__nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.drawer-item__nombre:hover { color: var(--color-primario-texto); }
.drawer-item__precio { font-size: var(--fs-sm); color: var(--color-tinta-suave); }
.drawer-item__quitar { align-self: flex-start; color: var(--color-tinta-suave); }
.drawer-item__quitar:hover { color: var(--color-alerta); }
.drawer-item__quitar svg { width: 18px; height: 18px; }

.drawer-upsell { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-linea); background: var(--color-fondo-suave); }
.drawer-upsell h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); color: var(--color-tinta-suave); }
.upsell-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.upsell-item img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; background: #fff; border-radius: 6px; flex-shrink: 0; }
.upsell-item__nombre { flex: 1; font-size: var(--fs-sm); font-weight: 600; }
.upsell-item__add { font-size: var(--fs-sm); font-weight: 700; color: var(--color-primario-texto); white-space: nowrap; }
.upsell-item__add:hover { text-decoration: underline; }

.drawer__footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: var(--space-5);
  border-top: 1px solid var(--color-linea);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drawer__footer .resumen-linea { font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--fs-md); }
.drawer__nota { font-size: var(--fs-xs); color: var(--color-tinta-suave); }
.drawer__footer .btn { margin-top: var(--space-1); }
.drawer__vacio { padding: var(--space-8) var(--space-5); text-align: center; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }


/* ==========================================================================
   32. BANDA DE MARCA "SIN ATAJOS" (home)
   ========================================================================== */
.banda-sinatajos {
  background:
    radial-gradient(circle at 80% 20%, rgba(239,125,42,0.18), transparent 45%),
    var(--color-fondo-oscuro);
  color: #fff;
}
.banda-sinatajos__inner {
  max-width: 740px;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.banda-sinatajos h2 { color: #fff; font-size: var(--fs-2xl); max-width: 18ch; }
.banda-sinatajos p { color: rgba(255, 255, 255, 0.82); max-width: 56ch; }


/* ==========================================================================
   33. PÁGINA DE PRODUCTO — secciones de marketing (bloques de marca)
   ========================================================================== */
/* Banda de beneficio destacado */
.prod-banda { background: linear-gradient(120deg, #16191D, var(--color-secundario)); color: #fff; }
.prod-banda .contenedor { padding-block: var(--space-6); }
.prod-banda__txt { display: block; text-align: center; font-family: var(--fuente-titulo); font-weight: 800; font-size: var(--fs-lg); }

/* Beneficios (tarjetas con ícono) */
.beneficios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.beneficio-card {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.beneficio-card__icono {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primario-tinte);
  color: var(--color-primario);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.beneficio-card h3 { font-size: var(--fs-md); }
.beneficio-card p { font-size: var(--fs-sm); color: var(--color-tinta-suave); }

/* Sobre el producto */
.prod-sobre { max-width: 760px; }
.prod-sobre__texto { text-align: center; color: var(--color-tinta-suave); font-size: var(--fs-md); }

/* Ingredientes */
.ingredientes-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); max-width: 920px; margin-inline: auto; }
.ingrediente { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-primario); background: var(--color-fondo-suave); border-radius: 0 var(--radio) var(--radio) 0; }
.ingrediente h3 { font-size: var(--fs-md); }
.ingrediente p { font-size: var(--fs-sm); color: var(--color-tinta-suave); }

/* Modo de uso */
.prod-uso { display: flex; align-items: center; gap: var(--space-6); max-width: 760px; }
.prod-uso__icono { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--color-linea); display: flex; align-items: center; justify-content: center; color: var(--color-primario); }
.prod-uso h2 { font-size: var(--fs-xl); }
.prod-uso p { color: var(--color-tinta-suave); }

/* FAQ */
.prod-faq { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--color-linea); padding: var(--space-4) 0; }
.faq-item summary { font-family: var(--fuente-titulo); font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--color-primario); line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: var(--space-3); color: var(--color-tinta-suave); font-size: var(--fs-sm); }

@media (max-width: 560px) {
  .prod-uso { flex-direction: column; text-align: center; }
}


/* ==========================================================================
   34. PÁGINAS DE CONTENIDO (Quiénes somos)
   ========================================================================== */
.pagina-hero {
  background: linear-gradient(120deg, #082247 0%, var(--color-secundario) 60%, #0d4f97 100%);
  color: #fff;
}
.pagina-hero .contenedor { padding-block: var(--space-8); text-align: center; }
.pagina-hero .eyebrow { color: var(--color-primario-tinte); } /* peach claro sobre hero navy (contraste AA) */
.pagina-hero h1 { color: #fff; font-size: var(--fs-hero); }
.pagina-hero p { color: rgba(255, 255, 255, 0.85); max-width: 60ch; margin: var(--space-3) auto 0; }

.sobre-historia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.sobre-historia h2 { font-size: var(--fs-2xl); }
.sobre-historia p { color: var(--color-tinta-suave); margin-top: var(--space-3); }
.sobre-historia strong { color: var(--color-tinta); }
/* La columna de la derecha mostraba un packshot de producto sobre fondo gris.
   En una página que habla de quiénes somos, una foto de envase no dice nada:
   ahora va la planta de Olimp, que es de lo que habla el texto. */
.sobre-historia__media {
  position: relative;
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--color-secundario);   /* se ve mientras carga la foto */
  align-self: stretch;
  min-height: 420px;
}
.sobre-historia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sobre-historia__media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-sm);
  line-height: 1.45;
  /* La foto ya viene oscurecida abajo, pero no lo suficiente para garantizar
     contraste si algún día se cambia por otra. */
  background: linear-gradient(180deg, rgba(4, 12, 26, 0) 0%, rgba(4, 12, 26, 0.85) 55%);
}
.sobre-historia__media figcaption strong {
  display: block;
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-md);
  margin-bottom: 4px;
}

/* Cifras de respaldo, debajo del texto */
.sobre-datos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-linea);
}
.sobre-datos li { display: flex; flex-direction: column; gap: 2px; }
.sobre-datos strong {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  color: var(--color-secundario);
  line-height: 1.1;
}
.sobre-datos span { font-size: var(--fs-sm); color: var(--color-tinta-suave); }

.fila-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

@media (max-width: 820px) {
  .sobre-historia { grid-template-columns: 1fr; }
  .sobre-historia__media { order: -1; min-height: 300px; }
}


/* ==========================================================================
   35. CONTACTO — dónde comprar (tiendas) + formulario
   ========================================================================== */

.contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.contacto-info h2 { font-size: var(--fs-2xl); }
.contacto-info p { color: var(--color-tinta-suave); margin-block: var(--space-3); }
.contacto-info .btn { margin-bottom: var(--space-4); }
.contacto-datos { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
.contacto-datos li { color: var(--color-tinta-suave); }
.contacto-datos strong { color: var(--color-tinta); }
.contacto-form { background: #fff; border: 1px solid var(--color-linea); border-radius: var(--radio-lg); padding: var(--space-6); }
.contacto-form textarea {
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--fs-base);
  width: 100%;
  resize: vertical;
}

@media (max-width: 820px) {
  .contacto-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   36. ARTÍCULO / GUÍA DE USO (contenido largo)
   ========================================================================== */
.articulo__hero { background: var(--color-fondo-suave); border-bottom: 1px solid var(--color-linea); padding-block: var(--space-7); }
.articulo__volver { font-size: var(--fs-sm); color: var(--color-tinta-suave); }
.articulo__volver:hover { color: var(--color-primario-texto); }
.articulo__hero .eyebrow { margin-top: var(--space-4); }
.articulo__hero h1 { font-size: var(--fs-2xl); max-width: 24ch; margin-top: var(--space-2); }
.articulo__meta { font-size: var(--fs-sm); color: var(--color-tinta-suave); margin-top: var(--space-2); }

.articulo__cuerpo { max-width: 720px; padding-block: var(--space-7); }
.articulo__cuerpo h2 { font-size: var(--fs-xl); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.articulo__cuerpo p { margin-bottom: var(--space-4); }
.articulo__cuerpo ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }

.articulo__cta {
  margin-top: var(--space-7);
  padding: var(--space-6);
  background: var(--color-primario-tinte);
  border-radius: var(--radio-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.articulo__cta h3 { font-size: var(--fs-md); }
.articulo__cta p { margin: 0; color: var(--color-tinta-suave); }


/* ==========================================================================
   37. GUÍA DE USO INLINE (secciones en la página de producto)
   ========================================================================== */
/* Lo que sí / lo que no */
.sino-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 900px; margin-inline: auto; }
.sino { border: 1px solid var(--color-linea); border-radius: var(--radio-lg); padding: var(--space-5); }
.sino h3 { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.sino ul { display: flex; flex-direction: column; gap: var(--space-2); }
.sino li { position: relative; padding-left: 1.7em; color: var(--color-tinta); }
.sino li::before { position: absolute; left: 0; font-weight: 800; }
.sino--si { border-top: 3px solid var(--color-exito); }
.sino--si li::before { content: "✓"; color: var(--color-exito); }
.sino--no { border-top: 3px solid var(--color-alerta); }
.sino--no li::before { content: "✕"; color: var(--color-alerta); }

/* Cómo tomarla (dosis + pasos numerados) */
.guia-uso { max-width: 760px; }
.guia-uso__dosis { color: var(--color-tinta); margin-bottom: var(--space-4); }
.guia-pasos { list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: var(--space-3); }
.guia-pasos li { position: relative; padding-left: 2.6em; color: var(--color-tinta); }
.guia-pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 0;
  width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--color-primario); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

/* Qué esperar (línea de tiempo) */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); max-width: 900px; margin-inline: auto; }
.timeline__item { border-left: 3px solid var(--color-primario); padding: var(--space-2) var(--space-4); }
.timeline__etapa { display: block; font-family: var(--fuente-titulo); font-weight: 800; color: var(--color-secundario); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.timeline__item p { color: var(--color-tinta-suave); font-size: var(--fs-sm); }

/* Cuidados */
.guia-cuidados { max-width: 760px; }
.guia-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.guia-lista li { position: relative; padding-left: 1.4em; color: var(--color-tinta-suave); }
.guia-lista li::before { content: "•"; position: absolute; left: 0; color: var(--color-primario); font-weight: 800; }

@media (max-width: 640px) { .sino-grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   38. PANEL DE ADMINISTRADOR (admin.html)
   ========================================================================== */
.admin-body { background: var(--color-fondo-suave); }

.admin-top {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--color-linea);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) var(--space-5); flex-wrap: wrap;
}
.admin-top__brand { font-family: var(--fuente-titulo); }
.admin-demo { background: var(--color-primario); color: #fff; font-size: var(--fs-xs); font-weight: 800; padding: 2px 8px; border-radius: var(--radio-pill); margin-left: 6px; }
.admin-acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.admin-acciones .btn { font-size: var(--fs-sm); padding: 0.6em 1em; }
.admin-import { cursor: pointer; }

.admin-aviso--borrador { background: #FBECEB; border-color: #E8B4B0; color: #7a2b25; }
.admin-aviso {
  max-width: 920px; margin: var(--space-5) auto 0;
  background: #FEF6E9; border: 1px solid #F3D9A9; color: #6b4e16;
  border-radius: var(--radio); padding: var(--space-4) var(--space-5); font-size: var(--fs-sm);
}

.admin-form { max-width: 920px; margin-inline: auto; padding: var(--space-5) var(--space-5) var(--space-9); display: flex; flex-direction: column; gap: var(--space-4); }

/* ==========================================================================
   PANEL · VISTA EN VIVO
   --------------------------------------------------------------------------
   El sitio al lado del formulario, actualizándose mientras se escribe.
   Mientras está cerrada, el formulario sigue centrado como siempre; al
   abrirla se parte en dos y el formulario deja de centrarse, porque con la
   vista al lado centrarlo lo dejaría flotando lejos de su propia columna.
   ========================================================================== */
.admin-split { display: block; }
.admin-vista { display: none; }

.admin-split--con-vista {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1.1fr);
  gap: 0;
  align-items: start;
}
.admin-split--con-vista .admin-form { max-width: none; margin-inline: 0; }

.admin-split--con-vista .admin-vista {
  display: flex; flex-direction: column;
  /* Pegada arriba: el formulario es largo y la vista tiene que seguir ahí
     mientras se baja por él. 42px es el alto de la barra interna. */
  position: sticky; top: 42px;
  height: calc(100vh - 42px);
  border-left: 1px solid var(--color-linea);
  background: var(--color-fondo-suave);
}
.admin-vista__barra {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-linea);
  background: #fff; flex-shrink: 0;
}
.admin-vista__barra select { width: auto; font-size: var(--fs-xs); padding: 0.35em 0.6em; }
.admin-vista__anchos { display: flex; gap: 2px; }
.admin-vista__anchos button {
  background: none; border: 1px solid var(--color-linea); border-radius: var(--radio);
  padding: 0.25em 0.55em; cursor: pointer; font-size: 13px; line-height: 1.4;
}
.admin-vista__anchos button.on { background: var(--color-tinta); border-color: var(--color-tinta); }
.admin-vista__estado {
  margin-left: auto; font-size: var(--fs-xs); color: var(--color-tinta-suave);
  white-space: nowrap;
}
.admin-vista__cerrar {
  background: none; border: 0; cursor: pointer; font-size: 15px;
  color: var(--color-tinta-suave); padding: 0 0.3em;
}
.admin-vista__marco {
  flex: 1; min-height: 0; width: 100%; margin-inline: auto;
  position: relative; background: #fff;
  transition: max-width .2s ease;
}
.admin-vista__marco iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
}
.admin-vista__marco iframe[hidden] { display: none; }

/* Abajo de 1100px no entran dos columnas de 420 sin que las dos queden
   incómodas. La vista se esconde y el botón la vuelve a abrir cuando hay
   lugar; en un celular, editar el sitio no es la tarea de nadie. */
@media (max-width: 1100px) {
  .admin-split--con-vista { display: block; }
  .admin-split--con-vista .admin-form { max-width: 920px; margin-inline: auto; }
  .admin-split--con-vista .admin-vista { display: none; }
}

.admin-sec { background: #fff; border: 1px solid var(--color-linea); border-radius: var(--radio-lg); overflow: hidden; }
.admin-sec > summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--fs-md); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.admin-sec > summary::-webkit-details-marker { display: none; }
.admin-sec > summary::after { content: "▸"; color: var(--color-primario); }
.admin-sec[open] > summary::after { content: "▾"; }
.admin-sec[open] > summary { border-bottom: 1px solid var(--color-linea); }
.admin-sec__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.admin-campo { display: flex; flex-direction: column; gap: 5px; }
.admin-campo__label { font-size: var(--fs-sm); font-weight: 600; }
.admin-form input, .admin-form textarea, .admin-form select { width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--color-linea); border-radius: var(--radio); font-family: inherit; font-size: var(--fs-sm); background: #fff; }
.admin-form textarea { resize: vertical; }
.admin-hint { font-size: var(--fs-xs); color: var(--color-tinta-suave); }
.admin-hint code, .admin-login__nota code { background: var(--color-fondo-suave); padding: 1px 4px; border-radius: 4px; }

.admin-enlace { display: flex; flex-direction: column; gap: 5px; }
.admin-enlace__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.admin-img__row { display: flex; gap: var(--space-4); align-items: flex-start; }
.admin-img__preview { width: 90px; height: 90px; object-fit: contain; background: var(--color-fondo-suave); border: 1px solid var(--color-linea); border-radius: var(--radio); padding: 6px; flex-shrink: 0; }
.admin-img__ctrl { display: flex; flex-direction: column; gap: 6px; }

.admin-grupo { border: 1px solid var(--color-linea); border-left: 3px solid var(--color-primario); border-radius: var(--radio); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-fondo); }
.admin-grupo__t { font-size: var(--fs-md); }

/* ==========================================================================
   PANEL · LISTAS QUE SE AGRANDAN Y SE ACHICAN
   --------------------------------------------------------------------------
   Slides del carrusel, atletas, pilares, pop-ups, productos, sabores,
   anuncios y comercios aliados. Todas comparten el mismo lenguaje: una barra
   con el título y el botón de quitar arriba, y un botón de agregar abajo.
   ========================================================================== */
.admin-nota {
  font-size: var(--fs-sm); color: var(--color-tinta-suave);
  background: var(--color-fondo-suave); border-radius: var(--radio);
  padding: var(--space-3) var(--space-4); margin: 0;
}
.admin-fila__barra {
  display: flex; align-items: center;
  gap: var(--space-3); border-bottom: 1px solid var(--color-linea);
  padding-bottom: var(--space-2); margin-bottom: var(--space-1);
}
.admin-fila__barra .admin-grupo__t { margin-right: auto; }

/* --- Arrastrar para ordenar --------------------------------------------
   El agarre es un botón de verdad, no un adorno: así se enfoca con Tab y se
   mueve con las flechas. Quien no puede arrastrar igual puede ordenar. */
.admin-agarre {
  background: none; border: 0; cursor: grab;
  color: var(--color-tinta-suave); font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: var(--radio); flex-shrink: 0;
  touch-action: none;
}
.admin-agarre:hover { color: var(--color-tinta); background: var(--color-fondo-suave); }
.admin-agarre:active { cursor: grabbing; }
.admin-agarre:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }

.admin-moviendo { opacity: .45; }
.admin-moviendo, .admin-moviendo * { cursor: grabbing !important; }

/* --- Soltar la foto encima --------------------------------------------- */
.admin-img, .admin-tienda__logo { border-radius: var(--radio); transition: box-shadow .15s ease; }
.admin-img--encima {
  box-shadow: 0 0 0 2px var(--color-primario);
  background: var(--color-fondo-suave);
}

/* ==========================================================================
   PANEL · RECORTAR LA FOTO
   --------------------------------------------------------------------------
   Mover y acercar dentro de un marco fijo, no estirar esquinas: el marco ya
   tiene la medida que el sitio necesita, así que lo único que se elige es
   qué parte de la foto se ve.
   ========================================================================== */
.recorte {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 10, 12, .72);
  display: grid; place-items: center; padding: var(--space-5);
}
.recorte__caja {
  background: #fff; border-radius: var(--radio-lg); padding: var(--space-5);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 100%;
}
.recorte__t { font-size: var(--fs-lg); margin: 0; }
.recorte__ayuda { font-size: var(--fs-sm); color: var(--color-tinta-suave); margin: 0; max-width: 46ch; }

.recorte__visor {
  position: relative; overflow: hidden; margin-inline: auto;
  background: #0A0A0B; border-radius: var(--radio);
  cursor: grab; touch-action: none;
}
.recorte__visor:active { cursor: grabbing; }
.recorte__img {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0; user-select: none; max-width: none;
}
/* La línea del tercio de arriba: en un retrato, ahí va la cara. Decirlo en
   pantalla ahorra explicarlo cada vez. */
.recorte__guias {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent calc(33% - 1px), rgba(255,255,255,.45) 33%, transparent calc(33% + 1px)),
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,.2) 50%, transparent calc(50% + 1px));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.recorte__zoom {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-sm); font-weight: 600;
}
.recorte__zoom input { flex: 1; }
.recorte__pie { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }

/* El campo al que acaba de saltar la vista. Dura poco a propósito: es para
   encontrarlo con el ojo, no para quedarse pintado. */
.admin-resaltado {
  animation: admin-destello 1.8s ease;
  border-radius: var(--radio);
}
@keyframes admin-destello {
  0%, 60% { box-shadow: 0 0 0 3px rgba(239, 125, 42, .55); background: #FFF6EF; }
  100%    { box-shadow: 0 0 0 0 rgba(239, 125, 42, 0); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-resaltado { animation: none; box-shadow: 0 0 0 3px rgba(239, 125, 42, .55); }
}

/* Avisa en la barra de la vista que se puede tocar para saltar al campo. */
.admin-vista__truco {
  font-size: var(--fs-xs); color: var(--color-tinta-suave);
  white-space: nowrap;
}
.admin-agregar {
  align-self: flex-start;
  background: #fff; border: 1px dashed var(--color-primario);
  color: var(--color-primario-texto); font-weight: 700;
  font-size: var(--fs-sm); padding: 0.55em 1.1em;
  border-radius: var(--radio); cursor: pointer;
}
.admin-agregar:hover { background: var(--color-primario); color: #fff; border-style: solid; }
.admin-agregar--mini { font-size: var(--fs-xs); padding: 0.4em 0.9em; }

.admin-quitar {
  background: none; border: 1px solid var(--color-linea);
  color: var(--color-alerta); font-weight: 700; font-size: var(--fs-xs);
  padding: 0.35em 0.8em; border-radius: var(--radio); cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.admin-quitar:hover { background: var(--color-alerta); color: #fff; border-color: var(--color-alerta); }

.admin-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.admin-check { flex-direction: row; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.admin-check input { width: auto; }

/* Sublista: los sabores y tamaños adentro de un producto */
.admin-sublista {
  border-top: 1px solid var(--color-linea); padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.admin-sublista__t { font-size: var(--fs-sm); margin: 0; text-transform: uppercase; letter-spacing: .04em; color: var(--color-tinta-suave); }
.admin-variante {
  display: grid; grid-template-columns: auto 1.6fr 1.4fr 60px 1fr auto;
  gap: var(--space-2); align-items: center;
}

/* Un mensaje de la barra de anuncios, con sus dos fechas */
.admin-anuncio {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: var(--space-2); align-items: end; margin-bottom: var(--space-2);
}
.admin-mini { display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--color-tinta-suave); gap: 3px; }

/* Comercio aliado: datos a la izquierda, logo a la derecha */
.admin-tienda {
  display: grid; grid-template-columns: auto 1.4fr 1.6fr auto;
  gap: var(--space-3); margin-bottom: var(--space-3); align-items: start;
  border: 1px solid var(--color-linea); border-radius: var(--radio);
  padding: var(--space-3);
}
.admin-tienda__datos { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-tienda__logo { display: flex; flex-direction: column; gap: 6px; }
.admin-img__preview--logo { width: 100%; max-width: 190px; height: 56px; padding: 4px; }
.admin-tienda__del { color: var(--color-alerta); font-weight: 800; padding: 0 0.5em; }

@media (max-width: 760px) {
  .admin-dos { grid-template-columns: 1fr; }
  .admin-variante { grid-template-columns: auto 1fr 1fr; }
  .admin-anuncio { grid-template-columns: auto 1fr 1fr; }
  .admin-tienda { grid-template-columns: auto 1fr; }
}

.admin-barra-guardar {
  position: sticky; bottom: 0; z-index: 5;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--color-linea);
  padding: var(--space-3) var(--space-5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); flex-wrap: wrap;
}
/* La aclaración va al lado, no abajo: abajo del todo, pegada al borde de la
   pantalla, es el lugar donde menos se lee. */
.admin-barra-guardar__nota { font-size: var(--fs-xs); color: var(--color-tinta-suave); max-width: 34ch; text-align: left; }

.admin-login { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.admin-login__card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--color-linea); border-radius: var(--radio-lg); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--sombra); }
.admin-login__card h1 { font-size: var(--fs-xl); }
.admin-login__card input { padding: 0.7em 0.9em; border: 1px solid var(--color-linea); border-radius: var(--radio); font-size: var(--fs-base); }
.admin-login__err { color: var(--color-alerta); font-size: var(--fs-sm); }
.admin-login__nota { font-size: var(--fs-xs); color: var(--color-tinta-suave); }

@media (max-width: 560px) {
  .admin-enlace__row { grid-template-columns: 1fr; }
}


/* ==========================================================================
   39. HERO "BANNER COMPLETO" + COMUNIDAD / INSTAGRAM
   --------------------------------------------------------------------------
   Hero: cuando un slide tiene modo 'banner', la imagen cubre TODO el
   rectángulo (object-fit: cover) con un velo oscuro para que el texto se lea.
   Comunidad: grilla de posteos estilo Instagram que enlazan al perfil.
   ========================================================================== */

/* --- Hero: modo banner completo --- */
.hero__slide { position: relative; }
.hero__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* cubre todo el rectángulo; recorta lo que sobra */
  /* Las portadas tienen el sujeto a la derecha y el aire a la izquierda, que es
     donde va el titular. El 72% hace que en celular —donde el recorte es
     horizontal— el sujeto no se pierda; el 42% deja las cabezas dentro cuando
     en pantalla ancha el recorte pasa a ser vertical. */
  object-position: 78% 42%;
}
/* VELO DE IZQUIERDA A DERECHA, PARA QUE EL TEXTO SE LEA
   --------------------------------------------------------------------------
   Aflojado el 2/10/2026, junto con el gris de la foto. Martín pidió que la
   portada tuviera vida y color, y el gris era solo la mitad del problema:
   encima iba este velo, que arrancaba en 0.82 y todavía tapaba el 18% de la
   foto en el borde derecho. Entre los dos no quedaba imagen que mirar.

   Dos cambios y el porqué de cada uno:

     · Es gris NEUTRO (10,10,12). Se probó en navy y Martín lo rechazó con
       buen argumento: "ya su imagen original tiene su color, por qué
       agregar ese azul". El velo está para que se lea el titular, no para
       teñir la foto.
     · Llega a cero en el 82% en vez de quedarse en 0.05 hasta el final. El
       lado derecho es justo donde está el sujeto de las tres portadas: ahí
       no hay texto que proteger y no había razón para taparlo.

   Lo de la izquierda casi no se tocó (0.82 → 0.78) a propósito: ahí va el
   titular en blanco, y es lo único que el velo tiene que garantizar. */
.hero__slide--banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 10, 12, 0.78) 0%,
    rgba(10, 10, 12, 0.46) 42%,
    rgba(10, 10, 12, 0.10) 70%,
    rgba(10, 10, 12, 0.00) 82%);
}
.hero__slide--banner .hero__inner {
  position: relative;
  z-index: 1;                 /* el texto va por encima del velo */
  grid-template-columns: 1fr; /* sin columna de foto flotante */
  /* Con un alto fijo, en una pantalla de 1920 el hero quedaba en 4:1 y "cover"
     se comía un tercio de la portada a lo alto: por eso se veía cortada. Que el
     alto crezca con el ancho lo mantiene cerca de 3:1, que es como están
     generadas las imágenes. */
  min-height: clamp(440px, 32vw, 600px);
  align-content: center;
}
@media (max-width: 760px) {
  .hero__slide--banner .hero__inner { min-height: 380px; }
  .hero__slide--banner::after {
    /* En celular el velo va de arriba abajo, no de izquierda a derecha: el
       texto queda encima de la foto, no al costado. Mismo navy y mismo
       aflojada que en pantalla grande, pero no puede llegar a cero —acá sí
       hay texto sobre la parte de abajo—. */
    background: linear-gradient(180deg, rgba(10,10,12,0.70) 0%, rgba(10,10,12,0.38) 100%);
  }
}

/* --- Comunidad / Instagram --- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;                  /* cuadrado, como un post de IG */
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--color-fondo-suave);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicion);
}
.ig-tile:hover img { transform: scale(1.05); }
.ig-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  background: rgba(8, 12, 18, 0.45);
  transition: opacity var(--transicion);
}
.ig-tile:hover .ig-tile__overlay,
.ig-tile:focus-visible .ig-tile__overlay { opacity: 1; }
.ig-tile__overlay svg { width: 28px; height: 28px; }
@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   40. BUSCADOR (overlay de la lupa) + REDUCED MOTION
   ========================================================================== */
.buscador { position: fixed; inset: 0; z-index: 130; }
.buscador__overlay { position: absolute; inset: 0; background: rgba(8, 12, 18, 0.45); opacity: 0; transition: opacity 0.2s ease; }
.buscador.abierto .buscador__overlay { opacity: 1; }
.buscador__panel {
  position: relative;
  background: #fff;
  box-shadow: var(--sombra-lg);
  padding-block: var(--space-4);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.buscador.abierto .buscador__panel { transform: translateY(0); opacity: 1; }
.buscador__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 2px solid var(--color-linea);
  border-radius: var(--radio-pill);
  padding: 0.3em 0.5em 0.3em 1em;
}
.buscador__inner:focus-within { border-color: var(--color-secundario); }
.buscador__inner svg { width: 20px; height: 20px; color: var(--color-tinta-suave); flex-shrink: 0; }
.buscador__inner input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; padding: 0.5em 0; }
.buscador__cerrar { font-size: 1.6rem; line-height: 1; color: var(--color-tinta-suave); padding: 0.15em 0.45em; border-radius: var(--radio-pill); }
.buscador__cerrar:hover { background: var(--color-fondo-suave); color: var(--color-tinta); }
.buscador__resultados { margin-top: var(--space-3); display: grid; gap: 2px; max-height: min(52vh, 430px); overflow: auto; }
.buscador__ayuda { color: var(--color-tinta-suave); font-size: var(--fs-sm); padding: var(--space-2) var(--space-2) var(--space-3); }
.buscador__ayuda a { color: var(--color-primario-texto); font-weight: 600; }
.buscador__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radio); }
.buscador__item:hover { background: var(--color-fondo-suave); }
.buscador__item img { width: 44px; height: 44px; object-fit: contain; background: var(--color-fondo-suave); border-radius: var(--radio-sm); padding: 4px; mix-blend-mode: multiply; flex-shrink: 0; }
.buscador__item-info { display: flex; flex-direction: column; }
.buscador__item-nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--fs-sm); }
.buscador__item-precio { font-size: var(--fs-xs); color: var(--color-tinta-suave); }
.buscador__todos { display: block; margin-top: var(--space-2); padding: var(--space-3); text-align: center; font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--fs-sm); color: var(--color-primario-texto); border-top: 1px solid var(--color-linea); }
.buscador__todos:hover { background: var(--color-fondo-suave); }

/* Si el sistema pide "reducir movimiento", apagamos transiciones decorativas.
   (El autoplay del carrusel y la rotación de anuncios se apagan en JS.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__track,
  .barra-anuncios__item,
  .card-producto,
  .card-producto__media img,
  .card-producto__flecha { transition: none !important; }
}


/* ==========================================================================
   ALIADOS COMERCIALES  (sección traída del sitio en producción)
   Logos de las cadenas, farmacias, gimnasios y tiendas donde se vende Olimp.
   Cada logo trae su propia altura porque vienen con proporciones distintas.
   ========================================================================== */
/* CELDAS PAREJAS, NO UNA FILA SUELTA
   --------------------------------------------------------------------------
   Esto era `flex-wrap` y se veía dentado: los logos miden entre 100 y 190 px
   de ancho, así que cada fila cortaba en un lugar distinto y la última
   quedaba con uno o dos elementos centrados en el medio de la nada.

   Se notaba poco con once aliados y se hizo evidente al pasar a catorce.

   Con una grilla de celdas iguales, cada logo ocupa el mismo lugar sin
   importar su forma, y una pared de logos vuelve a verse como una pared.
   `auto-fit` acomoda solo la cantidad de columnas al ancho disponible.
   -------------------------------------------------------------------------- */
.aliados__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-6) var(--space-4);
  max-width: 1150px;
  margin: 0 auto;
}
/* Ningún logo se sale de su celda por más ancho que sea el archivo. */
.aliados__grid > * { max-width: 100%; }
/* Los logos van A COLOR, no en gris.

   Poner una pared de logos en gris es la convención habitual, y sirve cuando
   los logos son de sponsors y lo que importa es que no le roben protagonismo a
   tu marca. Acá el objetivo es otro: esta sección contesta "¿dónde lo compro?".
   Alguien que busca su local lo reconoce por el color antes que por el nombre.

   Y había un problema práctico: estaban en gris con hover a color. En celular
   no existe el hover, así que para la mayoría de los visitantes nunca iban a
   verse a color.

   Es además como está en la web anterior de Vitalica. */
.aliados__logo {
  width: auto;
  object-fit: contain;
  opacity: .92;
  transition: opacity .2s ease, transform .2s ease;
}
.aliados__logo:hover { opacity: 1; transform: translateY(-2px); }
@media (max-width: 640px) {
  /* Celdas más chicas: en un teléfono entran tres por fila en vez de dos. */
  .aliados__grid {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--space-5) var(--space-3);
  }
  /* Achica los logos en celular SIN dejarlos sin altura: min() sobre la
     variable que pone el JS. No usar max-height acá (ver home.js: sin altura
     propia el lazy-load nunca se dispara y no cargan nunca). */
  .aliados__logo { height: min(var(--alto, 46px), 46px); }
}


/* ==========================================================================
   FICHA TÉCNICA DE PRODUCTO  (stats, sabores y catálogo PDF)
   Recupera lo que el sitio actual mostraba en el modal.
   ========================================================================== */
.ficha-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.stat-badge {
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  padding: var(--space-3);
  text-align: center;
  background: var(--color-fondo-suave);
}
.stat-badge__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-tinta-suave);
  font-weight: 600;
}
.stat-badge__valor {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-secundario);
  margin-top: 2px;
}

.ficha-sabores { margin-top: var(--space-5); }
.ficha-sabores__titulo {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-tinta-suave);
  margin-bottom: var(--space-2);
}
.ficha-sabores__lista { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sabor-chip {
  border: 1px solid var(--color-linea);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: var(--fs-sm);
  background: #fff;
}

.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}


/* ==========================================================================
   BOTÓN WHATSAPP (variante verde, para CTAs de "consultar por este producto")
   ========================================================================== */
.btn--whatsapp {
  background: #25D366;
  color: #0B2E17;
  border: 1px solid #25D366;
}
.btn--whatsapp:hover { background: #20BA5A; border-color: #20BA5A; color: #0B2E17; }


/* ==========================================================================
   EMBED DE INSTAGRAM (Curator.io) — reemplaza la grilla simulada
   ========================================================================== */
.ig-embed { min-height: 200px; }
.ig-embed .crt-logo { font-size: var(--fs-xs); opacity: .6; }

/* Contacto del footer (reemplaza los badges de tarjetas) */
.footer-sitio__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  font-size: var(--fs-sm);
}
.footer-sitio__contacto a { color: #fff; opacity: .85; }
.footer-sitio__contacto a:hover { opacity: 1; text-decoration: underline; }


/* ==========================================================================
   28. POP-UP DE CAMPAÑA (lo arma assets/js/popups.js)
   --------------------------------------------------------------------------
   Se apoya en los tokens de marca: el panel usa el fondo y los bordes del
   sistema, y los botones son los mismos .btn del resto del sitio. No trae
   colores propios a propósito — si mañana cambia el naranja, esto cambia solo.
   ========================================================================== */
.popup {
  position: fixed;
  inset: 0;
  z-index: 120;              /* por encima del drawer del carrito (100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.popup--visible { opacity: 1; pointer-events: auto; }

.popup__velo {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 24, 0.62);
}

.popup__panel {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--color-fondo);
  border-radius: var(--radio-md);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.2s ease;
}
.popup--visible .popup__panel { transform: translateY(0) scale(1); }

.popup__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-tinta);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicion);
}
.popup__cerrar:hover { background: #fff; }

.popup__imagen {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-md) var(--radio-md) 0 0;
}

.popup__cuerpo { padding: var(--space-6); }

.popup__etiqueta {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-primario-texto);
  margin-bottom: var(--space-2);
}

.popup__titulo {
  font-size: var(--fs-xl);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

.popup__texto {
  color: var(--color-tinta-suave);
  font-size: var(--fs-md);
  margin: 0;
}

.popup__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ==========================================================================
   POP-UP EN MODO PLACA
   --------------------------------------------------------------------------
   La imagen ocupa el aviso entero y el texto va encima, centrado y en grande.
   Lo pidió marketing el 5/10/2026 mostrando el aviso de MyFonts: "60% OFF"
   ocupando media pantalla, y después pidió además "algo de estilo iOS".

   Las dos cosas apuntan al mismo lado, así que el formato sale de ahí:

   • TODO CENTRADO Y RESPIRANDO. En el ejemplo el texto no se apoya abajo:
     flota en el medio, con aire arriba y abajo. La primera versión que hice
     lo pegaba al borde inferior y por eso parecía un banner, no un aviso.

   • VIDRIO ESMERILADO, no un velo plano. El fondo se desenfoca y se baja de
     brillo. Es lo que hace iOS con las hojas y los menús, y acá resuelve de
     paso un problema real: la foto deja de competir con el texto, y una
     imagen de poca resolución —como la del sorteo, que es una tira de
     800x230— deja de verse pixelada, porque desenfocada no hay pixel que
     mirar. El velo deja de ser un parche y pasa a ser el formato.

   • ESQUINAS GRANDES Y BOTÓN PASTILLA. 28px, no los 16 del resto del sitio.
     Es lo que distingue una "hoja" de iOS de una ventana cualquiera.

   Sigue conviviendo con 'ficha' —la de siempre, imagen arriba y texto sobre
   blanco— porque son dos usos distintos y marketing elige por campaña.
   ========================================================================== */
.popup__panel.popup--placa {
  background-color: #14171B;   /* se ve mientras carga la imagen, y si falta */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-radius: 28px;         /* hoja de iOS, no ventana */

  /* ANCHO: ACÁ ESTABA EL PROBLEMA DE VERDAD.
     --------------------------------------------------------------------
     El aviso de MyFonts que mandó marketing mide unos 940px de ancho: es
     un cartel. El pop-up del sitio mide 440: es una tarjeta de celular.
     Yo le estuve poniendo vidrio, centrado y tipografía grande a una
     tarjeta angosta, y por eso no se parecía por más que ajustara: no era
     el estilo, era la proporción.

     Esto vale solo para placa. El formato ficha sigue en 440, que es lo
     que corresponde a un aviso con texto para leer: un renglón de 900px
     de ancho obliga a barrer la cabeza y se lee peor. */
  width: min(880px, 100%);

  /* ALTO: un piso y un techo, los dos necesarios.
     Sin piso, un aviso de tres palabras queda una tirita. Sin techo, uno de
     texto largo crecía hasta pasarse de la pantalla y se cortaba el título
     arriba, que era lo primero que saltaba a la vista. */
  min-height: 560px;
  max-height: min(calc(100vh - var(--space-5)), 700px);

  overflow: hidden;            /* el que scrollea es el cuerpo, no el panel */

  display: flex;
  flex-direction: column;
  justify-content: center;     /* el texto flota en el medio, no se apoya */
}

/* EL VIDRIO.
   --------------------------------------------------------------------------
   backdrop-filter desenfoca lo que hay detrás de esta capa, y detrás está la
   foto del panel. De ahí sale el esmerilado sin necesidad de un segundo
   elemento ni de tocar la imagen.

   El color encima no es decoración: sin él, una foto clara deja el texto
   blanco ilegible por más desenfoque que tenga. El degradado es suave —casi
   plano— porque en el ejemplo el velo es parejo; la pizca de más abajo le da
   profundidad y ayuda al botón a despegarse.

   Si un navegador viejo no soporta backdrop-filter, no pasa nada grave: se
   queda el color y el aviso sigue legible. Por eso el color va en la misma
   regla y no condicionado. */
.popup--placa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* saturate POR DEBAJO de 100 = la foto se va al gris. En el ejemplo la
     imagen de atrás está casi en blanco y negro, y eso es la mitad del
     efecto: deja de pelear con el texto y con el naranja de la marca. Yo
     la tenía en 125, o sea subiéndole el color, justo al revés. */
  -webkit-backdrop-filter: blur(2px) saturate(60%);
  backdrop-filter: blur(2px) saturate(60%);
  background: linear-gradient(to bottom,
    rgba(10, 12, 16, .34) 0%,
    rgba(10, 12, 16, .46) 55%,
    rgba(10, 12, 16, .62) 100%);
}

.popup--placa .popup__cuerpo {
  position: relative;          /* por encima del vidrio */
  z-index: 1;
  min-height: 0;               /* en flex, sin esto no scrollea: se desborda */
  overflow-y: auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

/* La bajada chica de arriba. En el ejemplo no grita: es una línea liviana
   que presenta al número. Acá va en el naranja de la marca, que es lo único
   que distingue este aviso de cualquier otro aviso bonito. */
.popup--placa .popup__etiqueta {
  color: var(--color-primario);
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-bottom: var(--space-3);
}

/* EL TÍTULO SE MIDE SOLO, SEGÚN LO LARGO QUE SEA.
   --------------------------------------------------------------------------
   Acá estaba lo feo de la primera versión. Un solo tamaño gigante funciona
   con "50% OFF" y revienta con "Sorteamos 1 pase para el BIGG Under Armour
   Running Festival": cinco renglones enormes que se comen el aviso.

   Un tamaño fijo obliga a elegir entre que el corto se vea chico o que el
   largo no entre. Así que lo elige el propio texto: popups.js cuenta los
   caracteres y pone la clase. Tres escalones alcanzan. */
.popup--placa .popup__titulo {
  font-weight: 900;
  color: #fff;
  text-wrap: balance;
  margin-bottom: var(--space-4);
  font-size: clamp(1.45rem, 3.8vw, 1.85rem);   /* largo: tiene que LEERSE */
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.popup--placa .popup__titulo--l {              /* medio */
  font-size: clamp(2rem, 5.6vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.popup--placa .popup__titulo--xl {             /* corto: "50% OFF" */
  /* En 880px de ancho el titular puede ser de verdad grande. En el ejemplo
     el "60% OFF" ocupa casi media altura del aviso; con 4.2rem dentro de
     una tarjeta de 440 se veía grande pero no imponente. */
  font-size: clamp(3.2rem, 9vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.popup--placa .popup__texto {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-sm);
  line-height: 1.55;
  /* El panel es ancho pero el renglón no: un renglón de 880px obliga a
     barrer la cabeza y se pierde dónde seguía. Se centra una columna. */
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* El botón no va de borde a borde. En el ejemplo tiene aire a los costados,
   y eso es lo que lo hace ver botón y no barra. */
.popup--placa .popup__acciones {
  margin-top: var(--space-6);
  align-items: center;
}
.popup--placa .popup__acciones .btn {
  width: 100%;
  max-width: 320px;
  font-size: var(--fs-md);
  padding: 1em 1.6em;
  border-radius: var(--radio-pill);
}
/* Sobre una foto, el botón de contorno blanco se pierde. Se rellena, y de
   paso queda del mismo vidrio que el resto. */
.popup--placa .btn--contorno {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.popup--placa .btn--contorno:hover { background: rgba(255, 255, 255, .24); }

/* La X, también de vidrio. El círculo blanco sólido del formato ficha acá
   quedaba como una pegatina encima de la foto. */
.popup--placa .popup__cerrar {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.popup--placa .popup__cerrar:hover { background: rgba(255, 255, 255, .3); }

/* ==========================================================================
   POP-UP EN MODO IMAGEN  ·  "la placa manda"
   --------------------------------------------------------------------------
   Para cuando la imagen YA ES el aviso: la placa que marketing diseñó para
   Instagram, con su título, su premio y sus condiciones adentro. Ahí no hay
   nada que escribirle encima; lo único que falta es el botón.

   LA REGLA DE ORO ACÁ ES NO RECORTAR. Un pop-up normal recorta la imagen
   para que entre en su marco, y en una placa eso se come una línea de las
   condiciones o media palabra del título. Por eso object-fit es contain y no
   cover: entra entera o se achica, pero no se corta.

   El botón va ABAJO, sobre una franja oscura, no encima de la imagen: estas
   placas suelen terminar con su propio "¿Cómo participar?" y un botón encima
   caería justo ahí.
   ========================================================================== */
.popup__panel.popup--imagen {
  width: min(460px, 100%);     /* las placas de Instagram son paradas */
  max-height: calc(100vh - var(--space-5));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0E1014;
  border-radius: 24px;
}
.popup--imagen .popup__imagen {
  aspect-ratio: auto;          /* la que traiga la imagen, no 16/9 */
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;               /* sin esto no se achica y se va de pantalla */
  object-fit: contain;
  border-radius: 24px 24px 0 0;
}
/* El botón siempre visible: no entra en el reparto de altura. */
.popup--imagen .popup__cuerpo {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.popup--imagen .popup__acciones { margin-top: 0; }
.popup--imagen .popup__acciones .btn { border-radius: var(--radio-pill); }
.popup--imagen .popup__cerrar {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.popup--imagen .popup__cerrar:hover { background: rgba(255, 255, 255, .3); }

/* Título, etiqueta y texto SIGUEN EN EL HTML, escondidos a la vista.
   No es un detalle: son lo que lee un lector de pantalla y lo que le da
   nombre al diálogo. Una imagen sin alternativa en texto es un aviso que
   para una persona ciega no existe. Borrarlos del html sería más simple y
   dejaría afuera a quien no ve la placa. */
.popup--imagen .popup__etiqueta,
.popup--imagen .popup__titulo,
.popup--imagen .popup__texto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .popup__cuerpo { padding: var(--space-5); }
  .popup__titulo { font-size: var(--fs-lg); }
  .popup__panel.popup--placa { min-height: 460px; border-radius: 24px; }
  .popup--placa .popup__cuerpo { padding: var(--space-7) var(--space-5); }
}

/* PANTALLA BAJA (un portátil chico, o un celular acostado).
   --------------------------------------------------------------------------
   LO QUE IMPORTA ACÁ ES QUE EL BOTÓN SE VEA SIN SCROLLEAR. En una ventana de
   417px el cuerpo se volvía scrolleable y el "Cómo participar" quedaba abajo
   del corte: un aviso con el botón escondido es peor que no mostrarlo. Se
   achican los espacios hasta que entre todo. El overflow sigue ahí, pero
   como red, no como plan. */
@media (max-height: 640px) {
  .popup__panel.popup--placa { min-height: 0; }
  .popup--placa .popup__cuerpo { padding: var(--space-5); }
  .popup--placa .popup__titulo { font-size: clamp(1.25rem, 3.2vw, 1.5rem); margin-bottom: var(--space-3); }
  .popup--placa .popup__titulo--l { font-size: clamp(1.7rem, 4.6vw, 2.1rem); }
  .popup--placa .popup__titulo--xl { font-size: clamp(2.2rem, 6.5vw, 3rem); }
  .popup--placa .popup__acciones { margin-top: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .popup, .popup__panel { transition: none; }
}


/* ==========================================================================
   29. CHECKOUT — MEDIOS DE PAGO Y LOCAL DE RETIRO
   ========================================================================== */

/* Nota que aparece bajo una opción cuando el medio de pago la necesita. */
.opcion__nota {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-fondo-suave);
  border-left: 3px solid var(--color-primario);
  border-radius: var(--radio-sm);
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
}
.opcion__nota strong { color: var(--color-tinta); }

/* Selector del local donde se retira. */
.selector-local {
  margin-top: var(--space-4);
}
.selector-local label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}
.selector-local select {
  width: 100%;
  padding: 0.75rem var(--space-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-sm);
  background: var(--color-fondo);
  color: var(--color-tinta);
  font: inherit;
  font-size: var(--fs-md);
}
.selector-local select:focus-visible {
  outline: 2px solid var(--color-secundario);
  outline-offset: 1px;
}

/* Línea de envío dentro del resumen: se distingue del subtotal. */
.resumen-linea--envio span:last-child { font-weight: 600; }
.resumen-linea--envio .envio-gratis { color: var(--color-exito); font-weight: 700; }

/* ---------------------------------------------------------------------------
   CUPÓN DE DESCUENTO  ·  15/10/2026
   Va pegado al total, en la columna del resumen. El descuento se pinta en
   verde porque es lo único del resumen que BAJA el número: en negro se
   confunde con una línea más del detalle.
   --------------------------------------------------------------------------- */
.resumen-linea--cupon span:last-child { color: var(--color-exito); font-weight: 700; }

.cupon {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-linea);
}
.cupon__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 6px;
}
.cupon__fila { display: flex; gap: 8px; }
.cupon__fila input {
  flex: 1;
  min-width: 0;          /* sin esto el input desborda la columna en pantallas chicas */
  padding: 10px 12px;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-sm);
  font: inherit;
  text-transform: uppercase;
}
.cupon__fila input:disabled {
  background: #F2F4F7;
  color: var(--color-tinta-suave);
  font-weight: 700;
}
.cupon__btn {
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radio-sm);
  background: #24262B;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
}
.cupon__btn:disabled { opacity: .55; cursor: default; }
.cupon__aviso { margin: 6px 0 0; font-size: var(--fs-xs); min-height: 1em; }
.cupon__aviso--ok  { color: var(--color-exito); }
.cupon__aviso--mal { color: var(--color-alerta); }

/* El formulario de tarjeta de Bancard, embebido en el checkout.

   El ancho minimo de 320px lo pide Bancard: por debajo de eso el formulario
   se deforma. Como el checkout en celular arranca en 375px menos los 16 de
   margen a cada lado, entra justo. El max-width de 480 es nuestro: estirado
   a todo lo ancho de una pantalla grande queda un formulario de tarjeta de
   un metro, que ademas no inspira confianza.

   min-height para que la pagina no pegue un salto cuando el iframe termina
   de cargar y empuja todo lo de abajo. */
.pago-iframe {
  /* width: 100% va SI O SI. El contenedor de la confirmacion es flex en
     columna, y ahi un bloque se encoge a su contenido: sin esto quedaba de
     320px --el minimo-- aunque hubiera 620 disponibles, y el formulario salia
     con barras de desplazamiento a los costados. */
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  margin: var(--space-4) auto 0;
}

/* EL ALTO LO PONEMOS NOSOTROS  ·  23/10/2026
   Bancard no redimensiona su iframe: lo inserta con width:100% y
   min-height:0, sin alto. Un iframe sin alto mide 150px por omision del
   navegador, asi que el formulario aparecia recortado a un tercio y con
   barras de desplazamiento adentro.

   540px es lo que necesita el formulario completo --las dos pestañas, el
   numero de tarjeta, vencimiento y CVC, el boton de pagar y los sellos de
   abajo-- medido contra el formulario real de staging. */
.pago-iframe iframe {
  display: block;
  width: 100%;
  height: 540px;
  border: 0;
}

/* El enlace de consulta, arriba del numero de pedido. Chico y verde: es una
   salida por si algo no cierra, no un paso que falte. No usa .btn a proposito
   --un boton grande ahi compite con el numero, que es lo que hay que mirar. */
.confirmacion__consulta { margin: var(--space-3) 0 0; }
.confirmacion__consulta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #25D366;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.1);
  color: #12753A;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
}
.confirmacion__consulta a:hover { background: #25D366; color: #0B2E17; }
.confirmacion__consulta svg { width: 16px; height: 16px; flex: none; }

/* Número de pedido en la pantalla de confirmación. */
.confirmacion__numero {
  display: inline-block;
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-fondo-suave);
  border: 1px dashed var(--color-linea);
  border-radius: var(--radio-sm);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-tinta);
}


/* ==========================================================================
   30. SELECTOR DE VARIANTE (sabor y presentación) — página de producto
   --------------------------------------------------------------------------
   Los chips son <button> de verdad, no enlaces: se activan con la barra
   espaciadora y anuncian su estado con aria-pressed. El elegido se marca con
   el navy de marca, no solo con un borde: el borde solo no alcanza para
   distinguirlo de un chip deshabilitado.
   ========================================================================== */
.variantes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-linea);
  border-bottom: 1px solid var(--color-linea);
}

.variantes__titulo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-tinta-suave);
  margin-bottom: var(--space-3);
}

.variantes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* La foto del envase en cada sabor. producto.js la escribe siempre, pero en
   este diseño no se muestra: el chip sigue siendo texto con emoji, como
   estaba. La agregó la propuesta de rediseño (assets/css/tema-2026.css) y
   ahí se enciende. Si la propuesta se descarta, se borra esta regla y el
   bloque `foto` de filaOpciones() en assets/js/pages/producto.js. */
.variante-chip__foto { display: none; }

.variante-chip {
  padding: 0.6rem 1rem;
  min-height: 44px;              /* objetivo táctil cómodo */
  border: 1.5px solid var(--color-linea);
  border-radius: var(--radio-pill);
  background: var(--color-fondo);
  color: var(--color-tinta);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.variante-chip:hover:not(:disabled):not([aria-pressed="true"]) {
  border-color: var(--color-secundario);
}
.variante-chip[aria-pressed="true"] {
  background: var(--color-secundario);
  border-color: var(--color-secundario);
  color: #fff;
}
.variante-chip:focus-visible {
  outline: 2px solid var(--color-secundario);
  outline-offset: 2px;
}

/* El motivo por el que un medio de pago esta apagado. Va adentro de la opcion,
   debajo de la descripcion, y NO va tachado: lo tachado es la opcion, no la
   explicacion de por que. Ver actualizarPagos() en checkout.js. */
.opcion__motivo {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-primario-oscuro);
  text-decoration: none;
}

/* El motivo de las presentaciones tachadas, escrito abajo. En el celular no
   hay hover, asi que el title del boton no alcanza: ahi este renglon es la
   unica explicacion que la persona ve. Ver producto.js. */
.variantes__aviso {
  margin: calc(var(--esp-1) * -1) 0 var(--esp-2);
  font-size: var(--fs-xs);
  color: var(--color-texto-suave);
}

/* No disponible en esa combinación: se apaga y se tacha, pero se sigue
   viendo. Ocultarlo dejaría al cliente preguntándose si existe. */
.variante-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
  background: var(--color-fondo-suave);
}

/* --- La variante elegida, mostrada en el carrito y el panel lateral --- */
.carrito-item__variante,
.drawer-item__variante {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-tinta-suave);
  margin-top: 2px;
}


/* ==========================================================================
   31. PRECIO CON PROMOCIÓN
   --------------------------------------------------------------------------
   El precio de lista tachado va AL LADO del nuevo, no debajo: leído de
   corrido ("Gs. 280.000, antes Gs. 330.000") el ahorro se entiende solo.
   Va en gris apagado y más chico — si compite en peso visual con el precio
   vigente, el cliente duda de cuál paga.
   ========================================================================== */
.precio-antes {
  color: var(--color-tinta-suave);
  font-weight: 500;
  font-size: 0.78em;
  margin-left: 0.4em;
  text-decoration-thickness: 1.5px;
}

/* El precio promocional en naranja de marca: es el color de "acción" del
   sitio y acá la acción es aprovechar el descuento. */
.card-producto__precio .precio--promo,
.producto__precio .precio--promo { color: var(--color-primario-texto); }

/* En el carrito y el checkout el tachado también aparece, para que el
   descuento siga visible hasta el final. */
.carrito-item__unit .precio-antes,
.resumen-linea .precio-antes { font-size: 0.85em; }

/* ---------------------------------------------------------------------------
   PRECIO ESPECIAL  ·  19/10/2026
   El de góndola va ARRIBA y tachado; el suyo abajo, grande. Al revés —el
   tachado al lado, como en las promos— el ojo lee primero el número grande
   y no entiende de dónde sale el descuento. Acá la secuencia importa:
   "esto cuesta / vos pagás".
   --------------------------------------------------------------------------- */
.precio-antes--arriba {
  display: block;
  margin-left: 0;
  font-size: 0.5em;          /* el contenedor es grande: esto lo baja a texto normal */
  line-height: 1.2;
}
.precio-especial { display: block; }

/* En la tarjeta del catálogo el contenedor es más chico que en la ficha, así
   que el tachado y la etiqueta necesitan sus propios tamaños: con los de la
   ficha quedaban microscópicos. */
.card-producto__precio .precio-antes--arriba { font-size: 0.8rem; }
.card-producto__precio .precio--especial { display: block; }
.card-producto__precio .precio-especial__lbl { font-size: 0.62rem; }
.precio-especial__lbl {
  display: block;
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-exito);
  line-height: 1.4;
}


/* --- Panel de administrador: campos nuevos de la sección de campañas --- */
.admin-campo select,
.admin-campo input[type="date"] {
  width: 100%;
  padding: 0.6rem var(--space-3);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-sm);
  background: var(--color-fondo);
  color: var(--color-tinta);
  font: inherit;
}
.admin-sub {
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-linea);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}
.admin-vencida {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-alerta);
  background: rgba(214, 69, 69, 0.12);
  padding: 2px 8px;
  border-radius: var(--radio-sm);
  vertical-align: middle;
}
.admin-nota-seccion {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-fondo-suave);
  border-left: 3px solid var(--color-secundario);
  border-radius: var(--radio-sm);
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
}


/* ==========================================================================
   32. PÁGINAS LEGALES (terminos.html · privacidad.html)
   --------------------------------------------------------------------------
   Texto largo para leer, no para escanear. Medida de línea acotada, jerarquía
   clara y nada de decoración: son documentos, no piezas de marketing.
   ========================================================================== */
.legal {
  max-width: 760px;
}
.legal h2 {
  font-size: var(--fs-lg);
  margin: var(--space-7) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-linea);
}
.legal h2:first-of-type { margin-top: var(--space-5); }
.legal p,
.legal li {
  color: var(--color-tinta-suave);
  line-height: 1.75;
}
.legal p { margin-bottom: var(--space-3); }
.legal strong { color: var(--color-tinta); }
.legal ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.legal li { margin-bottom: var(--space-2); }
.legal a {
  color: var(--color-primario-texto);
  font-weight: 600;
  text-decoration: underline;
}
.legal code {
  background: var(--color-fondo-suave);
  padding: 1px 6px;
  border-radius: var(--radio-sm);
  font-size: 0.9em;
}
.legal__fecha {
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-linea);
}

/* Resumen en lenguaje simple, arriba de la política de privacidad. */
.legal__resumen {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-5);
  background: var(--color-secundario-tinte);
  border-radius: var(--radio-md);
}
.legal__resumen p { margin-bottom: var(--space-2); color: var(--color-tinta); }
.legal__resumen ul { margin-bottom: 0; }
.legal__resumen li { color: var(--color-tinta); }

/* Bloque de advertencia (uso responsable, datos de tarjeta). */
.legal__aviso {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-5);
  background: var(--color-primario-tinte);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-sm);
}
.legal__aviso p:last-child { margin-bottom: 0; }

/* Dato de empresa sin cargar. Deliberadamente llamativo: un documento legal
   con un hueco no se puede publicar, y un guion discreto se pasa por alto. */
.legal__falta {
  background: var(--color-primario-tinte);
  color: var(--color-primario-texto);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radio-sm);
  border: 1px dashed var(--color-primario);
  white-space: nowrap;
}
.legal__pendiente {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--color-primario-tinte);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-md);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-tinta);
}

/* Enlaces legales del footer */
.footer-sitio__enlaces-legales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-sitio__enlaces-legales a {
  color: #fff;
  opacity: 0.85;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.footer-sitio__enlaces-legales a:hover { opacity: 1; text-decoration: underline; }


/* ==========================================================================
   33. FICHA DE PRODUCTO EN CELULAR — que el precio y el botón se vean
   --------------------------------------------------------------------------
   El problema medido: en 375×812 la foto ocupaba 556 px de los 703 útiles de
   la primera pantalla, y había que bajar DOS pantallas completas para llegar
   a "Agregar al carrito". La mayoría entra desde el celular, así que mucha
   gente se iba sin ver siquiera el precio.

   Dos correcciones:
     1) La foto se achica en celular. Sigue siendo grande, pero deja lugar.
     2) Aparece una barra fija abajo con el precio y el botón, apenas el botón
        real sale de la vista. Es lo que hacen las tiendas que convierten:
        la decisión de comprar puede tomarse en cualquier punto de la página,
        y la acción tiene que estar ahí cuando eso pasa.
   ========================================================================== */
@media (max-width: 760px) {
  .producto__media {
    padding: var(--space-4);
    min-height: 0;
  }
  .producto__media img { max-height: 260px; }
}

/* --- Barra fija de compra (solo celular) --- */
.compra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;              /* se activa por JS solo en celular */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--color-fondo);
  border-top: 1px solid var(--color-linea);
  box-shadow: 0 -6px 24px -8px rgba(0, 0, 0, 0.18);
  transform: translateY(110%);
  transition: transform 0.22s ease;
}
.compra-fija--visible { transform: translateY(0); }

.compra-fija__info {
  flex: 1 1 auto;
  min-width: 0;
}
.compra-fija__nombre {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-tinta-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compra-fija__precio {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--color-tinta);
  line-height: 1.2;
}
.compra-fija__precio .precio-antes { font-size: 0.7em; }
.compra-fija .btn { flex: 0 0 auto; }

@media (max-width: 760px) {
  .compra-fija { display: flex; }
  /* El botón de WhatsApp sube para no quedar tapado por la barra. */
  body.con-compra-fija .whatsapp-flotante { bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .compra-fija { transition: none; }
}


/* ==========================================================================
   34. PÁGINA 404
   --------------------------------------------------------------------------
   Un 404 sin salida es una visita perdida. Esta ofrece los cuatro caminos
   que la gente busca realmente, en vez del típico "volver al inicio" solo.
   ========================================================================== */
.error-404 { text-align: center; padding-block: var(--space-8); }
.error-404 h1 { margin-bottom: var(--space-4); }
.error-404__texto {
  max-width: 52ch;
  margin: 0 auto var(--space-6);
  color: var(--color-tinta-suave);
  font-size: var(--fs-md);
}
.error-404__acciones {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.error-404__atajos {
  max-width: 460px;
  margin: 0 auto var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--color-fondo-suave);
  border-radius: var(--radio-md);
  text-align: left;
}
.error-404__atajos h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3);
}
.error-404__atajos ul { margin: 0; padding-left: var(--space-5); }
.error-404__atajos li { margin-bottom: var(--space-2); }
.error-404__atajos a { color: var(--color-primario-texto); font-weight: 600; }
.error-404__atajos a:hover { text-decoration: underline; }
.error-404__ayuda { color: var(--color-tinta-suave); margin-bottom: var(--space-3); }

/* Punto de retiro único: se muestra la dirección, no se pregunta nada. */
.punto-retiro {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-fondo-suave);
  border-left: 3px solid var(--color-secundario);
  border-radius: var(--radio-sm);
}
.punto-retiro__titulo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-tinta-suave);
  margin-bottom: var(--space-2);
}
.punto-retiro__dir { margin: 0; line-height: 1.6; }
.punto-retiro__horario {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
}

/* Medio de pago que no aplica a la entrega elegida. */
.opcion--apagada { opacity: 0.45; }
.opcion--apagada .opcion__texto strong { text-decoration: line-through; }
/* El motivo se lee entero. La opacidad del 45% esta para que la opcion se vea
   apagada, pero aplicada al motivo lo vuelve ilegible justo cuando es lo unico
   que hay que leer. Se compensa con opacity: 1 sobre el hijo. */
.opcion--apagada .opcion__motivo { opacity: 1; }


/* ==========================================================================
   35. COMPROBANTE DEL PEDIDO (pantalla + PDF)
   --------------------------------------------------------------------------
   El botón "Descargar mi pedido" abre la impresión del navegador, que en
   todos —Chrome, Safari, y también en el celular— ofrece "Guardar como PDF".

   Se eligió así en vez de una librería de PDF: son ~300 KB que el visitante
   descarga en TODAS las páginas para una función que usa una minoría, cuando
   el navegador ya lo hace y con mejor tipografía. La contra es un clic extra
   (elegir "Guardar como PDF" en el diálogo); vale la pena.
   ========================================================================== */

/* --- Bloques de datos del comprobante --- */
.comprobante-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  max-width: 560px;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-linea);
  text-align: left;
}
.comprobante-bloques h2 {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-tinta-suave);
  margin: 0 0 var(--space-2);
}
.comprobante-bloques p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }

.comprobante-nota {
  max-width: 560px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4);
  background: var(--color-primario-tinte);
  border-radius: var(--radio-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: left;
}

.confirmacion__fecha {
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  margin-top: calc(var(--space-2) * -1);
}

/* Encabezado y pie del comprobante: ocultos en pantalla, visibles en papel */
.comprobante-cabecera,
.comprobante-pie { display: none; }


/* ==========================================================================
   36. IMPRESIÓN — cómo se ve el pedido guardado en PDF
   --------------------------------------------------------------------------
   Se quita todo lo que no sirve en un papel: menú, pie del sitio, botón de
   WhatsApp flotante, los propios botones y el pop-up si estuviera abierto.
   Un enlace no se puede tocar en una hoja impresa.
   ========================================================================== */
@media print {
  /* Fondo blanco y tinta negra: ahorra tóner y se lee mejor. */
  body { background: #fff !important; color: #000; }

  /* Fuera todo lo que no es el comprobante */
  #chrome-top,
  #chrome-bottom,
  .header-sitio,
  .barra-anuncios,
  .footer-sitio,
  .whatsapp-flotante,
  .compra-fija,
  .popup,
  .drawer,
  .confirmacion__acciones,
  .confirmacion__consulta,
  .confirmacion__icono,
  .confirmacion__ayuda,
  .breadcrumb,
  .pagina-hero,
  .pagina-cabecera { display: none !important; }

  main, .seccion, .contenedor { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }

  /* Encabezado con la marca y los datos fiscales: en papel hace falta. */
  .comprobante-cabecera {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 2px solid #000;
    text-align: left;
  }
  .comprobante-marca {
    font-family: var(--fuente-titulo);
    font-size: 20pt;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
  }
  .comprobante-sub { margin: 2px 0 0; font-size: 8pt; color: #444; }
  .comprobante-datos { font-size: 8pt; color: #444; text-align: right; line-height: 1.5; }

  .confirmacion { text-align: left; }
  .confirmacion h1 { font-size: 15pt; margin: 0 0 4px; }
  .confirmacion__intro { font-size: 10pt; margin: 0 0 16px; }

  .confirmacion__numero {
    display: inline-block;
    border: 1px solid #000;
    background: none !important;
    font-size: 12pt;
    padding: 6px 14px;
  }
  .confirmacion__fecha { font-size: 9pt; margin: 6px 0 0; }

  .confirmacion__resumen,
  .comprobante-bloques,
  .comprobante-nota { max-width: 100%; margin-left: 0; margin-right: 0; }

  .comprobante-nota {
    background: none !important;
    border: 1px solid #000;
    font-size: 9pt;
  }

  .comprobante-pie {
    display: block !important;
    margin-top: 28px;
    padding-top: 10px;
    border-top: 1px solid #999;
    font-size: 8pt;
    color: #555;
    text-align: center;
  }

  /* Que una línea de producto no quede cortada entre dos hojas */
  .resumen-linea, .comprobante-bloques > div { break-inside: avoid; }

  @page { margin: 14mm; }
}


/* ==========================================================================
   37. PANTALLA DE CARGA
   --------------------------------------------------------------------------
   POR QUÉ EXISTE
   El header, el carrusel y la grilla de productos los arma JavaScript. Entre
   que el navegador pinta el HTML y que el JS termina, hay un instante en que
   la página se ve vacía y después "salta" cuando aparece todo junto. En una
   compu no se nota; en un celular con datos móviles, sí.

   CÓMO SE VA
   La quita el JS apenas el contenido está listo (ver main.js). Pero además
   tiene una animación de seguridad que la desvanece a los 5 segundos pase lo
   que pase: si el JS fallara, una pantalla de carga eterna dejaría el sitio
   inutilizable, que es mucho peor que el salto que vino a evitar.

   Los estilos van en styles.css y no dentro de cada página porque la hoja se
   carga en el <head> y bloquea el pintado: para cuando el navegador dibuja
   algo, esto ya está aplicado.
   ========================================================================== */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  background: var(--color-fondo);
  animation: cargando-red-de-seguridad 5s forwards;
}

/* Marca en texto, no en imagen: una imagen todavía no descargada dejaría el
   recuadro vacío, que es justo lo que esto viene a evitar. */
.cargando__marca {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  letter-spacing: 0.22em;
  color: var(--color-tinta);
  text-indent: 0.22em;          /* compensa el espaciado de la última letra */
}
.cargando__marca span { color: var(--color-primario); }

.cargando__sub {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}

/* Barra de progreso REAL.
   El ancho refleja cuánto se descargó de verdad (ver main.js), no un tiempo
   inventado. Un porcentaje falso que siempre tarda lo mismo le agrega espera
   a todo el mundo, incluso cuando el sitio ya estaba listo. */
.cargando__barra {
  width: 180px;
  height: 4px;
  border-radius: 4px;
  background: var(--color-linea);
  overflow: hidden;
}
.cargando__relleno {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--color-primario);
  transition: width 0.18s linear;
}

.cargando__pct {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--color-tinta-suave);
  font-variant-numeric: tabular-nums;
  margin-top: calc(var(--space-3) * -1);
}

/* Red de seguridad: si el JS nunca la quita, igual desaparece. */
@keyframes cargando-red-de-seguridad {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Salida normal, cuando el contenido ya está listo. */
.cargando--listo {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Con movimiento reducido NO se puede sacar la animación de .cargando: esa
   animación es la red de seguridad que hace desaparecer la pantalla de carga
   si el JavaScript nunca llega a correr. Sin ella, alguien con movimiento
   reducido activado —que en varias PC de oficina viene puesto de fábrica— se
   queda mirando el "0%" para siempre.

   Lo que sí se saca es el desvanecido: en vez de atenuarse, corta seco. */
@keyframes cargando-red-de-seguridad-seca {
  0%, 99% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cargando { animation: cargando-red-de-seguridad-seca 5s forwards; }
  .cargando--listo { transition: none; visibility: hidden; }
}

/* Acceso al área interna, en el pie. Deliberadamente apagado: tiene que
   estar para el equipo, sin competir con los enlaces que le importan al
   cliente. */
.footer-sitio__acceso {
  color: #fff;
  opacity: 0.45;
  margin-left: 6px;
  font-size: 0.92em;
}
.footer-sitio__acceso:hover { opacity: 0.9; text-decoration: underline; }

/* ==========================================================================
   38. AVISO DE COOKIES
   --------------------------------------------------------------------------
   Aparece solo la primera vez, abajo. No tapa el contenido en escritorio
   (es una barra angosta) y en celular se apoya sobre el borde inferior.
   Se puede volver a abrir desde el enlace "Cookies" del footer.
   ========================================================================== */
.cookies {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;                 /* por encima del botón de WhatsApp (50) */
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  max-width: 900px;
  margin-inline: auto;
  padding: var(--space-5);
  background: #0B1B33;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radio-lg);
  box-shadow: 0 18px 40px rgba(3, 10, 22, 0.45);
  /* Entra desde abajo. Empieza oculto para que no parpadee antes de que el
     JS decida si hay que mostrarlo. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cookies--visible { opacity: 1; transform: none; }
.cookies__texto { flex: 1 1 380px; min-width: 0; }
.cookies__texto strong {
  display: block;
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-md);
  margin-bottom: 4px;
}
/* El color va explícito: la regla global de <p> pisa lo que hereda de .cookies
   y el texto quedaba oscuro sobre fondo oscuro, ilegible. */
.cookies__texto p { font-size: var(--fs-sm); line-height: 1.5; margin: 0; color: rgba(255, 255, 255, 0.82); }
.cookies__texto a { color: var(--color-primario-tinte); text-decoration: underline; }
.cookies__acciones { display: flex; gap: var(--space-3); flex: 0 0 auto; }
.cookies__acciones .btn { white-space: nowrap; }

/* Mientras se ve el cartel, el botón flotante de WhatsApp se corre para
   arriba: si no, en celular queda justo encima de "Aceptar" y no se puede
   tocar. La clase la pone y la saca analitica.js. */
.con-cookies .whatsapp-flotante { transform: translateY(-104px); }

@media (max-width: 620px) {
  .cookies { left: 0; right: 0; bottom: 0; border-radius: var(--radio-lg) var(--radio-lg) 0 0; }
  .cookies__acciones { width: 100%; }
  .cookies__acciones .btn { flex: 1; }
  .con-cookies .whatsapp-flotante { transform: translateY(-186px); }
}

@media (prefers-reduced-motion: reduce) {
  .cookies { transition: none; }
}

/* Botón "Hacé tu pedido" del header.
   Va al WhatsApp de consumidor final (lo pide el brief de marketing).
   Se oculta en celular: ahí el botón flotante de WhatsApp ya cumple la
   misma función y el header no tiene lugar. */
.header-sitio__pedido {
  padding: 10px 18px;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
@media (max-width: 1040px) {
  .header-sitio__pedido { display: none; }
}

/* ==========================================================================
   39. CIENCIA REAL — los tres pilares de Olimp
   --------------------------------------------------------------------------
   Va justo debajo del hero. Antes de mostrar productos, explica por qué
   hay que creerle a la marca: laboratorio propio, producción farmacéutica
   certificada y SHIME® (el simulador digestivo).
   ========================================================================== */
.ciencia { background: var(--color-fondo-suave); }
.ciencia__intro {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--color-tinta-suave);
}
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.pilar {
  background: #fff;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  padding: var(--space-6);
  text-align: center;
}
/* Los tres archivos NO son un juego de íconos parejo: "frasco" es un
   pictograma vertical (356x473), mientras que "made in europe" (601x239) y
   "shime" (852x193) son logotipos apaisados. Metidos a la fuerza en un
   cuadrado de 72x72 con object-fit:contain, los dos logotipos quedaban
   diminutos al lado del frasco.

   Solución: una franja de alto fijo donde cada uno entra con SU proporción,
   limitado a lo ancho. Así los tres apoyan en la misma línea y ocupan un peso
   visual parecido, sin deformarse. */
.pilar__icono {
  display: block;
  margin: 0 auto var(--space-4);   /* 'auto' los centra: text-align no alcanza
                                      porque son bloque */
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.pilar__titulo {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}
.pilar__texto {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-tinta-suave);
}

/* ==========================================================================
   40. FICHA DE USO (guias.js) — en la página de producto
   --------------------------------------------------------------------------
   Contenido de marketing: dosificación por perfil, errores comunes, qué
   esperar y conservación. Son fichas largas, así que van en acordeones:
   la primera abierta y el resto plegadas, para no empujar el resto de la
   página fuera de la pantalla.
   ========================================================================== */
.guia__bajada { color: var(--color-tinta-suave); max-width: 60ch; margin-inline: auto; }

.guia__seccion {
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  background: #fff;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.guia__resumen {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-md);
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.guia__resumen::-webkit-details-marker { display: none; }
/* Flecha propia: la nativa cambia de forma entre navegadores */
.guia__resumen::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-primario);
  border-bottom: 2px solid var(--color-primario);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.guia__seccion[open] .guia__resumen::before { transform: rotate(45deg); }
.guia__resumen:hover { background: var(--color-fondo-suave); }

/* ==========================================================================
   COLOR EN LOS PLEGABLES  ·  8/10/2026
   --------------------------------------------------------------------------
   Con todos los plegables juntos en una sola caja, lo que quedaba era una
   docena de barras blancas idénticas. Facu: "no hay ni color, no se
   entiende".

   La respuesta no es pintarlas todas —doce barras naranjas serían peor— sino
   marcar DÓNDE ESTÁS: la que está abierta se distingue de las cerradas.
   Una barra naranja a la izquierda y el título en naranja alcanzan. El resto
   queda en blanco, y así el ojo encuentra sin esfuerzo el único bloque que
   tiene contenido a la vista.
   ========================================================================== */
.guia__seccion {
  /* La barra existe siempre pero mide 0: así la transición se ve crecer en
     vez de aparecer de golpe. */
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.guia__seccion[open] {
  border-left-color: var(--color-primario);
  background: var(--color-fondo-suave);
}
.guia__seccion[open] .guia__resumen { color: var(--color-primario-texto); }
/* El cuerpo vuelve a blanco: el fondo gris marca el bloque, pero el texto
   largo se lee mejor sobre blanco. */
.guia__seccion[open] .guia__cuerpo {
  background: #fff;
  border-top: 1px solid var(--color-linea);
  padding-top: var(--space-5);
}

.guia__cuerpo { padding: 0 var(--space-5) var(--space-5); }
.guia__cuerpo p {
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  line-height: 1.65;
  margin-bottom: var(--space-3);
}
.guia__lista { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.guia__item {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-tinta-suave);
}
.guia__item::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primario);
}
.guia__item strong { color: var(--color-tinta); }
.guia__item--sub { margin-left: var(--space-5); }

/* Los "qué NO hacer" venían marcados con ❌ en el documento. Se los distingue
   con color en vez de con el emoji, que se ve distinto en cada sistema. */
.guia__item--aviso::before {
  content: "✕";
  background: none;
  color: #C0392B;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  top: 4px;
  width: auto; height: auto;
}
.guia__item--aviso strong { color: #C0392B; }


/* ==========================================================================
   41. EMBAJADORES DE OLIMP
   --------------------------------------------------------------------------
   Prueba social: los atletas del equipo internacional de Olimp usan la misma
   línea que traemos. Retratos cuadrados, nombre debajo, sin biografía
   (no tenemos esos datos confirmados; ver data.js).
   ========================================================================== */
.embajadores__intro {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--color-tinta-suave);
}
/* --- LA GRILLA: CINCO POR FILA ------------------------------------------
   Cinco y no `auto-fit` a propósito. Con auto-fit el navegador decide
   cuántas entran, y entraban seis o siete según el ancho: los 10
   nutricionistas terminaban en filas de 7+3, con la segunda a medio llenar.
   Con cinco fijos los 4 atletas hacen una fila justa y las 10
   nutricionistas dos. Los cortes de abajo bajan de a dos para que eso se
   mantenga en pantallas chicas. */
.embajadores__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 1000px) { .embajadores__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .embajadores__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- LA FICHA -----------------------------------------------------------
   Tarjeta vertical 3:4 con la foto a sangre y el nombre encima, abajo.
   Reemplaza al avatar redondo de 130px: las fotos de atletas son de
   competencia y de cuerpo entero, y el circulo les recortaba la cara
   perdiendo justo lo que las hacia buenas. */
.embajador {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--color-fondo-suave);
  text-decoration: none;
  color: #fff;
  /* Un aro de 1px por dentro. Cuatro de las fotos son de estudio con fondo
     blanco: sin esto, la mitad de arriba de la tarjeta se funde con el blanco
     de la pagina y la esquina redondeada desaparece. Va como box-shadow
     interior y no como borde para que no empuje el contenido ni un pixel. */
  box-shadow: inset 0 0 0 1px rgba(10,10,11,.10);
}
.embajador__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 520ms cubic-bezier(.2,.7,.3,1);
}
.embajador:hover .embajador__foto { transform: scale(1.05); }

/* El velo. Sin esto el nombre en blanco se pierde sobre las fotos claras
   -hay cuatro con fondo blanco de estudio- y no hay forma de leerlo. */
.embajador__velo {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top,
              rgba(8,8,9,.92) 12%, rgba(8,8,9,.55) 48%, rgba(8,8,9,0) 100%);
  pointer-events: none;
}
.embajador__pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.embajador__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: var(--fs-sm);
  line-height: 1.12;
  color: #fff;
}

/* ==========================================================================
   42. DIFERENCIALES DEL CATÁLOGO (página de producto)
   --------------------------------------------------------------------------
   Los cuatro puntos con los que el catálogo oficial explica por qué el
   producto no es uno más. Van en dos columnas: son textos largos y en una
   sola columna la línea se vuelve incómoda de leer.
   ========================================================================== */
.dif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  max-width: 940px;
  margin-inline: auto;
}
.dif {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-linea);
  border-left: 3px solid var(--color-primario);
  border-radius: var(--radio);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-8);
}
/* EL NÚMERO  ·  8/10/2026
   Grande, naranja y traslúcido. Ocupa el lugar que antes era margen vacío,
   así que no empuja nada: la tarjeta mide lo mismo que antes y gana un
   ancla visual. Va detrás del texto -z-index 0 contra 1- para que nunca
   compita con lo que hay que leer. */
.dif__n {
  position: absolute;
  left: var(--space-3);
  top: var(--space-4);
  z-index: 0;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--color-primario);
  opacity: 0.28;
}
.dif__titulo,
.dif__texto { position: relative; z-index: 1; }
.dif__titulo {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   CÓMO SE TOMA  ·  el bloque que salió del acordeón
   --------------------------------------------------------------------------
   De toda la ficha de uso, la dosificación es lo único que se necesita
   siempre. Estaba plegada en el segundo de siete acordeones. Acá queda a la
   vista, con el fondo claro y el borde naranja que ya usan las tarjetas de
   diferenciales, para que se lea como parte del mismo sistema y no como un
   bloque pegado aparte.
   ========================================================================== */
.guia__destacado {
  background: #fff;
  border: 1px solid var(--color-linea);
  border-left: 3px solid var(--color-primario);
  border-radius: var(--radio);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.guia__destacado-titulo {
  font-size: var(--fs-md);
  margin: 0 0 var(--space-3);
  color: var(--color-primario-texto);
}
.guia__destacado .guia__cuerpo { padding: 0; }
.dif__texto {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-tinta-suave);
  margin: 0;
}

/* Nombre de un aliado que todavía no mandó su logo: en vez de dejar el hueco
   se muestra el nombre, con un peso parecido al de los logos que lo rodean. */
/* Aliado que todavía no mandó su logo: se muestra el nombre.

   Sin recuadro punteado: al lado de logos a color, un recuadro de línea
   cortada parece un error de carga y no "falta este archivo". Así, con la
   tipografía de títulos, se lee como un logotipo más y no desentona. */
.aliados__nombre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 46px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--color-tinta);
  opacity: .82;
}
/* Etiqueta del panel admin que dice si el comercio tiene logo cargado */
.admin-tienda__logo { font-size: 12px; color: var(--color-tinta-suave); white-space: nowrap; }

/* El precio adentro del botón "Agregar al carrito". producto.js lo escribe
   siempre, pero en este diseño no se muestra: lo agregó la propuesta de
   rediseño (assets/css/tema-2026.css) y ahí se enciende. */
.btn__precio { display: none; }

/* Qué variante se está por agregar, dentro del botón  ·  19/10/2026.
   En una línea aparte y más chico: el botón sigue diciendo "Agregar al
   carrito" como acción, y debajo aclara sobre qué. */
.btn__variante {
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  opacity: .82;
  margin-top: 2px;
  letter-spacing: .01em;
}
.btn__variante:empty { display: none; }


/* ==========================================================================
   40. MEDIDOR DE ENVÍO GRATIS (carrito drawer)
   --------------------------------------------------------------------------
   Solo aparece si VITALICA_CONFIG.envio.gratisDesde tiene un número. Lo dibuja
   medidorEnvio() en assets/js/main.js.

   La barra usa un <span> con width en línea en vez de una animación: el valor
   cambia al agregar o quitar productos y una transición de ancho lo hace
   legible sin que parezca que la página se recarga.
   ========================================================================== */
.envio-medidor {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-linea);
  background: var(--color-fondo-suave);
}
.envio-medidor__texto {
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
  margin-bottom: var(--space-2);
}
.envio-medidor__texto strong {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--color-tinta);
}
.envio-medidor__barra {
  height: 6px;
  border-radius: var(--radio-pill);
  background: var(--color-linea);
  overflow: hidden;
}
.envio-medidor__barra span {
  display: block;
  height: 100%;
  background: var(--color-primario);
  transition: width 280ms ease;
}
/* Cuando ya se llegó, el verde dice "listo" mejor que el naranja de marca,
   que acá significa "te falta". */
.envio-medidor--logrado { background: #EDF7F1; }
.envio-medidor--logrado .envio-medidor__barra span { background: var(--color-exito); }
.envio-medidor--logrado .envio-medidor__texto strong { color: var(--color-exito); }

@media (prefers-reduced-motion: reduce) {
  .envio-medidor__barra span { transition: none; }
}

/* La etiqueta "Destacado" la agregó la propuesta de rediseño: en este diseño
   no se muestra, para que la grilla siga viéndose como estaba.
   Se enciende en assets/css/tema-2026.css. */
.tag--destacado { display: none; }


/* En la ficha de producto, el botón flotante de WhatsApp se acostaba encima
   del botón de comprar en pantallas medianas (una ventana de ~975 px, o media
   pantalla). Tapaba justo la acción principal.
   Arriba de 760 px se oculta: esa misma ficha ya tiene su propio botón
   "Consultar por WhatsApp" abajo del de comprar, así que no se pierde nada.
   Abajo de 760 px se queda, porque ahí la barra fija ya lo empuja hacia
   arriba y no hay choque. */
@media (min-width: 761px) {
  body.con-compra-fija .whatsapp-flotante { display: none; }
}

/* Aviso de "esta foto es de otra presentación" (ficha de producto).
   Lo llena refrescar() en assets/js/pages/producto.js y solo aparece cuando
   falta el packshot del envase elegido. Va discreto a propósito: es una
   aclaración honesta, no una advertencia. */
.producto__nota-foto {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-tinta-suave);
  text-align: center;
}


/* ==========================================================================
   41. EMBAJADOR SIN FOTO  ·  placa con las iniciales
   --------------------------------------------------------------------------
   Los cinco embajadores de Vitalica están cargados (salen de los contratos
   firmados) pero todavía no hay foto de ninguno. En vez de un <img> roto, se
   dibuja una placa con las iniciales y el borde cortado, igual que el disco
   del sabor sin packshot: se lee como "falta esto", no como una decisión.
   Desaparece sola en cuanto se carga la ruta de la foto en data.js.
   ========================================================================== */
.embajador__foto--falta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fondo-suave);
  color: var(--color-tinta-suave);
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 0.04em;
}
/* El campo 'disciplina' hoy viene vacio en todos -la ciudad se saco el
   24/9- pero si volviera, va bajo el nombre y sobre el velo. */
.embajador__disciplina {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.72);
}
.embajador__ig {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255,255,255,.72);
  transition: color 200ms ease;
}
.embajador:hover .embajador__ig { color: var(--color-primario); }

/* Texto solo para lectores de pantalla. Se usa en etiquetas que en pantalla
   se entienden por contexto pero que sin nombre quedan mudas —por ejemplo el
   selector de orden del catálogo, que se ve como una lista desplegable pero
   no dice de qué. No se usa display:none porque eso también lo oculta del
   lector, que es justo lo contrario de lo que se busca. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   43. CATÁLOGO CON PANEL DE FILTROS
   --------------------------------------------------------------------------
   El panel lateral, el contador y el selector de orden los agregó la
   propuesta de rediseño. En ESTE diseño no se muestran: la página sigue
   filtrando con los chips de arriba, como estaba.
   Se encienden en assets/css/tema-2026.css (sección 22).
   ========================================================================== */
.catalogo__filtros,
.catalogo__barra { display: none; }

/* El formulario del newsletter puede partirse en dos renglones. Hoy entra en
   uno, pero es una fila de campo + botón dentro de un ancho que depende de la
   pantalla: si el botón crece —por texto más largo o por otro diseño— sin
   esto empuja la página entera y aparece scroll horizontal. Pasó. */
.newsletter__form { flex-wrap: wrap; }
.newsletter__form input { min-width: 12rem; }

/* La foto de los mosaicos de objetivo la agregó la propuesta de rediseño.
   En este diseño no se muestra: cada mosaico tiene su degradado de color.
   Se enciende en assets/css/tema-2026.css. */
.categoria-card__foto { display: none; }

/* La foto de las tarjetas de guía la agregó la propuesta de rediseño; en este
   diseño la portada sigue siendo un bloque de color. Se enciende en
   assets/css/tema-2026.css. */
.card-articulo__foto { display: none; }

/* La tira de tres fotos de "Quiénes somos" la agregó la propuesta de
   rediseño. En este diseño no se muestra. Se enciende en tema-2026.css. */
.tira-marca { display: none; }

/* La foto de los pilares de "Ciencia real" la agregó la propuesta de
   rediseño; en este diseño sigue el ícono gris. Se enciende en tema-2026. */
.pilar__foto { display: none; }


/* ==========================================================================
   40. EMBAJADORES Y NUTRICIONISTAS, EN DOS GRUPOS APILADOS
   --------------------------------------------------------------------------
   Pedido original: "en el apartado de embajadores, que sea 2 columnas, una
   de los embajadores y otra de los nutricionistas". Se hizo asi y estuvo
   asi hasta el 1/10/2026.

   POR QUE SE DEJARON DE USAR DOS COLUMNAS
   Son 4 atletas contra 10 nutricionistas. Dos columnas con esa diferencia
   siempre dejan la derecha colgando tres filas mas abajo que la izquierda,
   y ademas el ancho de media pagina obligaba a fichas chicas. No habia
   retoque que lo arreglara: era aritmetica, no diseno.

   Apilados, cada grupo usa el ancho entero. Entran 5 por fila, asi que los
   atletas llenan una fila justa y las nutricionistas dos. La separacion
   entre los dos grupos la hace la linea bajo cada titulo, que cumple el
   mismo papel que cumplia la raya vertical: que se lean como dos listas y
   no como una grilla de catorce.
   ========================================================================== */
.embajadores__grupos {
  margin-top: var(--space-7);
}
.embajadores__grupo + .embajadores__grupo {
  margin-top: var(--space-7);
}
/* Titulo, descripcion y cantidad en un solo renglon, con la linea abajo.
   La cantidad va al final y empujada por el margin-left:auto: es un dato
   util -cuanta gente hay- y de paso cierra el renglon a la derecha. */
.embajadores__cabecera {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-linea);
  padding-bottom: var(--space-3);
}
.embajadores__columna-titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  margin: 0;
  white-space: nowrap;
}
.embajadores__columna-texto {
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  margin: 0;
}
.embajadores__cuenta {
  margin-left: auto;
  color: var(--color-tinta-suave);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* El grupo que todavía no tiene a nadie: un renglón que explica, no un
   hueco. Con borde punteado, que es como se dibuja "acá va algo". */
.embajadores__vacio {
  margin: 0;
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--color-linea);
  border-radius: var(--radio-lg);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  text-align: center;
}


/* ==========================================================================
   43. EL VISOR DE FOTOS  ·  la imagen en grande
   --------------------------------------------------------------------------
   Se abre tocando la foto del producto. Ocupa la pantalla entera con el
   fondo desenfocado, que es donde el vidrio de verdad se luce: detrás hay
   toda la página.

   Va en styles.css y NO en el tema, aunque el vidrio sea del 2026, porque
   el visor lo arma producto.js en los dos diseños. Un elemento que existe
   en ambos necesita estilo en ambos: si viviera solo en el tema, en el
   diseño actual se abriría una caja sin formato encima de la página.
   ========================================================================== */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}
.visor--abierto { opacity: 1; visibility: visible; }

.visor__fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.visor__caja {
  position: relative;
  max-width: min(92vw, 1000px);
  max-height: 88vh;
  overflow: auto;
  border-radius: var(--radio-lg);
}

.visor__foto {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  margin-inline: auto;
  background: #fff;
  border-radius: var(--radio-lg);
  cursor: zoom-in;
  transition: transform 260ms ease;
  transform-origin: center center;
}
/* El acercamiento. Se hace con transform y no cambiando el ancho porque
   transform lo resuelve la placa de video: se mueve suave hasta en un
   teléfono modesto. */
.visor--cerca .visor__foto {
  transform: scale(2);
  cursor: zoom-out;
}
.visor--cerca .visor__caja { overflow: scroll; }

/* Los botones: círculos de vidrio, como las flechas del carrusel. */
.visor__btn {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease;
}
.visor__btn:hover { background: rgba(255, 255, 255, .26); }
.visor__btn--cerrar { top: 20px; right: 20px; font-size: 1.8rem; }
.visor__btn--antes  { left: 20px;  top: 50%; transform: translateY(-50%); }
.visor__btn--luego  { right: 20px; top: 50%; transform: translateY(-50%); }

.visor__pie {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 16px;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Con el visor abierto, el fondo no se desplaza: si no, al cerrarlo uno
   aparece en otra parte de la página sin saber por qué. */
body.con-visor { overflow: hidden; }

/* La foto del producto avisa que se puede ampliar. */
.producto__foto--ampliable { cursor: zoom-in; }
.producto__foto--ampliable:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 4px;
}

/* En celular los botones laterales se comen la foto: bajan al pie, al lado
   del contador. */
@media (max-width: 560px) {
  .visor__btn--antes  { left: 16px;  top: auto; bottom: 18px; transform: none; }
  .visor__btn--luego  { right: 16px; top: auto; bottom: 18px; transform: none; }
  .visor__btn { width: 40px; height: 40px; }
  .visor__caja { max-width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  .visor, .visor__foto { transition: none; }
}


/* ==========================================================================
   44. LA CUENTA DEBAJO DEL BOTÓN  ·  "3 × Gs. 200.000"
   --------------------------------------------------------------------------
   Aparece solo cuando se lleva más de una unidad. Sirve para que los dos
   números de la ficha no se pisen: el grande de arriba es el precio de UNO
   y el del botón es el TOTAL. Sin este renglón, con cantidad 3 la página
   mostraba dos importes distintos y no se entendía cuál se iba a cobrar.
   ========================================================================== */
.producto__cuenta {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-tinta-suave);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   45. BUSCADOR — ATAJOS Y GUÍAS EN LOS RESULTADOS
   --------------------------------------------------------------------------
   Los atajos son los seis botones que aparecen con el campo vacío. Antes ahí
   había un cartel que no llevaba a ninguna parte.

   Y las guías de uso ahora salen entre los resultados: mucha gente busca
   "cómo tomar creatina", y eso lo contesta un artículo, no un envase. Van
   marcadas con una línea naranja a la izquierda para que se lean como otra
   cosa distinta a un producto.
   ========================================================================== */
.buscador__atajos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-4);
}
.buscador__atajo {
  padding: 8px 16px;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--color-tinta);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.buscador__atajo:hover {
  border-color: var(--color-primario);
  background: var(--color-fondo-suave);
}

.buscador__item--guia { border-left: 3px solid var(--color-primario); }
.buscador__item--guia img { object-fit: cover; }
.buscador__item-icono {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radio);
  background: var(--color-fondo-suave);
}


/* ==========================================================================
   47. EL BLOG  ·  listado de notas y nota suelta
   --------------------------------------------------------------------------
   Va en styles.css y no en el tema porque el blog es estructura, no estilo:
   tiene que verse bien en los dos diseños. Lo propio del 2026 (mayúsculas,
   vidrio, radios) se agrega aparte en tema-2026.css.

   DECISIONES QUE VALE LA PENA DEJAR ESCRITAS

   · La primera nota va grande y a dos columnas. Con cinco notas todas
     iguales, la sección se lee como un archivo muerto; con una destacada hay
     una puerta de entrada evidente.

   · El cuerpo de la nota se limita a 68ch de ancho. Es la medida de un
     renglón cómodo: más largo y el ojo se pierde al volver a la izquierda.
     Por eso la nota NO usa el ancho completo del contenedor aunque haya
     lugar de sobra.

   · Las tarjetas son <a> enteras, no un div con un enlace adentro. Así toda
     la tarjeta se puede tocar, que en celular es la diferencia entre acertar
     y no acertar.
   ========================================================================== */

/* --- Listado ------------------------------------------------------------ */
.noticias__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.noticias__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.noticias__filtro {
  padding: 8px 18px;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.noticias__filtro:hover { border-color: var(--color-tinta-suave); color: var(--color-tinta); }
.noticias__filtro.es-activo {
  background: var(--color-tinta);
  border-color: var(--color-tinta);
  color: #fff;
}

.noticias__vacio {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-tinta-suave);
}

/* --- Tarjeta ------------------------------------------------------------ */
.nota-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  background: var(--color-fondo);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.nota-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.nota-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-fondo-suave);
  overflow: hidden;
}
.nota-card__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.nota-card:hover .nota-card__foto { transform: scale(1.03); }

.nota-card__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}
.nota-card__etiqueta {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primario-texto);
}
.nota-card__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--color-tinta);
}
.nota-card__bajada {
  margin: 0;
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.nota-card__pie {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--color-tinta-suave);
  font-size: var(--fs-xs);
}

/* La destacada ocupa dos columnas y se acuesta: foto a un lado, texto al
   otro. Debajo de 760px vuelve a ser una tarjeta común, porque en un
   teléfono no hay dos columnas que ocupar. */
@media (min-width: 761px) {
  .nota-card--destacada {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .nota-card--destacada .nota-card__media {
    flex: 0 0 52%;
    /* Proporción fija y no `auto`: con `auto` la altura la manda la foto, y
       una portada vertical estiraba la tarjeta dejando medio metro de blanco
       al lado del texto. Con 3/2 la destacada mide siempre lo mismo, sirva
       la foto que sirva. */
    aspect-ratio: 3 / 2;
  }
  .nota-card--destacada .nota-card__cuerpo {
    justify-content: center;
    padding: var(--space-7);
  }
  .nota-card--destacada .nota-card__titulo { font-size: var(--fs-xl); }
}

/* --- Una nota ----------------------------------------------------------- */
.nota { padding-block: var(--space-7) var(--space-8); }

.nota__cabecera { max-width: 68ch; }
.nota__volver {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.nota__volver:hover { color: var(--color-primario-texto); }

.nota__cabecera h1 { margin-bottom: var(--space-3); }
.nota__bajada {
  font-size: var(--fs-md);
  color: var(--color-tinta-suave);
  line-height: 1.6;
}


/* LA PORTADA DE LA NOTA VA RECORTADA, NO ENTERA
   ------------------------------------------------------------------
   Antes era width:100% con height:auto, o sea que la foto entraba con la
   forma que tuviera. Y las que hay no son panorámicas: la del laboratorio
   es 900x750 y la de producción es 550x985, más alta que ancha.

   Puesta al ancho de la columna, esa última medía más de mil pixeles de
   alto: el lector abría la nota, veía un paredón de foto y tenía que
   arrastrar dos pantallas para llegar al primer párrafo. En una nota, la
   foto acompaña; el texto es lo que se vino a leer.

   Con aspect-ratio la caja manda y object-fit: cover recorta lo que sobra,
   así cualquier foto que suba marketing entra bien sin tener que pedirle
   que la recorte antes. El max-height es para las pantallas anchas, donde
   16/9 de 68ch ya empieza a ser demasiado.

   Va al mismo ancho que el texto y no al del contenedor: la nota se lee
   como una sola columna en vez de como una foto ancha con un texto
   angosto abajo. */
.nota__portada {
  display: block;
  width: 100%;
  max-width: 68ch;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  /* margin-inline: auto y no solo margin-block. Sin esto la foto se queda
     pegada al borde izquierdo del contenedor mientras la cabecera y el
     cuerpo, que sí se centran, quedan 300px más a la derecha. Se ve como si
     la página estuviera partida en dos. */
  margin: var(--space-6) auto;
  border-radius: var(--radio-lg);
}

/* El ancho de lectura. 68ch es lo que se lee sin esfuerzo; el resto del
   contenedor queda vacío a propósito. */
.nota__cuerpo { max-width: 68ch; }
.nota__cuerpo > * { margin-bottom: var(--space-4); }
.nota__cuerpo p {
  color: var(--color-tinta);
  line-height: 1.75;
}
.nota__cuerpo h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-lg);
}

.nota__lista { padding-left: 1.2em; }
.nota__lista li {
  margin-bottom: var(--space-2);
  line-height: 1.7;
  list-style: disc;
}

.nota__figura { margin: var(--space-6) 0; }
.nota__figura img {
  width: 100%;
  height: auto;
  border-radius: var(--radio-lg);
}
.nota__figura figcaption {
  margin-top: var(--space-2);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
}

.nota__cita {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primario);
  background: var(--color-fondo-suave);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.nota__cita p {
  margin: 0;
  font-size: var(--fs-md);
  font-style: italic;
}
.nota__cita cite {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  font-style: normal;
}

.nota__enlace a {
  color: var(--color-primario-texto);
  font-weight: 700;
}
.nota__enlace a:hover { text-decoration: underline; }

.nota__noesta {
  padding-block: var(--space-8);
  text-align: center;
}
.nota__noesta h1 { margin-bottom: var(--space-3); }
.nota__noesta p {
  color: var(--color-tinta-suave);
  margin-bottom: var(--space-5);
}


/* ==========================================================================
   LA PÁGINA DE CUENTA
   --------------------------------------------------------------------------
   Sin sesión es una caja angosta y centrada, como cualquier pantalla de
   ingreso: no hay nada más en la página, así que ponerla al ancho completo
   solo obligaría a recorrer el ojo de punta a punta para leer dos campos.

   Con sesión pasa a dos columnas, porque ahí sí hay varias cosas que conviene
   ver juntas sin bajar: los datos, la contraseña y abajo los pedidos.
   ========================================================================== */

.cuenta { padding-block: var(--space-7) var(--space-8); }

/* --- Sin sesión ---------------------------------------------------------- */
.cuenta__caja {
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  background: var(--color-fondo);
}

.cuenta__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-5);
  border-radius: var(--radio);
  background: var(--color-fondo-suave);
}
.cuenta__tab {
  padding: 10px 8px;
  border: 0;
  border-radius: calc(var(--radio) - 4px);
  background: transparent;
  color: var(--color-tinta-suave);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.cuenta__tab.es-activo {
  background: var(--color-fondo);
  color: var(--color-tinta);
  box-shadow: var(--sombra);
}

.cuenta__titulo { font-size: var(--fs-xl); margin: 0 0 var(--space-2); }
.cuenta__intro {
  margin: 0 0 var(--space-5);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.cuenta__nota {
  margin: 0 0 var(--space-4);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.cuenta__pie {
  margin: var(--space-5) 0 0;
  text-align: center;
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
}
.cuenta__pie a { color: var(--color-primario-texto); font-weight: 600; }

/* El texto de ayuda debajo de un campo. Explica lo que el campo no puede
   decir solo: por qué pedimos el celular, cuánto tiene que medir la clave. */
.campo__ayuda {
  color: var(--color-tinta-suave);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* Dos controles que son UN dato: el tipo de documento y el número.
   Van en la misma fila porque elegir "RUC" y escribirlo son un solo gesto;
   separados en dos campos parecen dos preguntas distintas. El select se
   queda en su ancho y el número se lleva el resto. */
.campo-doble {
  display: grid;
  grid-template-columns: minmax(104px, auto) 1fr;
  gap: 8px;
  align-items: start;
}
.campo-doble > * { min-width: 0; }

@media (max-width: 420px) {
  /* En un celular angosto, el select al 100 % deja el número demasiado corto
     para leerlo mientras se escribe. Mejor uno debajo del otro. */
  .campo-doble { grid-template-columns: 1fr; }
}

.cuenta__error {
  margin: 0 0 var(--space-4);
  padding: 11px 14px;
  border-radius: var(--radio);
  background: #FBE7E5;
  color: #A3342F;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.cuenta__aviso {
  margin: 0 0 var(--space-4);
  padding: 11px 14px;
  border-radius: var(--radio);
  background: #E6F1EB;
  color: #1F6B4A;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.btn--bloque { width: 100%; justify-content: center; }

/* --- Con sesión ---------------------------------------------------------- */
.cuenta__cabecera { margin-bottom: var(--space-6); }
.cuenta__cabecera h1 { margin: 0; }

.cuenta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .cuenta__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.cuenta__bloque {
  padding: var(--space-5);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio-lg);
  background: var(--color-fondo);
}
.cuenta__bloque h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-md);
}
.cuenta__bloque--ancho { margin-top: var(--space-5); }

.cuenta__pedidos { list-style: none; margin: 0; padding: 0; }
.cuenta__pedido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-linea);
}
.cuenta__pedido:last-child { border-bottom: 0; }
.cuenta__pedido-fecha {
  display: block;
  color: var(--color-tinta-suave);
  font-size: var(--fs-xs);
}
/* La factura dentro del pedido, en la cuenta del cliente  ·  19/10/2026.
   El CDC parte palabras porque son 44 dígitos seguidos: sin esto desborda
   la fila en celular. */
.cuenta__factura {
  margin-top: 8px;
  padding: 8px 10px;
  background: #F4F6F8;
  border-radius: 8px;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.cuenta__factura strong { display: block; }
.cuenta__cdc {
  display: block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78em;
  color: var(--color-tinta-suave);
  word-break: break-all;
  margin-top: 2px;
}
.cuenta__cdc-link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 600;
  color: var(--color-primario);
}

.cuenta__pedido-der { display: flex; align-items: center; gap: var(--space-3); }
.cuenta__pedido-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.cuenta__pedido-estado {
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  background: var(--color-fondo-suave);
  color: var(--color-tinta-suave);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cuenta__salidas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-linea);
}

/* El enlace de cuenta en el encabezado. Con sesión muestra el nombre al lado
   del icono; sin sesión, solo el icono, para no robarle lugar al carrito. */
.icono-accion--cuenta { display: inline-flex; align-items: center; gap: 7px; }
.icono-accion__nombre {
  font-size: var(--fs-sm);
  font-weight: 600;
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 980px) { .icono-accion__nombre { display: none; } }
/* Punto naranja sobre el icono cuando a la cuenta le falta el teléfono.
   Sin teléfono no se puede coordinar una entrega, así que conviene que se
   note antes de llegar al checkout y no ahí. */
.icono-accion--incompleto { position: relative; }
.icono-accion--incompleto::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primario);
  box-shadow: 0 0 0 2px var(--color-fondo);
}

/* El separador entre el formulario de correo y el botón de Google. */
.cuenta__o {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
  color: var(--color-tenue, var(--color-tinta-suave));
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.cuenta__o::before,
.cuenta__o::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-linea);
}
/* Google dibuja su propio botón y no deja cambiarle casi nada: es condición
   de uso de la marca. Solo se lo centra. */
.cuenta__google { display: flex; justify-content: center; min-height: 44px; }

/* "Comprando como X" arriba del checkout. Discreto: es una confirmación, no
   un aviso. Si fuera llamativo, la primera reacción sería desconfiar. */
.checkout__quien {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-4);
  padding: 10px 14px;
  border-radius: var(--radio);
  background: var(--color-fondo-suave);
  color: var(--color-tinta-suave);
  font-size: var(--fs-sm);
}
.checkout__quien strong { color: var(--color-tinta); }
.checkout__quien a { color: var(--color-primario-texto); font-weight: 600; margin-left: 6px; }

/* --------------------------------------------------------------------------
   EL MENÚ DE LA CUENTA en el encabezado
   Aparece solo con sesión abierta; main.js lo engancha al icono.
   -------------------------------------------------------------------------- */
.cuenta-menu { position: relative; display: inline-flex; }

.cuenta-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  background: var(--color-fondo);
  box-shadow: 0 8px 28px -10px rgba(16, 25, 45, .28);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* El correo, para saber con qué cuenta estás. En una computadora compartida
   es la diferencia entre mandar el pedido a tu casa o a la de otro. */
.cuenta-menu__quien {
  margin: 0;
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--color-linea);
  color: var(--color-tinta-suave);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cuenta-menu__panel a,
.cuenta-menu__panel button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radio-sm, 8px);
  background: transparent;
  color: var(--color-tinta);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.cuenta-menu__panel a:hover,
.cuenta-menu__panel button:hover { background: var(--color-fondo-suave); }
.cuenta-menu__panel button { color: var(--color-tinta-suave); }

/* Al abrirse, el icono queda marcado: si no, no se ve de dónde salió el
   panel. */
.cuenta-menu.es-abierto .icono-accion--cuenta { color: var(--color-primario); }

/* --------------------------------------------------------------------------
   VIDEO DE FONDO EN EL HERO
   Se apoya sobre .hero__cover, que ya sabe cubrir el rectángulo. El video va
   encima de la foto: la foto queda abajo como respaldo permanente, así que si
   el video no carga no hay nada que arreglar.
   -------------------------------------------------------------------------- */
.hero__video {
  z-index: 1;
  /* Un video no se puede "romper" visiblemente como una imagen, pero si el
     archivo falla el navegador deja un rectángulo negro. Transparente deja
     ver la foto de abajo. */
  background: transparent;
}

/* --------------------------------------------------------------------------
   CIENCIA REAL con el video vertical al costado
   --------------------------------------------------------------------------
   El video es 9:16 porque viene de Instagram. En vez de recortarlo para que
   entre en un espacio ancho, se le da el espacio que le corresponde y los
   pilares se acomodan al lado.

   Debajo de 900px el video pasa arriba y los pilares abajo: en un teléfono
   dos columnas dejarían el video del ancho de un dedo.
   -------------------------------------------------------------------------- */
.ciencia-con-video {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .ciencia-con-video {
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: var(--space-7);
  }
}

.ciencia-video {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}
.ciencia-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radio-lg);
  background: #0A0A0B;
  /* El mismo peso visual que las tarjetas de la sección, para que se lea
     como parte del conjunto y no como algo pegado encima. */
  box-shadow: 0 10px 40px -16px rgba(0, 0, 0, .55);
}

/* Con el video al lado, los pilares tienen menos ancho: pasan a una columna
   y se leen como una lista, en vez de apretarse en tres. */
.pilares-grid--angosta { grid-template-columns: 1fr; }
@media (min-width: 1180px) {
  .pilares-grid--angosta { grid-template-columns: repeat(3, 1fr); }
}




/* ==========================================================================
   AVISO DE OLIMP — la pieza a un costado, nuestra palabra al otro
   --------------------------------------------------------------------------
   Antes esto era una banda de ancho completo con la pieza sola. Se probó
   estirada, con techo y enmarcada sobre negro, y las tres veces se veía lo
   mismo: una publicidad pegada en el medio de la página. Que es exactamente
   lo que la gente aprendió a saltear.

   Partida en dos deja de serlo: el video pasa a ser la ilustración de una
   sección con volanta, título, datos y botón, en castellano y en el mismo
   contenedor que el resto del home.

   Y VA EN OSCURO. Partida pero sobre blanco quedaba correcta y apagada: una
   sección más entre otras, cuando lo que tiene que hacer es avisar que entró
   un sabor nuevo. El fondo negro la despega de la página sin necesidad de
   agrandarla, deja que la luz verde de la pieza se derrame de verdad y pone
   el naranja del botón a brillar en vez de competir con el blanco. Es el
   mismo recurso que usa cualquier marca para un lanzamiento: bajar las luces
   alrededor de lo que se quiere mostrar.
   ========================================================================== */

.aviso-nuevo {
  position: relative;
  overflow: hidden;
  background: #0A0A0B;
  color: #fff;
}

/* El resplandor verde detrás de la pieza. Sale del propio aviso —ese verde
   es el del packshot— y es lo que hace que la sección se vea iluminada desde
   adentro en vez de ser un rectángulo negro. */
.aviso-nuevo::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(60% 55% at 28% 45%,
    rgba(170, 205, 60, 0.20) 0%,
    rgba(170, 205, 60, 0.07) 42%,
    rgba(10, 10, 11, 0) 72%);
}

.aviso-nuevo .contenedor { position: relative; z-index: 1; }

.aviso-nuevo__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: center;
}

/* --- La pieza ------------------------------------------------------------
   Conserva su 16:9 exacto, así que nunca se recorta: se ve el titular de
   Olimp, el envase y la letra legal de abajo, que en un suplemento no es
   decoración. Al ocupar poco más de la mitad del ancho, en un monitor grande
   mide unos 600 px y deja de comerse la pantalla. */
.aviso-nuevo__pieza {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radio-lg, 18px);
  background: #0d0f08;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(170, 205, 60, 0.18);
}

/* La imagen y el video ocupan el mismo lugar, uno encima del otro. La imagen
   está siempre; el video, cuando se puede, la tapa. */
.aviso-nuevo__medio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El filo de arriba, en el naranja nuestro cruzando el verde de Olimp. Ata
   la pieza de la marca al sitio sin ponerle un logo encima. */
.aviso-nuevo__pieza::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg,
    var(--color-primario) 0%,
    #BFD73A 25%,
    var(--color-primario) 50%,
    #BFD73A 75%,
    var(--color-primario) 100%);
  background-size: 200% 100%;
  animation: aviso-filo 7s linear infinite;
}
@keyframes aviso-filo {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}

/* --- La chapita de NUEVO SABOR -------------------------------------------
   Es lo primero que tiene que entrar por el ojo, así que es una chapita
   encendida y no un renglón gris como las volantas del resto del sitio. El
   halo late una vez cada tres segundos: lo suficiente para que el ojo
   vuelva, poco para que moleste. */
.aviso-nuevo__chapa {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radio-pill, 999px);
  background: var(--color-primario);
  color: #0A0A0B;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: aviso-chapa 3s ease-in-out infinite;
}
@keyframes aviso-chapa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 123, 32, 0.50); }
  55%      { box-shadow: 0 0 26px 5px rgba(242, 123, 32, 0.45); }
}

/* --- El título -----------------------------------------------------------
   Grande de verdad. Es un lanzamiento: si el nombre del sabor no se lee
   desde el otro lado de la habitación, no hay noticia. */
.aviso-nuevo__titulo {
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--space-3);
}

.aviso-nuevo__bajada {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
  max-width: 44ch;
}

/* Los datos van como fichitas quietas y no como una cinta que desfila. La
   cinta era vistosa pero reforzaba justo lo que queríamos sacar: una tira de
   publicidad cruzando la página. */
.aviso-nuevo__datos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
}
.aviso-nuevo__datos li {
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radio-pill, 999px);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.05);
}

/* Al botón le pasa un brillo cada tanto. Está quieto el 78% del tiempo a
   propósito: un destello permanente es una luz de emergencia, uno espaciado
   es una invitación. */
.aviso-nuevo__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 30px rgba(242, 123, 32, 0.28);
}
.aviso-nuevo__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 62%);
  transform: translateX(-130%);
  animation: aviso-brillo 5s ease-in-out infinite;
}
@keyframes aviso-brillo {
  0%, 78% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* --- La entrada ----------------------------------------------------------
   Llega apagada y se arma cuando entra en pantalla (home.js pone
   .es-visible). La pieza viene desde la izquierda y el texto desde la
   derecha, hacia el centro: el gesto arma la sección en vez de solo
   mostrarla. */
.aviso-nuevo__pieza,
.aviso-nuevo__texto {
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.aviso-nuevo__pieza { transform: translateX(-18px); }
.aviso-nuevo__texto { transform: translateX(18px); transition-delay: 0.12s; }

.aviso-nuevo.es-visible .aviso-nuevo__pieza,
.aviso-nuevo.es-visible .aviso-nuevo__texto {
  opacity: 1;
  transform: none;
}

/* --- Celular -------------------------------------------------------------
   Una columna: el video arriba, el texto abajo. Y acá está la otra ganancia
   del formato partido: la pieza mantiene su 16:9 en vez de recortarse a 4:5,
   que era lo que en el teléfono dejaba el envase gigante y se comía el
   titular de Olimp y la letra legal. Son 210 px de alto en una pantalla de
   375, que alcanzan de sobra porque lo que hay que leer está debajo, escrito
   en castellano. */
@media (max-width: 860px) {
  .aviso-nuevo__caja { grid-template-columns: 1fr; gap: var(--space-5); }
  .aviso-nuevo__pieza { transform: translateY(16px); }
  .aviso-nuevo__texto { transform: translateY(16px); }
  .aviso-nuevo__bajada { max-width: none; }
  .aviso-nuevo__btn { width: 100%; justify-content: center; text-align: center; }
}

/* --- El freno ------------------------------------------------------------
   Quien pidió "reducir movimiento" lo pidió por algo: hay gente a la que el
   movimiento en pantalla le da mareo. Se apagan el filo, el latido de la
   chapita, el brillo del botón y la entrada; la sección queda quieta con
   todo su contenido a la vista. El <video> directamente no se escribe (lo
   decide home.js). */
@media (prefers-reduced-motion: reduce) {
  .aviso-nuevo__video { display: none; }
  .aviso-nuevo__pieza::before,
  .aviso-nuevo__chapa,
  .aviso-nuevo__btn::after { animation: none; }
  .aviso-nuevo__btn::after { display: none; }
  .aviso-nuevo__pieza,
  .aviso-nuevo__texto { opacity: 1; transform: none; transition: none; }
}


/* ==========================================================================
   DIAPOSITIVA DEL HERO EN MODO AVISO
   --------------------------------------------------------------------------
   Para las piezas que Olimp manda terminadas (ver el modo 'aviso' en
   home.js). Estas reglas van en la hoja BASE y no solo en tema-2026.css: la
   primera versión estaba únicamente en el tema nuevo y con el diseño actual
   la pieza salía con el velo oscuro encima y los botones en el medio, o sea
   el problema que el modo venía a resolver.

   Se le saca el velo —existe para que se lea un titular que acá no
   escribimos— y los botones bajan al pie, porque en el medio a la izquierda
   caían justo sobre el titular del propio aviso.
   ========================================================================== */
.hero__slide--aviso::after { content: none; }

.hero__slide--aviso .hero__cover { object-position: 50% 72%; }

.hero__slide--aviso .hero__inner {
  /* height 100% y no solo align-content: end. El interior trae un
     min-height propio de 448 px y la diapositiva puede ser mas alta -la
     altura del carrusel la fija la diapositiva mas alta de todas-, asi que
     sin esto el bloque se quedaba arriba y los botones caian justo encima
     del "Royal taste" del video, que es lo que este modo vino a evitar. */
  height: 100%;
  align-content: end;
  /* space-8 y no space-6: con el valor chico el boton se apoyaba justo sobre
     la letra legal del aviso ("*imagen, producto saborizado y coloreado"),
     que es lo mismo que taparla. Un escalon mas arriba la deja leerse y el
     boton sigue bien lejos del titular. */
  padding-bottom: var(--space-8);
}

/* Sin velo, un botón claro sobre el verde del aviso desaparece. */
.hero__slide--aviso .hero__acciones .btn {
  box-shadow: 0 6px 20px rgba(10, 10, 12, 0.32);
}

@media (max-width: 760px) {
  .hero__slide--aviso .hero__inner { padding-bottom: var(--space-8); }
  .hero__slide--aviso .hero__cover { object-position: 62% 45%; }
}


/* ==========================================================================
   LA ESCALA DEL MAYORISTA EN LA FICHA
   --------------------------------------------------------------------------
   Los cortes por cantidad del comercio que está mirando. Solo existe en el
   HTML si hay sesión de mayorista: para cualquier otro visitante este bloque
   no se escribe (ver producto.js). Esconder precios con CSS sería publicarlos.

   Se ve como una tabla chica y seria, no como una promoción: el mayorista no
   necesita que le griten el descuento, necesita leer rápido en qué tramo está
   y cuánto le falta para el siguiente.
   ========================================================================== */
/* La invitación a pedir cuenta mayorista, debajo del precio. Discreta a
   propósito: le habla al que revende sin estorbarle al que compra uno. */
.producto__mayorista {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
}
.producto__mayorista a {
  color: var(--color-primario-texto);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.producto__mayorista a:hover { color: var(--color-primario-oscuro); }

.producto__cortes {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  background: var(--color-fondo-suave);
}

.producto__cortes-titulo {
  margin: 0 0 var(--space-2);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}

.producto__cortes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}

.producto__cortes-lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radio-sm);
  color: var(--color-tinta-suave);
}

/* El tramo en el que está parado ahora, según la cantidad elegida. Es lo que
   convierte la tabla en "te falta poco para el siguiente". */
.producto__cortes-lista li.es-actual {
  background: #fff;
  color: var(--color-tinta);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--color-linea);
}