/* ==========================================================================
   CAPA PREMIUM (llamativa sin exagerar)
   Se carga al final en todas las páginas. Usa solo las variables de
   css/variables.css: mismos radios, sombras, alturas y espacios en toda la
   tienda. Regla de color: el VERDE de la marca para botones principales,
   etiquetas, palabras resaltadas y bloques de cierre; el rojo solo para
   errores; el resto en neutros (blanco, gris cálido muy claro, gris carbón).
   Índice:
   1. Base y tipografía        8. Etiquetas
   2. Foco y movimiento        9. Tarjetas de producto
   3. Botones                 10. Banners del inicio y de categoría
   4. Campos y cantidad       11. Página de producto
   5. Barra superior          12. Vista rápida
   6. Header y menú           13. Carrito, drawer, modales y toasts
   7. Pie de página           14. Páginas informativas y legales
                              15. Aparición al hacer scroll
   ========================================================================== */

/* ---------- 1. Base y tipografía ---------- */
body {
  line-height: var(--interlineado);
  color: var(--color-texto);
  font-feature-settings: "tnum" 0;
}
h1, h2, h3, h4 {
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  line-height: 1.18;
}
.seccion { padding-block: var(--seccion-y); }
.seccion__cabecera { margin-bottom: var(--esp-10); align-items: flex-end; gap: var(--esp-4) var(--esp-8); }
.seccion__encabezado { display: grid; gap: var(--esp-2); max-width: 46rem; }
.seccion__etiqueta,
.cat-cabecera__conteo {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-black);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primario);
}
.seccion__titulo { font-size: var(--texto-titulo-seccion); font-weight: var(--peso-titulo); letter-spacing: -0.03em; line-height: 1.06; }
.resaltado { color: var(--color-primario); }
.seccion__subtitulo { margin-top: var(--esp-1); font-size: var(--texto-lg); color: var(--color-texto-suave); max-width: 40rem; }
.seccion__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  color: var(--color-primario);
  font-weight: var(--peso-bold);
  font-size: var(--texto-md);
  text-decoration: none;
  white-space: nowrap;
}
.seccion__enlace .icono { transition: transform var(--duracion-media) var(--ease-out); }
.seccion__enlace:hover { text-decoration: none; color: var(--color-primario-oscuro); }
.seccion__enlace:hover .icono { transform: translateX(4px); }
/* Ritmo entre secciones: blanco, gris cálido y verde de marca suave */
.seccion--alterna,
.seccion--calida { background: var(--color-fondo-alterno); }
.seccion--marca { background: var(--color-primario-suave); }
.icono { stroke-width: 1.75; }
.icono--relleno { stroke-width: 0; }
/* Precios con cifras de ancho fijo: no "bailan" al cambiar */
.precio__actual,
.linea__total,
.drawer__subtotal strong,
.resumen__fila span:last-child,
.tabla-carrito__total { font-variant-numeric: tabular-nums; }
.migas { font-size: var(--texto-sm); }
.migas [aria-current="page"] { font-weight: var(--peso-normal); color: var(--color-texto-suave); }
/* En celular la ruta va en una sola línea (se desliza si no cabe) */
@media (max-width: 767px) {
  .migas ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .migas ol::-webkit-scrollbar { display: none; }
  .migas li { flex-shrink: 0; }
}

/* ---------- 2. Foco visible y movimiento ---------- */
:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
  border-radius: 6px;
}
.input:focus,
.select:focus,
.textarea:focus,
.buscador__input:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: var(--anillo-foco);
}
::selection { background: rgba(1, 123, 52, 0.16); color: var(--color-texto); }

/* ---------- 3. Botones: 48 px, 12 px de radio, semibold ---------- */
.boton {
  min-height: var(--alto-control);
  padding: 0 var(--esp-6);
  border-radius: var(--radio-control);
  border-width: 1px;
  font-weight: var(--peso-semi);
  font-size: var(--texto-md);
  letter-spacing: 0;
  transition: background-color var(--duracion-media) var(--ease-out), border-color var(--duracion-media) var(--ease-out),
    color var(--duracion-media) var(--ease-out), box-shadow var(--duracion-media) var(--ease-out),
    transform var(--duracion-rapida) var(--ease-out);
}
/* Botones de compra en una sola línea */
.ficha__compra .boton,
.vista-rapida__acciones .boton,
.barra-compra .boton { white-space: nowrap; }
@media (max-width: 479px) {
  .ficha__compra .boton,
  .vista-rapida__acciones .boton { padding-inline: var(--esp-4); }
  .ficha__compra .cantidad__boton { width: 36px; }
}
.boton--sm { min-height: 40px; padding: 0 var(--esp-4); font-size: var(--texto-sm); }
.boton--lg { min-height: var(--alto-control); font-size: var(--texto-md); }
.boton:active:not(:disabled) { transform: scale(0.98); }
/* Principal: relleno sólido de la marca */
.boton--primario { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
/* Secundario: borde fino, sin competir con el principal */
.boton--secundario,
.boton--fantasma,
.boton--whatsapp {
  background: #fff;
  color: var(--color-texto);
  border-color: var(--color-borde-fuerte);
}
.boton--whatsapp .icono { color: var(--color-whatsapp); }
.boton--verde { background: #fff; color: var(--color-texto); border-color: var(--color-borde-fuerte); }
.boton--verde .icono { color: var(--color-whatsapp); }
.boton--claro { background: #fff; color: var(--color-texto); border-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover:not(:disabled) {
    background: var(--color-primario-oscuro);
    border-color: var(--color-primario-oscuro);
    box-shadow: var(--sombra-boton);
    transform: translateY(-1px);
  }
  .boton--secundario:hover:not(:disabled),
  .boton--fantasma:hover:not(:disabled),
  .boton--whatsapp:hover:not(:disabled),
  .boton--verde:hover:not(:disabled) {
    background: var(--color-fondo-alterno);
    border-color: var(--color-texto-tenue);
    color: var(--color-texto);
  }
  .boton--claro:hover { background: var(--color-fondo-alterno); }
}
.boton:disabled,
.boton[aria-disabled="true"] { opacity: 0.45; box-shadow: none; transform: none; }
/* Botón con estado "Agregado": el check entra con una animación corta */
.boton--agregar { position: relative; overflow: hidden; }
.boton__contenido,
.boton__listo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  transition: opacity var(--duracion-media) var(--ease-out), transform var(--duracion-media) var(--ease-out);
}
.boton__listo {
  position: absolute;
  inset: 0;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
}
.boton--agregar.es-agregado { background: var(--color-primario-oscuro); border-color: var(--color-primario-oscuro); }
.boton--agregar.es-agregado .boton__contenido { opacity: 0; transform: translateY(-6px); }
.boton--agregar.es-agregado .boton__listo { opacity: 1; transform: none; }
.boton--agregar.es-agregado .boton__listo .icono { animation: check-entra 260ms var(--ease-out); }
@keyframes check-entra { from { transform: scale(0.6); opacity: 0; } }
/* Botones de solo ícono: línea fina, fondo sutil al pasar */
.boton-icono { transition: background-color var(--duracion-rapida) var(--ease-out), color var(--duracion-rapida) var(--ease-out), transform var(--duracion-rapida) var(--ease-out); }
.boton-icono:hover { background: var(--color-fondo-alterno); }
/* Enlace sutil (favoritos, compartir) */
.enlace-sutil {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 40px;
  padding: 0 var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
  transition: color var(--duracion-rapida) var(--ease-out);
}
.enlace-sutil:hover { color: var(--color-texto); }
.enlace-sutil[aria-pressed="true"] { color: var(--color-primario); }
.enlace-sutil[aria-pressed="true"] svg { fill: currentColor; }
.enlace-boton { color: var(--color-texto); text-decoration-color: var(--color-borde-fuerte); text-underline-offset: 3px; }
.enlace-boton:hover { color: var(--color-texto); text-decoration-color: var(--color-primario); }

