/* ==========================================================================
   TIENDA GESTOS · SISTEMA DE COMPONENTES
   --------------------------------------------------------------------------
   Movil primero y claro primero. Sin framework, sin dependencias.

   Dos reglas que atraviesan todo el archivo:

   1. UNA SOLA COSA NARANJA POR PANTALLA, y siempre es el boton de comprar.
      Si todo grita, no se oye nada.

   2. EL COLOR NUNCA LLEVA LA INFORMACION SOLO. Cada ruta tiene color, nombre
      e icono. Los colores vivos del logo miden entre 1.2:1 y 4:1 sobre blanco
      (medido en tools/08_paleta_accesible.py), asi que van de barra y de punto,
      nunca de fondo con texto encima.
   ========================================================================== */

@import url('tokens.css');

/* ==========================================================================
   0. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: var(--naranja-tinta); text-decoration: none; }
a:hover { text-decoration: underline; }

/* El foco tiene que verse. Es como navega quien usa teclado o lector. */
:focus-visible {
  outline: 3px solid var(--azul-tinta);
  outline-offset: 2px;
  border-radius: 4px;
}

.envoltura {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--e4);
}

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

/* Salto directo al contenido, para teclado y lectores de pantalla */
.saltar {
  position: absolute; left: var(--e4); top: -60px;
  background: var(--tinta); color: #fff;
  padding: var(--e3) var(--e4); border-radius: var(--r-chico);
  z-index: 200; transition: top var(--rapido);
}
.saltar:focus { top: var(--e3); }


/* ==========================================================================
   1. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  min-height: 48px;                  /* objetivo tactil comodo con el pulgar */
  padding: 0 var(--e5);
  border: 1.5px solid transparent;
  border-radius: var(--r-pildora);
  background: var(--papel-2);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido),
              transform var(--rapido), box-shadow var(--rapido);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn svg { flex-shrink: 0; }

/* El unico naranja de la pantalla */
.btn--comprar {
  background: var(--accion);
  color: var(--accion-texto);
  box-shadow: var(--s2);
}
.btn--comprar:hover { background: var(--accion-hover); }

.btn--linea {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--tinta);
}
.btn--linea:hover { background: var(--papel-2); border-color: var(--tinta-50); }

.btn--suave { background: var(--papel-3); color: var(--tinta); }
.btn--suave:hover { background: var(--borde); }

.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { filter: brightness(.94); }

.btn--bloque { width: 100%; }
.btn--grande { min-height: 56px; font-size: 16px; padding: 0 var(--e6); }
.btn--chico  { min-height: 38px; font-size: 14px; padding: 0 var(--e4); }

.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn-icono {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--r-medio);
  background: transparent; color: var(--tinta);
  cursor: pointer; position: relative;
  transition: background var(--rapido);
}
.btn-icono:hover { background: var(--papel-3); }


/* ==========================================================================
   2. BARRA SUPERIOR
   ========================================================================== */
.barra {
  position: sticky; top: 0; z-index: var(--z-barra);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.barra__fila {
  display: flex; align-items: center; gap: var(--e3);
  height: 62px;
}

/* Franja de confianza: una sola línea, discreta, sin competir con el logo
   ni el buscador. En móvil se acorta el texto en vez de partir a dos líneas
   -el alto fijo importa porque la barra es sticky y no puede "saltar". */
.franja-confianza {
  background: var(--papel-2);
  border-bottom: 1px solid var(--borde);
}
.franja-confianza__fila {
  display: flex; justify-content: center; gap: var(--e5);
  height: 30px;
  font-size: 12px; font-weight: 600; color: var(--tinta-70);
}
.franja-confianza__fila span {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.franja-confianza__fila svg { color: var(--exito, #2a9d5c); flex-shrink: 0; }

@media (max-width: 480px) {
  .franja-confianza__fila { gap: var(--e3); font-size: 11px; }
}

/* min-height y no height: el logo sigue midiendo 30px, pero el enlace que lo
   envuelve ocupa 44px de alto y por eso se puede tocar sin apuntar. */
.marca {
  display: flex; align-items: center; gap: var(--e2); flex-shrink: 0;
  min-height: 44px;
}
.marca:hover { text-decoration: none; }
.marca__logo { height: 30px; width: auto; }
.marca__lema {
  display: none; font-size: 12.5px; color: var(--tinta-50);
  padding-left: var(--e3); margin-left: var(--e1);
  border-left: 1px solid var(--borde);
}

.buscador { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.buscador__campo {
  width: 100%; height: 44px;
  padding: 0 var(--e4) 0 42px;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-pildora);
  background: var(--papel-2);
  font: inherit; font-size: 15px; color: var(--tinta);
  transition: border-color var(--rapido), background var(--rapido);
}
.buscador__campo::placeholder { color: var(--tinta-50); }
.buscador__campo:focus { background: var(--papel); border-color: var(--tinta-50); outline: none; }
.buscador__lupa {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--tinta-50); pointer-events: none;
}

.contador {
  position: absolute; top: 4px; right: 3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--accion); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: var(--r-pildora);
  border: 2px solid var(--papel);
}
.contador[hidden] { display: none; }

@media (min-width: 760px) {
  .marca__lema { display: block; }
  .barra__fila { height: 70px; gap: var(--e4); }
}


/* ==========================================================================
   3. PORTADA · "¿QUE QUIERES LOGRAR?"
   La tienda no abre con productos. Abre con una pregunta.
   ========================================================================== */
.portada { padding: var(--e6) 0 var(--e5); }

.portada__firma {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-70);
  margin-bottom: var(--e4);
}
.portada__firma i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accion); flex-shrink: 0;
}

.portada__titulo {
  font-size: clamp(30px, 8.2vw, 58px);
  font-weight: 800; letter-spacing: -.035em;
  margin-bottom: var(--e3);
}
.portada__titulo em {
  font-style: normal;
  color: var(--tinta-50);
  display: block;
}
.portada__bajada {
  font-size: clamp(15px, 4vw, 19px);
  color: var(--tinta-70);
  max-width: 54ch; margin-bottom: var(--e5);
}