/* ---------- 4. Campos, selector de cantidad y opciones ---------- */
.input,
.select,
.textarea {
  min-height: var(--alto-control);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-control);
  padding-inline: var(--esp-4);
}
.campo__etiqueta { font-weight: var(--peso-semi); }
.cantidad {
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-control);
  min-height: var(--alto-control);
  padding: 3px;
  gap: 2px;
  background: #fff;
}
.cantidad__boton {
  width: 40px;
  height: 40px;
  color: var(--color-texto-suave);
  border-radius: 9px;
  transition: background-color var(--duracion-rapida) var(--ease-out), color var(--duracion-rapida) var(--ease-out);
}
.cantidad__boton:hover { background: var(--color-fondo-alterno); color: var(--color-texto); }
.cantidad__boton:disabled { color: var(--color-borde-fuerte); background: none; }
.cantidad__valor { font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }
.cantidad--sm { min-height: 36px; padding: 2px; }
.cantidad--sm .cantidad__boton { width: 30px; height: 30px; border-radius: 8px; }
.pildora {
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-control);
  font-weight: var(--peso-semi);
  transition: border-color var(--duracion-rapida) var(--ease-out), background-color var(--duracion-rapida) var(--ease-out);
}
.pildora:hover { border-color: var(--color-texto-tenue); }
.variante__opcion input:checked + .pildora {
  border-color: var(--color-texto);
  box-shadow: inset 0 0 0 1px var(--color-texto);
  background: #fff;
  color: var(--color-texto);
}
.variante__titulo { font-weight: var(--peso-semi); font-size: var(--texto-sm); }
.variante__titulo span { font-weight: var(--peso-normal); color: var(--color-texto-suave); }
.variante__opcion input:checked + .muestra { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-texto); }
.chip { background: var(--tinte-neutro); color: var(--tinte-neutro-texto); border-color: var(--color-borde); }
.pestana {
  border-color: var(--color-borde);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
.pestana:hover { color: var(--color-texto); border-color: var(--color-borde-fuerte); }
.pestana[aria-selected="true"] { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.paginacion__boton { border-radius: var(--radio-control); font-weight: var(--peso-semi); }
.paginacion__boton[aria-current="page"] { background: var(--color-texto); border-color: var(--color-texto); }

/* ---------- 5. Barra superior: carbón, texto pequeño ---------- */
.barra-superior {
  background: var(--color-carbon);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
}
.barra-superior__interior { min-height: 36px; }
.barra-superior__enlaces a { color: rgba(255, 255, 255, 0.78); transition: color var(--duracion-rapida) var(--ease-out); }
.barra-superior__enlaces a:hover { color: #fff; text-decoration: none; }
.barra-superior__mensaje span { transition: opacity var(--duracion-lenta) var(--ease-out), transform var(--duracion-lenta) var(--ease-out); }
.barra-superior :focus-visible { outline-color: #fff; }
@media (max-width: 767px) {
  .barra-superior { font-size: 0.6875rem; letter-spacing: 0; }
  .barra-superior__mensaje { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- 6. Header, buscador y menú ---------- */
.header {
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
  transition: box-shadow var(--duracion-lenta) var(--ease-out);
}
.header--compacto { box-shadow: var(--sombra-header); }
.header__accion { font-weight: var(--peso-semi); border-radius: var(--radio-control); }
.header__accion .icono { width: 22px; height: 22px; stroke-width: 1.5; }
.header__carrito-etiqueta { font-weight: var(--peso-normal); }
.contador { background: var(--color-primario); font-weight: var(--peso-bold); }
/* Buscador: fondo gris muy claro, bordes redondeados, sin bloque rojo */
.buscador { border-radius: var(--radio-pildora); background: var(--color-fondo-campo); }
.buscador__input {
  min-height: 46px;
  border: 1px solid transparent;
  border-right: 0;
  background: transparent;
  padding-left: var(--esp-6);
  border-radius: var(--radio-pildora) 0 0 var(--radio-pildora);
}
.buscador__input::placeholder { color: var(--color-texto-tenue); }
.buscador__input:focus { background: #fff; border-color: var(--color-borde-fuerte); box-shadow: none; }
.buscador:focus-within { box-shadow: var(--anillo-foco); }
.buscador__boton,
.buscador__input:focus + .buscador__boton {
  width: 52px;
  background: transparent;
  color: var(--color-texto-suave);
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 0 var(--radio-pildora) var(--radio-pildora) 0;
}
.buscador__input:focus + .buscador__boton { background: #fff; border-color: var(--color-borde-fuerte); }
.buscador__boton:hover { background: transparent; color: var(--color-texto); }
.buscador__sugerencias { border-radius: var(--radio-lg); border-color: var(--color-borde); box-shadow: var(--sombra-flotante); }
/* Menú de categorías */
.nav { border-top: 1px solid var(--color-borde); }
.nav__boton-todas {
  background: transparent;
  color: var(--color-texto);
  font-weight: var(--peso-semi);
  padding-left: 0;
  transition: color var(--duracion-rapida) var(--ease-out);
}
.nav__boton-todas:hover,
.nav__boton-todas[aria-expanded="true"] { background: transparent; color: var(--color-primario); }
.nav__enlace { font-weight: var(--peso-semi); color: var(--color-texto-suave); transition: color var(--duracion-rapida) var(--ease-out); }
.nav__item:hover .nav__enlace,
.nav__enlace:focus-visible { color: var(--color-texto); }
@media (max-width: 1279px) {
  .nav__enlace { padding-inline: 8px; }
  .nav__interior { gap: 0; }
}
.nav__enlace::after { height: 2px; border-radius: 2px; transition: transform var(--duracion-media) var(--ease-out); }
.nav__enlace--oferta { color: var(--color-texto-suave); }
.nav__enlace--oferta .icono { color: var(--color-primario); }
.nav__enlace--oferta::after { background: var(--color-primario); }
.nav__desplegable,
.mega { border-color: var(--color-borde); box-shadow: var(--sombra-flotante); border-radius: 0 0 var(--radio-lg) var(--radio-lg); }
.nav__desplegable { border-radius: var(--radio-lg); }
.mega__categoria { font-weight: var(--peso-semi); }
.mega__icono { background: var(--color-fondo-alterno); color: var(--color-texto); }
.menu-movil__nombre .icono,
.menu-movil__enlace > .icono:first-child,
.menu-movil__ciudad .icono { color: var(--color-texto-suave); }
.menu-movil__enlace--oferta { color: var(--color-texto); }
.menu-movil__enlace--oferta .icono { color: var(--color-primario) !important; }

/* ---------- 7. Pie de página: franja de cierre + cuerpo verde muy oscuro de la marca ----------
   Cuerpo sobre --verde-noche (no negro) con texto claro; el logo va sobre una placa blanca
   para conservar sus colores, y aparece grande como marca de agua muy tenue. */
.pie {
  --pie-texto: rgba(255, 255, 255, 0.74);
  --pie-linea: rgba(255, 255, 255, 0.12);
  margin-top: 0;
  background: #fff;
  border-top: 0;
}
.pie__beneficios { background: #fff; border-bottom: 0; padding-block: var(--esp-10) 0; }
/* Franja de cierre: la mitad de abajo se apoya sobre el verde oscuro */
.pie__cierre { position: relative; padding-top: var(--esp-14); background: linear-gradient(180deg, #fff 0 50%, var(--verde-noche) 50% 100%); }
.pie__cta {
  position: relative;
  display: grid;
  gap: var(--esp-6);
  align-items: center;
  margin: 0;
  padding: var(--esp-10) var(--esp-6);
  border-radius: var(--radio-xl);
  background: var(--degradado-marca);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(1, 60, 26, 0.6);
}
.pie__cta::before,
.pie__cta::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.pie__cta::before { width: 460px; height: 460px; right: -140px; top: -260px; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%); }
.pie__cta::after { width: 300px; height: 300px; left: 38%; bottom: -220px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%); }
.pie__cta-texto { display: grid; gap: var(--esp-2); }
.pie__cta-etiqueta { margin: 0; font-size: var(--texto-xs); font-weight: var(--peso-black); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.8); }
.pie__cta-titulo { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); font-weight: var(--peso-black); letter-spacing: -0.035em; line-height: 1.06; text-wrap: balance; }
.pie__cta-titulo span { color: #c8f0d6; }
.pie__cta-frase { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: var(--texto-lg); }
.pie__cta .boton { justify-self: start; }
.pie__cta .boton .icono { color: var(--color-whatsapp); }
@media (min-width: 900px) {
  .pie__cta { grid-template-columns: 1fr auto; padding: var(--esp-14) var(--esp-16); }
}
/* Cuerpo */
.pie__cuerpo { position: relative; overflow: hidden; background: var(--verde-noche); color: var(--pie-texto); font-size: var(--texto-sm); }
.pie__marca-agua {
  position: absolute;
  right: -60px;
  bottom: 40px;
  width: 560px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}
.pie__principal { position: relative; display: grid; gap: var(--esp-2); padding-block: var(--esp-14) var(--esp-10); }
@media (min-width: 768px) {
  .pie__principal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-10) var(--esp-8); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .pie__principal { grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: var(--esp-12); }
  .pie__marca { grid-column: auto; }
}
.pie__marca { display: grid; gap: var(--esp-4); align-content: start; justify-items: start; margin: 0 0 var(--esp-6); color: var(--pie-texto); }
.pie__marca p { margin: 0; max-width: 34ch; }
.pie__logo { display: inline-block; padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-lg); background: #fff; box-shadow: none; }
.pie__logo img { height: 48px; width: auto; }
.pie__destacado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-xl);
  font-weight: var(--peso-black);
  letter-spacing: -0.02em;
  color: #fff !important;
}
.pie__destacado::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: #4cc47c; }
.pie__titulo,
.pie__titulo-fijo { font-size: var(--texto-xs); font-weight: var(--peso-black); text-transform: uppercase; letter-spacing: 0.14em; color: #fff; }
.pie__titulo-fijo { margin-bottom: var(--esp-5); }
.pie__columna { border-bottom: 1px solid var(--pie-linea); }
@media (min-width: 768px) { .pie__columna { border: 0; } }
.pie__acordeon { color: #fff; }
.pie__lista { display: grid; gap: var(--esp-3); color: var(--pie-texto); font-size: var(--texto-sm); }
/* Subrayado animado al pasar el mouse (transform: no mueve nada) */
.pie__lista a,
.pie__legales a {
  position: relative;
  color: inherit;
  transition: color var(--duracion-media) var(--ease-out);
}
.pie__lista a::after,
.pie__legales a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duracion-lenta) var(--ease-out);
}
.pie__lista a:hover,
.pie__legales a:hover { color: #fff; text-decoration: none; }
.pie__lista a:hover::after,
.pie__legales a:hover::after { transform: scaleX(1); }
.pie__contacto li { display: flex; gap: var(--esp-3); align-items: flex-start; }
.pie__contacto .icono { flex-shrink: 0; margin-top: 3px; color: #6fd39a; }
.pie__telefono { white-space: nowrap; font-weight: var(--peso-bold); color: #fff !important; font-size: var(--texto-md); }
/* Redes: círculos con borde fino; al pasar el mouse, color de marca */
.pie__redes { display: flex; gap: var(--esp-3); }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition: background-color var(--duracion-media) var(--ease-out), border-color var(--duracion-media) var(--ease-out), transform var(--duracion-media) var(--ease-out);
}
.pie__redes a .icono { width: 18px; height: 18px; stroke-width: 1.5; }
.pie__redes a:hover { background: var(--color-primario); border-color: var(--color-primario); color: #fff; transform: translateY(-2px); }
/* Mapa: esquinas redondeadas y color suavizado para que combine */
.pie__mapa { position: relative; margin-top: var(--esp-5); }
.pie__mapa .mapa { border-radius: var(--radio-lg); overflow: hidden; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px var(--pie-linea); }
.pie__mapa .mapa__iframe { filter: grayscale(0.55) contrast(0.95) brightness(0.95); }
/* Sin internet: dirección legible sobre el fondo oscuro y un solo botón "Cómo llegar" */
.pie__mapa .mapa__respaldo { color: rgba(255, 255, 255, 0.85); padding-bottom: var(--esp-14); }
.pie__mapa .mapa__respaldo .icono { color: #6fd39a; }
.pie__mapa .mapa__respaldo .boton { display: none; }
.pie__como-llegar { position: absolute; left: var(--esp-3); bottom: var(--esp-3); z-index: 2; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); }
.pie__como-llegar .icono { color: var(--color-primario); }
/* Franja inferior: legales en línea + notas, con línea fina de separación */
.pie__inferior {
  position: relative;
  display: grid;
  gap: var(--esp-4);
  padding-block: var(--esp-6) var(--esp-8);
  border-top: 1px solid var(--pie-linea);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--texto-xs);
}
.pie__legales ul { display: flex; flex-wrap: wrap; gap: var(--esp-2) 0; margin: 0; padding: 0; }
.pie__legales li { display: inline-flex; align-items: center; }
.pie__legales li + li::before { content: "·"; margin: 0 var(--esp-3); color: rgba(255, 255, 255, 0.35); }
.pie__legales a { color: rgba(255, 255, 255, 0.78); font-size: var(--texto-xs); }
.pie__notas { display: grid; gap: var(--esp-1); }
.pie__notas p { margin: 0; display: flex; gap: var(--esp-2); align-items: flex-start; }
.pie__notas .icono { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
@media (max-width: 767px) {
  /* Celular: columnas en acordeón y legales en dos columnas */
  .pie__principal { padding-block: var(--esp-10) var(--esp-6); }
  .pie__legales ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3) var(--esp-4); }
  .pie__legales li + li::before { content: none; }
  .pie__marca-agua { width: 360px; right: -80px; bottom: 120px; }
}
@media (max-width: 1023px) {
  .pie__inferior { padding-bottom: 104px; }
}
.beneficio__titulo { font-weight: var(--peso-bold); }

/* ---------- 8. Etiquetas sutiles: fondo muy claro + texto del color ---------- */
.etiqueta {
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: var(--peso-bold);
  letter-spacing: 0.02em;
  line-height: 1.45;
  border-radius: var(--radio-pildora);
  box-shadow: none;
}
.etiqueta--garantia,
.etiqueta--nuevo,
.etiqueta--hoy { background: var(--tinte-verde); color: var(--tinte-verde-texto); box-shadow: none; }
.etiqueta--vendido,
.etiqueta--agotado { background: var(--tinte-neutro); color: var(--tinte-neutro-texto); }
.etiqueta--envio,
.etiqueta--descuento { background: var(--color-primario); color: #fff; box-shadow: none; }
/* Sobre las fotos, fondo blanco para que se lean sin tapar el producto */
.tarjeta__etiquetas .etiqueta { background: rgba(255, 255, 255, 0.94); }
.precio__ahorro { color: var(--color-primario); font-weight: var(--peso-bold); }

/* ---------- 9. Precio y tarjetas de producto ---------- */
.precio__actual { color: var(--color-texto); font-weight: var(--peso-bold); letter-spacing: -0.01em; }
.precio__desde { color: var(--color-texto-suave); font-weight: var(--peso-normal); }
.precio__consultar { color: var(--color-texto); font-weight: var(--peso-semi); }
.tarjeta {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: none;
  transition: transform var(--duracion-lenta) var(--ease-out), box-shadow var(--duracion-lenta) var(--ease-out),
    border-color var(--duracion-lenta) var(--ease-out);
}
.tarjeta__media { border-bottom: 0; background: var(--color-fondo-foto); }
.tarjeta__imagen { transition: transform 400ms var(--ease-out); }
.tarjeta__cuerpo { gap: 6px; padding: var(--esp-4) var(--esp-4) var(--esp-2); }
.tarjeta__marca { font-size: 0.6875rem; font-weight: var(--peso-semi); letter-spacing: var(--tracking-etiqueta); color: var(--color-texto-tenue); }
.tarjeta__nombre { font-size: var(--texto-sm); font-weight: var(--peso-semi); line-height: 1.4; min-height: 2.8em; letter-spacing: -0.005em; }
.tarjeta__descripcion { color: var(--color-texto-tenue); }
.tarjeta__precio { padding-top: var(--esp-2); }
.tarjeta__precio .precio__actual { font-size: var(--texto-lg); }
.tarjeta__acciones { padding: var(--esp-2) var(--esp-4) var(--esp-4); }
/* Botón discreto que gana protagonismo al pasar el mouse */
.tarjeta__acciones .boton { min-height: 44px; font-size: var(--texto-sm); }
.tarjeta__acciones .boton--primario,
.tarjeta__acciones .boton--secundario,
.tarjeta__acciones .boton--verde {
  background: var(--color-fondo-alterno);
  border-color: var(--color-fondo-alterno);
  color: var(--color-texto);
  box-shadow: none;
  transform: none;
}
.tarjeta__acciones .cantidad { min-height: 44px; }
.tarjeta__acciones .boton { padding-inline: var(--esp-3); white-space: nowrap; }
.tarjeta__acciones a.boton { white-space: normal; line-height: 1.2; }
@media (max-width: 479px) {
  .tarjeta__acciones .boton .icono { display: none; }
  .tarjeta__cuerpo { padding: var(--esp-3) var(--esp-3) var(--esp-1); }
  .tarjeta__acciones { padding: var(--esp-2) var(--esp-3) var(--esp-3); }
}
.tarjeta__acciones .cantidad__boton { width: 36px; height: 36px; }
.tarjeta__favorito {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  color: var(--color-texto-suave);
}
.tarjeta__favorito .icono { width: 18px; height: 18px; stroke-width: 1.5; }
.tarjeta__favorito:hover { background: #fff; color: var(--color-texto); }
.tarjeta__favorito[aria-pressed="true"] { color: var(--color-primario); }
.tarjeta__vista-rapida {
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-tarjeta);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-capas);
    border-color: var(--color-borde-fuerte);
  }
  .tarjeta:hover .tarjeta__imagen:not(.foto--completa) { transform: scale(1.03); }
  .tarjeta:hover .tarjeta__acciones .boton--primario {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
  }
  .tarjeta:hover .tarjeta__acciones .boton--secundario,
  .tarjeta:hover .tarjeta__acciones .boton--verde { background: #fff; border-color: var(--color-texto); }
  .tarjeta:hover .tarjeta__acciones .boton--primario:hover { background: var(--color-primario-oscuro); border-color: var(--color-primario-oscuro); }
}
/* Categorías destacadas (círculos): nunca más anchos que su columna */
.cat-destacada { font-weight: var(--peso-semi); color: var(--color-texto); }
.cat-destacada__circulo { box-shadow: 0 0 0 1px var(--color-borde); border-width: 0; background: var(--color-fondo-foto); }
.cat-destacada:hover .cat-destacada__circulo { box-shadow: 0 0 0 2px var(--color-texto); transform: translateY(-2px); }
@media (min-width: 1024px) {
  .cat-destacada__circulo { width: min(120px, 100%); height: auto; aspect-ratio: 1; }
}

/* ---------- 10. Imágenes grandes: carrusel, banners medianos y "Compra por necesidad" ----------
   La foto llena todo el bloque (object-fit: cover; --pos y --pos-movil ajustan el encuadre
   de cada foto). Un degradado oscuro desde el lado del texto la hace legible. */
.hero { padding-top: var(--esp-6); }
.hero__carrusel {
  position: relative;
  height: 460px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  background: var(--color-carbon);
  box-shadow: var(--sombra-capas);
}
@media (min-width: 768px) { .hero__carrusel { height: 560px; } }
.hero__pista { position: relative; display: block; height: 100%; transform: none !important; transition: none; }
/* Fundido entre diapositivas */
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 550ms var(--ease-out), visibility 0s linear 550ms;
}
.hero__slide.es-activa { opacity: 1; visibility: visible; transition: opacity 550ms var(--ease-out), visibility 0s; z-index: 1; }
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(14, 22, 18, 0.88) 0%, rgba(14, 22, 18, 0.55) 45%, rgba(14, 22, 18, 0.05) 80%);
}
@media (min-width: 768px) {
  .hero__slide { align-items: center; }
  .hero__slide::before { background: linear-gradient(90deg, rgba(14, 22, 18, 0.84) 0%, rgba(14, 22, 18, 0.6) 38%, rgba(14, 22, 18, 0) 72%); }
}
.hero__foto,
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__foto img { object-fit: cover; object-position: var(--pos-movil, 50% 50%); }
@media (min-width: 768px) { .hero__foto img { object-position: var(--pos, 50% 50%); } }
/* Zoom lento (Ken Burns muy sutil): la foto activa crece un 5 %; al salir vuelve sin que se vea */
.hero__foto img { transform: scale(1); transition: transform 0s linear 600ms; }
.hero__slide.es-activa .hero__foto img { transform: scale(1.05); transition: transform 6s linear; }
.hero__texto {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--esp-3);
  max-width: 600px;
  padding: var(--esp-6) var(--esp-6) var(--esp-16);
}
@media (max-width: 767px) {
  .hero__texto { gap: var(--esp-2); padding-bottom: var(--esp-14); }
  .hero__titulo { font-size: 1.875rem; }
  .hero__subtitulo { font-size: var(--texto-md); }
}
@media (min-width: 768px) { .hero__texto { padding: var(--esp-12) var(--esp-16); gap: var(--esp-4); } }
.hero__etiqueta {
  padding: 5px 12px;
  border-radius: var(--radio-pildora);
  background: var(--color-primario);
  color: #fff;
  font-size: var(--texto-xs);
  font-weight: var(--peso-black);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero__titulo { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: var(--peso-black); letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.hero__subtitulo { max-width: 42ch; font-size: var(--texto-lg); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.hero__texto .boton { margin-top: var(--esp-2); }
.hero__texto .boton .icono--relleno { color: #fff; }
/* Indicadores: 3 líneas finas con barra de progreso de 2 s */
.hero__controles {
  position: absolute;
  z-index: 3;
  left: var(--esp-6);
  right: auto;
  bottom: var(--esp-5);
  transform: none;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0;
  background: none;
}
@media (min-width: 768px) { .hero__controles { left: var(--esp-16); bottom: var(--esp-8); } }
.hero__linea { position: relative; width: 44px; height: 24px; }
.hero__linea::before,
.hero__progreso {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.hero__linea::before { background: rgba(255, 255, 255, 0.35); }
.hero__progreso { background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__linea[aria-current="true"] .hero__progreso { transform: scaleX(1); }
.hero__progreso.esta-llenando { animation: hero-progreso 2000ms linear forwards; }
.hero__carrusel.esta-pausado .hero__progreso { animation-play-state: paused; }
.hero__carrusel.sin-auto .hero__progreso { animation: none; }
@keyframes hero-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__pausa { width: 32px; height: 32px; margin-left: var(--esp-1); border-radius: var(--radio-pildora); color: #fff; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.hero__pausa:hover { background: rgba(255, 255, 255, 0.24); }
/* Flechas discretas que aparecen al pasar el mouse */
.hero__flecha {
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(14, 22, 18, 0.28);
  color: #fff;
  box-shadow: none;
  opacity: 0;
  transition: opacity var(--duracion-lenta) var(--ease-out), background-color var(--duracion-rapida) var(--ease-out);
}
.hero__flecha:hover { background: rgba(14, 22, 18, 0.5); }
.hero__carrusel:hover .hero__flecha,
.hero__flecha:focus-visible { opacity: 1; }
@media (hover: none) { .hero__flecha { display: none; } }

/* Banners medianos: mismo alto, foto a todo el banner, texto blanco a la izquierda */
.promos { display: grid; gap: var(--esp-5); }
@media (min-width: 768px) { .promos { grid-template-columns: 1fr 1fr; gap: var(--esp-6); } }
.promo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: var(--color-carbon);
  box-shadow: var(--sombra-capas);
}
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 22, 18, 0.86) 0%, rgba(14, 22, 18, 0.62) 42%, rgba(14, 22, 18, 0) 78%);
  transition: opacity var(--duracion-lenta) var(--ease-out);
}
.promo__foto,
.promo__foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.promo__foto img { object-fit: cover; object-position: var(--pos-movil, 50% 50%); transition: transform 900ms var(--ease-out); }
@media (min-width: 768px) { .promo__foto img { object-position: var(--pos, 50% 50%); } }
.promo:hover .promo__foto img { transform: scale(1.05); }
.promo__texto { display: grid; justify-items: start; gap: var(--esp-2); max-width: 400px; padding: var(--esp-8); }
.promo__etiqueta { font-size: var(--texto-xs); font-weight: var(--peso-black); text-transform: uppercase; letter-spacing: 0.14em; color: #b9e7c9; }
.promo__titulo { font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.875rem); font-weight: var(--peso-black); letter-spacing: -0.03em; line-height: 1.08; }
.promo__frase { color: rgba(255, 255, 255, 0.88); }
.promo__boton { margin-top: var(--esp-3); min-height: 44px; }
.promo__boton .icono { transition: transform var(--duracion-media) var(--ease-out); }
.promo:hover .promo__boton .icono { transform: translateX(4px); }

/* Compra por necesidad: 4 bloques con foto, ritmo ancho/angosto en escritorio */
.bento { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
.bento__bloque {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  border-radius: var(--radio-xl);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  background: var(--color-carbon);
  box-shadow: var(--sombra-capas);
}
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(5, 1fr); grid-template-rows: none; grid-auto-rows: 320px; gap: var(--esp-5); }
  .bento__bloque { min-height: 0; }
  .bento__bloque--casa,
  .bento__bloque--consultorio { grid-column: span 3; }
  .bento__bloque--adulto,
  .bento__bloque--curaciones { grid-column: span 2; }
}
.bento__bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(14, 22, 18, 0.86) 0%, rgba(14, 22, 18, 0.45) 42%, rgba(14, 22, 18, 0) 72%);
  transition: opacity var(--duracion-lenta) var(--ease-out);
}
.bento__bloque::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(14, 22, 18, 0.35), rgba(14, 22, 18, 0) 70%);
  opacity: 0;
  transition: opacity var(--duracion-lenta) var(--ease-out);
}
.bento__foto,
.bento__foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.bento__foto img { object-fit: cover; object-position: var(--pos-movil, 50% 50%); transition: transform 900ms var(--ease-out); }
@media (min-width: 768px) { .bento__foto img { object-position: var(--pos, 50% 50%); } }
.bento__texto { display: grid; gap: var(--esp-1); padding: var(--esp-6); }
@media (min-width: 1024px) { .bento__texto { padding: var(--esp-8); } }
.bento__titulo { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: var(--peso-black); letter-spacing: -0.03em; line-height: 1.1; }
.bento__detalle { color: rgba(255, 255, 255, 0.88); font-size: var(--texto-md); }
.bento__ver { display: inline-flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-2); font-weight: var(--peso-bold); color: #fff; }
.bento__ver .icono { transition: transform var(--duracion-media) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bento__bloque:hover .bento__foto img { transform: scale(1.05); }
  .bento__bloque:hover::after { opacity: 1; }
  .bento__bloque:hover .bento__ver .icono { transform: translateX(5px); }
}
.bento__bloque:focus-visible { outline-offset: 3px; border-radius: var(--radio-xl); }

/* Mega-menú: tarjeta de color de marca suave */
.mega__promo { background: var(--color-primario-suave); color: var(--color-texto); border-radius: var(--radio-lg); }
.mega__promo .seccion__enlace { color: var(--color-primario); }
.mega__promo .mega__promo-img { border: 0; border-radius: var(--radio-md); }