/* --- las 6 rutas --- */
.rutas {
  display: grid; gap: var(--e3);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .rutas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .rutas { grid-template-columns: repeat(3, 1fr); gap: var(--e4); } }

.ruta {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) var(--e4) var(--e4) var(--e5);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-grande);
  background: var(--papel);
  text-align: left; cursor: pointer;
  overflow: hidden;
  transition: border-color var(--normal), box-shadow var(--normal),
              transform var(--normal);
}
.ruta:hover { border-color: var(--borde-fuerte); box-shadow: var(--s2); transform: translateY(-2px); }
.ruta:active { transform: translateY(0) scale(.99); }

/* La barra de color de la mano del logo. Decorativa: el nombre y el icono
   llevan la informacion, asi que quien no distingue el color no pierde nada. */
.ruta::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--color-ruta, var(--tinta-50));
}

.ruta__icono {
  flex-shrink: 0; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-medio);
  background: var(--velo-ruta, var(--papel-2));
  color: var(--tinta-ruta, var(--tinta));
}
/* Los tres van en su propia línea. Son <span>, así que sin este display
   quedan pegados en una sola línea larguísima y desbordan la página entera. */
.ruta__texto { min-width: 0; }
.ruta__nombre { display: block; font-size: 16.5px; font-weight: 700; margin-bottom: 3px; }
.ruta__bajada { display: block; font-size: 13.5px; color: var(--tinta-70); line-height: 1.45; }
.ruta__cuenta {
  display: block; margin-top: var(--e2);
  font-size: 12px; font-weight: 700; color: var(--tinta-50);
}

/* La ruta que el interes registrado del visitante pone primero. Sutil: un
   borde de color y una etiqueta chica, no un cambio dramatico -sigue siendo
   la misma tarjeta, solo con una senal de "esto podria interesarte". */
.ruta--sugerida { border-color: var(--color-ruta, var(--tinta-50)); border-width: 2px; }

/* Ruta seleccionada. Ahora que no hay chips duplicados, esta es la unica
   senal de que ruta esta filtrando, asi que tiene que ser inequivoca. */
.ruta[aria-pressed="true"] {
  border-color: var(--color-ruta, var(--tinta));
  border-width: 2px;
  background: var(--velo-ruta, var(--papel-2));
  box-shadow: var(--s2);
}
.ruta__etiqueta {
  position: absolute; top: var(--e3); right: var(--e3);
  padding: 2px 9px; border-radius: var(--r-pildora);
  background: var(--color-ruta, var(--tinta-50)); color: var(--tinta-sobre, #fff);
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}

/* --- franja de confianza --- */
.confianza {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}
@media (min-width: 860px) { .confianza { grid-template-columns: repeat(4, 1fr); } }

/* Los tres ejes -calidad, cumplimiento, satisfacción- van uno por columna
   desde tablet en adelante. En móvil siguen apilados a 1 por fila: con 3
   ítems, forzar 2 columnas deja uno solo huérfano en la segunda fila. */
.confianza--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .confianza--3 { grid-template-columns: repeat(3, 1fr); } }

.confianza__item { display: flex; gap: var(--e3); align-items: flex-start; }
.confianza__icono { flex-shrink: 0; color: var(--tinta-50); margin-top: 1px; }
.confianza__t { font-size: 14px; font-weight: 700; }
.confianza__d { font-size: 12.5px; color: var(--tinta-70); line-height: 1.4; }


/* ==========================================================================
   4. SECCIONES Y FILTROS
   ========================================================================== */
.seccion { padding: var(--e6) 0; }
.seccion__cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5);
}
.seccion__titulo { font-size: clamp(20px, 5vw, 27px); }
.seccion__bajada { font-size: 14px; color: var(--tinta-70); margin-top: 4px; }
.seccion__cuenta { font-size: 13px; color: var(--tinta-50); white-space: nowrap; }

/* Resumen de lo que está filtrando ahora mismo, con salida de un clic.
   Sin esto, un visitante que dejó una ruta activa y luego busca algo ve
   "0 resultados" sin entender que hay un filtro puesto más arriba. */
.filtros-activos {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--papel-2); border-radius: var(--r-medio);
  font-size: 13px; color: var(--tinta-70);
}
.filtros-activos__texto b { color: var(--tinta); font-weight: 700; }
.filtros-activos__limpiar {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto; padding: 5px var(--e3);
  border: 1.5px solid var(--borde); border-radius: var(--r-pildora);
  background: var(--papel); color: var(--tinta-70);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--rapido), color var(--rapido);
}
.filtros-activos__limpiar:hover { border-color: var(--tinta-50); color: var(--tinta); }

.orden-catalogo {
  display: flex; align-items: center; gap: var(--e2);
  margin: var(--e3) 0 var(--e4);
}
.orden-catalogo label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--tinta-70);
  white-space: nowrap;
}
.orden-catalogo select {
  flex: 1; max-width: 220px;
  height: 44px; padding: 0 var(--e3);
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.orden-catalogo select:hover { border-color: var(--borde-fuerte); }
.orden-catalogo select:focus-visible { outline: 3px solid var(--azul-tinta); outline-offset: 1px; }

/* Pista de filtros: se desliza con el dedo, sin barra de scroll a la vista */
.pista {
  display: flex; gap: var(--e2);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: var(--e2);
  margin: 0 calc(var(--e4) * -1); padding-left: var(--e4); padding-right: var(--e4);
  scroll-snap-type: x proximity;
}
.pista::-webkit-scrollbar { display: none; }

/* La pista de pestañas legales vive suelta dentro de .hoja, que no tiene
   padding lateral propio (a diferencia de .envoltura en la página
   principal). El margen negativo de .pista, pensado para "sangrar" hasta el
   borde de un contenedor CON padding, aquí no tenía contra qué compensar:
   el resultado era una pista más ancha que su contenedor y una pestaña
   cortada sin poder desplazarse hasta ella. */
.pista--legal {
  margin: 0; padding-left: var(--e4); padding-right: var(--e4);
  max-width: 100%;
}

/* Señal visual de que hay más opciones fuera de vista en cualquier pista
   horizontal (categorías, rutas, pestañas legales). Sin esto, la última
   opción visible queda cortada en el borde y nada indica que se puede
   deslizar para ver el resto -es lo que reportó el usuario, primero con las
   pestañas legales y después con la fila de categorías. Se activa/desactiva
   por JS con UI.vigilarPista() (ver ui.js), que agrega/quita [data-fin]
   según si el scroll de la pista llegó al final. */
.pista-envoltura { position: relative; }
.pista-envoltura::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: var(--e2);
  width: 40px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--papel) 75%);
}
.pista-mas {
  position: absolute; right: var(--e2); top: 50%;
  transform: translateY(calc(-50% + var(--e2) / 2));
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--papel); box-shadow: var(--s2);
  color: var(--tinta-70); pointer-events: none;
  animation: pistaMasPulso 1.6s ease-in-out infinite;
}
.pista-envoltura[data-fin] .pista-mas,
.pista-envoltura[data-fin]::after { opacity: 0; }

/* Cuando la pista envuelve en varias líneas no hay nada fuera de vista,
   así que el degradado de "hay más a la derecha" solo estorbaría. */
.pista-envoltura--sin-flecha::after { display: none; }

@keyframes pistaMasPulso {
  0%, 100% { transform: translateY(calc(-50% + var(--e2) / 2)) translateX(0); }
  50%      { transform: translateY(calc(-50% + var(--e2) / 2)) translateX(3px); }
}

.filtro {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-pildora);
  background: var(--papel);
  font-size: 14px; font-weight: 600; color: var(--tinta-70);
  white-space: nowrap; cursor: pointer;
  scroll-snap-align: start;
  transition: all var(--rapido);
}
.filtro:hover { border-color: var(--borde-fuerte); color: var(--tinta); }
.filtro[aria-pressed="true"] {
  background: var(--tinta); border-color: var(--tinta); color: #fff;
}

/* Las categorías se envuelven en varias líneas en vez de deslizarse.
   Con scroll horizontal, la última opción quedaba cortada en el borde y
   había que descubrir que se podía arrastrar; envolviendo se ven TODAS de
   una, que es lo que el usuario pidió. Se puede hacer aquí y no en la fila
   de rutas porque son pocas (2-5 dentro de una ruta) y ocupan 1-2 líneas. */
.pista--envuelve {
  flex-wrap: wrap;
  overflow-x: visible;
  margin: 0; padding-left: 0; padding-right: 0;
  row-gap: var(--e2);
}

/* Categorías tradicionales: navegación secundaria, más discreta que las
   rutas de objetivo (que son la jerarquía principal de la tienda). */
.filtro--cat {
  min-height: 34px; padding: 0 var(--e3);
  font-size: 12.5px; font-weight: 600;
  background: var(--papel-2); border-color: transparent;
  position: relative;
}

/* El chip se ve de 34px porque es navegación secundaria y no debe competir
   con las rutas de objetivo. Pero 34px es un objetivo táctil incómodo: el
   pulgar falla y el usuario cree que la tienda no responde.
   La zona sensible se estira a 44px hacia arriba y abajo SIN cambiar el
   dibujo del chip. Es area de toque, no relleno: no mueve el layout.
   (WCAG 2.5.8 Target Size, mínimo AA de 24px; 44px es la guía de iOS/Android.) */
.filtro--cat::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.filtro--cat:hover { background: var(--papel-3); border-color: var(--borde); }
.filtro--cat[aria-pressed="true"] {
  background: var(--accion-velo); border-color: var(--accion);
  color: var(--accion); font-weight: 700;
}

.filtro__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-ruta, var(--tinta-50)); flex-shrink: 0;
}


/* ==========================================================================
   5. TARJETA DE PRODUCTO
   ========================================================================== */
.rejilla {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .rejilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .rejilla { grid-template-columns: repeat(4, 1fr); gap: var(--e5); } }

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-grande);
  background: var(--papel);
  overflow: hidden; cursor: pointer;
  text-align: left;
  transition: border-color var(--normal), box-shadow var(--normal), transform var(--normal);
}
.tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: var(--s3); transform: translateY(-3px); }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.04); }

.tarjeta__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--papel-2);
  overflow: hidden;
}
.tarjeta__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--hoja-t);
  text-indent: -9999px;
  overflow: hidden;
}

.tarjeta__marcas {
  position: absolute; top: var(--e2); left: var(--e2);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  max-width: calc(100% - 44px);
  z-index: 2;
}

.marca-desc {
  padding: 3px 8px;
  border-radius: var(--r-pildora);
  background: var(--accion); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .01em;
  box-shadow: var(--s1);
}
.marca-ruta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pildora);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid rgba(255,255,255,.5);
  font-size: 11px; font-weight: 700;
  color: var(--tinta-ruta, var(--tinta));
  box-shadow: var(--s1);
}
.marca-ruta i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-ruta, var(--tinta-50));
}

.tarjeta__compartir {
  position: absolute; top: var(--e3); right: var(--e3); z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  color: var(--tinta-70); cursor: pointer;
  box-shadow: var(--s1);
  transition: color var(--rapido), transform var(--rapido), background var(--rapido);
}
/* Se dibuja de 34px para no taparle la foto al producto, pero el area que
   responde al dedo es de 44px. Igual que en .filtro--cat: crece la zona
   sensible, no el boton. */
.tarjeta__compartir::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.tarjeta__compartir:hover {
  background: rgba(255,255,255,.94); color: var(--tinta); transform: scale(1.08);
}