/* Destacados, boletín y "Quiénes somos" del inicio */
.ofertas { background: var(--color-fondo-alterno); }
.boletin {
  display: grid;
  gap: var(--esp-6);
  border-radius: var(--radio-xl);
  padding: var(--esp-10) var(--esp-8);
  background: var(--color-primario-suave);
  color: var(--color-texto);
  box-shadow: inset 0 0 0 1px rgba(1, 123, 52, 0.12);
}
@media (min-width: 1024px) { .boletin { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--esp-14) var(--esp-16); } }
.boletin__titulo { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: var(--peso-titulo); letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--esp-2); }
.boletin__texto { color: var(--color-texto-suave); }
.boletin .input { background: #fff; }
.boletin .campo__error { color: var(--color-error); background: none; padding: 0; }
.boletin .casilla { color: var(--color-texto-suave); }
.nosotros-inicio { display: grid; gap: var(--esp-10); align-items: center; }
@media (min-width: 1024px) { .nosotros-inicio { grid-template-columns: 1.15fr 1fr; gap: var(--esp-16); } }
.nosotros-inicio__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-xl); box-shadow: var(--sombra-capas); }
.nosotros-inicio__texto { display: grid; gap: var(--esp-5); align-content: center; }
.nosotros-inicio__texto p { margin: 0; color: var(--color-texto-suave); font-size: var(--texto-lg); max-width: 52ch; }
.nosotros-inicio__texto .seccion__etiqueta { font-size: var(--texto-xs); color: var(--color-primario); }
.nosotros-inicio__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-2); }
/* Cifras destacadas */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin: var(--esp-2) 0 0; padding: 0; }
.cifras li { display: grid; gap: 4px; padding: var(--esp-4); border-radius: var(--radio-lg); background: #fff; box-shadow: var(--sombra-capas); }
.cifras__valor { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: var(--peso-black); letter-spacing: -0.03em; line-height: 1.1; color: var(--color-primario); }
.cifras__texto { font-size: var(--texto-sm); color: var(--color-texto-suave); line-height: 1.35; }
@media (max-width: 479px) {
  .cifras { grid-template-columns: 1fr; }
  .cifras li { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--esp-3); }
}
.testimonio { box-shadow: none; }
/* Franja de beneficios: borde degradado fino que se ilumina, fondo con degradado sutil,
   sombra en capas, ícono en círculo de marca con microanimación y cifra con contador.
   En celular es un carrusel deslizable con indicadores. */
.beneficios { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; margin: 0; padding: 0; }
@media (min-width: 640px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .beneficios { grid-template-columns: repeat(4, 1fr); gap: var(--esp-5); } }
.beneficio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border: 0;
  border-radius: var(--radio-lg);
  background: var(--fondo-tarjeta-marca);
  box-shadow: var(--sombra-marca);
  font-size: var(--texto-md);
  transition: box-shadow var(--duracion-entrada) var(--ease-out), transform var(--duracion-entrada) var(--ease-out);
}
/* Borde de 1 px con degradado (máscara), y una segunda capa más intensa que aparece al pasar el mouse */
.beneficio::before,
.beneficio::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--borde-degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.beneficio::after { background: var(--borde-degradado-activo); opacity: 0; transition: opacity var(--duracion-entrada) var(--ease-out); }
.beneficio__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--degradado-marca);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(1, 90, 38, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.beneficio__icono .icono { width: 26px; height: 26px; stroke-width: 1.75; }
/* Anillo que pulsa suave al pasar el mouse (dos veces, no sin parar) */
.beneficio__icono::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primario);
  opacity: 0;
  pointer-events: none;
}
.beneficio__cuerpo { display: grid; gap: var(--esp-1); }
.beneficio__titulo { display: block; margin: 0; font-size: var(--texto-md); font-weight: var(--peso-black); letter-spacing: -0.01em; color: var(--color-texto); }
.beneficio__cifra {
  display: block;
  margin-top: var(--esp-1);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem);
  font-weight: var(--peso-black);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-primario);
  font-variant-numeric: tabular-nums;
}
.beneficio__cifra small { display: block; margin-bottom: 2px; font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.02em; color: var(--color-texto-suave); }
.beneficio__texto { display: block; font-size: var(--texto-sm); line-height: 1.5; color: var(--color-texto-suave); }
@media (hover: hover) and (pointer: fine) {
  .beneficio:hover { box-shadow: var(--sombra-marca-hover); transform: translateY(-3px); }
  .beneficio:hover::after { opacity: 1; }
  .beneficio:hover .beneficio__icono::after { animation: anillo-pulso 1.2s var(--ease-out) 2; }
  .beneficio--camion:hover .icono { animation: camion-avanza 700ms var(--ease-out); }
  .beneficio--paquete:hover .icono { animation: caja-abre 600ms var(--ease-out); }
  .beneficio--escudo:hover .icono { animation: escudo-brilla 900ms var(--ease-out); }
  .beneficio--asesoria:hover .icono { animation: audifonos-vibran 450ms ease-in-out; }
}
@keyframes anillo-pulso { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes camion-avanza { 0% { transform: none; } 40% { transform: translateX(5px); } 55% { transform: translateX(4px) translateY(-1px); } 100% { transform: none; } }
@keyframes caja-abre { 0% { transform: none; } 35% { transform: translateY(-3px) rotate(-6deg) scale(1.06); } 70% { transform: translateY(0) rotate(3deg); } 100% { transform: none; } }
@keyframes escudo-brilla { 0% { opacity: 1; transform: none; } 40% { opacity: 0.7; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes audifonos-vibran { 0%, 100% { transform: none; } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.beneficios__puntos { display: none; }
/* Celular: carrusel deslizable con indicadores */
@media (max-width: 639px) {
  .beneficios {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--margen-lateral) * -1);
    padding: 4px var(--margen-lateral) var(--esp-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margen-lateral);
    scrollbar-width: none;
  }
  .beneficios::-webkit-scrollbar { display: none; }
  .beneficio { flex: 0 0 82%; scroll-snap-align: start; }
  .beneficios__puntos { display: flex; justify-content: center; gap: 6px; margin-top: calc(var(--esp-2) * -1); }
  .beneficios__puntos span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-borde-fuerte); transition: transform var(--duracion-media) var(--ease-out), background-color var(--duracion-media) var(--ease-out); }
  .beneficios__puntos .es-actual { background: var(--color-primario); transform: scale(1.35); }
}
.franja-beneficios { border-block: 0; }
.pie__beneficios { border-bottom: 0; }

/* ---------- 11. Página de producto ---------- */
.pagina-producto main > .contenedor { padding-top: var(--esp-4); }
.producto {
  display: grid;
  gap: var(--esp-8);
  margin-top: var(--esp-4);
}
@media (min-width: 900px) {
  .producto {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--esp-12);
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .producto { gap: var(--esp-16); }
}
/* Galería */
.galeria { position: relative; display: grid; gap: var(--esp-3); min-width: 0; }
@media (min-width: 900px) {
  .galeria { position: relative; top: auto; }
  .galeria--fija { position: sticky; }
}
.galeria__visor { position: relative; min-width: 0; }
.galeria__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radio-xl);
  background: var(--color-fondo-foto);
  overscroll-behavior-x: contain;
}
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__pista:focus-visible { outline-offset: 3px; border-radius: var(--radio-xl); }
.galeria__slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--color-fondo-foto);
}
.galeria__slide picture { display: contents; }
.galeria__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}
.galeria__slide.con-zoom { cursor: zoom-in; }
.galeria__slide.con-zoom img { transform: scale(1.6); }
.galeria__slide.con-zoom img.foto--completa { transform: scale(1.4); }
.galeria__slide .imagen-pendiente { position: absolute; inset: 0; }
.galeria__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--duracion-media) var(--ease-out), background-color var(--duracion-rapida) var(--ease-out),
    transform var(--duracion-rapida) var(--ease-out);
}
.galeria__flecha--izq { left: var(--esp-4); }
.galeria__flecha--der { right: var(--esp-4); }
.galeria__flecha:hover { background: #fff; }
.galeria__flecha:active { transform: translateY(-50%) scale(0.94); }
.galeria__flecha:disabled { opacity: 0 !important; pointer-events: none; }
.galeria__visor:hover .galeria__flecha,
.galeria__flecha:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .galeria__flecha { display: grid; }
}
.galeria__puntos {
  position: absolute;
  left: 50%;
  bottom: var(--esp-3);
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.88);
  transform: translateX(-50%);
}
.galeria__puntos span {
  width: 6px;
  height: 6px;
  border-radius: var(--radio-pildora);
  background: rgba(36, 40, 44, 0.25);
  transition: background-color var(--duracion-media) var(--ease-out);
}
.galeria__puntos span.es-actual { width: 18px; background: var(--color-texto); }
.galeria__miniaturas { display: none; gap: var(--esp-2); }
.galeria__miniatura {
  flex: 0 0 64px;
  width: 64px;
  height: auto;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--color-fondo-foto);
  opacity: 0.72;
  transition: opacity var(--duracion-media) var(--ease-out), border-color var(--duracion-media) var(--ease-out);
}
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura:hover { opacity: 1; }
.galeria__miniatura[aria-current="true"] { opacity: 1; border-color: var(--color-texto); }
@media (min-width: 900px) {
  .galeria__puntos { display: none; }
  .galeria__miniaturas { display: flex; overflow-x: auto; padding: 1px; }
}
/* En pantallas grandes las miniaturas van en columna a la izquierda */
@media (min-width: 1200px) {
  .galeria:has(.galeria__miniaturas) { grid-template-columns: 64px minmax(0, 1fr); gap: var(--esp-4); }
  .galeria__miniaturas { grid-column: 1; grid-row: 1; flex-direction: column; overflow: visible; }
  .galeria__miniatura { width: 64px; }
}
@media (max-width: 899px) {
  /* Celular y tableta: foto a todo el ancho, de borde a borde */
  .galeria { margin-inline: calc(var(--margen-lateral) * -1); }
  .galeria__pista,
  .galeria__pista:focus-visible { border-radius: 0; }
}
/* Ficha: información bien espaciada */
.ficha { display: grid; gap: var(--esp-6); align-content: start; min-width: 0; }
.ficha__cabecera { display: grid; gap: var(--esp-2); }
.ficha__categoria {
  justify-self: start;
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--color-texto-tenue);
  transition: color var(--duracion-rapida) var(--ease-out);
}
a.ficha__categoria:hover { color: var(--color-primario); }
.ficha__nombre {
  font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.vista-rapida__nombre { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: var(--peso-titulo); letter-spacing: -0.02em; line-height: 1.2; }
.ficha__marca { font-size: var(--texto-sm); color: var(--color-texto-suave); text-transform: none; letter-spacing: 0; font-weight: var(--peso-normal); }
.ficha__precio { margin-bottom: calc(var(--esp-6) * -1 + 4px); }
.ficha__precio .precio__actual { font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2rem); font-weight: var(--peso-bold); }
.ficha__iva { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.ficha__etiquetas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: calc(var(--esp-2) * -1); }
.ficha__etiquetas .etiqueta { font-size: var(--texto-xs); padding: 4px 12px; }
.ficha__disponible {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--tinte-verde-texto);
  margin-top: calc(var(--esp-2) * -1);
}
.ficha__disponible::before { width: 7px; height: 7px; }
.ficha__disponible--agotado { color: var(--color-texto-suave); }
.ficha__descripcion { color: var(--color-texto-suave); max-width: 52ch; }
.ficha .variantes { gap: var(--esp-5); }
.ficha__compra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
}
.ficha__compra .boton--whatsapp { grid-column: 1 / -1; }
.ficha__pedido-nota { margin-top: calc(var(--esp-3) * -1); font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.ficha__dudas {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: calc(var(--esp-3) * -1);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.ficha__dudas .icono { color: var(--color-whatsapp); }
.ficha__dudas a { color: var(--color-texto); font-weight: var(--peso-semi); text-decoration: underline; text-decoration-color: var(--color-borde-fuerte); text-underline-offset: 3px; }
.ficha__dudas a:hover { text-decoration-color: var(--color-texto); }
/* Bloque de confianza: lista limpia con separadores finos */
.confianza {
  gap: 0;
  padding: 0 var(--esp-5);
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  font-size: var(--texto-sm);
}
.confianza li { gap: var(--esp-4); padding-block: var(--esp-4); color: var(--color-texto-suave); }
.confianza li + li { border-top: 1px solid var(--color-borde); }
.confianza .icono {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 10px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-primario-claro);
  color: var(--color-primario);
  stroke-width: 1.75;
}
.confianza strong { color: var(--color-texto); font-weight: var(--peso-semi); margin-bottom: 2px; }
.confianza a,
.confianza button { color: var(--color-texto); font-weight: var(--peso-semi); text-decoration: underline; text-decoration-color: var(--color-borde-fuerte); text-underline-offset: 3px; }
.confianza__garantia strong { color: var(--color-texto); }
.ficha__secundarias { display: flex; gap: var(--esp-4); margin-top: calc(var(--esp-3) * -1); }
/* Pestañas debajo, a lo ancho, con ancho de lectura cómodo */
.info-producto { margin-top: var(--esp-16); }
@media (min-width: 1024px) { .info-producto { margin-top: var(--esp-24); } }
.info-producto .pestanas__lista {
  gap: var(--esp-6);
  border-bottom: 1px solid var(--color-borde);
  padding: 0;
}
.info-producto .pestana {
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-texto-suave);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--duracion-rapida) var(--ease-out), box-shadow var(--duracion-media) var(--ease-out);
}
.info-producto .pestana:hover { color: var(--color-texto); background: none; }
.info-producto .pestana[aria-selected="true"] { background: none; color: var(--color-texto); box-shadow: inset 0 -3px 0 var(--color-primario); }
.info-producto__panel { max-width: 720px; padding-block: var(--esp-8) 0; line-height: 1.7; }
.info-producto__panel p + p { margin-top: var(--esp-4); }
.info-producto__subtitulo { font-size: var(--texto-lg); margin: var(--esp-6) 0 var(--esp-3); }
.lista-check { gap: var(--esp-3); }
.lista-check .icono { color: var(--color-texto-tenue); }
.tabla-specs { border-radius: var(--radio-lg); border-color: var(--color-borde); }
.tabla-specs th { background: var(--color-fondo-alterno); font-weight: var(--peso-semi); }
.tabla-specs th,
.tabla-specs td { padding: var(--esp-3) var(--esp-5); border-color: var(--color-borde); }
.pregunta dt { font-weight: var(--peso-semi); }
.pagina-producto .seccion:first-of-type { margin-top: var(--esp-8); }
/* Barra fija en celular: precio + Agregar */
.barra-compra {
  padding: var(--esp-3) var(--margen-lateral) calc(var(--esp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-borde);
  box-shadow: 0 -10px 24px -16px rgba(36, 40, 44, 0.25);
}
.barra-compra__precio .precio__actual { color: var(--color-texto); font-weight: var(--peso-bold); }
.barra-compra .boton { min-width: 132px; }
@media (min-width: 900px) and (max-width: 1023px) {
  .barra-compra { display: none; }
}

/* Frase de beneficio, "¿Por qué comprarlo aquí?", "Lo que incluye" y franja de dudas */
.ficha__beneficio { margin: 0; font-size: var(--texto-lg); line-height: 1.5; color: var(--color-texto-suave); max-width: 46ch; }
.por-que { display: grid; gap: var(--esp-3); }
.por-que__titulo { font-size: var(--texto-xs); font-weight: var(--peso-black); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primario); }
.confianza .icono--relleno { stroke: none; fill: currentColor; }
.info-producto__panel { line-height: 1.75; }
.incluye { display: grid; gap: var(--esp-5) var(--esp-8); margin: 0; padding: 0; }
@media (min-width: 768px) { .incluye { grid-template-columns: 1fr 1fr; } }
.info-producto__panel:has(.incluye) { max-width: 960px; }
.incluye__item { display: flex; gap: var(--esp-4); align-items: flex-start; line-height: 1.55; color: var(--color-texto-suave); }
.incluye__item strong { display: block; margin-bottom: 2px; color: var(--color-texto); font-weight: var(--peso-bold); }
.incluye__check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primario-claro);
  color: var(--color-primario);
}
.incluye__check .icono { stroke-width: 2.25; }
.dudas-producto {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
  margin-top: var(--esp-14);
  padding: var(--esp-6);
  border-radius: var(--radio-xl);
  background: var(--color-primario-suave);
  box-shadow: inset 0 0 0 1px rgba(1, 123, 52, 0.12);
}
@media (min-width: 768px) { .dudas-producto { grid-template-columns: auto 1fr auto; padding: var(--esp-6) var(--esp-8); } }
.dudas-producto__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--color-whatsapp); box-shadow: var(--sombra-tarjeta); }
.dudas-producto__texto { margin: 0; font-size: var(--texto-lg); color: var(--color-texto-suave); }
.dudas-producto__texto strong { color: var(--color-texto); }
.dudas-producto .boton { justify-self: start; }

/* ---------- Caja de compra: tarjeta fija al bajar (escritorio) ----------
   "¿Por qué comprarlo aquí?" pasa debajo de la galería en escritorio para que la
   columna derecha tenga espacio y la caja pueda quedarse fija. */