.tarjeta__cuerpo {
  padding: var(--e4);
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.tarjeta__categoria {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-50);
}
.tarjeta__nombre {
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La frase de marca. Es lo que no tiene ninguna otra tienda. */
.barrera {
  display: flex; gap: 7px; align-items: flex-start;
  margin-top: 2px;
  font-size: 12.5px; line-height: 1.4; color: var(--tinta-70);
}
.barrera__icono { flex-shrink: 0; color: var(--tinta-50); margin-top: 2px; }
.barrera em { font-style: italic; }

.tarjeta__precios {
  margin-top: auto; padding-top: var(--e3);
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
}
.precio { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.precio--antes {
  font-size: 13px; font-weight: 500;
  color: var(--tinta-50); text-decoration: line-through;
}

.agotado {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.78);
  font-size: 13px; font-weight: 700; color: var(--tinta-70);
  text-transform: uppercase; letter-spacing: .08em;
}


/* ==========================================================================
   6. HOJAS (los paneles que suben desde abajo)
   ========================================================================== */
.velo {
  position: fixed; inset: 0; z-index: var(--z-velo);
  background: rgba(28,38,50,.42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--normal), backdrop-filter var(--normal);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.velo[data-abierto] { opacity: 1; pointer-events: auto; }

.hoja {
  position: fixed; z-index: var(--z-hoja);
  left: 0; right: 0; bottom: 0;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  /* Vidrio esmerilado: semitransparente + blur del contenido de atrás.
     El fondo NO baja de .96 de opacidad para que el texto largo del cuerpo
     (fichas de producto, documentos legales) siga con contraste sólido
     encima -el glassmorphism se nota en el borde y la cabecera, no compite
     con la lectura. */
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.6);
  border-bottom: none;
  border-radius: var(--r-hoja) var(--r-hoja) 0 0;
  box-shadow: var(--s-hoja);
  transform: translateY(101%);
  transition: transform var(--hoja-t);
  visibility: hidden;
}
.hoja[data-abierto] { transform: translateY(0); visibility: visible; }

.hoja__asa { padding: var(--e3) 0 0; display: grid; place-items: center; flex-shrink: 0; }
.hoja__asa i { width: 42px; height: 4px; border-radius: 99px; background: var(--borde-fuerte); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Sin soporte de backdrop-filter (algunos navegadores viejos): fondo
     sólido normal, sin efecto de vidrio pero perfectamente legible. */
  .hoja { background: var(--papel); }
}

.hoja__cab {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4) var(--e3);
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.hoja__titulo { font-size: 17px; flex: 1; min-width: 0; }
.hoja__cerrar {
  flex-shrink: 0; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--papel-3); color: var(--tinta);
  cursor: pointer; transition: background var(--rapido);
}
.hoja__cerrar:hover { background: var(--borde); }

.hoja__scroll {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--e4);
}
.hoja__pie {
  flex-shrink: 0;
  padding: var(--e3) var(--e4);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: var(--papel);
}

.pie-microcopy {
  text-align: center;
  font-size: 12px; color: var(--tinta-50);
  margin-top: 8px;
}

/* En pantalla ancha la hoja se vuelve panel lateral */
@media (min-width: 860px) {
  .hoja {
    left: auto; top: 0; bottom: 0;
    width: min(560px, 92vw);
    max-height: none;
    border-radius: var(--r-hoja) 0 0 var(--r-hoja);
    transform: translateX(101%);
  }
  .hoja[data-abierto] { transform: translateX(0); }
  .hoja__asa { display: none; }
  .hoja__cab { padding-top: var(--e4); }
}


/* ==========================================================================
   7. FICHA DE PRODUCTO
   ========================================================================== */
.ficha__galeria { margin: calc(var(--e4) * -1) calc(var(--e4) * -1) var(--e4); }
.ficha__principal {
  position: relative;
  aspect-ratio: 1 / 1; background: var(--papel-2);
  overflow: hidden;
}
.ficha__principal img { width: 100%; height: 100%; object-fit: cover; }

.ficha__miniaturas {
  display: flex; gap: var(--e2);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--e3) var(--e4) 0;
}
.ficha__miniaturas::-webkit-scrollbar { display: none; }
.mini {
  flex-shrink: 0; width: 56px; height: 56px;
  border: 2px solid transparent; border-radius: var(--r-chico);
  overflow: hidden; cursor: pointer; padding: 0; background: none;
  transition: border-color var(--rapido);
}
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini[aria-current="true"] { border-color: var(--tinta); }

.ficha__titulo { font-size: 21px; margin-bottom: var(--e2); }
.ficha__categoria {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-50);
  margin-bottom: var(--e2);
}
.ficha__precios { display: flex; align-items: baseline; gap: var(--e3); margin: var(--e4) 0; }
.ficha__precios .precio { font-size: 30px; }
.ahorro {
  padding: 3px var(--e3); border-radius: var(--r-pildora);
  background: var(--accion-velo); color: var(--accion);
  font-size: 12.5px; font-weight: 700;
}

.ficha__barrera {
  display: flex; gap: var(--e3);
  padding: var(--e4);
  border-left: 4px solid var(--color-ruta, var(--tinta-50));
  border-radius: 0 var(--r-medio) var(--r-medio) 0;
  background: var(--velo-ruta, var(--papel-2));
  margin-bottom: var(--e4);
}
.ficha__barrera .et {
  font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-ruta, var(--tinta-70));
  margin-bottom: 3px;
}
.ficha__barrera .fr { font-size: 15px; line-height: 1.45; }

.sellos { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e4); }
.sello {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px var(--e3);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-pildora);
  font-size: 12.5px; font-weight: 700; color: var(--tinta-70);
}
.sello svg { color: var(--tinta-50); }

.bloque { margin-bottom: var(--e5); }
.bloque__t {
  font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-50);
  margin-bottom: var(--e3);
}
.bloque p { font-size: 14.5px; line-height: 1.6; color: var(--tinta-90); }

.puntos li {
  display: flex; gap: var(--e3); align-items: flex-start;
  font-size: 14.5px; line-height: 1.5; margin-bottom: var(--e2);
}
.puntos svg { flex-shrink: 0; color: var(--ok); margin-top: 3px; }

.tips li {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) 0; border-bottom: 1px solid var(--borde);
  font-size: 14px; line-height: 1.5; color: var(--tinta-90);
}
.tips li:last-child { border-bottom: 0; }
.tips .n {
  flex-shrink: 0; width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--papel-3);
  font-size: 11.5px; font-weight: 800; color: var(--tinta-70);
}

.especificaciones {
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  overflow: hidden;
}
.especificaciones div {
  display: flex; gap: var(--e3);
  padding: var(--e3) var(--e4);
  font-size: 13.5px;
  border-bottom: 1px solid var(--borde);
}
.especificaciones div:last-child { border-bottom: 0; }
.especificaciones dt { flex-shrink: 0; width: 38%; color: var(--tinta-50); font-weight: 600; }
.especificaciones dd { margin: 0; font-weight: 600; }