@media (min-width: 900px) {
  /* La ficha ocupa todo el alto de la fila: así la caja fija acompaña a la galería hasta el final */
  .producto > .ficha { align-self: stretch; }
  .galeria--fija { position: sticky; }
  /* Proporciones alternativas que elige js/producto.js para equilibrar las columnas */
  .producto.producto--50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .producto.producto--46 { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .producto.producto--60 { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
}
.caja-compra {
  position: relative;
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  background: #fff;
  box-shadow: var(--sombra-marca);
}
@media (max-width: 479px) { .caja-compra { padding: var(--esp-5) var(--esp-4); } }
.caja-compra--fija { position: sticky; z-index: 2; }
/* Precio protagonista: miles en un peso más ligero; IVA a la derecha */
.caja-compra__precio { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-3) var(--esp-4); flex-wrap: wrap; }
.caja-compra .ficha__precio { margin: 0; }
.caja-compra .ficha__precio .precio { align-items: baseline; }
.caja-compra .ficha__precio .precio__actual {
  font-size: clamp(2.375rem, 1.8rem + 1.6vw, 3rem);
  font-weight: var(--peso-black);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.precio__miles { font-weight: var(--peso-semi); color: var(--color-texto-suave); letter-spacing: -0.02em; }
.caja-compra .ficha__iva { margin: 0 0 6px; font-size: var(--texto-xs); color: var(--color-texto-tenue); text-align: right; }
.caja-compra .ficha__etiquetas { margin: 0; }
/* "Más vendido": degradado de marca, estrella y un brillo que la recorre cada 6 s */
:is(.ficha__etiquetas, .caja-compra__estado) .etiqueta--vendido {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: var(--degradado-marca);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(1, 90, 38, 0.7);
}
:is(.ficha__etiquetas, .caja-compra__estado) .etiqueta--vendido .icono { width: 13px; height: 13px; color: var(--color-acento); }
:is(.ficha__etiquetas, .caja-compra__estado) .etiqueta--vendido::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
  animation: brillo-recorre 6s var(--ease-out) 1.2s infinite;
  pointer-events: none;
}
@keyframes brillo-recorre { 0% { transform: translateX(-120%); } 14%, 100% { transform: translateX(120%); } }
/* Disponibilidad: punto que pulsa suave + hora límite real */
.ficha__disponibilidad { display: grid; gap: var(--esp-2); }
.caja-compra .ficha__disponible { margin: 0; position: relative; }
.caja-compra .ficha__disponible::before { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.caja-compra .ficha__disponible:not(.ficha__disponible--agotado)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--color-primario);
  animation: punto-pulsa 2.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes punto-pulsa { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.ficha__urgencia {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-md);
  background: var(--color-primario-suave);
  font-size: var(--texto-sm);
  line-height: 1.45;
  color: var(--color-texto-suave);
}
.ficha__urgencia[hidden] { display: none; }
.ficha__urgencia .icono { flex-shrink: 0; margin-top: 2px; color: var(--color-primario); }
.ficha__urgencia strong { color: var(--color-texto); font-weight: var(--peso-bold); }
/* Botón "Agregar al carrito": degradado de marca y brillo que lo recorre al pasar el mouse */
.caja-compra .boton--agregar,
.barra-compra .boton--agregar {
  border-color: transparent;
  background: var(--degradado-marca);
  box-shadow: 0 10px 22px -12px rgba(1, 90, 38, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.caja-compra .boton--agregar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .caja-compra .boton--agregar:hover:not(:disabled) { background: var(--degradado-marca); box-shadow: 0 14px 26px -12px rgba(1, 90, 38, 0.75); }
  .caja-compra .boton--agregar:hover::after { transform: translateX(110%); transition: transform 600ms var(--ease-out); }
}
.caja-compra .boton--agregar.es-agregado { background: var(--color-primario-oscuro); }
/* Botón "Pedir por WhatsApp": borde fino verde e ícono en su color */
.caja-compra .boton--whatsapp { border-color: rgba(26, 141, 74, 0.55); color: var(--color-texto); }
.caja-compra .boton--whatsapp .icono { color: var(--color-whatsapp); }
@media (hover: hover) and (pointer: fine) {
  .caja-compra .boton--whatsapp:hover:not(:disabled) { background: var(--color-primario-suave); border-color: var(--color-whatsapp); color: var(--color-texto); }
}
.caja-compra .ficha__pedido-nota { margin: calc(var(--esp-1) * -1) 0 0; }
/* Fila de 3 íconos de confianza */
.caja-compra__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  margin: 0;
  padding: var(--esp-4) 0 0;
  border-top: 1px solid var(--color-borde);
  list-style: none;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
.caja-compra__sellos li { display: inline-flex; align-items: center; gap: 6px; }
.caja-compra__sellos .icono { color: var(--color-primario); }
/* Copia de la foto que vuela al carrito (js/componentes.js) */
.vuelo-carrito {
  position: fixed;
  z-index: 400;
  border-radius: 50%;
  background: var(--color-fondo-foto) center / cover no-repeat;
  box-shadow: 0 12px 28px -10px rgba(1, 60, 26, 0.45), 0 0 0 3px #fff;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Caja de compra (premium 3) ---------- */
.caja-compra {
  gap: var(--esp-5);
  padding: calc(var(--esp-6) + 3px) var(--esp-6) var(--esp-6);
  overflow: hidden;
  border: 1px solid rgba(1, 123, 52, 0.14);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(1, 123, 52, 0.05) 0%, rgba(255, 255, 255, 0) 160px), #fff;
  box-shadow: var(--sombra-marca);
}
/* Línea de 3 px del color de marca arriba */
.caja-compra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #02a04a 0%, var(--color-primario) 50%, #014a1f 100%);
}
@media (max-width: 479px) { .caja-compra { padding: calc(var(--esp-5) + 3px) var(--esp-4) var(--esp-5); border-radius: var(--radio-xl); } }
/* Precio + IVA a la izquierda; favoritos y compartir arriba a la derecha */
.caja-compra__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); }
.caja-compra .caja-compra__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--esp-3); min-width: 0; }
.caja-compra .ficha__iva { margin: 0; text-align: left; }
.caja-compra__acciones { display: flex; gap: var(--esp-2); flex-shrink: 0; }
.caja-compra__accion {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  background: #fff;
  color: var(--color-texto-suave);
  box-shadow: 0 1px 2px rgba(1, 60, 26, 0.06);
  transition: color var(--duracion-rapida) var(--ease-out), border-color var(--duracion-rapida) var(--ease-out),
    background-color var(--duracion-rapida) var(--ease-out), transform var(--duracion-rapida) var(--ease-out);
}
.caja-compra__accion .icono { width: 20px; height: 20px; }
.caja-compra__accion:active { transform: scale(0.94); }
.caja-compra__accion[aria-pressed="true"] { color: var(--color-error); border-color: rgba(196, 13, 60, 0.3); background: #fff5f7; }
.caja-compra__accion[aria-pressed="true"] .icono { fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .caja-compra__accion:hover { color: var(--color-primario); border-color: rgba(1, 123, 52, 0.35); background: var(--color-primario-suave); }
  .caja-compra__accion[aria-pressed="true"]:hover { color: var(--color-error); border-color: rgba(196, 13, 60, 0.45); background: #fff0f3; }
}
/* Disponibilidad en el mismo renglón que "Más vendido" y la garantía */
.caja-compra__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.caja-compra__estado .etiqueta { margin: 0; font-size: var(--texto-xs); padding: 4px 12px; }
.caja-compra .ficha__disponible { display: inline-flex; align-items: center; gap: var(--esp-2); position: relative; margin: 0 var(--esp-1) 0 0; font-size: var(--texto-sm); font-weight: var(--peso-bold); color: var(--color-primario); }
.caja-compra .ficha__disponible--agotado { color: var(--color-texto-suave); }
/* Cápsula de entrega con reloj animado y cuenta regresiva */
.entrega-capsula {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  padding: 10px var(--esp-4) 10px 10px;
  border-radius: var(--radio-pildora);
  background: var(--color-primario-suave);
  box-shadow: inset 0 0 0 1px rgba(1, 123, 52, 0.12);
  font-size: var(--texto-sm);
  line-height: 1.4;
  color: var(--color-texto-suave);
}
.entrega-capsula[hidden] { display: none; }
.entrega-capsula strong { color: var(--color-texto); font-weight: var(--peso-bold); }
.entrega-capsula__cuenta { font-variant-numeric: tabular-nums; color: var(--color-primario) !important; }
.reloj-animado {
  flex-shrink: 0;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primario);
  stroke-width: 2;
  box-shadow: 0 2px 6px -2px rgba(1, 60, 26, 0.25);
}
.reloj-animado__minuto { transform-origin: 12px 12px; animation: manecilla 8s linear infinite; }
.reloj-animado__hora { transform-origin: 12px 12px; animation: manecilla 96s linear infinite; }
@keyframes manecilla { to { transform: rotate(360deg); } }
@media (max-width: 479px) { .entrega-capsula { border-radius: var(--radio-lg); } }
/* Cantidad y botones: misma altura exacta y mismas esquinas */
.caja-compra .ficha__compra { gap: var(--esp-3); }
.caja-compra .ficha__compra .cantidad,
.caja-compra .ficha__compra .boton {
  box-sizing: border-box;
  height: var(--alto-compra);
  min-height: var(--alto-compra);
  border-radius: var(--radio-control);
}
.caja-compra .ficha__compra .cantidad__boton,
.caja-compra .ficha__compra .cantidad__valor { height: 100%; }
.caja-compra .boton--agregar {
  background: var(--degradado-marca-profundo);
  box-shadow: var(--sombra-boton-marca), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-weight: var(--peso-bold);
}
@media (hover: hover) and (pointer: fine) {
  .caja-compra .boton--agregar:hover:not(:disabled) { background: var(--degradado-marca-profundo); box-shadow: 0 4px 8px rgba(1, 60, 26, 0.18), 0 18px 32px -12px rgba(1, 123, 52, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}
/* Nota pequeña y tenue con ícono */
.caja-compra .ficha__pedido-nota { display: flex; align-items: flex-start; gap: var(--esp-2); margin: calc(var(--esp-2) * -1) 0 0; font-size: var(--texto-xs); line-height: 1.5; color: var(--color-texto-tenue); }
.caja-compra .ficha__pedido-nota .icono { flex-shrink: 0; width: 14px; height: 14px; margin-top: 1px; }
/* Fila de confianza: 3 columnas parejas con separadores finos verticales */
.caja-compra .caja-compra__sellos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: var(--esp-4) 0 0;
  border-top: 1px solid var(--color-borde);
}
.caja-compra .caja-compra__sellos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: 0 var(--esp-2);
  text-align: center;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1.3;
  color: var(--color-texto-suave);
}
.caja-compra .caja-compra__sellos li + li { border-left: 1px solid var(--color-borde); }
.caja-compra__sello-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primario-claro); color: var(--color-primario); }
.caja-compra__sello-icono .icono { width: 18px; height: 18px; }
.caja-compra__sello-icono .icono--relleno { fill: currentColor; stroke: none; }

/* ---------- Pestañas: un solo panel visible, en su lugar ----------
   El panel de Descripción usa display: grid (para "En resumen" al lado), que le ganaba al
   atributo hidden: por eso seguía visible y el panel elegido aparecía debajo. */
.info-producto__panel[hidden] { display: none !important; }
.info-producto__paneles { position: relative; }
/* ---------- Pestañas: indicador que se desliza, ícono y transición suave ---------- */
.info-producto .pestanas__lista { position: relative; gap: var(--esp-6); }
.info-producto .pestana { display: inline-flex; align-items: center; gap: var(--esp-2); flex-shrink: 0; white-space: nowrap; box-shadow: none; }
.info-producto .pestana .icono { color: var(--color-texto-tenue); transition: color var(--duracion-rapida) var(--ease-out); }
.info-producto .pestana[aria-selected="true"] { box-shadow: none; }
.info-producto .pestana[aria-selected="true"] .icono { color: var(--color-primario); }
.pestanas__indicador {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-primario);
  transform-origin: left center;
  transition: transform 350ms var(--ease-out);
  pointer-events: none;
}
/* Descripción con entrada destacada, nota "Importante" y "En resumen" al lado */
.info-producto__panel--descripcion { display: grid; gap: var(--esp-8); max-width: none; }
@media (min-width: 1024px) {
  .info-producto__panel--descripcion { grid-template-columns: minmax(0, 720px) minmax(260px, 320px); justify-content: space-between; gap: var(--esp-12); align-items: start; }
}
.descripcion { max-width: 720px; }
.descripcion p { margin: 0; color: var(--color-texto-suave); }
.descripcion p + p { margin-top: var(--esp-4); }
.descripcion .descripcion__entrada {
  margin-bottom: var(--esp-5);
  font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);
  font-weight: var(--peso-semi);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-texto);
  text-wrap: pretty;
}
.descripcion .descripcion__entrada + p { margin-top: 0; }
.nota-importante {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-left: 3px solid var(--color-primario);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
  background: var(--color-primario-suave);
  font-size: var(--texto-sm);
  line-height: 1.6;
}
.nota-importante .icono { flex-shrink: 0; margin-top: 2px; color: var(--color-primario); }
.nota-importante p { margin: 0; color: var(--color-texto-suave); }
.nota-importante strong { color: var(--color-texto); }
.resumen-producto {
  position: relative;
  overflow: hidden;
  padding: var(--esp-6);
  border-radius: var(--radio-xl);
  background: var(--fondo-tarjeta-marca);
  box-shadow: var(--sombra-marca);
}
.resumen-producto::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--borde-degradado);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.resumen-producto__titulo { margin: 0 0 var(--esp-4); font-size: var(--texto-lg); font-weight: var(--peso-black); letter-spacing: -0.01em; }
.resumen-producto dl { display: grid; gap: 0; margin: 0; }
.resumen-producto dl > div { display: grid; gap: 2px; padding-block: var(--esp-3); }
.resumen-producto dl > div + div { border-top: 1px solid rgba(1, 123, 52, 0.12); }
.resumen-producto dt { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-tenue); }
.resumen-producto dd { margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-semi); line-height: 1.5; color: var(--color-texto); }
@media (prefers-reduced-motion: reduce) {
  :is(.ficha__etiquetas, .caja-compra__estado) .etiqueta--vendido::after,
  .caja-compra .ficha__disponible::after { display: none; }
}

/* ---------- 12. Vista rápida: foto y texto equilibrados ---------- */
.modal--ancho .modal__caja { max-width: 920px; padding: var(--esp-4); }
.vista-rapida { display: grid; gap: var(--esp-6); align-items: start; }
@media (min-width: 720px) {
  .modal--ancho .modal__caja { padding: var(--esp-6); }
  .vista-rapida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-8); }
}
.vista-rapida__media {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: none;
  border: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--color-fondo-foto);
}
@media (min-width: 720px) {
  /* La foto nunca pasa del alto de la ventana: la columna se ajusta a ese alto */
  .vista-rapida { grid-template-columns: minmax(0, min(calc((100vh - 140px) * 0.75), 420px)) minmax(0, 1fr); }
}
.vista-rapida__media picture { display: contents; }
.vista-rapida__media .vista-rapida__imagen { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.vista-rapida__info { display: grid; gap: var(--esp-5); align-content: start; padding-top: var(--esp-2); }
.vista-rapida__info .ficha__precio { margin-bottom: 0; }
.vista-rapida__acciones { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3); }
.vista-rapida__info .ficha__pedido-nota { margin-top: calc(var(--esp-2) * -1); }