.ver-todo {
  width: 100%; padding: var(--e3);
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  background: var(--papel); color: var(--tinta-70);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.ver-todo:hover { background: var(--papel-2); }

/* --- combina con --- */
.combina { display: flex; flex-direction: column; gap: var(--e2); }
.combina button {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2); text-align: left;
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  background: var(--papel); cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.combina button:hover { border-color: var(--borde-fuerte); background: var(--papel-2); }
.combina img {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--r-chico); object-fit: cover; background: var(--papel-2);
}
.combina .n { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.combina .p { font-size: 14px; font-weight: 800; margin-top: 2px; }

/* --- top tendencias: widget compacto, no una parrilla --- */
.seccion--compacta { padding-top: var(--e5); padding-bottom: var(--e5); }

.tendencias {
  display: grid; gap: var(--e2);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .tendencias { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .tendencias { grid-template-columns: repeat(3, 1fr); }
}
.tendencia {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2); text-align: left;
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  background: var(--papel); cursor: pointer; width: 100%;
  transition: border-color var(--rapido), background var(--rapido);
}
.tendencia:hover { border-color: var(--borde-fuerte); background: var(--papel-2); }
.tendencia img {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--r-chico); object-fit: cover; background: var(--papel-2);
}
.tendencia__cuerpo { flex: 1; min-width: 0; }
.tendencia__n {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tendencia__meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--tinta-50); margin-top: 2px;
}
/* El fuego solo aparece cuando el backend confirma tendencia real (volumen
   + crecimiento sobre la semana anterior) -no es decorativo, es un dato. */
.tendencia__fuego { color: #e8622c; flex-shrink: 0; }


/* ==========================================================================
   8. CRONOGRAMA DE ENTREGA
   Tres paradas, calculadas con dias habiles y festivos de Colombia.
   ========================================================================== */
.entrega {
  padding: var(--e4);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-medio);
  background: var(--papel-2);
}
.entrega__pasos { display: flex; position: relative; }
.entrega__pasos::before {
  content: ''; position: absolute;
  left: 12%; right: 12%; top: 17px; height: 2px;
  background: var(--borde-fuerte);
}
.paso {
  flex: 1; position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.paso__punto {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--papel-3); color: var(--tinta-50);
  border: 2px solid var(--papel-2);
  position: relative; z-index: 1;
}
.paso--hoy .paso__punto { background: var(--accion); color: #fff; }
.paso__fecha { font-size: 12px; font-weight: 700; line-height: 1.25; }
.paso__t { font-size: 11.5px; color: var(--tinta-70); line-height: 1.25; }

.entrega__corte {
  display: flex; align-items: center; gap: var(--e2);
  margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  font-size: 13px; color: var(--tinta-70);
}
.entrega__corte b { color: var(--accion); }


/* ==========================================================================
   9. CARRITO Y FORMULARIO
   ========================================================================== */
.linea {
  display: flex; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--borde);
}
.linea img {
  width: 66px; height: 66px; flex-shrink: 0;
  border-radius: var(--r-chico); object-fit: cover; background: var(--papel-2);
}
.linea__c { flex: 1; min-width: 0; }
.linea__n { font-size: 14px; font-weight: 600; line-height: 1.35; }
.linea__v { font-size: 12.5px; color: var(--tinta-50); margin-top: 2px; }
.linea__f { display: flex; align-items: center; justify-content: space-between; margin-top: var(--e2); }

/* Quitar producto completo. Discreto en reposo -no compite con el precio-
   pero con area de toque de 32px, que es lo minimo usable con el pulgar. */
.linea__quitar {
  flex-shrink: 0; align-self: flex-start;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  color: var(--tinta-50); border-radius: var(--r-chico);
  transition: color .15s, background .15s;
}
.linea__quitar:hover, .linea__quitar:focus-visible { color: var(--rojo-tinta); background: var(--papel-2); }

/* Acciones de carrito: secundarias frente a "Continuar", por eso van en
   texto pequeno y no como botones solidos. */
.carrito__acciones {
  display: flex; gap: var(--e3); justify-content: space-between;
  padding: var(--e3) 0 0;
}
.carrito__acciones button {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--tinta-50); padding: 4px 2px; border-radius: var(--r-chico);
  transition: color .15s;
}
.carrito__vaciar:hover, .carrito__vaciar:focus-visible { color: var(--rojo-tinta); }
.carrito__compartir:hover, .carrito__compartir:focus-visible { color: var(--azul-tinta); }

.carrito__guardado {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; line-height: 1.45; color: var(--tinta-50);
  margin-top: var(--e2);
}
.carrito__guardado svg { flex-shrink: 0; margin-top: 2px; color: var(--lima-tinta); }

/* Confirmacion de vaciado, en el mismo pie donde estaba el boton */
.confirmar { padding: var(--e3) 0; text-align: center; }
.confirmar__t { font-size: 15px; font-weight: 700; }
.confirmar__d { font-size: 13px; color: var(--tinta-50); margin: 4px 0 var(--e3); }
.confirmar__b { display: flex; gap: var(--e2); }
.confirmar__b .btn { flex: 1; }

.btn--peligro { background: var(--rojo-tinta); color: var(--rojo-sobre); border: 1.5px solid var(--rojo-tinta); }
.btn--peligro:hover { filter: brightness(.93); }

.cantidad {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--borde); border-radius: var(--r-pildora);
  overflow: hidden;
}
.cantidad button {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-70); cursor: pointer;
}
.cantidad button:hover { background: var(--papel-3); color: var(--tinta); }
.cantidad span { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; }

.total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--e4) 0;
}
.total__e { font-size: 14px; color: var(--tinta-70); }
.total__v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

.campo { margin-bottom: var(--e4); }
.campo label {
  display: block; font-size: 13px; font-weight: 700;
  margin-bottom: 6px; color: var(--tinta-90);
}
.campo label .op { font-weight: 500; color: var(--tinta-50); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 48px;
  padding: var(--e3) var(--e4);
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  background: var(--papel); font: inherit; font-size: 16px;  /* 16px evita el zoom en iOS */
  color: var(--tinta);
  transition: border-color var(--rapido);
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--tinta-50); outline: none;
}
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo__error { display: none; font-size: 12.5px; color: var(--error); margin-top: 5px; }
.campo input[aria-invalid="true"] ~ .campo__error { display: block; }

.dos { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .dos { grid-template-columns: 1fr 1fr; } }

.contraentrega {
  display: flex; gap: var(--e3);
  padding: var(--e4);
  background: var(--accion-velo);
  border-radius: var(--r-medio);
  font-size: 13.5px; line-height: 1.5;
  margin-bottom: var(--e4);
}
.contraentrega svg { flex-shrink: 0; color: var(--accion); margin-top: 2px; }

/* Variante corta: misma promesa, en la ficha de producto, antes del CTA.
   Una línea, sin el párrafo largo del checkout -ahí ya se decidió comprar,
   aquí todavía se está decidiendo. */
.contraentrega--corta {
  align-items: center;
  padding: 10px var(--e3);
  font-size: 13px; font-weight: 600;
  margin: var(--e3) 0;
}
.contraentrega--corta svg { margin-top: 0; }

/* El check del compromiso de pago. Es una casilla real (checkbox), no un
   decorado: debe funcionar con teclado y lector de pantalla igual que
   cualquier <input>, solo que la caja visible es un <span> a su lado porque
   el checkbox nativo del navegador es casi imposible de re-estilar bien
   entre navegadores. */
.check-terminos {
  display: flex; align-items: flex-start; gap: var(--e3);
  margin-top: var(--e5); padding: var(--e3);
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.check-terminos:hover { border-color: var(--borde-fuerte); background: var(--papel-2); }
.check-terminos[data-invalido] { border-color: var(--error); background: #FEF2F2; }

.check-terminos input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.check-terminos__caja {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1.5px solid var(--borde-fuerte); border-radius: 6px;
  background: var(--papel); color: transparent;
  transition: background var(--rapido), border-color var(--rapido), color var(--rapido);
}
.check-terminos input:checked ~ .check-terminos__caja {
  background: var(--accion); border-color: var(--accion); color: #fff;
}
.check-terminos input:focus-visible ~ .check-terminos__caja {
  outline: 3px solid var(--azul-tinta); outline-offset: 2px;
}
.check-terminos__texto { font-size: 13px; line-height: 1.55; color: var(--tinta-90); }
.check-terminos__link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: var(--naranja-tinta);
  text-decoration: underline; cursor: pointer;
}

.vacio { text-align: center; padding: var(--e7) var(--e4); }
.vacio svg { color: var(--borde-fuerte); margin-bottom: var(--e4); }
.vacio h3 { font-size: 17px; margin-bottom: var(--e2); }
.vacio p { font-size: 14px; color: var(--tinta-70); margin-bottom: var(--e5); }


/* ==========================================================================
   10. PIE
   ========================================================================== */
.pie {
  margin-top: var(--e7);
  padding: var(--e7) 0 var(--e6);
  background: var(--papel-2);
  border-top: 1px solid var(--borde);
}
.pie__grid {
  display: grid; gap: var(--e6);
  grid-template-columns: 1fr;
  margin-bottom: var(--e6);
}
@media (min-width: 760px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.pie__t {
  font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-50);
  margin-bottom: var(--e3);
}
.pie__l li { margin-bottom: var(--e2); font-size: 14px; }
.pie__l a, .pie__l button {
  color: var(--tinta-70); background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; text-align: left;
}
.pie__l a:hover, .pie__l button:hover { color: var(--tinta); text-decoration: underline; }

.pie__legal {
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
  justify-content: space-between;
  padding-top: var(--e5); border-top: 1px solid var(--borde);
  font-size: 12.5px; color: var(--tinta-50);
}


/* ==========================================================================
   11. FLOTANTES Y AVISOS
   ========================================================================== */
.fab-wa {
  position: fixed; right: var(--e4); z-index: 55;
  bottom: calc(var(--e4) + env(safe-area-inset-bottom));
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wa); color: #fff;
  box-shadow: var(--s3);
  transition: transform var(--rapido);
}
.fab-wa:hover { transform: scale(1.06); text-decoration: none; }

/* Aparece solo cuando hay algo en el carrito, apilado justo encima del FAB
   de WhatsApp. Con cantidad y total: no obliga a abrir el carrito para
   saber si ya se puede pasar a pagar. */
.fab-carrito {
  position: fixed; right: var(--e4); z-index: 55;
  bottom: calc(var(--e4) + 66px + var(--e2) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--e2);
  height: 46px; padding: 0 var(--e4) 0 var(--e3);
  border: 0; border-radius: var(--r-pildora);
  background: var(--accion); color: var(--accion-texto);
  box-shadow: var(--s3);
  cursor: pointer;
  transition: transform var(--rapido), opacity var(--rapido);
  animation: fabCarritoEntra var(--hoja-t) both;
}
.fab-carrito:hover { transform: scale(1.04); }
.fab-carrito__texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.fab-carrito__cant { font-size: 10.5px; font-weight: 700; opacity: .85; }
.fab-carrito__total { font-size: 14px; font-weight: 800; }

@keyframes fabCarritoEntra {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.avisos {
  position: fixed; z-index: var(--z-aviso);
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--e2);
  width: min(420px, calc(100vw - var(--e5)));
  pointer-events: none;
}
.aviso {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-medio);
  background: var(--tinta); color: #fff;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--s3);
  animation: entra-aviso var(--normal) both;
}
.aviso svg { flex-shrink: 0; }
.aviso--ok    { background: var(--ok); }
.aviso--error { background: var(--error); }

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

/* Esqueleto mientras carga el catalogo */
.esqueleto {
  border-radius: var(--r-grande);
  background: linear-gradient(100deg, var(--papel-2) 30%, var(--papel-3) 50%, var(--papel-2) 70%);
  background-size: 220% 100%;
  animation: brillo 1.3s infinite linear;
  aspect-ratio: 1 / 1.42;
}
@keyframes brillo { to { background-position: -220% 0; } }