/* ---------- 13. Carrito, drawer, modales y toasts ---------- */
.modal__caja { border-radius: var(--radio-xl); box-shadow: var(--sombra-flotante); }
.modal__titulo { font-weight: var(--peso-titulo); }
.modal__fondo,
.drawer__fondo { background: var(--color-overlay); }
@keyframes modal-entrada { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes modal-salida { to { opacity: 0; transform: translateY(4px) scale(0.99); } }
.modal__caja { animation-duration: var(--duracion-lenta); animation-timing-function: var(--ease-out); }
.drawer__panel { transition-duration: 280ms; }
.drawer__cabecera { border-bottom: 1px solid var(--color-borde); }
.drawer__titulo { font-weight: var(--peso-titulo); }
.drawer__pie { border-top: 1px solid var(--color-borde); }
.drawer__subtotal strong { font-weight: var(--peso-bold); }
/* Drawer: el pedido por WhatsApp arriba y a todo el ancho; "Ver carrito" debajo */
.drawer__botones { grid-template-columns: 1fr; }
.drawer__botones .boton { padding-inline: var(--esp-4); }
.drawer__botones [data-pedido] { order: -1; }
.resumen__confirmacion { background: var(--color-fondo-alterno); color: var(--color-texto-suave); border-radius: var(--radio-md); }
.casilla input,
.ciudad input { accent-color: var(--color-texto); }
.linea { border-color: var(--color-borde); }
.linea__nombre { font-weight: var(--peso-semi); }
.linea__nombre:hover { color: var(--color-texto); text-decoration: underline; }
.linea__precio { color: var(--color-texto-suave); }
.linea__total { font-weight: var(--peso-bold); }
.linea__imagen img,
.tabla-carrito__img img { border-radius: var(--radio-md); }
.progreso-envio { background: var(--color-primario-suave); border-radius: var(--radio-lg); box-shadow: inset 0 0 0 1px rgba(1, 123, 52, 0.12); }
.progreso-envio .icono { color: var(--color-primario); }
.progreso-envio__barra { height: 6px; background: rgba(1, 123, 52, 0.14); }
.progreso-envio__relleno { background: var(--color-primario); transition: transform 600ms var(--ease-out); }
/* Domicilio gratis completado: mensaje alegre y barra llena */
.progreso-envio--listo { background: var(--color-primario-claro); color: var(--color-primario-oscuro); }
.progreso-envio--listo .icono { animation: check-entra 320ms var(--ease-out); }
.resumen { border-color: var(--color-borde); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-capas); }
.resumen__titulo { font-weight: var(--peso-titulo); }
.resumen__fila:last-child,
.resumen__total { font-weight: var(--peso-bold); }
.resumen__gratis { color: var(--tinte-verde-texto); }
.tabla-carrito th { font-size: var(--texto-xs); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: var(--tracking-etiqueta); color: var(--color-texto-tenue); }
.tabla-carrito td,
.tabla-carrito th { border-color: var(--color-borde); }
.tabla-carrito__info a { font-weight: var(--peso-semi); }
.tabla-carrito__total { font-weight: var(--peso-bold); }
.carrito-titulo { font-weight: var(--peso-titulo); }
.vacio__ilustracion { background: var(--color-fondo-alterno); color: var(--color-texto-suave); }
.vacio__titulo { font-weight: var(--peso-titulo); }
.toast {
  background: var(--color-carbon);
  border-radius: var(--radio-lg);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-flotante);
}
.toast__icono { background: rgba(255, 255, 255, 0.12); }
.toast--exito .toast__icono { background: var(--color-secundario); }
.toast--favorito .toast__icono { background: rgba(255, 255, 255, 0.12); }
.toast--error .toast__icono { background: var(--color-error); }
.toast__accion { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@keyframes toast-entrada { from { opacity: 0; transform: translateY(8px); } }
.whatsapp-flotante { background: var(--color-whatsapp); box-shadow: var(--sombra-flotante); }
.whatsapp-flotante:hover { transform: translateY(-2px); }
.volver-arriba { box-shadow: var(--sombra-tarjeta); border-color: var(--color-borde); }
.cookies__interior { border-radius: var(--radio-xl); border-color: var(--color-borde); }
.cookies__interior > .icono { color: var(--color-texto-suave); stroke: currentColor; }
.carrusel__flecha { box-shadow: var(--sombra-tarjeta); border-color: var(--color-borde); }
.ciudad { border-radius: var(--radio-control); border-color: var(--color-borde-fuerte); }
.ciudad:has(input:checked) { border-color: var(--color-texto); background: #fff; box-shadow: inset 0 0 0 1px var(--color-texto); }

/* ---------- Encabezado de categorías, búsqueda, favoritos y páginas internas ----------
   Mismo lenguaje del footer: verde muy oscuro de la marca, malla de verdes que se mueve
   muy lento (26 s por ciclo), ruido fino, cruz médica gigante de marca de agua y un brillo
   que sigue el mouse (los dos últimos los agrega js/layout.js). Solo transform y opacity. */
.cat-cabecera,
.nosotros-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radio-xl);
  background: var(--verde-noche);
  color: #fff;
  box-shadow: 0 30px 60px -36px rgba(1, 40, 18, 0.55);
}
.cat-cabecera {
  display: grid;
  gap: var(--esp-3);
  align-content: center;
  min-height: 220px;
  margin: var(--esp-4) 0 var(--esp-10);
  padding: var(--esp-6) var(--esp-5);
}
@media (min-width: 768px) { .cat-cabecera { min-height: 280px; padding: var(--esp-10) var(--esp-14); } }
/* Malla de verdes, más grande que el bloque para que al moverse nunca se vea el borde */
.cat-cabecera::before,
.nosotros-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -3;
  background: var(--malla-marca);
  animation: malla-flota 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes malla-flota {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(6%, -4%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-5%, 5%, 0) rotate(-6deg) scale(1.04); }
}
/* Ruido fino encima de la malla */
.cat-cabecera::after,
.nosotros-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ruido);
  pointer-events: none;
}
/* Cruz médica gigante, muy tenue, a la derecha */
.cat-cabecera__agua {
  position: absolute;
  z-index: -2;
  right: -60px;
  top: 50%;
  width: 380px;
  height: 380px;
  margin-top: -190px;
  background: var(--cruz-agua) center / contain no-repeat;
  opacity: 0.05;
  transform: rotate(-10deg);
  pointer-events: none;
}
@media (max-width: 767px) { .cat-cabecera__agua { width: 220px; height: 220px; margin-top: -110px; right: -64px; } }
/* Brillo que sigue el mouse (js/layout.js solo cambia su transform) */
.cat-cabecera__luz {
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 240, 214, 0.17) 0%, rgba(200, 240, 214, 0.05) 38%, rgba(200, 240, 214, 0) 68%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
}
.con-luz > .cat-cabecera__luz { opacity: 1; }
/* Textos en blanco */
.cat-cabecera .migas,
.nosotros-hero .migas { margin: 0 0 var(--esp-2); font-size: var(--texto-xs); color: var(--texto-sobre-oscuro-tenue); }
.cat-cabecera .migas a,
.nosotros-hero .migas a,
.cat-cabecera .migas [aria-current="page"],
.nosotros-hero .migas [aria-current="page"] { color: var(--texto-sobre-oscuro-tenue); }
.cat-cabecera .migas a:hover,
.nosotros-hero .migas a:hover { color: #fff; }
.cat-cabecera .migas li + li::before,
.nosotros-hero .migas li + li::before { color: rgba(255, 255, 255, 0.4); }
.cat-cabecera__conteo,
.cat-cabecera__chips { display: none; }
.cat-cabecera__titulo {
  max-width: 24ch;
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 1.1rem + 2.7vw, 3.5rem);
  font-weight: var(--peso-black);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  animation: titulo-aclara 700ms var(--ease-out) both;
}
.cat-cabecera--pagina .cat-cabecera__titulo { max-width: 26ch; }
.cat-cabecera .resaltado,
.nosotros-hero .resaltado { color: var(--verde-brillo); }
/* El título aparece una sola vez: de desenfocado a nítido */
@keyframes titulo-aclara {
  from { opacity: 0; filter: blur(12px); transform: translateY(8px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.cat-cabecera__texto {
  max-width: 68ch;
  margin: 0;
  font-size: var(--texto-md);
  line-height: 1.55;
  color: var(--texto-sobre-oscuro);
  animation: titulo-aclara 700ms 120ms var(--ease-out) both;
}
@media (min-width: 768px) { .cat-cabecera__texto { font-size: var(--texto-lg); } }
/* Páginas internas */
.cat-cabecera.cat-cabecera--pagina .pagina-info__fecha { margin: var(--esp-1) 0 0; font-size: var(--texto-sm); color: var(--texto-sobre-oscuro-tenue); }
.carrito-titulo { margin: 0; }
.carrito-titulo .resaltado { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--verde-brillo); }
.carrito-titulo .carrito-titulo__unidades { font-size: var(--texto-lg); font-weight: var(--peso-semi); letter-spacing: 0; color: var(--texto-sobre-oscuro); }
.carrito-titulo .carrito-titulo__unidades:empty { display: none; }
/* Quiénes somos: mismo fondo, con la foto del local a la derecha */
.nosotros-hero { margin-top: var(--esp-4); padding: var(--esp-8) var(--esp-5); gap: var(--esp-8); }
@media (min-width: 768px) { .nosotros-hero { padding: var(--esp-12) var(--esp-14); } }
.nosotros-hero__texto { gap: var(--esp-4); }
.nosotros-hero .pagina-info__titulo { color: #fff; animation: titulo-aclara 700ms var(--ease-out) both; }
.nosotros-hero__texto p { color: var(--texto-sobre-oscuro); }
.nosotros-hero__texto .nosotros-hero__anios { color: var(--verde-brillo); }
.nosotros-hero__texto .nosotros-hero__anios span { color: var(--texto-sobre-oscuro); }
.nosotros-hero__foto img { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5); }
.nosotros-hero .boton--primario { background: #fff; border-color: #fff; color: var(--verde-noche); }
.nosotros-hero .boton--verde { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.nosotros-hero .boton--verde .icono { color: var(--verde-brillo); }
@media (hover: hover) and (pointer: fine) {
  .nosotros-hero .boton--primario:hover:not(:disabled) { background: var(--verde-brillo); border-color: var(--verde-brillo); box-shadow: none; }
  .nosotros-hero .boton--verde:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pildora);
  background: #fff;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  transition: border-color var(--duracion-rapida) var(--ease-out), background-color var(--duracion-rapida) var(--ease-out), color var(--duracion-rapida) var(--ease-out);
}
.cat-chip:hover { border-color: var(--color-primario); color: var(--color-primario); }
.cat-chip.es-activo { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.cat-chip__cantidad { font-size: var(--texto-xs); font-weight: var(--peso-bold); color: var(--color-texto-tenue); }
.cat-chip.es-activo .cat-chip__cantidad { color: rgba(255, 255, 255, 0.8); }
/* Páginas internas: mismo encabezado */
.cat-cabecera--pagina .pagina-info__fecha { margin: var(--esp-1) 0 0; font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.texto-legal { max-width: 72ch; min-width: 0; }
.pagina-info__rejilla > * { min-width: 0; }
.texto-legal h2 { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); margin-top: var(--esp-10); scroll-margin-top: 160px; }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal ul,
.texto-legal ol { display: grid; gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-4); padding-left: 1.4em; }
.texto-legal ul { list-style: disc; }
.texto-legal ol { list-style: decimal; }
.texto-legal li::marker { color: var(--color-primario); font-weight: var(--peso-bold); }
.indice { padding: var(--esp-5); border-radius: var(--radio-lg); background: #fff; border: 1px solid var(--color-borde); box-shadow: var(--sombra-tarjeta); }
.indice h2 { font-size: var(--texto-xs); font-weight: var(--peso-black); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primario); margin-bottom: var(--esp-3); }
.indice a { display: block; padding: 6px 0 6px var(--esp-3); border-left: 2px solid var(--color-borde); color: var(--color-texto-suave); transition: color var(--duracion-rapida) var(--ease-out), border-color var(--duracion-rapida) var(--ease-out); }
.indice a:hover { color: var(--color-primario); border-left-color: var(--color-primario); }
.contacto-caja { border-radius: var(--radio-lg); border-color: var(--color-borde); background: var(--color-primario-suave); }
.nota-caja,
.zona { border-radius: var(--radio-lg); border-color: var(--color-borde); box-shadow: none; }
.faq details { border-radius: var(--radio-lg); }
.faq summary { font-weight: var(--peso-bold); }
.pregunta dt { font-weight: var(--peso-semi); }
.tabla-desplazable table { border-radius: var(--radio-lg); }
.galeria-local img { border-radius: var(--radio-xl); }
.nosotros-hero__foto img { border-radius: var(--radio-lg); }
.nosotros-hero .pagina-info__titulo { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); font-weight: var(--peso-black); letter-spacing: -0.035em; line-height: 1.05; }
.nosotros-hero__texto .nosotros-hero__anios {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  line-height: 1;
}
.nosotros-hero__texto .nosotros-hero__anios span { font-size: var(--texto-md); font-weight: var(--peso-normal); letter-spacing: 0; }
.mapa,
.mapa iframe { border-radius: var(--radio-xl); }

/* ---------- 15. Aparición suave al hacer scroll (la clase la pone js/layout.js) ---------- */
.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out) var(--retraso, 0ms), transform 600ms var(--ease-out) var(--retraso, 0ms);
}
.revelar.es-visible { opacity: 1; transform: none; }

/* ---------- Menos movimiento: sin desplazamientos, solo cambios de opacidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover,
  .boton--primario:hover:not(:disabled),
  .whatsapp-flotante:hover { transform: none; }
  .tarjeta:hover .tarjeta__imagen,
  .galeria__slide.con-zoom img { transform: none !important; }
  /* Si la persona pulsa "reproducir", el carrusel sigue cambiando cada 2 s (sin zoom ni desplazamientos) */
  .hero__progreso.esta-llenando { animation-duration: 2000ms !important; }
  .hero__slide.es-activa .hero__foto img { transform: none; }
}


/* ==========================================================================
   16. Secciones verdes (mismo lenguaje que los encabezados y el footer)
   Fondo verde muy oscuro, malla de verdes que se mueve lento, ruido fino, cruz de marca
   de agua y brillo que sigue el mouse (js/layout.js: TM.decorarVerde). Se alternan con
   secciones claras: nunca dos verdes seguidas. Variantes --b y --c cambian la posición
   de la malla y de la cruz para que no se vean repetidas.
   ========================================================================== */
.bloque-verde {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: var(--radio-xl);
  background: var(--verde-noche);
  color: #fff;
  box-shadow: 0 30px 60px -36px rgba(1, 40, 18, 0.55);
}
.bloque-verde::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -3;
  background: var(--malla-marca);
  animation: malla-flota 26s ease-in-out infinite alternate;
  pointer-events: none;
}
.bloque-verde::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ruido);
  pointer-events: none;
}
.bloque-verde--b::before { scale: -1 1; animation-delay: -9s; }
.bloque-verde--c::before { scale: 1 -1; animation-delay: -17s; }
.bloque-verde .cat-cabecera__agua { right: -70px; }
.bloque-verde--b .cat-cabecera__agua { right: auto; left: -80px; rotate: 18deg; }
.bloque-verde--c .cat-cabecera__agua { top: 0; margin-top: -80px; right: 8%; rotate: -6deg; }
/* Secciones grandes: margen lateral del contenedor y relleno generoso */
.bloque-verde--seccion { padding: var(--esp-10) var(--esp-5); }
@media (min-width: 768px) { .bloque-verde--seccion { padding: var(--esp-14) var(--esp-12); } }
@media (min-width: 1280px) { .bloque-verde--seccion { padding: var(--esp-16) var(--esp-14); } }
/* Entrada al hacer scroll: fundido y leve escala */
.bloque-verde.revelar { transform: scale(0.97); }
.bloque-verde.revelar.es-visible { transform: none; }