body[data-bloqueado] { overflow: hidden; }
[hidden] { display: none !important; }


/* ==========================================================================
   12. DIAGNOSTICO GESTOS ("Te ayudo a elegir")
   ========================================================================== */
.barra-prog {
  height: 4px; border-radius: 99px;
  background: var(--papel-3); overflow: hidden;
  margin-bottom: var(--e4);
}
.barra-prog i {
  display: block; height: 100%;
  background: var(--accion);
  transition: width var(--normal);
}

.asis__paso {
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-50);
  margin-bottom: var(--e2);
}
.asis__preg { font-size: 21px; margin-bottom: 6px; }
.asis__ayuda { font-size: 14px; color: var(--tinta-70); margin-bottom: var(--e5); }

.asis__ops { display: flex; flex-direction: column; gap: var(--e2); }
.diag-op {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; min-height: 56px;
  padding: var(--e3) var(--e4);
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  background: var(--papel); cursor: pointer;
  text-align: left;
  transition: border-color var(--rapido), background var(--rapido), transform var(--rapido);
}
.diag-op:hover { border-color: var(--borde-fuerte); background: var(--papel-2); }
.diag-op:active { transform: scale(.98); }
.diag-op__i { flex-shrink: 0; color: var(--tinta-50); }
.diag-op__t { font-size: 15px; font-weight: 600; }

.asis__msg {
  font-size: 15px; line-height: 1.5; color: var(--tinta-90);
  margin-bottom: var(--e5);
}