/* Textos y botones sobre verde (nunca dentro de las tarjetas de producto, que siguen blancas) */
.bloque-verde .seccion__titulo { color: #fff; }
.bloque-verde .seccion__subtitulo { color: var(--texto-sobre-oscuro); }
.bloque-verde .seccion__etiqueta { color: var(--verde-brillo); }
.bloque-verde .resaltado { color: var(--verde-brillo); }
.bloque-verde .seccion__enlace { color: #fff; }
.bloque-verde .seccion__enlace:hover { color: var(--verde-brillo); }
.bloque-verde .boton--primario:not(.tarjeta *) { background: #fff; border-color: #fff; color: var(--verde-noche); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.5); }
.bloque-verde .boton--primario:not(.tarjeta *) .icono { color: var(--color-whatsapp); }
.bloque-verde :is(.boton--secundario, .boton--fantasma, .boton--verde):not(.tarjeta *) { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .bloque-verde .boton--primario:not(.tarjeta *):hover:not(:disabled) { background: var(--verde-brillo); border-color: var(--verde-brillo); color: var(--verde-noche); }
  .bloque-verde :is(.boton--secundario, .boton--fantasma, .boton--verde):not(.tarjeta *):hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
}
.bloque-verde .tarjeta { color: var(--color-texto); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.6); }
.bloque-verde .carrusel__flecha { border-color: transparent; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }

/* Inicio: Destacados de la semana */
.ofertas .bloque-verde .seccion__cabecera { margin-bottom: var(--esp-8); }
/* Inicio: Quiénes somos con foto del local y cifras en blanco */
.nosotros-inicio.bloque-verde { gap: var(--esp-8); }
@media (min-width: 1024px) { .nosotros-inicio.bloque-verde { gap: var(--esp-14); } }
.nosotros-inicio.bloque-verde .nosotros-inicio__texto p { color: var(--texto-sobre-oscuro); }
.nosotros-inicio.bloque-verde .nosotros-inicio__foto img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.bloque-verde .cifras li { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.bloque-verde .cifras__valor { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-variant-numeric: tabular-nums; }
.bloque-verde .cifras__texto { color: var(--texto-sobre-oscuro); }
/* Inicio: beneficios sobre verde (tarjetas blancas encima) */
.franja-beneficios .bloque-verde .beneficio { box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.6); }
.bloque-verde .beneficios__puntos span { background: rgba(255, 255, 255, 0.35); }
.bloque-verde .beneficios__puntos .es-actual { background: #fff; }
@media (max-width: 639px) {
  .bloque-verde .beneficios { margin-inline: calc(var(--esp-5) * -1); padding-inline: var(--esp-5); scroll-padding-inline: var(--esp-5); }
}

/* Producto: franja "¿Tienes dudas sobre este producto?" */
.dudas-producto.bloque-verde { padding: var(--esp-8) var(--esp-6); }
@media (min-width: 768px) { .dudas-producto.bloque-verde { padding: var(--esp-10) var(--esp-12); } }
.dudas-producto.bloque-verde .dudas-producto__icono { background: #fff; color: var(--color-whatsapp); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5); }
.dudas-producto.bloque-verde .dudas-producto__texto { color: var(--texto-sobre-oscuro); font-size: var(--texto-lg); }
.dudas-producto.bloque-verde .dudas-producto__texto strong { display: block; color: #fff; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: var(--peso-black); letter-spacing: -0.02em; }

/* Categoría: franja a mitad del listado */
.rejilla-productos > .franja-listado {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--esp-5);
  align-items: center;
  padding: var(--esp-8) var(--esp-6);
  margin-block: var(--esp-2);
}
@media (min-width: 900px) { .rejilla-productos > .franja-listado { grid-template-columns: 1fr auto; padding: var(--esp-10) var(--esp-12); } }
.franja-listado__texto { display: grid; gap: var(--esp-2); }
.franja-listado__titulo { margin: 0; color: #fff; font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); font-weight: var(--peso-black); letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.franja-listado__texto p { margin: 0; max-width: 56ch; color: var(--texto-sobre-oscuro); }
.franja-listado .boton { justify-self: start; white-space: nowrap; }

/* Carrito: resumen del pedido en tarjeta verde */
.resumen.bloque-verde { padding: var(--esp-8) var(--esp-6); }
@media (min-width: 1024px) { .resumen.bloque-verde { position: sticky; } }
.resumen.bloque-verde .resumen__titulo { color: #fff; }
.resumen.bloque-verde .resumen__fila { color: var(--texto-sobre-oscuro); }
.resumen.bloque-verde .resumen__fila span:last-child,
.resumen.bloque-verde .resumen__fila strong { color: #fff; }
.resumen.bloque-verde .resumen__gratis { color: var(--verde-brillo) !important; }
.resumen.bloque-verde .resumen__filas { padding-bottom: var(--esp-4); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.resumen.bloque-verde .resumen__envio { color: var(--texto-sobre-oscuro); }
.resumen.bloque-verde .enlace-boton { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }
.resumen.bloque-verde .boton--primario { min-height: 56px; font-size: var(--texto-md); font-weight: var(--peso-bold); }
.resumen.bloque-verde .resumen__confirmacion { background: rgba(255, 255, 255, 0.07); color: var(--texto-sobre-oscuro); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.resumen.bloque-verde .resumen__confirmacion .icono { color: var(--verde-brillo); }
.resumen.bloque-verde .resumen__nota { color: var(--texto-sobre-oscuro-tenue); }

/* Páginas internas: caja de contacto y "Por qué comprar con nosotros" */
.contacto-caja.bloque-verde { padding: var(--esp-6); }
.contacto-caja.bloque-verde h2 { color: #fff; font-size: var(--texto-lg); }
.contacto-caja.bloque-verde p { color: var(--texto-sobre-oscuro); }
.contacto-caja.bloque-verde strong { color: #fff; }
.contacto-caja.bloque-verde .cat-cabecera__agua { width: 200px; height: 200px; margin-top: -100px; right: -60px; left: auto; top: 50%; }
.razones-bloque .seccion__titulo { margin: 0; }
.razones-bloque .razones { margin-top: var(--esp-8) !important; gap: var(--esp-4); }
.razones-bloque .razones li { padding: var(--esp-5); border-radius: var(--radio-lg); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.razones-bloque .razones .icono { color: var(--verde-brillo); }
.razones-bloque .razones strong { color: #fff; }
.razones-bloque .razones p { color: var(--texto-sobre-oscuro); }
.razones-bloque .razones a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.pagina-info .razones-bloque { margin-block: var(--esp-4) var(--seccion-y); }

@media (prefers-reduced-motion: reduce) {
  .bloque-verde::before,
  .cat-cabecera::before,
  .nosotros-hero::before { animation: none; }
  .bloque-verde.revelar { transform: none; }
  .reloj-animado__minuto,
  .reloj-animado__hora { animation: none; }
}


/* ==========================================================================
   17. Página de producto: "¿Por qué comprarlo aquí?" a todo el ancho, en verde
   ========================================================================== */
.por-que.bloque-verde {
  display: grid;
  gap: var(--esp-6);
  margin-top: var(--esp-12);
  padding: var(--esp-8) var(--esp-5);
}
@media (min-width: 768px) { .por-que.bloque-verde { padding: var(--esp-10) var(--esp-8); } }
@media (min-width: 1280px) { .por-que.bloque-verde { padding: var(--esp-12) var(--esp-14); margin-top: var(--esp-16); } }
.por-que.bloque-verde .por-que__titulo {
  margin: 0;
  color: #fff;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: var(--peso-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: none;
}
.por-que__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.por-que__item { display: grid; align-content: start; gap: var(--esp-2); padding: var(--esp-5) 0; }
.por-que__item + .por-que__item { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.por-que__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--esp-2);
  border-radius: 50%;
  background: var(--verde-brillo);
  color: var(--verde-noche);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55);
}
.por-que__icono .icono { width: 24px; height: 24px; stroke-width: 1.9; }
.por-que__icono .icono--relleno { fill: currentColor; stroke: none; }
.por-que__nombre { display: block; color: #fff; font-size: var(--texto-lg); font-weight: var(--peso-black); letter-spacing: -0.01em; line-height: 1.3; }
.por-que__texto { margin: 0; color: var(--texto-sobre-oscuro); font-size: var(--texto-sm); line-height: 1.6; }
/* Enlaces en verde claro con subrayado animado */
.por-que__enlace {
  display: inline;
  padding: 0;
  border: 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  color: var(--verde-brillo);
  font: inherit;
  font-weight: var(--peso-bold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-size var(--duracion-lenta) var(--ease-out), color var(--duracion-rapida) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .por-que__enlace { background-size: 0% 1px; }
  .por-que__enlace:hover { background-size: 100% 1px; color: #fff; }
}
.por-que__enlace:focus-visible { outline: 2px solid var(--verde-brillo); outline-offset: 3px; border-radius: 2px; }
/* Tablet y escritorio: 3 columnas iguales con separadores verticales finos */
@media (min-width: 768px) {
  .por-que__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .por-que__item { padding: var(--esp-2) var(--esp-6); }
  .por-que__item:first-child { padding-left: 0; }
  .por-que__item:last-child { padding-right: 0; }
  .por-que__item + .por-que__item { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .por-que__item { padding-inline: var(--esp-4); }
  .por-que__icono { width: 44px; height: 44px; }
  .por-que__icono .icono { width: 20px; height: 20px; }
  .por-que__nombre { font-size: var(--texto-md); }
}
@media (min-width: 1280px) { .por-que__item { padding-inline: var(--esp-10); } }

/* ==========================================================================
   PAGO EN LÍNEA CON BOLD
   Formulario de pago (modal), botones del carrito/drawer y pago-resultado.html
   ========================================================================== */
/* ---------- Botones del carrito y del drawer ---------- */
.resumen__botones { display: grid; gap: var(--esp-3); margin-top: var(--esp-2); }
.bloque-verde [data-pagar] .icono { color: var(--color-primario); }
.bloque-verde .boton--verde[data-pedido] .icono { color: var(--verde-brillo); }
.drawer__botones--pago { display: grid; grid-template-columns: 1fr; gap: var(--esp-2); }
.drawer__botones--pago [data-pedido] { order: 0; }
.drawer__ver-carrito {
  justify-self: center;
  padding: var(--esp-1) var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  color: var(--color-texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drawer__ver-carrito:hover { color: var(--color-texto); }

/* ---------- Modal del formulario de pago ---------- */
.modal--pago .modal__caja { max-width: 600px; padding: var(--esp-6) var(--esp-5); }
@media (min-width: 600px) { .modal--pago .modal__caja { padding: var(--esp-8); } }
.modal--pago .modal__texto { margin-bottom: var(--esp-5); }
.pago-form { gap: var(--esp-6); }
.pago-bloque { display: grid; gap: var(--esp-4); }
.pago-bloque__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: var(--peso-titulo);
  letter-spacing: -0.01em;
}
.pago-bloque__titulo::after { content: ""; flex: 1; height: 1px; background: var(--color-borde); }
.pago-form .ciudades { margin: 0; min-width: 0; }
.pago-form > * { min-width: 0; }
.campo__opcional { font-weight: var(--peso-normal); color: var(--color-texto-tenue); }
.campo__ayuda { margin: 0; font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.pago-direccion[hidden] { display: none; }

/* Detalle de productos plegable */
.pago-productos { border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-fondo-alterno); }
.pago-productos summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: 52px;
  padding: var(--esp-3) var(--esp-4);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radio-lg);
}
.pago-productos summary::-webkit-details-marker { display: none; }
.pago-productos summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.pago-productos__resumen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--esp-2); font-size: var(--texto-sm); white-space: nowrap; }
.pago-productos__resumen .icono { color: var(--color-texto-suave); }
.pago-productos__resumen strong { font-variant-numeric: tabular-nums; }
.pago-productos__ver { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: var(--texto-sm); font-weight: var(--peso-bold); color: var(--color-primario); white-space: nowrap; }
.pago-productos__ver .icono { transition: transform var(--duracion-lenta) var(--ease-out); }
.pago-productos[open] .pago-productos__ver .icono { transform: rotate(180deg); }
.pago-productos__lista { list-style: none; margin: 0; padding: 0 var(--esp-4) var(--esp-3); display: grid; }
.pago-productos__lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--esp-3);
  padding-block: var(--esp-3);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.pago-productos__nombre { font-weight: var(--peso-semi); }
.pago-productos__nombre small { display: block; font-weight: var(--peso-normal); color: var(--color-texto-suave); }
.pago-productos__cant { grid-column: 1; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.pago-productos__total { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: var(--peso-bold); font-variant-numeric: tabular-nums; }

/* Resumen con la regla de envío */
.pago-resumen {
  display: grid;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--radio-lg);
  background: var(--tinte-verde);
  box-shadow: inset 0 0 0 1px rgba(1, 123, 52, 0.12);
}
.pago-resumen__fila { display: flex; justify-content: space-between; gap: var(--esp-4); font-size: var(--texto-sm); }
.pago-resumen__fila span:last-child { font-weight: var(--peso-bold); font-variant-numeric: tabular-nums; text-align: right; }
.pago-resumen__valor--gratis { color: var(--tinte-verde-texto); }
.pago-resumen__nota { display: flex; gap: var(--esp-2); margin: 0; font-size: var(--texto-xs); line-height: 1.5; color: var(--tinte-verde-texto); }
.pago-resumen__nota .icono { flex-shrink: 0; margin-top: 1px; }
.pago-resumen__total { margin-top: var(--esp-1); padding-top: var(--esp-3); border-top: 1px solid rgba(1, 123, 52, 0.18); font-size: var(--texto-md); }
.pago-resumen__total span { font-weight: var(--peso-black); }
.pago-resumen__total span:last-child { font-size: var(--texto-xl); }

.casilla-campo .casilla a { color: var(--color-primario); font-weight: var(--peso-bold); text-decoration: underline; text-underline-offset: 2px; }
.casilla-campo .casilla input { accent-color: var(--color-primario); }

/* Error del servidor */
.pago-error {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--tinte-rojo);
  color: var(--tinte-rojo-texto);
  font-size: var(--texto-sm);
}
.pago-error[hidden] { display: none; }
.pago-error p { margin: 0 0 var(--esp-1); font-weight: var(--peso-semi); }
.pago-error .icono { flex-shrink: 0; margin-top: 2px; }
.pago-error .enlace-boton { color: var(--tinte-rojo-texto); }

/* Botón con estado de carga */
.pago-boton { position: relative; }
.pago-boton__giro {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: pago-giro 0.8s linear infinite;
}
.pago-boton.esta-cargando { cursor: progress; opacity: 1; }
.pago-boton.esta-cargando .pago-boton__giro { display: inline-block; }
.pago-boton.esta-cargando .pago-boton__icono { display: none; }
@keyframes pago-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pago-boton__giro, .resultado__giro { animation-duration: 2.4s; } }

.pago-seguro,
.pago-alterno { display: flex; align-items: flex-start; justify-content: center; gap: var(--esp-2); margin: calc(var(--esp-3) * -1) 0 0; font-size: var(--texto-xs); color: var(--color-texto-suave); text-align: center; }
.pago-seguro .icono { flex-shrink: 0; color: var(--color-primario); }
.pago-alterno { margin-top: calc(var(--esp-4) * -1); font-size: var(--texto-sm); flex-wrap: wrap; gap: 4px; }

.pago-aviso__botones { display: grid; gap: var(--esp-3); margin-top: var(--esp-2); }

/* ---------- Página de resultado ---------- */
.resultado { display: grid; place-items: start center; padding-block: var(--esp-8) var(--esp-16); }
@media (min-width: 768px) { .resultado { padding-block: var(--esp-12) var(--esp-20); } }
.resultado__tarjeta {
  width: 100%;
  max-width: 640px;
  display: grid;
  gap: var(--esp-5);
  padding: var(--esp-8) var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xl);
  background: #fff;
  box-shadow: var(--sombra-capas);
  text-align: center;
  animation: resultado-entrada 400ms var(--ease-out);
}
@media (min-width: 600px) { .resultado__tarjeta { padding: var(--esp-12) var(--esp-10); } }
@keyframes resultado-entrada { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .resultado__tarjeta { animation: none; } }
.resultado__icono {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-fondo-alterno);
  color: var(--color-texto-suave);
}
.resultado__icono .icono { width: 32px; height: 32px; stroke-width: 2.25; }
.resultado--aprobado .resultado__icono { background: var(--color-primario); color: #fff; box-shadow: 0 0 0 8px var(--tinte-verde), var(--sombra-boton); }
.resultado--pendiente .resultado__icono { background: var(--color-acento-claro); color: #8a6a00; }
.resultado--rechazado .resultado__icono { background: var(--tinte-rojo); color: var(--tinte-rojo-texto); }
.resultado__giro { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--color-borde-fuerte); border-top-color: var(--color-primario); animation: pago-giro 0.9s linear infinite; }
.resultado__titulo { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); line-height: 1.15; text-wrap: balance; }
.resultado__titulo:focus { outline: none; }
.resultado__texto { margin: calc(var(--esp-2) * -1) auto 0; max-width: 46ch; color: var(--color-texto-suave); text-wrap: pretty; }
.resultado__texto strong { color: var(--color-texto); }
.resultado__prueba,
.resultado__alerta {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-pildora);
  background: var(--color-acento-claro);
  color: #6b5200;
  font-size: var(--texto-xs);
  font-weight: var(--peso-bold);
}
.resultado__alerta { background: var(--tinte-rojo); color: var(--tinte-rojo-texto); border-radius: var(--radio-md); }
.resultado__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3); margin: 0; }
.resultado__datos > div { padding: var(--esp-2) var(--esp-4); border-radius: var(--radio-md); background: var(--color-fondo-alterno); }
.resultado__datos dt { font-size: var(--texto-xs); font-weight: var(--peso-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-texto-tenue); }
.resultado__datos dd { margin: 0; font-weight: var(--peso-bold); }
.resultado__numero { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; user-select: all; word-break: break-all; }
.resultado__whatsapp .icono { color: #fff; }
.resultado__botones { display: grid; gap: var(--esp-3); }
@media (min-width: 600px) { .resultado__botones { grid-template-columns: 1fr 1fr; } }
.resultado__nota { margin: 0; font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.resultado__subtitulo { margin: 0 0 var(--esp-3); font-size: var(--texto-lg); font-weight: var(--peso-titulo); }

.resultado__pasos,
.resultado__resumen { text-align: left; padding-top: var(--esp-5); border-top: 1px solid var(--color-borde); }
.resultado__pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }
.resultado__pasos li { display: grid; grid-template-columns: 40px 1fr; gap: var(--esp-3); align-items: start; }
.resultado__paso-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinte-verde); color: var(--color-primario); }
.resultado__pasos strong { display: block; margin-top: 2px; }
.resultado__pasos p { margin: 2px 0 0; font-size: var(--texto-sm); color: var(--color-texto-suave); }

.resultado__lineas { list-style: none; margin: 0; padding: 0; }
.resultado__lineas li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--esp-3); padding-block: var(--esp-3); border-bottom: 1px solid var(--color-borde); font-size: var(--texto-sm); }
.resultado__producto { font-weight: var(--peso-semi); }
.resultado__producto small { display: block; font-weight: var(--peso-normal); color: var(--color-texto-suave); }
.resultado__cant { color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }
.resultado__lineas strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.resultado__total { display: flex; justify-content: space-between; padding-top: var(--esp-3); font-weight: var(--peso-black); }
.resultado__total strong { font-size: var(--texto-xl); font-variant-numeric: tabular-nums; }
.resultado__envio { display: flex; gap: var(--esp-2); margin: var(--esp-3) 0 0; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.resultado__envio .icono { flex-shrink: 0; margin-top: 2px; color: var(--color-primario); }
.resultado__seguir { justify-self: center; }

/* ==========================================================================
   AYUDA Y POLÍTICAS (noviembre 2026)
   Pie de página (Ayuda/Categorías/Contacto y franja legal), ventana modal de
   políticas, texto de políticas, páginas legales y de ayuda, acordeones de
   preguntas y página de preguntas frecuentes.
   ========================================================================== */

/* ---------- Pie: enlaces con ícono, flecha y subrayado ---------- */
.pie__titulo-fijo::after { content: ""; display: block; width: 24px; height: 2px; margin-top: var(--esp-3); border-radius: 2px; background: #4cc47c; }
.pie__enlaces { gap: 2px; }
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 36px;
  color: var(--pie-texto);
  transition: color var(--duracion-media) var(--ease-out), transform var(--duracion-lenta) var(--ease-out);
}
.pie__enlaces a::after { content: none; }
.pie__enlace-icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radio-sm);
  background: rgba(111, 211, 154, 0.08);
  color: #6fd39a;
  transition: background-color var(--duracion-media) var(--ease-out);
}
.pie__enlace-icono .icono { width: 15px; height: 15px; stroke-width: 1.5; }
.pie__enlace-texto { position: relative; }
.pie__enlace-texto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duracion-lenta) var(--ease-out);
}
.pie__enlace-flecha { width: 14px; height: 14px; opacity: 0; transform: translateX(-6px); transition: opacity var(--duracion-media) var(--ease-out), transform var(--duracion-lenta) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pie__enlaces a:hover { color: #fff; transform: translateX(4px); }
  .pie__enlaces a:hover .pie__enlace-texto::after { transform: scaleX(1); }
  .pie__enlaces a:hover .pie__enlace-flecha { opacity: 1; transform: none; }
  .pie__enlaces a:hover .pie__enlace-icono { background: rgba(111, 211, 154, 0.16); }
}
.pie__enlaces a:focus-visible { outline: 2px solid var(--verde-brillo); outline-offset: 3px; border-radius: var(--radio-sm); color: #fff; }

/* ---------- Pie: tarjeta de contacto ---------- */
.pie__contacto-tarjeta {
  display: grid;
  gap: var(--esp-5);
  padding: var(--esp-5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radio-xl);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (max-width: 767px) { .pie__contacto-tarjeta { margin-bottom: var(--esp-2); } }
.pie__whatsapp {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border-radius: var(--radio-lg);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background-color var(--duracion-media) var(--ease-out), transform var(--duracion-media) var(--ease-out);
}
.pie__whatsapp-icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(26, 141, 74, 0.8);
}
.pie__whatsapp-icono .icono { width: 22px; height: 22px; }
.pie__whatsapp-numero { display: block; font-size: var(--texto-xl); font-weight: var(--peso-black); letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pie__whatsapp-texto { display: block; font-size: var(--texto-xs); color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) and (pointer: fine) { .pie__whatsapp:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-1px); } }
.pie__whatsapp:active { transform: scale(0.98); }
.pie__whatsapp:focus-visible,
.pie__direccion:focus-visible { outline: 2px solid var(--verde-brillo); outline-offset: 2px; }
.pie__direccion { display: flex; gap: var(--esp-3); align-items: flex-start; color: var(--pie-texto); line-height: 1.5; border-radius: var(--radio-sm); }
.pie__direccion > .icono { flex-shrink: 0; margin-top: 3px; color: #6fd39a; }
.pie__llegar { display: block; margin-top: 2px; font-weight: var(--peso-bold); color: #6fd39a; transition: color var(--duracion-media) var(--ease-out); }
.pie__direccion:hover .pie__llegar { color: #fff; }
.pie__horario { display: grid; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pie__estado { display: inline-flex; align-items: flex-start; gap: var(--esp-2); margin: 0; font-size: var(--texto-sm); font-weight: var(--peso-bold); color: rgba(255, 255, 255, 0.78); }
.pie__estado-punto { position: relative; margin-top: 7px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); flex-shrink: 0; }
.pie__estado.esta-abierto { color: #fff; }
.pie__estado.esta-abierto .pie__estado-punto { background: #4cc47c; }
.pie__estado.esta-abierto .pie__estado-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4cc47c;
  animation: pulso-abierto 2s var(--ease-out) infinite;
}
@keyframes pulso-abierto { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }
.pie__horario-tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-xs); }
.pie__horario-tabla th { padding: 4px 0; text-align: left; font-weight: var(--peso-normal); color: rgba(255, 255, 255, 0.7); }
.pie__horario-tabla td { padding: 4px 0; text-align: right; color: #fff; font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Pie: franja legal ---------- */
.pie__inferior { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); text-align: center; }
.pie__legal { margin: 0; font-size: var(--texto-xs); letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.58); }
.pie__legales ul { justify-content: center; }
@media (max-width: 767px) {
  .pie__legales ul { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); }
  .pie__legales li + li::before { content: none; }
  .pie__legales a { display: inline-block; padding-block: var(--esp-1); }
}
@media (min-width: 1024px) {
  .pie__inferior { flex-direction: row; justify-content: space-between; text-align: left; }
  .pie__legales ul { justify-content: flex-end; }
}

/* ---------- Texto de políticas (ventana y páginas) ---------- */
.politica-texto { color: var(--color-texto); line-height: 1.7; }
.politica-texto > * { margin: 0; }
.politica-texto > * + * { margin-top: var(--esp-3); }
.politica-texto p,
.politica-texto li { max-width: 65ch; text-wrap: pretty; }
.politica-texto h3 { margin-top: var(--esp-5); font-size: var(--texto-md); font-weight: var(--peso-black); }
.politica-texto ul { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }
.politica-texto ul > li { position: relative; padding-left: 20px; }
.politica-texto ul > li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primario); }
.politica-texto a:not(.boton) { color: var(--color-primario-oscuro); font-weight: var(--peso-bold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.politica-texto a:not(.boton):hover { text-decoration-thickness: 2px; }
.politica-texto code { padding: 1px 6px; border-radius: 6px; background: var(--color-fondo-alterno); font-size: 0.85em; }
.dato,
.politica-texto .dato { padding: 1px 4px; border-radius: 6px; background: var(--tinte-verde); color: var(--tinte-verde-texto); font-weight: var(--peso-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.politica-texto table { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); background: #fff; }
.politica-texto th,
.politica-texto td { padding: var(--esp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-borde); }
.politica-texto th { background: var(--color-fondo-alterno); font-weight: var(--peso-black); font-size: var(--texto-xs); letter-spacing: 0.02em; }
.politica-texto .tabla-desplazable { border: 1px solid var(--color-borde); border-radius: var(--radio-md); }
.politica-texto .tabla-desplazable table { border-radius: 0; }
.politica-texto tr:last-child td { border-bottom: 0; }

/* Pasos numerados en círculos, unidos por una línea fina */
.pasos { list-style: none; counter-reset: paso; padding: 0; display: grid; gap: var(--esp-4); }
.pasos > li { position: relative; counter-increment: paso; padding-left: 44px; min-height: 30px; }
.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primario);
  color: #fff;
  font-size: var(--texto-xs);
  font-weight: var(--peso-black);
  box-shadow: 0 0 0 4px var(--tinte-verde);
}
.pasos > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: calc(var(--esp-4) * -1 + 2px); width: 2px; border-radius: 2px; background: var(--tinte-verde); }

/* Notas en cajas con borde de color */
.nota { padding: var(--esp-3) var(--esp-4); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-md); background: var(--color-fondo-alterno); }
.nota p { margin: 0; max-width: none; }
.nota--importante { border-color: rgba(214, 167, 0, 0.55); background: var(--color-acento-claro); color: #4d3b00; }
.nota--exito { border-color: rgba(1, 123, 52, 0.28); background: var(--tinte-verde); color: var(--tinte-verde-texto); }
.nota--info { border-color: var(--color-borde-fuerte); background: var(--color-fondo-alterno); color: var(--color-texto); }
.politica-accion { margin-top: var(--esp-4) !important; }
.politica-texto mark,
.acordeon-ayuda mark { padding: 0 2px; border-radius: 3px; background: #ffe98a; color: inherit; }

/* ---------- Ventana modal de políticas ---------- */
.politica-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 20);
  display: grid;
  place-items: center;
  padding: var(--esp-6);
}
.politica-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: aparecer 250ms var(--ease-out);
}
.politica-modal__ventana {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: 80vh;
  max-height: 80dvh;
  overflow: hidden;
  border-radius: var(--radio-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px -16px rgba(13, 38, 25, 0.35), 0 48px 96px -32px rgba(13, 38, 25, 0.45);
  animation: politica-entrada 250ms var(--ease-out);
  transition: transform 250ms var(--ease-out);
}
@keyframes politica-entrada { from { opacity: 0; transform: scale(0.96); } }
.politica-modal--saliendo .politica-modal__fondo { animation: desaparecer 200ms ease-out forwards; }
.politica-modal--saliendo .politica-modal__ventana { animation: politica-salida 200ms ease-out forwards; }
@keyframes politica-salida { to { opacity: 0; transform: scale(0.97); } }
.politica-modal__progreso { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, 0.12); }
.politica-modal__progreso span { display: block; height: 100%; background: var(--verde-brillo); transform: scaleX(0); transform-origin: left; }

/* Encabezado verde de marca (como el de las categorías) */
.politica-modal__cabecera {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex-shrink: 0;
  padding: var(--esp-5) var(--esp-6) var(--esp-6);
  background: var(--verde-noche);
  color: #fff;
}
.politica-modal__cabecera::before { content: ""; position: absolute; inset: -30%; z-index: -2; background: var(--malla-marca); pointer-events: none; }
.politica-modal__cabecera::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ruido); pointer-events: none; }
.politica-modal__asa { display: none; }
.politica-modal__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.politica-modal__selector { position: relative; display: inline-flex; align-items: center; }
.politica-modal__selector select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 40px 0 var(--esp-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  cursor: pointer;
  transition: background-color var(--duracion-media) var(--ease-out), border-color var(--duracion-media) var(--ease-out);
}
.politica-modal__selector select option { color: var(--color-texto); background: #fff; }
.politica-modal__selector select:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
.politica-modal__selector select:focus-visible { outline: 2px solid var(--verde-brillo); outline-offset: 2px; }
.politica-modal__selector .icono { position: absolute; right: 14px; pointer-events: none; }
.politica-modal__cerrar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--duracion-media) var(--ease-out), transform var(--duracion-rapida) var(--ease-out);
}
.politica-modal__cerrar:hover { background: rgba(255, 255, 255, 0.22); }
.politica-modal__cerrar:active { transform: scale(0.94); }
.politica-modal__cerrar:focus-visible { outline: 2px solid var(--verde-brillo); outline-offset: 2px; }
.politica-modal__titulo { margin: var(--esp-4) 0 var(--esp-1); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: var(--peso-titulo); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; color: #fff; }
.politica-modal__titulo:focus { outline: none; }
.politica-modal__fecha { margin: 0; font-size: var(--texto-xs); color: var(--texto-sobre-oscuro-tenue); }

/* Cuerpo con scroll interno */
.politica-modal__cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--esp-6) var(--esp-6) var(--esp-8);
  scrollbar-width: thin;
  scrollbar-color: var(--color-borde-fuerte) transparent;
}
.politica-modal__cuerpo:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -4px; }
.politica-modal__cuerpo::-webkit-scrollbar { width: 10px; }
.politica-modal__cuerpo::-webkit-scrollbar-thumb { border: 3px solid #fff; border-radius: 10px; background: var(--color-borde-fuerte); }
.politica-modal__intro { margin: 0 0 var(--esp-5); max-width: 65ch; font-size: var(--texto-md); color: var(--color-texto-suave); }
.politica-modal__indice ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0 0 var(--esp-2); padding: 0; }
.politica-modal__indice a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 36px;
  padding: 4px var(--esp-3) 4px 4px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-pildora);
  background: var(--color-fondo-alterno);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  transition: background-color var(--duracion-media) var(--ease-out), border-color var(--duracion-media) var(--ease-out);
}
.politica-modal__indice a span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--color-primario); font-size: var(--texto-xs); font-weight: var(--peso-black); }
.politica-modal__indice a:hover { border-color: rgba(1, 123, 52, 0.3); background: var(--tinte-verde); }
.politica-modal__indice a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.politica-modal__seccion { margin-top: var(--esp-8); }
.politica-modal__seccion h3 { display: flex; align-items: center; gap: var(--esp-3); margin: 0 0 var(--esp-3); font-size: var(--texto-lg); font-weight: var(--peso-titulo); letter-spacing: -0.01em; text-wrap: balance; }
.politica-modal__num { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--tinte-verde); color: var(--color-primario); font-size: var(--texto-xs); font-weight: var(--peso-black); }

/* Pie fijo */
.politica-modal__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-shrink: 0;
  padding: var(--esp-3) var(--esp-6);
  border-top: 1px solid var(--color-borde);
  background: #fff;
}
.politica-modal__dudas { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 44px; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.politica-modal__dudas .icono { color: var(--color-whatsapp); }
.politica-modal__dudas strong { color: var(--color-primario-oscuro); }
.politica-modal__dudas:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.politica-modal__acciones { display: flex; gap: var(--esp-2); }
.politica-modal__acciones .boton { min-height: 44px; padding-inline: var(--esp-5); }

/* Celular: hoja que sube desde abajo */
@media (max-width: 767px) {
  .politica-modal { place-items: end stretch; padding: 0; }
  .politica-modal__ventana {
    max-width: none;
    height: 90vh;
    height: 90dvh;
    max-height: 90dvh;
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    animation: politica-subir 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .politica-modal__ventana.esta-arrastrando { transition: none; }
  @keyframes politica-subir { from { transform: translateY(100%); } }
  .politica-modal--saliendo .politica-modal__ventana { animation: politica-bajar 220ms ease-out forwards; }
  @keyframes politica-bajar { to { transform: translateY(100%); } }
  .politica-modal__cabecera { padding: var(--esp-3) var(--esp-5) var(--esp-5); touch-action: none; cursor: grab; }
  .politica-modal__asa { display: block; width: 40px; height: 5px; margin: 0 auto var(--esp-3); border-radius: var(--radio-pildora); background: rgba(255, 255, 255, 0.45); }
  .politica-modal__cuerpo { padding: var(--esp-5) var(--esp-5) var(--esp-8); }
  .politica-modal__pie { padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom)); }
  .politica-modal__dudas { width: 100%; justify-content: center; min-height: 32px; }
  .politica-modal__acciones { width: 100%; }
  .politica-modal__acciones .boton { flex: 1; padding-inline: var(--esp-3); }
  .politica-modal__imprimir-extra { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .politica-modal__fondo,
  .politica-modal__ventana,
  .politica-modal--saliendo .politica-modal__fondo,
  .politica-modal--saliendo .politica-modal__ventana { animation: none !important; transition: none !important; }
  .pie__estado.esta-abierto .pie__estado-punto::after { animation: none; }
}

/* ---------- Páginas legales y de ayuda ---------- */
.politica-rejilla { display: grid; gap: var(--esp-6); margin-bottom: var(--esp-12); }
.politica-rejilla > * { min-width: 0; }
@media (min-width: 1024px) {
  .politica-rejilla { grid-template-columns: 272px minmax(0, 1fr); gap: var(--esp-12); align-items: start; }
  .politica-lateral { position: sticky; top: 164px; }
}
.politica-indice { padding: var(--esp-5); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: #fff; box-shadow: var(--sombra-tarjeta); }
.politica-indice__titulo { margin: 0 0 var(--esp-3); font-size: var(--texto-xs); font-weight: var(--peso-black); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--color-texto-tenue); }
.politica-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.politica-indice a {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 7px var(--esp-2);
  border-radius: var(--radio-sm);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  line-height: 1.35;
  transition: background-color var(--duracion-media) var(--ease-out), color var(--duracion-media) var(--ease-out);
}
.politica-indice__num { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-fondo-alterno); font-size: var(--texto-xs); font-weight: var(--peso-black); transition: background-color var(--duracion-media) var(--ease-out), color var(--duracion-media) var(--ease-out); }
.politica-indice a:hover { background: var(--color-fondo-alterno); color: var(--color-texto); }
.politica-indice a.es-activo { background: var(--tinte-verde); color: var(--tinte-verde-texto); font-weight: var(--peso-bold); }
.politica-indice a.es-activo .politica-indice__num { background: var(--color-primario); color: #fff; }
.politica-indice a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
@media (min-width: 1024px) { .politica-indice ol { max-height: calc(100vh - 270px); overflow-y: auto; scrollbar-width: thin; } }
@media (max-width: 1023px) {
  .politica-indice { padding: var(--esp-4); }
  .politica-indice ol { display: flex; gap: var(--esp-2); overflow-x: auto; margin-inline: calc(var(--esp-4) * -1); padding: 2px var(--esp-4) var(--esp-1); scroll-snap-type: x proximity; scrollbar-width: none; }
  .politica-indice ol::-webkit-scrollbar { display: none; }
  .politica-indice li { flex-shrink: 0; scroll-snap-align: start; }
  .politica-indice a { white-space: nowrap; border: 1px solid var(--color-borde); border-radius: var(--radio-pildora); padding: 4px var(--esp-3) 4px 4px; }
}
.politica-contenido { display: grid; gap: var(--esp-5); min-width: 0; }
.politica-contenido > * { min-width: 0; }
.politica-seccion {
  scroll-margin-top: 176px;
  padding: var(--esp-6) var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-tarjeta);
}
@media (min-width: 768px) { .politica-seccion { padding: var(--esp-8) var(--esp-10); } }
.politica-seccion__cabeza { display: flex; align-items: center; gap: var(--esp-4); margin-bottom: var(--esp-4); }
.politica-seccion__icono { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radio-md); background: var(--tinte-verde); color: var(--color-primario); }
.politica-seccion__icono .icono { width: 22px; height: 22px; stroke-width: 1.75; }
.politica-seccion__titulo { margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: var(--peso-titulo); letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
.politica-seccion__num { color: var(--color-primario); }
.ayuda-preguntas { margin-top: var(--esp-6); }
.ayuda-preguntas__titulo { margin: 0 0 var(--esp-4); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: var(--peso-titulo); letter-spacing: -0.02em; }
.nosotros-ayuda { max-width: 880px; margin: var(--esp-12) auto 0; }

/* Franja verde de cierre */
.franja-ayuda { display: grid; gap: var(--esp-6); margin: var(--esp-6) 0 var(--esp-16); padding: var(--esp-10) var(--esp-6); border-radius: var(--radio-xl); }
@media (min-width: 900px) { .franja-ayuda { grid-template-columns: 1fr auto; align-items: center; padding: var(--esp-14) var(--esp-14); } }
.franja-ayuda__titulo { margin: 0 0 var(--esp-2); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: var(--peso-titulo); letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
.franja-ayuda p { margin: 0; max-width: 52ch; color: var(--texto-sobre-oscuro); }
.franja-ayuda__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

/* ---------- Acordeones de preguntas ---------- */
.acordeones { display: grid; gap: var(--esp-3); }
.acordeon-ayuda {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-tarjeta);
  transition: box-shadow 280ms var(--ease-out), background-color 280ms var(--ease-out), border-color 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.acordeon-ayuda[hidden] { display: none; }
.acordeon-ayuda::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primario); transform: scaleY(0); transform-origin: top; transition: transform 280ms var(--ease-out); }
.acordeon-ayuda__titulo { margin: 0; font: inherit; }
.acordeon-ayuda__boton {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  width: 100%;
  min-height: 68px;
  padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-4);
  border: 0;
  border-radius: var(--radio-lg);
  background: none;
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-md);
  font-weight: var(--peso-bold);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .acordeon-ayuda__boton { padding-inline: var(--esp-5); } }