.diag__lista { display: flex; flex-direction: column; gap: var(--e3); }
.diag__item {
  display: flex; gap: var(--e3);
  padding: var(--e3);
  border: 1.5px solid var(--borde); border-radius: var(--r-medio);
  border-left: 4px solid var(--color-ruta, var(--tinta-50));
  background: var(--papel); cursor: pointer; text-align: left;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.diag__item:hover { border-color: var(--borde-fuerte); box-shadow: var(--s2); }
.diag__item img {
  width: 76px; height: 76px; flex-shrink: 0;
  border-radius: var(--r-chico); object-fit: cover; background: var(--papel-2);
}
.diag__c { min-width: 0; }
.diag__n { font-size: 14.5px; font-weight: 700; line-height: 1.3; margin-bottom: 3px; }
.diag__razon { font-size: 13px; color: var(--tinta-70); line-height: 1.4; margin-bottom: 6px; }
.diag__precio { font-size: 15px; font-weight: 800; }
.diag__precio s { font-size: 12px; font-weight: 500; color: var(--tinta-50); margin-left: 5px; }


/* ==========================================================================
   13. DOCUMENTOS LEGALES
   ========================================================================== */
.legal__cuerpo h4 {
  font-size: 15px; margin: var(--e5) 0 var(--e2);
}
.legal__cuerpo h4:first-child { margin-top: 0; }
.legal__cuerpo p {
  font-size: 13.5px; line-height: 1.65; color: var(--tinta-90);
  margin-bottom: var(--e3);
}
.legal__cuerpo ul {
  margin: 0 0 var(--e3); padding-left: var(--e4);
}
.legal__cuerpo li {
  font-size: 13.5px; line-height: 1.6; color: var(--tinta-90);
  list-style: disc; margin-bottom: 6px;
}

/* Datos que el documento original trae sin rellenar (NIT, dirección física)
   y que no se pueden inventar: se marcan en vez de esconderse. */
.legal-pendiente {
  background: #FFF3E0; color: var(--alerta);
  padding: 1px 6px; border-radius: 4px;
  font-weight: 700; font-style: normal;
}


/* ==========================================================================
   14. MODO OSCURO · AJUSTES DE COMPONENTE
   --------------------------------------------------------------------------
   El tema claro es el predeterminado; el oscuro se enciende con el botón de
   la barra, que pone data-tema="oscuro" en <html> (ver js/tema.js).

   Los colores viven en tokens.css, que se recalcula solo. Aquí quedan las
   pocas cosas que NO son una ficha de color: superficies de vidrio y fotos.

   Va al final del archivo a propósito. tokens.css entra por @import en la
   primera línea, así que una regla de componente escrita allá la pisaría
   después la regla normal (misma especificidad, gana la última). Las
   variables no tienen ese problema porque se resuelven al usarse.
   ========================================================================== */

/* El sol se ve en claro (invita a pasar a oscuro) y la luna en oscuro. */
.tema__luna { display: none; }
html[data-tema="oscuro"] .tema__sol  { display: none; }
html[data-tema="oscuro"] .tema__luna { display: block; }

/* Las dos versiones del logotipo: solo una se muestra a la vez. */
.marca__logo--oscuro { display: none; }
html[data-tema="oscuro"] .marca__logo--claro  { display: none; }
html[data-tema="oscuro"] .marca__logo--oscuro { display: block; }

/* El vidrio esmerilado estaba definido en blanco translúcido. Sobre fondo
   oscuro eso no se lee como vidrio sino como una mancha lechosa: hay que
   teñirlo del color del papel. */
html[data-tema="oscuro"] .barra { background: rgba(20,24,29,.85); backdrop-filter: var(--glass-blur); }
html[data-tema="oscuro"] .hoja  { background: rgba(20,24,29,.94); border-color: rgba(255,255,255,.12); backdrop-filter: var(--glass-blur); }
html[data-tema="oscuro"] .velo  { background: rgba(0,0,0,.68); }

html[data-tema="oscuro"] .marca-ruta,
html[data-tema="oscuro"] .tarjeta__compartir {
  background: rgba(35,41,50,.82);
  border-color: rgba(255,255,255,.14);
  color: var(--tinta);
}
html[data-tema="oscuro"] .tarjeta__compartir:hover { background: rgba(45,52,62,.94); }

/* Casi todas las fotos vienen con fondo blanco de estudio. A pantalla
   completa, de noche, ese blanco encandila: se le baja un punto. No se
   toca el contraste para no falsear el color del producto. */
html[data-tema="oscuro"] .tarjeta__foto img,
html[data-tema="oscuro"] .ficha__foto img { filter: brightness(.92); }

/* El aviso legal pendiente usa un ámbar claro fijo, ilegible en oscuro. */
html[data-tema="oscuro"] .legal-pendiente { background: rgba(245,165,36,.16); }

/* El logo NO se corrige por CSS: se sirve otro archivo desde el <picture>
   del index. El original es un PNG opaco de fondo blanco, y al lado del
   logotipo gris va la mano multicolor; invert() volvería el rojo cian y
   brightness() aclararía también el fondo. */


/* ==========================================================================
   15. ETIQUETAS Y MOTIVACIÓN DINÁMICA ESTILO TEMU & INFORMACIÓN DE ENTREGA
   ========================================================================== */

.marca-badget {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px;
  border-radius: var(--r-pildora);
  font-size: 10.5px; font-weight: 800; letter-spacing: .01em;
  box-shadow: var(--s1);
  white-space: nowrap;
  animation: pulsoSuave 3s infinite ease-in-out;
}

@keyframes pulsoSuave {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.badget--top {
  background: linear-gradient(135deg, #FF6700, #FF0055);
  color: #ffffff;
}

.badget--oferta {
  background: linear-gradient(135deg, #FF55DD, #9900FF);
  color: #ffffff;
}

.badget--tendencia {
  background: linear-gradient(135deg, #2A7FFF, #00C8FF);
  color: #ffffff;
}

.badget--stock {
  background: linear-gradient(135deg, #E65100, #FF8F00);
  color: #ffffff;
}

.badget--popular {
  background: linear-gradient(135deg, #00B0FF, #00E676);
  color: #08290f;
}

.badget--express {
  background: linear-gradient(135deg, #00C853, #64DD17);
  color: #08290f;
}

.tarjeta__envio-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-size: 11.5px; font-weight: 700; color: #00897B;
  background: rgba(0, 150, 136, 0.09);
  padding: 3px 8px; border-radius: 6px;
}

html[data-tema="oscuro"] .tarjeta__envio-tag {
  background: rgba(0, 230, 118, 0.14);
  color: #69F0AE;
}

/* Banner de Envío Incluido en Modal */
.express-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(42, 127, 255, 0.08), rgba(0, 200, 255, 0.08));
  border: 1px solid rgba(42, 127, 255, 0.25);
  border-radius: var(--r-chico);
  margin: var(--e3) 0;
}
.express-banner svg {
  flex-shrink: 0; color: var(--azul-tinta); margin-top: 2px;
}
.express-banner strong {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--azul-tinta);
}
.express-banner span {
  font-size: 12.5px; color: var(--tinta-80); line-height: 1.4; display: block; margin-top: 2px;
}

html[data-tema="oscuro"] .express-banner {
  background: rgba(42, 127, 255, 0.15);
  border-color: rgba(42, 127, 255, 0.35);
}

/* Nota Aclaratoria sobre Domingos y Festivos en Cronograma */
.entrega__nota-domingos {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--papel-2);
  border-radius: var(--r-chico);
  border-left: 3.5px solid var(--naranja);
  font-size: 12px; line-height: 1.45; color: var(--tinta-80);
}
.entrega__nota-domingos strong {
  display: block; color: var(--tinta); font-weight: 700; margin-bottom: 2px;
}

/* "Combina Con" mejorado con sinergia y actividad */
.combina-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: var(--r-chico);
  border: 1px solid var(--borde);
  background: var(--papel);
  text-align: left; width: 100%;
  cursor: pointer;
  transition: transform var(--rapido), border-color var(--rapido), box-shadow var(--rapido);
}
.combina-item:hover {
  border-color: var(--naranja);
  box-shadow: var(--s2);
  transform: translateY(-2px);
}
.combina-item__cabecera {
  display: flex; align-items: center; gap: 10px;
}
.combina-item__foto {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: var(--r-chico); overflow: hidden;
  background: var(--papel-2);
}
.combina-item__foto img {
  width: 100%; height: 100%; object-fit: cover;
}
.combina-item__info {
  flex: 1; min-width: 0;
}
.combina-item__nombre {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.combina-item__precio {
  font-size: 14px; font-weight: 800; color: var(--naranja-tinta);
  margin-top: 2px;
}
.combina-item__sinergia {
  font-size: 11.5px; line-height: 1.35; color: var(--tinta-70);
  background: var(--papel-2);
  padding: 6px 8px; border-radius: 4px;
  display: flex; align-items: center; gap: 4px;
}


/* ==========================================================================
   16. SECCIÓN DE TEMPORADA DESTACADA & SLIDER HORIZONTAL
   ========================================================================== */

.seccion--temporada {
  padding: var(--e5) 0;
}

.temporada-caja {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 103, 0, 0.05), rgba(255, 0, 85, 0.05));
  border: 1.5px solid rgba(255, 103, 0, 0.22);
  border-radius: var(--r-grande);
  padding: var(--e4);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 103, 0, 0.06);
}

html[data-tema="oscuro"] .temporada-caja {
  background: linear-gradient(135deg, rgba(255, 103, 0, 0.12), rgba(255, 0, 85, 0.12));
  border-color: rgba(255, 103, 0, 0.35);
}

.temporada-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pildora);
  background: var(--naranja);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--e2);
}

.temporada-pista {
  display: flex;
  gap: var(--e3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--e3) 2px var(--e3);
  margin-top: var(--e2);
  scrollbar-width: thin;
  scrollbar-color: var(--naranja) transparent;
}

.temporada-pista::-webkit-scrollbar {
  height: 5px;
}
.temporada-pista::-webkit-scrollbar-thumb {
  background: var(--naranja);
  border-radius: 4px;
}

.temporada-pista .tarjeta {
  flex: 0 0 190px;
  scroll-snap-align: start;
  border-color: rgba(255, 103, 0, 0.18);
  box-shadow: var(--s1);
}

@media (min-width: 700px) {
  .temporada-caja {
    padding: var(--e5);
  }
  .temporada-pista {
    gap: var(--e4);
  }
  .temporada-pista .tarjeta {
    flex: 0 0 240px;
  }
}