.acordeon-ayuda__boton:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -3px; }
.acordeon-ayuda__tema { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primario-suave); color: var(--color-primario); box-shadow: inset 0 0 0 1px rgba(1, 123, 52, 0.08); }
.acordeon-ayuda__tema .icono { width: 18px; height: 18px; stroke-width: 1.75; }
.acordeon-ayuda__pregunta { flex: 1; text-wrap: pretty; }
.acordeon-ayuda__signo {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tinte-verde);
  transition: transform 280ms var(--ease-out), background-color 280ms var(--ease-out);
}
.acordeon-ayuda__signo::before,
.acordeon-ayuda__signo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--color-primario);
  transition: transform 280ms var(--ease-out), background-color 280ms var(--ease-out);
}
.acordeon-ayuda__signo::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .acordeon-ayuda:hover { border-color: var(--color-borde-fuerte); box-shadow: 0 10px 24px -16px rgba(36, 40, 44, 0.22); }
  .acordeon-ayuda:hover .acordeon-ayuda__signo { background: #dcefe3; }
}
.acordeon-ayuda.esta-abierto { border-color: rgba(1, 123, 52, 0.18); background: var(--color-primario-suave); box-shadow: var(--sombra-marca); transform: translateY(-1px); }
.acordeon-ayuda.esta-abierto::before { transform: scaleY(1); }
.acordeon-ayuda.esta-abierto .acordeon-ayuda__signo { transform: rotate(180deg); background: var(--color-primario); }
.acordeon-ayuda.esta-abierto .acordeon-ayuda__signo::before,
.acordeon-ayuda.esta-abierto .acordeon-ayuda__signo::after { background: #fff; }
.acordeon-ayuda.esta-abierto .acordeon-ayuda__signo::after { transform: rotate(0deg); }
.acordeon-ayuda.esta-abierto .acordeon-ayuda__tema { background: #fff; }
/* Animación de alto y opacidad (solo con JavaScript; sin él, todo se ve abierto) */
.es-interactivo .acordeon-ayuda__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 280ms var(--ease-out), opacity 240ms var(--ease-out), visibility 0s linear 280ms;
}
.es-interactivo .esta-abierto .acordeon-ayuda__panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.acordeon-ayuda__interior { min-height: 0; overflow: hidden; }
.acordeon-ayuda__respuesta { padding: 0 var(--esp-4) var(--esp-5); }
@media (min-width: 768px) { .acordeon-ayuda__respuesta { padding: 0 var(--esp-10) var(--esp-6) 76px; } }
.acordeon-ayuda__respuesta > p:first-child strong:first-child { color: var(--color-texto); }
.acordeon-ayuda__accion { margin-top: var(--esp-4) !important; }
.acordeon-ayuda__accion .boton .icono { transition: transform var(--duracion-media) var(--ease-out); }
.acordeon-ayuda__accion .boton:hover .icono { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .acordeon-ayuda,
  .acordeon-ayuda::before,
  .acordeon-ayuda__signo,
  .acordeon-ayuda__signo::before,
  .acordeon-ayuda__signo::after,
  .es-interactivo .acordeon-ayuda__panel { transition: none !important; }
  .acordeon-ayuda.esta-abierto { transform: none; }
}

/* ---------- Página de preguntas frecuentes ---------- */
.faq-buscador { position: relative; width: 100%; max-width: 560px; margin-top: var(--esp-3); }
.faq-buscador__icono { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--color-texto-tenue); pointer-events: none; }
.faq-buscador__campo {
  width: 100%;
  height: 56px;
  padding: 0 56px 0 52px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radio-pildora);
  background: #fff;
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-md);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.55);
  transition: box-shadow var(--duracion-media) var(--ease-out);
}
.faq-buscador__campo::placeholder { color: var(--color-texto-suave); }
.faq-buscador__campo:focus { outline: none; box-shadow: 0 0 0 4px rgba(200, 240, 214, 0.55), 0 14px 32px -18px rgba(0, 0, 0, 0.55); }
.faq-buscador__campo::-webkit-search-cancel-button { display: none; }
.faq-buscador__limpiar { position: absolute; right: 10px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 50%; background: var(--color-fondo-alterno); color: var(--color-texto); cursor: pointer; }
.faq-buscador__limpiar[hidden] { display: none; }
.faq-buscador__limpiar:hover { background: var(--color-borde); }
.faq-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0 0 var(--esp-8); }
@media (max-width: 767px) {
  .faq-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--esp-4) * -1); padding: 2px var(--esp-4) var(--esp-1); scrollbar-width: none; }
  .faq-chips::-webkit-scrollbar { display: none; }
}
.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pildora);
  background: #fff;
  color: var(--color-texto);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  cursor: pointer;
  transition: background-color var(--duracion-media) var(--ease-out), border-color var(--duracion-media) var(--ease-out), color var(--duracion-media) var(--ease-out), transform var(--duracion-rapida) var(--ease-out);
}
.faq-chip .icono { color: var(--color-primario); }
.faq-chip:hover { border-color: var(--color-texto); }
.faq-chip:active { transform: scale(0.97); }
.faq-chip:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.faq-chip[aria-pressed="true"] { border-color: var(--color-primario); background: var(--color-primario); color: #fff; }
.faq-chip[aria-pressed="true"] .icono { color: #fff; }
.faq-rejilla { display: grid; gap: var(--esp-8); margin-bottom: var(--esp-6); }
@media (min-width: 1024px) { .faq-rejilla { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-12); align-items: start; } }
.faq-lista { min-width: 0; }
.faq-estado { min-height: 1.4em; margin: 0 0 var(--esp-3); font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--color-texto-suave); }
.faq-estado:empty { min-height: 0; margin: 0; }
.faq-grupo + .faq-grupo { margin-top: var(--esp-10); }
.faq-grupo[hidden] { display: none; }
.faq-grupo__titulo { display: flex; align-items: center; gap: var(--esp-3); margin: 0 0 var(--esp-4); font-size: var(--texto-xl); font-weight: var(--peso-titulo); letter-spacing: -0.01em; }
.faq-grupo__icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radio-md); background: var(--tinte-verde); color: var(--color-primario); }
.faq-vacio { display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-10) var(--esp-6); border: 1px dashed var(--color-borde-fuerte); border-radius: var(--radio-lg); text-align: center; }
.faq-vacio[hidden] { display: none; }
.faq-vacio__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-fondo-alterno); color: var(--color-texto-suave); }
.faq-vacio__titulo { margin: 0; font-size: var(--texto-xl); font-weight: var(--peso-titulo); }
.faq-vacio p { margin: 0; color: var(--color-texto-suave); }
.faq-ayuda { display: grid; gap: var(--esp-4); padding: var(--esp-8) var(--esp-6); border-radius: var(--radio-xl); }
@media (min-width: 1024px) { .faq-ayuda { position: sticky; top: 164px; } }
.faq-ayuda__titulo { margin: 0; font-size: var(--texto-2xl); font-weight: var(--peso-titulo); letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.faq-ayuda > p { margin: 0; color: var(--texto-sobre-oscuro); }
.faq-ayuda__datos { display: grid; gap: var(--esp-4); margin: var(--esp-2) 0 0; padding-top: var(--esp-4); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.faq-ayuda__datos dt { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-xs); font-weight: var(--peso-black); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--verde-brillo); }
.faq-ayuda__datos dd { margin: var(--esp-1) 0 0; font-size: var(--texto-sm); line-height: 1.6; color: var(--texto-sobre-oscuro); }
.faq-ayuda__datos a { color: #fff; font-weight: var(--peso-bold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mapa dentro de la tarjeta de contacto del pie (nov. 2026) ---------- */
.pie__mapa--tarjeta { position: relative; margin: calc(var(--esp-1) * -1) 0 0; }
.pie__mapa--tarjeta .mapa {
  aspect-ratio: auto;
  height: 140px;
  border: 0;
  border-radius: var(--radio-lg);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pie__mapa--tarjeta .mapa__iframe {
  border-radius: var(--radio-lg);
  filter: grayscale(0.6) brightness(0.85) contrast(1.05) sepia(0.15) hue-rotate(70deg);
  transition: filter 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pie__mapa--tarjeta:hover .mapa__iframe { filter: none; } }
.pie__mapa--tarjeta .mapa__respaldo { padding: var(--esp-3) var(--esp-4) var(--esp-10); gap: var(--esp-1); color: rgba(255, 255, 255, 0.85); font-size: var(--texto-xs); }
.pie__mapa--tarjeta .mapa__respaldo .icono { width: 26px; height: 26px; color: #6fd39a; }
.pie__mapa--tarjeta .mapa__respaldo strong { color: #fff; font-size: var(--texto-sm); }
.pie__mapa--tarjeta .mapa__respaldo .boton { display: none; }
.pie__mapa-boton {
  position: absolute;
  right: var(--esp-2);
  bottom: var(--esp-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--esp-3);
  border-radius: var(--radio-pildora);
  background: #fff;
  color: var(--verde-noche);
  font-size: var(--texto-xs);
  font-weight: var(--peso-black);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
  transition: transform var(--duracion-media) var(--ease-out), background-color var(--duracion-media) var(--ease-out);
}
.pie__mapa-boton:hover { background: var(--verde-brillo); transform: translateY(-1px); }
.pie__mapa-boton:active { transform: scale(0.97); }
.pie__mapa-boton:focus-visible { outline: 2px solid var(--verde-brillo); outline-offset: 2px; }

/* ==========================================================================
   NOSOTROS (rediseño nov. 2026): historia + cifras, valores, qué vendemos,
   visítanos. Ritmo: verde (encabezado) → claro → verde muy suave → claro →
   claro → franja verde final.
   ========================================================================== */
[data-nosotros] .nosotros-hero { margin-bottom: var(--esp-14); }
.nosotros-etiqueta { margin: 0; font-size: var(--texto-xs); font-weight: var(--peso-black); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--color-primario); }
.nosotros-seccion__titulo,
.nosotros-historia__titulo { margin: 0; font-size: var(--texto-titulo-seccion); font-weight: var(--peso-titulo); letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.nosotros-seccion__titulo .resaltado,
.nosotros-historia__titulo .resaltado { color: var(--color-primario); }

/* Historia: texto a la izquierda, tarjeta verde de cifras a la derecha */
.nosotros-historia { display: grid; gap: var(--esp-8); align-items: center; margin-bottom: var(--esp-20); }
@media (min-width: 1024px) { .nosotros-historia { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--esp-16); } }
.nosotros-historia__texto { display: grid; gap: var(--esp-4); }
.nosotros-historia__texto > p:not(.nosotros-etiqueta) { margin: 0; max-width: 58ch; color: var(--color-texto-suave); line-height: 1.7; }
.nosotros-historia__titulo { margin-bottom: var(--esp-2); }
.nosotros-historia__texto .nosotros-historia__entrada { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); font-weight: var(--peso-bold); line-height: 1.4; color: var(--color-texto); letter-spacing: -0.01em; }
.nosotros-cifras { padding: var(--esp-6); border-radius: var(--radio-xl); }
@media (min-width: 768px) { .nosotros-cifras { padding: var(--esp-10); } }
.nosotros-cifras ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nosotros-cifras li { display: grid; gap: var(--esp-2); align-content: start; padding: var(--esp-5) var(--esp-4); }
@media (min-width: 768px) { .nosotros-cifras li { padding: var(--esp-6); } }
.nosotros-cifras li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
.nosotros-cifras li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.nosotros-cifras__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-md); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: var(--verde-brillo); }
.nosotros-cifras__icono .icono { width: 22px; height: 22px; stroke-width: 1.5; }
.nosotros-cifras__valor { margin-top: var(--esp-2); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: var(--peso-black); letter-spacing: -0.03em; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.nosotros-cifras__texto { font-size: var(--texto-sm); line-height: 1.45; color: var(--texto-sobre-oscuro); }

/* Valores en tarjetas, sobre una franja verde muy suave */
.nosotros-valores { margin: 0 calc(50% - 50vw) var(--esp-20); padding: var(--esp-16) calc(50vw - 50%); background: var(--color-primario-suave); }
.nosotros-valores .nosotros-seccion__titulo { margin-bottom: var(--esp-8); }
.nosotros-valores__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }
@media (min-width: 600px) { .nosotros-valores__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nosotros-valores__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-5); } }
.nosotros-valor { display: grid; gap: var(--esp-3); align-content: start; padding: var(--esp-6); border: 1px solid rgba(1, 123, 52, 0.1); border-radius: var(--radio-lg); background: #fff; box-shadow: var(--sombra-marca); transition: transform var(--duracion-lenta) var(--ease-out), box-shadow var(--duracion-lenta) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nosotros-valor:hover { transform: translateY(-3px); box-shadow: var(--sombra-marca-hover); } }
.nosotros-valor__icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radio-md); background: var(--tinte-verde); color: var(--color-primario); }
.nosotros-valor__icono .icono { width: 24px; height: 24px; stroke-width: 1.5; }
.nosotros-valor__titulo { margin: var(--esp-2) 0 0; font-size: var(--texto-lg); font-weight: var(--peso-titulo); letter-spacing: -0.01em; }
.nosotros-valor p { margin: 0; font-size: var(--texto-sm); line-height: 1.6; color: var(--color-texto-suave); }

/* Qué vendemos */
.nosotros-vendemos { margin-bottom: var(--esp-20); }
.nosotros-vendemos .nosotros-seccion__titulo { margin-bottom: var(--esp-8); }
.categorias-nosotros a { align-content: start; }
.categorias-nosotros__icono { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--esp-2); border-radius: 50%; background: var(--color-primario-suave); }
.categorias-nosotros__icono .icono { width: 24px; height: 24px; stroke-width: 1.5; }
.categorias-nosotros .categorias-nosotros__ver { display: inline-flex; align-items: center; gap: var(--esp-1); margin-top: var(--esp-2); font-weight: var(--peso-bold); color: var(--color-primario); }
.categorias-nosotros .categorias-nosotros__ver .icono { transition: transform var(--duracion-media) var(--ease-out); }
.categorias-nosotros a:hover .categorias-nosotros__ver .icono { transform: translateX(3px); }

/* Visítanos */
.nosotros-visitanos { margin-bottom: var(--esp-16); padding: var(--esp-6); border: 1px solid var(--color-borde); border-radius: var(--radio-xl); background: #fff; box-shadow: var(--sombra-tarjeta); }
@media (min-width: 900px) { .nosotros-visitanos { padding: var(--esp-10); gap: var(--esp-10); align-items: stretch; } }
.nosotros-visitanos .visitanos__datos { align-content: start; gap: var(--esp-6); }
.nosotros-visitanos dl { gap: var(--esp-5); }
.nosotros-visitanos dt { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-xs); font-weight: var(--peso-black); letter-spacing: var(--tracking-etiqueta); text-transform: uppercase; color: var(--color-texto-tenue); }
.nosotros-visitanos dt .icono { color: var(--color-primario); }
.nosotros-visitanos dd { color: var(--color-texto); }
.nosotros-visitanos dd a { font-weight: var(--peso-bold); color: var(--color-primario-oscuro); }
.nosotros-horario { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nosotros-visitanos .mapa { height: 100%; min-height: 300px; aspect-ratio: auto; }
[data-nosotros] .nosotros-ayuda { margin-top: 0; margin-bottom: var(--esp-6); }

/* ==========================================================================
   COMPRA DIRECTA (nov. 2026): "Comprar ahora" en la ficha, nota de pago
   seguro, asesoría en la fila de confianza y alternativa discreta a WhatsApp
   ========================================================================== */
.ficha__compra .boton--agregar,
.ficha__compra .boton--comprar { min-height: var(--alto-control); }
.ficha__compra .boton--comprar { grid-column: 1 / -1; }
.boton--comprar {
  background: #fff;
  color: var(--color-primario-oscuro);
  border: 1px solid var(--color-primario);
}
.boton--comprar .icono { color: var(--color-primario); }
@media (hover: hover) and (pointer: fine) {
  .boton--comprar:hover:not(:disabled) { background: var(--color-primario-suave); border-color: var(--color-primario-oscuro); color: var(--color-primario-oscuro); }
}
.boton--comprar:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.ficha__pago-seguro { display: flex; align-items: center; gap: var(--esp-2); color: var(--color-texto-suave); font-weight: var(--peso-semi); }
.ficha__pago-seguro .icono { flex-shrink: 0; color: var(--color-primario); }
.caja-compra__dudas { display: block; margin-top: 2px; font-weight: var(--peso-bold); color: var(--color-primario-oscuro); text-decoration: underline; text-underline-offset: 2px; }
.caja-compra__dudas:hover { color: var(--color-primario); }
/* WhatsApp como alternativa discreta (carrito, drawer y resultado del pago) */
.enlace-alterno { margin: 0; text-align: center; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.enlace-alterno .enlace-boton { display: inline-flex; align-items: center; gap: 4px; }
.bloque-verde .enlace-alterno { color: var(--texto-sobre-oscuro); }
.bloque-verde .enlace-alterno .enlace-boton { color: #fff; }

/* ==========================================================================
   POLÍTICAS: SOLO EL TEXTO (nov. 2026) — sin índice ni números, una columna
   ========================================================================== */
.politica-documento { max-width: 760px; margin: 0 auto var(--esp-12); }
.politica-documento .politica-seccion { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; scroll-margin-top: 176px; }
.politica-documento .politica-seccion + .politica-seccion { margin-top: var(--esp-10); padding-top: var(--esp-8); border-top: 1px solid var(--color-borde); }
.politica-documento .politica-seccion__titulo { margin: 0 0 var(--esp-4); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); font-weight: var(--peso-titulo); letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.politica-documento .politica-texto { font-size: 1.0625rem; line-height: 1.75; }
.politica-documento .ayuda-preguntas { margin-top: var(--esp-12); }
.politica-modal__seccion { margin-top: var(--esp-8); }
.politica-modal__seccion:first-of-type { margin-top: var(--esp-2); }
.politica-modal__seccion + .politica-modal__seccion { padding-top: var(--esp-6); border-top: 1px solid var(--color-borde); }
.politica-modal__seccion h3 { display: block; margin: 0 0 var(--esp-3); font-size: var(--texto-xl); font-weight: var(--peso-titulo); letter-spacing: -0.015em; line-height: 1.25; }

/* ==========================================================================
   ENVÍO COBRADO EN LA PÁGINA (nov. 2026): buscador de municipios
   ========================================================================== */
.combo { position: relative; }
.combo__caja { position: relative; }
.combo__icono { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--color-texto-tenue); pointer-events: none; }
.combo__campo { padding-left: 38px; }
.combo__lista {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% - 18px);
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: var(--esp-1);
  list-style: none;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-md);
  background: #fff;
  box-shadow: var(--sombra-flotante);
}
.combo__lista[hidden] { display: none; }
.combo__lista [role="option"] { padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); font-size: var(--texto-sm); cursor: pointer; }
.combo__lista [role="option"]:hover,
.combo__lista [aria-selected="true"] { background: var(--tinte-verde); color: var(--tinte-verde-texto); }
.combo__vacio { padding: var(--esp-3); font-size: var(--texto-sm); color: var(--color-texto-suave); }
.select { appearance: auto; }
.resumen__fila--envio span:last-child { font-weight: var(--peso-bold); }
.resumen__total-fila { display: flex; justify-content: space-between; font-weight: var(--peso-black); }

.drawer__envio { display: flex; justify-content: space-between; gap: var(--esp-3); margin: calc(var(--esp-1) * -1) 0 var(--esp-2); font-size: var(--texto-sm); color: var(--color-texto-suave); }
.drawer__envio span:last-child { text-align: right; font-weight: var(--peso-semi); color: var(--color-texto); }

.resultado__subtotales { display: grid; gap: var(--esp-1); padding-top: var(--esp-3); font-size: var(--texto-sm); color: var(--color-texto-suave); }
.resultado__subtotales > div { display: flex; justify-content: space-between; }
.resultado__subtotales span:last-child { font-variant-numeric: tabular-nums; color: var(--color-texto); font-weight: var(--peso-semi); }