/* ============================================================
   TIENDA WEB - Amo Mi Mascota
   Colores de marca: violeta #321C76 y amarillo #FECC2B (los mismos del sistema).
   ============================================================ */
:root {
  /* --- Escala de violetas. Un solo tono por nivel, sin valores sueltos. ---
     700 = marca (encabezado, botones, titulos)
     800 = profundo (solo sobre 700, para separar superficies)
     100/50 = superficies claras derivadas, para fondos y chips */
  --violeta-900: #130932;
  --violeta-800: #22134F;
  --violeta-700: #321C76;
  --violeta-600: #412C93;
  --violeta-500: #5B45B0;
  --violeta-400: #6E5BBE;
  --violeta-200: #D4CEE8;
  --violeta-100: #E6E1F4;
  --violeta-50:  #F4F1FC;

  /* Alias de compatibilidad: el resto de la hoja sigue usando estos nombres. */
  --violeta: var(--violeta-700);
  --violeta-oscuro: var(--violeta-800);
  --violeta-suave: var(--violeta-100);

  --amarillo: #FECC2B;
  --amarillo-fuerte: #F5B800;
  --amarillo-suave: #FFF6DC;
  --verde-wa: #25D366;
  --verde-wa-oscuro: #1DA851;

  --fondo: #F6F5FB;
  --superficie: #FFFFFF;
  --borde: #E7E4F0;
  --texto: #1C1733;
  --texto-suave: #6B6880;
  --ok: #15803D;
  --ok-suave: #DFF3E4;
  --alerta: #9A3412;
  --alerta-suave: #FDECD9;

  --radio-s: 10px;
  --radio-m: 16px;
  --radio-l: 22px;
  /* Tres niveles de elevacion, siempre con el mismo tinte violeta. */
  --sombra-1: 0 1px 2px rgba(27, 16, 56, 0.04), 0 2px 8px rgba(27, 16, 56, 0.05);
  --sombra-2: 0 2px 6px rgba(27, 16, 56, 0.06), 0 12px 28px rgba(27, 16, 56, 0.08);
  --sombra-3: 0 6px 16px rgba(27, 16, 56, 0.10), 0 18px 44px rgba(27, 16, 56, 0.16);
  --sombra: var(--sombra-1);
  /* Patitas del encabezado: almohadilla con forma y cuatro dedos en arco.
     El viewBox lleva margen para que al rotarlas no se recorten contra el borde. */
  --patitas:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-14 -14 128 128"><g fill="rgba(255,255,255,0.07)" transform="rotate(-18 50 50)"><path d="M50 56c15 0 27 11 27 23 0 10.5-10.5 15-19 11.8-4.2-1.6-11.8-1.6-16 0C33.5 94 23 89.5 23 79c0-12 12-23 27-23z"/><ellipse cx="18.5" cy="44" rx="8.6" ry="11.8" transform="rotate(-34 18.5 44)"/><ellipse cx="36.5" cy="27" rx="9.2" ry="12.8" transform="rotate(-13 36.5 27)"/><ellipse cx="63.5" cy="27" rx="9.2" ry="12.8" transform="rotate(13 63.5 27)"/><ellipse cx="81.5" cy="44" rx="8.6" ry="11.8" transform="rotate(34 81.5 44)"/></g></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-14 -14 128 128"><g fill="rgba(255,255,255,0.055)" transform="rotate(14 50 50)"><path d="M50 56c15 0 27 11 27 23 0 10.5-10.5 15-19 11.8-4.2-1.6-11.8-1.6-16 0C33.5 94 23 89.5 23 79c0-12 12-23 27-23z"/><ellipse cx="18.5" cy="44" rx="8.6" ry="11.8" transform="rotate(-34 18.5 44)"/><ellipse cx="36.5" cy="27" rx="9.2" ry="12.8" transform="rotate(-13 36.5 27)"/><ellipse cx="63.5" cy="27" rx="9.2" ry="12.8" transform="rotate(13 63.5 27)"/><ellipse cx="81.5" cy="44" rx="8.6" ry="11.8" transform="rotate(34 81.5 44)"/></g></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-14 -14 128 128"><g fill="rgba(255,255,255,0.06)" transform="rotate(32 50 50)"><path d="M50 56c15 0 27 11 27 23 0 10.5-10.5 15-19 11.8-4.2-1.6-11.8-1.6-16 0C33.5 94 23 89.5 23 79c0-12 12-23 27-23z"/><ellipse cx="18.5" cy="44" rx="8.6" ry="11.8" transform="rotate(-34 18.5 44)"/><ellipse cx="36.5" cy="27" rx="9.2" ry="12.8" transform="rotate(-13 36.5 27)"/><ellipse cx="63.5" cy="27" rx="9.2" ry="12.8" transform="rotate(13 63.5 27)"/><ellipse cx="81.5" cy="44" rx="8.6" ry="11.8" transform="rotate(34 81.5 44)"/></g></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-14 -14 128 128"><g fill="rgba(255,255,255,0.05)" transform="rotate(-40 50 50)"><path d="M50 56c15 0 27 11 27 23 0 10.5-10.5 15-19 11.8-4.2-1.6-11.8-1.6-16 0C33.5 94 23 89.5 23 79c0-12 12-23 27-23z"/><ellipse cx="18.5" cy="44" rx="8.6" ry="11.8" transform="rotate(-34 18.5 44)"/><ellipse cx="36.5" cy="27" rx="9.2" ry="12.8" transform="rotate(-13 36.5 27)"/><ellipse cx="63.5" cy="27" rx="9.2" ry="12.8" transform="rotate(13 63.5 27)"/><ellipse cx="81.5" cy="44" rx="8.6" ry="11.8" transform="rotate(34 81.5 44)"/></g></svg>');
  --fuente-titulos: "Baloo 2", "Inter", system-ui, sans-serif;
  --fuente: "Inter", system-ui, -apple-system, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
body.sin-scroll { overflow: hidden; }
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
/* En el celular, dos toques seguidos sobre un boton hacian zoom (el "doble tap" de iOS):
   agregando unidades rapido con el + la pagina se acercaba sola. Con esto el navegador
   trata cada toque como suelto y no espera el segundo. El zoom con dos dedos sigue
   andando en toda la pagina. */
button, input, select, textarea, a { touch-action: manipulation; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.muted { color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Encabezado ---------- */

/* Violeta plano, sin las burbujas: con el logo grande ya no hacian falta y ensuciaban.
   El padding de arriba le reserva lugar al telefono y al boton de la esquina, que si no
   se superponen con el logo en pantallas angostas. */
.hero {
  position: relative;
  /* Violeta del logo (#321C76, medido sobre el archivo) con patitas apenas marcadas. */
  background-color: var(--violeta-700);
  background-image: var(--patitas);
  background-repeat: no-repeat;
  background-position: 6% 22%, 93% 70%, 17% 86%, 82% 14%;
  background-size: 76px, 104px, 52px, 44px;
  color: #fff;
  text-align: center;
  padding: 24px 16px 20px;
}
.hero-logo {
  width: min(420px, 88vw);
  height: auto;
  display: block;
  margin: 0 auto 12px;
}
.hero-bajada { margin: 0 auto; max-width: 520px; font-size: 14px; opacity: 0.78; line-height: 1.45; }

.aviso {
  background: var(--amarillo);
  color: var(--violeta-oscuro);
  text-align: center;
  font-size: 13px; font-weight: 600;
  padding: 9px 16px;
  border-bottom: 2px solid var(--violeta-oscuro);
}

/* ---------- Barra de busqueda y categorias (queda fija arriba) ----------
   Sin backdrop-filter a proposito: en un catalogo largo (cientos de productos,
   20.000px de alto) el navegador deja de pintar y la pagina se ve en blanco al
   scrollear. El fondo solido se ve igual. */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
}
/* Mas aire arriba del buscador: despega la busqueda del bloque violeta del encabezado. */
.toolbar-inner { max-width: 1200px; margin: 0 auto; padding: 18px 16px 11px; }
@media (max-width: 560px) { .toolbar-inner { padding: 15px 16px 10px; } }
.toolbar-row { display: flex; gap: 10px; align-items: center; }
.buscador {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--fondo);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 0 12px;
  color: var(--texto-suave);
}
.buscador:focus-within { border-color: var(--violeta); background: #fff; }
.buscador input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  padding: 11px 0;
  font-size: 16px; /* 16px evita el zoom automatico en iPhone */
  color: var(--texto);
}
.btn-pedido {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--violeta); color: #fff;
  border: none; border-radius: var(--radio-s);
  padding: 11px 16px;
  font-weight: 700; white-space: nowrap;
}
.btn-pedido:hover { background: var(--violeta-oscuro); }
.btn-pedido-count {
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: var(--amarillo); color: var(--violeta-oscuro);
  font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

.chips {
  display: flex; gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  border: 1.5px solid var(--borde);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13.5px; font-weight: 600;
  color: var(--texto);
}
.chip-n { color: var(--texto-suave); font-weight: 500; font-size: 12px; margin-left: 2px; }
.chip.activo { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.chip.activo .chip-n { color: rgba(255, 255, 255, 0.75); }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }

/* ---------- Beneficios / escala de descuentos ---------- */
/* Beneficios y escala son una sola zona: "condiciones comerciales". Misma superficie,
   mismo borde, mismo radio y misma elevacion que las tarjetas del catalogo. */
.beneficios { margin: 2px 0 28px; }
.beneficios-fila {
  display: grid;
  /* Con el icono adelante cada tarjeta necesita mas ancho: si no, el titulo se parte. */
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
/* En el celular van los tres en un renglon, con el icono arriba del numero: apilados se
   comian media pantalla antes de que apareciera el primer producto. */
@media (max-width: 560px) {
  .beneficios-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .beneficio { flex-direction: column; align-items: center; text-align: center; padding: 10px 6px 11px; gap: 6px; }
  .beneficio-icono { width: 30px; height: 30px; }
  .beneficio-icono svg { width: 16px; height: 16px; }
  .beneficio-texto { align-items: center; gap: 1px; }
  .beneficio strong { font-size: 15px; }
  .beneficio span { font-size: 10.5px; line-height: 1.3; }
}
.beneficio {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--sombra-1);
}
.beneficio-icono {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.beneficio-icono svg { width: 22px; height: 22px; }
.beneficio-icono-amarillo { background: var(--amarillo-suave); color: #B07C00; }
.beneficio-icono-violeta { background: var(--violeta-100); color: var(--violeta-700); }
.beneficio-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beneficio strong { font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700; color: var(--violeta-700); line-height: 1.15; }
.beneficio span { font-size: 13px; color: var(--texto-suave); line-height: 1.35; }
/* Panel claro: el peso lo da el titulo y el tamano de los porcentajes, no el fondo. */
.escala {
  background: #EDEAF6;
  border: 1px solid #D9D1EB;
  border-radius: var(--radio-m);
  padding: 16px 16px 18px;
}
.escala-cabecera { margin-bottom: 13px; }
.escala-titulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fuente-titulos);
  font-size: 21px; font-weight: 700; color: var(--violeta-700);
  margin: 0;
}
.escala-titulo svg { width: 21px; height: 21px; flex: none; }
.escala-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.escalon {
  background: var(--superficie);
  border: 1px solid var(--violeta-100);
  border-radius: var(--radio-s);
  padding: 12px 14px 11px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
}
.escalon strong {
  font-family: var(--fuente-titulos);
  font-size: 26px; font-weight: 800; line-height: 1; color: var(--violeta-700);
}
.escalon-off { font-size: 13px; font-weight: 700; color: var(--violeta-700); }
.escalon-desde { width: 100%; margin-top: 6px; font-size: 13px; color: var(--texto-suave); }
/* En el celular la escalera ocupaba media pantalla: misma info, mas compacta. */
@media (max-width: 560px) {
  .hero { background-image: none; }
  .escala { padding: 13px 12px 14px; }
  .escala-cabecera { margin-bottom: 10px; }
  .escala-titulo { font-size: 18px; gap: 8px; }
  .escala-titulo svg { width: 18px; height: 18px; }
  .escala-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .escalon { padding: 9px 9px 8px; }
  .escalon strong { font-size: 19px; }
  .escalon-off { font-size: 11px; }
  .escalon-desde { margin-top: 4px; font-size: 11px; }
}


/* ---------- Catalogo ---------- */
.catalogo { max-width: 1200px; margin: 0 auto; padding: 22px 16px 150px; min-height: 50vh; }
.seccion { margin-bottom: 34px; }
/* El salto desde los chips frena debajo de la barra fija, no tapado por ella. */
#catalogo, #catalogo .seccion { scroll-margin-top: var(--alto-barra, 96px); }
.seccion-titulo {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-weight: 800; font-size: 27px;
  color: var(--violeta);
  border-left: 7px solid var(--amarillo);
  padding: 1px 0 1px 15px;
  margin: 0 0 16px;
}
@media (max-width: 560px) { .seccion-titulo { font-size: 23px; border-left-width: 6px; padding-left: 12px; } }
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
}
.card-foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none; padding: 0;
  background: #F4F3F8;
  /* overflow: una foto mas alta que ancha (ej. 320x779) estira la caja y rompe el cuadrado:
     el aspect-ratio da el alto, pero no impide que el contenido lo empuje. Recortando, el alto
     queda firme y la foto se acomoda adentro con object-fit. Lo mismo hacen .galeria-principal
     y .foto-tile del sistema. */
  overflow: hidden;
}
.card-foto img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.sin-foto {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--violeta-200);
}
/* Etiqueta NUEVO: arriba a la izquierda, del lado opuesto al contador de fotos. */
.card-nuevo {
  position: absolute; left: 8px; top: 8px;
  background: var(--amarillo); color: #1C1733;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(28, 23, 51, 0.18);
}
.card-mas-fotos {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(28, 23, 51, 0.72); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 3px 7px; border-radius: 6px;
}
.card-info { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-nombre { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.card-nombre button {
  border: none; background: none; padding: 0; text-align: left;
  font-weight: inherit; line-height: inherit;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-nombre button:hover { color: var(--violeta); }
.card-precio {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--fuente-titulos);
  font-size: 21px; font-weight: 600;
  color: var(--violeta);
}
.card-controles { margin-top: 6px; }

.btn-agregar {
  width: 100%;
  border: none;
  background: var(--violeta); color: #fff;
  border-radius: var(--radio-s);
  padding: 10px 12px;
  font-weight: 700;
}
.btn-agregar:hover { background: var(--violeta-oscuro); }
.stepper {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--violeta);
  border-radius: var(--radio-s);
  overflow: hidden;
  background: #fff;
}
.stepper button {
  width: 40px; flex-shrink: 0;
  border: none;
  background: var(--violeta-suave); color: var(--violeta);
  font-size: 19px; font-weight: 700; line-height: 1;
}
.stepper button:hover { background: var(--violeta-100); }
.stepper input {
  flex: 1; min-width: 0; width: 100%;
  border: none; outline: none;
  text-align: center;
  font-weight: 700; font-size: 16px;
  padding: 8px 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.estado-carga, .vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 60px 16px;
}
.vacio svg { color: var(--violeta-200); width: 64px; height: 64px; }
.spinner {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  border: 3px solid var(--violeta-suave);
  border-top-color: var(--violeta);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.footer {
  background: var(--violeta-800);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 13.5px;
  padding: 28px 16px 160px;
}
.footer p { margin: 4px 0; }
.footer-logo { width: 150px; height: auto; margin-bottom: 8px; }
.footer-sep { opacity: 0.4; margin: 0 8px; }
.footer-ig { display: inline-flex; align-items: center; gap: 7px; }
.footer-ig svg { width: 16px; height: 16px; flex: none; }

/* ---------- Formas y plazos de pago (pantalla aparte) ---------- */
/* Escala completa de descuentos, abierta desde el pedido. El padding lo pone .modal-chico. */
.desc-modal h2 { font-family: var(--fuente-titulos); font-size: 24px; font-weight: 600; color: var(--violeta); margin: 0; padding-right: 40px; }
.desc-bajada { font-size: 13.5px; color: var(--texto-suave); margin: 6px 0 14px; line-height: 1.5; }
.desc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.desc-lista li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie);
  font-size: 14px;
}
.desc-pct { font-size: 16px; font-weight: 800; color: var(--texto-suave); min-width: 74px; }
.desc-desde { color: var(--texto-suave); flex: 1; }
.desc-estado { font-size: 12.5px; color: var(--texto-suave); white-space: nowrap; }
.desc-lista li.logrado { border-color: var(--violeta-200); background: var(--violeta-50); }
.desc-lista li.logrado .desc-pct { color: var(--violeta-700); }
/* El tramo vigente es el unico lleno: se encuentra de un vistazo. */
.desc-lista li.actual { border-color: var(--violeta-700); background: var(--violeta-700); color: #fff; }
.desc-lista li.actual .desc-pct, .desc-lista li.actual .desc-desde, .desc-lista li.actual .desc-estado { color: #fff; }
.desc-lista li.actual .desc-estado { font-weight: 700; }
.desc-nota { font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); margin: 12px 0 0; }
.desc-nota strong { color: var(--texto); }

.pago { padding: 26px 22px 24px; }
.pago-titulo { font-family: var(--fuente-titulos); font-size: 27px; font-weight: 600; color: var(--violeta); margin: 0 0 14px; padding-right: 34px; }
.pago p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--texto); }
.pago p:last-child { margin-bottom: 0; }

/* ---------- Boton flotante ---------- */
.flotante {
  position: fixed; z-index: 30;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--violeta-700); color: #fff;
  font-weight: 700; font-size: 14.5px;
  box-shadow: var(--sombra-2);
  text-decoration: none;
}
.flotante strong { background: var(--amarillo); color: var(--violeta-800); padding: 3px 10px; border-radius: 999px; }
/* No hace falta correrlo cuando aparece la barra de pedido: tienda.js ya lo oculta. */
.flotante-wa { background: var(--verde-wa); gap: 8px; }


/* ---------- Carrito (panel lateral) ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28, 23, 51, 0.45);
}
.drawer {
  position: fixed; z-index: 41;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
  box-shadow: var(--sombra-3);
}
.drawer.abierto { transform: none; visibility: visible; transition: transform 0.25s ease; }
.drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--borde);
}
.drawer-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violeta); }
.drawer-titulo-fila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.drawer-header h2 { font-family: var(--fuente-titulos); font-size: 26px; font-weight: 600; }
/* La cantidad acompana al titulo, no compite con el. */
.drawer-unidades { font-size: 14px; color: var(--texto-suave); }
.drawer-unidades:empty { display: none; }
.btn-cerrar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: #fff;
  font-size: 16px;
}
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
/* El pie es violeta como la capsula de arriba: el pedido abierto queda enmarcado por los
   dos bloques de marca y el blanco del medio es solo para los productos. */
.drawer-footer {
  flex: none;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--violeta-800);
  color: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.drawer-footer:empty { display: none; }
.pie-total { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.pie-total-rotulo { font-family: var(--fuente-titulos); font-size: 21px; font-weight: 600; }
/* Los dos importes juntos: en pantallas angostas el tachado baja a su propio renglon en
   vez de achicarse o pisar al total. */
.pie-total-cifras { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px 10px; flex-wrap: wrap; margin-left: auto; }
/* El tachado por defecto es grueso y del mismo color que el texto: sobre numeros chicos
   parte los digitos al medio y no se leen. Linea fina y mas apagada que el texto. */
.pie-total-antes {
  font-family: var(--fuente); font-size: 16.5px; font-weight: 500;
  color: #CFC6EC;
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(207, 198, 236, 0.7);
}
.pie-total-monto { font-family: var(--fuente-titulos); font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* El ahorro va sobre el violeta, sin recuadro: es un dato del total, no un cartel aparte. */
/* Alineado a la derecha, en la misma columna que el tachado y el total: los tres importes
   quedan apilados y el ahorro se lee pegado al numero del que sale. */
.pie-ahorro { font-size: 14.5px; color: #C3B8E8; margin-top: -2px; text-align: right; }
.pie-ahorro strong { color: #7BE495; font-size: 20px; font-weight: 800; }
/* Misma pildora amarilla que el boton de la barra flotante. */
.btn-principal {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  border: none; border-radius: 999px;
  background: var(--amarillo); color: var(--violeta-800);
  font-weight: 800; font-size: 16px;
  padding: 14px 18px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(245, 184, 0, 0.3);
}
.btn-principal svg { width: 21px; height: 21px; flex: none; }
.btn-principal:hover { background: var(--amarillo-fuerte); }
/* Apagado sobre violeta: un relleno traslucido lee mejor que un violeta mas claro. */
.btn-principal:disabled { background: rgba(255, 255, 255, 0.14); color: #D6CFEE; box-shadow: none; cursor: not-allowed; }
.btn-link-claro { color: #C3B8E8; align-self: center; }
.btn-link-claro:hover { color: #fff; }

/* Es la misma capsula que la barra flotante del catalogo, abierta adentro del pedido:
   comparte las clases .barra-meta / .barra-track / .barra-fill para que no haya dos
   versiones del mismo componente. */
.capsula-pedido {
  background: var(--violeta-800);
  color: #fff;
  /* Mismo radio y mismo relleno que la barra flotante: es la misma pieza, abierta. */
  border-radius: var(--radio-l);
  padding: 11px 12px 12px;
  margin-bottom: 16px;
}
.capsula-abajo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Mismo tratamiento que el ahorro de la barra flotante. */
.capsula-ahorro { font-size: 13px; color: #C3B8E8; }
.capsula-ahorro strong { color: #7BE495; font-size: 14px; font-weight: 700; }
.capsula-ahorro:empty { display: none; }
.capsula-link {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
  border: none; background: none;
  color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  padding: 2px 0;
  white-space: nowrap;
}
.capsula-link .chevron-der { width: 15px; height: 15px; }
.capsula-link:hover { color: var(--amarillo); }

.carrito-lista { list-style: none; margin: 0; padding: 0; }
.carrito-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.carrito-foto {
  width: 68px; height: 68px; flex-shrink: 0;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: #fff; padding: 0; overflow: hidden;
}
.carrito-foto img { width: 100%; height: 100%; object-fit: contain; }
.carrito-foto .sin-foto svg { width: 28px; height: 28px; }
.carrito-info { flex: 1; min-width: 0; }
.carrito-nombre { font-weight: 600; font-size: 15px; line-height: 1.3; }
/* La variante es lo que distingue una linea de otra: va sola, antes del precio. */
.carrito-variante { font-size: 13px; font-weight: 600; color: var(--texto); margin-top: 2px; }
/* Precio unitario: pesa menos que el total de la linea, que es el numero que importa. */
.carrito-unitario { font-size: 13px; margin: 2px 0 9px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.carrito-unitario .precio-ahora { font-size: 14px; }
/* El tachado por defecto es grueso y del mismo color: en numeros chicos parte los
   digitos. Linea fina y mas clara que el texto. */
.precio-antes {
  color: var(--texto-suave);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(107, 104, 128, 0.65);
}
.precio-ahora { color: var(--violeta-700); font-weight: 700; }
.carrito-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Los dos importes de la linea, uno abajo del otro y pegados al borde derecho. */
.carrito-importes { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; min-width: 0; }
.carrito-importes .precio-antes { font-size: 13px; }
.carrito-fila .stepper { width: 128px; }
.carrito-fila .stepper button { width: 34px; }
.carrito-fila .btn-agregar { width: 128px; padding: 8px; }
.carrito-subtotal { font-size: 16.5px; font-weight: 700; color: var(--violeta-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.carrito-quitar { font-size: 12.5px; margin-top: 6px; padding: 0; }
.carrito-acciones { display: flex; justify-content: center; margin-top: 14px; }

/* Forma de pago: el 5% depende del plazo, no del medio, asi que se elige entre dos
   opciones en vez de tildar una casilla. */
.pago-elegir { margin: 16px 0; }
.pago-elegir-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pago-elegir-titulo { font-size: 15px; font-weight: 700; margin: 0; }
.segmentado {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1.5px solid var(--violeta-700);
  /* Mismo radio que el selector de envio que va justo abajo: los dos controles del
     carrito tienen la misma forma. */
  border-radius: var(--radio-s);
  background: var(--superficie);
  overflow: hidden;
}
.segmento {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 12px;
  color: var(--violeta-700);
  cursor: pointer;
  text-align: left;
}
/* El radio real sigue ahi (teclado y lectores de pantalla); solo no se dibuja. */
.segmento input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmento:has(input:focus-visible) { outline: 2px solid var(--violeta-400); outline-offset: -4px; }
/* La seleccion se nota por el fondo Y por el tilde, no solo por el color. */
.segmento-marca {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%; border: 1.5px solid currentColor;
  display: grid; place-items: center;
}
.segmento-marca svg { width: 13px; height: 13px; opacity: 0; }
.segmento-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.segmento-titulo { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
/* Misma ficha que la etiqueta del descuento por volumen de las capsulas. */
.segmento-etiqueta {
  background: var(--amarillo); color: var(--violeta-800);
  border-radius: 6px; padding: 1px 9px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.segmento-sub { font-size: 12px; opacity: 0.8; line-height: 1.2; }
.segmento.activo { background: var(--violeta-700); color: #fff; }
.segmento.activo .segmento-marca { background: #fff; border-color: #fff; color: var(--violeta-700); }
.segmento.activo .segmento-marca svg { opacity: 1; }
.pago-aclaracion { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-suave); text-align: center; }
.pago-aclaracion:empty { display: none; }

/* Enlaces de consulta del carrito: discretos, con la flecha que indica que abren otra ventana. */
.carrito-link { display: inline-flex; align-items: center; gap: 1px; flex: none; text-decoration: none; color: var(--violeta-700); font-weight: 600; }
.carrito-link .chevron-der { width: 15px; height: 15px; }
.carrito-link:hover { text-decoration: underline; }

/* Elegir la zona de envio, justo arriba de los totales. */
.envio-elegir { margin: 14px 0; }
.envio-elegir-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.envio-elegir label { font-size: 14px; font-weight: 600; }
.envio-ayuda { font-size: 13px; }
#sel-envio {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-s);
  background: var(--superficie); font: inherit; font-size: 14.5px; color: var(--texto);
}
#sel-envio:focus { outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px var(--violeta-suave); }

.totales { padding-top: 6px; border-top: 1px solid var(--borde); }
/* Sin zona elegida el envio no es un reclamo, es un dato: queda en gris, no en violeta. */
.total-fila.total-pendiente span:last-child { color: var(--texto-suave); }
.total-fila { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14.5px; }
.total-fila.descuento span:last-child { color: var(--ok); font-weight: 600; }

/* Por que el boton esta apagado, sin cartel: una linea bajo el boton, discreta. */
.pie-minimo { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.4; color: #C3B8E8; }

.btn-whatsapp {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  border: none; border-radius: 999px;
  background: var(--verde-wa); color: #fff;
  font-weight: 700; font-size: 16px;
  padding: 14px 18px;
  text-decoration: none;
}
.btn-whatsapp:hover { background: var(--verde-wa-oscuro); }
.btn-whatsapp:disabled { background: #BFE9CF; cursor: not-allowed; }
.btn-link {
  border: none; background: none;
  color: var(--texto-suave);
  text-decoration: underline;
  font-size: 13.5px;
  padding: 4px;
}

.carrito-vacio, .enviado { text-align: center; padding: 40px 10px; }
.carrito-vacio .btn-link { margin-top: 10px; }
.carrito-vacio svg { color: var(--violeta-200); width: 56px; height: 56px; }
.carrito-vacio p { margin: 6px 0; }
.enviado h3 { font-family: var(--fuente-titulos); font-size: 24px; font-weight: 600; margin: 10px 0 8px; }
.enviado p { color: var(--texto-suave); line-height: 1.5; }
.enviado strong { color: var(--texto); }
.enviado-check {
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ok-suave); color: var(--ok);
  font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Detalle de producto ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(28, 23, 51, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal {
  position: relative;
  background: #fff;
  border-radius: var(--radio-l);
  width: min(860px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.modal-cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; }
.detalle { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .detalle { grid-template-columns: 1.1fr 1fr; } }
.galeria { padding: 16px; background: var(--fondo); }
.galeria-principal {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--radio-m);
  overflow: hidden;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeria-principal .sin-foto svg { width: 90px; height: 90px; }
/* min-height: la tira tiene que ocupar el mismo lugar aunque este vacia, para que el
   modal no cambie de alto al pasar de un color con varias fotos a uno con una sola. */
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; min-height: 64px; }
.miniatura {
  width: 64px; height: 64px; flex-shrink: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: #fff;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura.activa { border-color: var(--violeta); }
.detalle-info { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.detalle-categoria { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--violeta); }
.detalle-info h2 { font-family: var(--fuente-titulos); font-size: 26px; font-weight: 600; line-height: 1.15; padding-right: 36px; }
.detalle-precio { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 600; color: var(--violeta); margin-top: 4px; }
.detalle-precio span { font-size: 15px; color: var(--texto-suave); font-family: var(--fuente); font-weight: 500; }
.detalle-descripcion { margin: 4px 0; color: var(--texto-suave); line-height: 1.55; white-space: pre-line; }
.detalle-controles { margin-top: 10px; max-width: 280px; }
.detalle-controles .btn-agregar { padding: 13px; font-size: 15.5px; }
.detalle-controles .stepper input { padding: 11px 0; }

/* ---------- Avisos ---------- */
.toast-root {
  position: fixed; z-index: 60;
  left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  width: min(420px, calc(100% - 32px));
}
.toast {
  background: var(--texto); color: #fff;
  padding: 12px 16px;
  border-radius: var(--radio-s);
  font-size: 14px;
  box-shadow: var(--sombra);
}

/* ---------- Ajustes para celulares chicos ---------- */
@media (max-width: 480px) {
  .beneficio { padding: 9px 5px 10px; gap: 5px; }
  .beneficio strong { font-size: 14px; line-height: 1.15; }
  .beneficio span { font-size: 10px; }
  .btn-pedido { padding: 11px 12px; }
}

/* ---------- Productos sin stock (solo si en el sistema se eligio mostrarlos) ---------- */
.card-sin-stock .card-foto img { opacity: 0.55; filter: grayscale(0.4); }
.btn-agregar.btn-sin-stock,
.btn-agregar.btn-sin-stock:hover { background: var(--fondo); color: var(--texto-suave); border: 1.5px dashed var(--borde); cursor: not-allowed; }

/* ---------- Barra de pedido con la proxima meta de descuento ---------- */
/* Mismo color que el panel de descuentos: las dos superficies hablan de plata. */
.barra-pedido {
  position: fixed; z-index: 30;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  background: var(--violeta-800);
  color: #fff;
  border: none;
  border-radius: var(--radio-l);
  padding: 11px 12px 12px;
  box-shadow: var(--sombra-3);
  transition: background 0.4s ease;
}
.barra-pedido.entrando { animation: barra-entra 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25); }
@keyframes barra-entra {
  from { transform: translate(-50%, 140%); }
  to { transform: translate(-50%, 0); }
}
.barra-meta { font-size: 13px; line-height: 1.35; min-height: 17px; color: #C3B8E8; }
/* El descuento ya conseguido va como etiqueta, no como texto: se lee de un vistazo y no
   compite con el boton (sin sombra, sin icono, esquinas chicas). */
.meta-insignia {
  display: inline-block;
  background: var(--amarillo); color: var(--violeta-800);
  border-radius: 6px;
  padding: 1px 7px;
  margin-right: 8px;
  font-size: 12px; font-weight: 800;
  white-space: nowrap;
  vertical-align: 1px;
}
.barra-meta strong { color: var(--amarillo); font-weight: 700; }
.barra-track {
  height: 8px;
  margin: 7px 0 9px;
  border-radius: 999px;
  background: var(--violeta-600);
  overflow: hidden;
}
.barra-track.latido { animation: barra-latido 0.45s ease; }
@keyframes barra-latido {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(1.7); }
  100% { transform: scaleY(1); }
}
.barra-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--amarillo-fuerte), var(--amarillo));
  transition: width 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.barra-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%);
  animation: barra-brillo 2.6s ease-in-out infinite;
}
@keyframes barra-brillo { 60%, 100% { transform: translateX(100%); } }
.meta-minimo .barra-fill { background: linear-gradient(90deg, #E8900F, var(--amarillo)); }
.meta-cumplida .barra-fill { background: linear-gradient(90deg, var(--ok), #4CAF6D); }
/* Con flex-wrap el boton baja a su propia linea antes que cortarse: con totales de
   siete cifras en un telefono angosto, si no, el precio se sale de la capsula. */
.barra-abajo { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.barra-ahorro { font-size: 13px; color: #C3B8E8; }
.barra-ahorro strong { color: #7BE495; font-size: 14px; font-weight: 700; }
.barra-boton {
  margin-left: auto;
  /* Poco aire antes del total: el importe ya viene con su propio espacio despues del "$",
     asi que un gap grande se lee como un hueco. */
  display: inline-flex; align-items: baseline; gap: 6px;
  border: none; border-radius: 999px;
  background: var(--amarillo); color: var(--violeta-800);
  padding: 10px 18px;
  font-weight: 800; font-size: 14.5px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(245, 184, 0, 0.35);
}
.barra-boton:hover { background: var(--amarillo-fuerte); }
/* Menos peso que "Ver pedido": acompana, no compite. */
.barra-unidades { font-weight: 600; }
.barra-total { font-variant-numeric: tabular-nums; }
@media (max-width: 430px) { .barra-unidades { display: none; } }
/* En celular el mensaje parte en dos lineas y la barra se hacia alta. */
@media (max-width: 560px) {
  .barra-pedido { padding: 10px 11px 11px; border-radius: 18px; }
  .barra-meta { font-size: 12.5px; }
  .barra-track { height: 7px; margin: 6px 0 8px; }
  .barra-ahorro { font-size: 12.5px; }
  /* Con el texto de ahorro completo no entran los dos en una fila: el boton baja y
     ocupa todo el ancho, que ademas es un blanco mas grande para el dedo. */
  .barra-boton { font-size: 14px; padding: 11px 14px; flex: 1 0 100%; justify-content: center; margin-left: 0; }
  .barra-ahorro { min-width: 0; }
}
/* Celular: el pie no tiene que comerse la pantalla. */
@media (max-width: 560px) {
  .segmento { gap: 7px; padding: 9px 7px; }
  .segmento-titulo { font-size: 13.5px; }
  .segmento-etiqueta { font-size: 11px; padding: 1px 7px; }
  .segmento-sub { font-size: 11.5px; }
  .segmento-marca { width: 20px; height: 20px; }
  .carrito-fila { flex-wrap: wrap; gap: 8px; }
  .carrito-importes { margin-left: auto; }
  .carrito-subtotal { font-size: 16px; }
  .drawer-body { padding: 14px 15px 18px; }
  .drawer-footer { padding: 11px 15px calc(11px + env(safe-area-inset-bottom)); gap: 7px; }
  .pie-total-rotulo { font-size: 18px; }
  .pie-total-antes { font-size: 15px; }
  .pie-total-monto { font-size: 22px; }
  .pie-ahorro { font-size: 13px; }
  .pie-ahorro strong { font-size: 18px; }
  .btn-principal { font-size: 15px; padding: 12px 16px; }
  .btn-link-claro { font-size: 13px; padding: 2px; }
  .capsula-pedido { padding: 10px 11px 11px; border-radius: 18px; }
}
body.pedido-abierto .barra-pedido,
body.pedido-abierto .flotante { display: none; }
.barra-pedido.celebrando {
  animation: barra-festejo 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
/* Perder un nivel no se festeja: mismo fondo, sin confeti y sin rebote. */
.barra-pedido.avisando .barra-meta { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .barra-pedido.celebrando { animation: none; }
}
@keyframes barra-festejo {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(1.06); }
  100% { transform: translateX(-50%) scale(1); }
}
.barra-pedido.celebrando .barra-meta { color: #7BE495; }
.barra-pedido.celebrando .barra-meta strong { color: #fff; }
.barra-confeti { position: absolute; left: 50%; top: 14px; width: 0; height: 0; pointer-events: none; }
.barra-confeti i {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: barra-confeti 1.25s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes barra-confeti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  55% { opacity: 1; transform: translate(calc(var(--x) * 0.8), var(--y)) rotate(calc(var(--giro) * 0.6)); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 110px)) rotate(var(--giro)); }
}

.btn-link.btn-link-peligro { color: #B42318; font-weight: 600; }

/* ---------- Modelos con variantes (talle y color) ---------- */
.punto-color {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borde);
}
/* Muestra de color con la foto de esa variante: se entiende mucho mejor que un punto. */
.muestra-color {
  display: block; width: 26px; height: 26px; flex: none; overflow: hidden;
  border: 1.5px solid var(--borde); border-radius: 7px; background: #fff;
}
.muestra-color img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-variantes { font-size: 12.5px; color: var(--texto-suave); line-height: 1.3; }
.card-precio small { font-family: var(--fuente); font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.btn-agregar.btn-modelo-con { background: var(--ok-suave); color: var(--ok); box-shadow: inset 0 0 0 1.5px #9FD4B0; }
.btn-agregar.btn-modelo-con:hover { background: #CDEBD6; }

.modal.modal-modelo { width: min(980px, 100%); display: flex; flex-direction: column; }
.detalle-modelo { flex: 1; grid-template-columns: minmax(0, 1fr); }
.detalle-modelo .detalle-info { min-width: 0; }
@media (min-width: 720px) { .detalle-modelo { grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr); } }
.detalle-modelo .galeria { position: relative; }
@media (max-width: 719px) {
  .detalle-modelo .galeria { padding: 12px 12px 4px; }
  .detalle-modelo .galeria-principal { aspect-ratio: auto; height: 210px; }
  .detalle-modelo .galeria-miniaturas { min-height: 48px; }
  .detalle-modelo .galeria-miniaturas .miniatura { width: 48px; height: 48px; }
  .detalle-modelo .detalle-info { padding: 14px 16px 12px; }
  .detalle-modelo .detalle-info h2 { font-size: 22px; }
  .detalle-modelo .detalle-precio { font-size: 24px; }
}
@media (min-width: 720px) { .detalle-modelo .galeria { position: sticky; top: 0; align-self: start; } }
.galeria-color {
  position: absolute; left: 24px; top: 24px;
  background: rgba(28, 23, 51, 0.75); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
@media (max-width: 719px) { .galeria-color { left: 20px; top: 20px; } }
.matriz-ayuda { margin: 6px 0 0; font-size: 13.5px; color: var(--texto-suave); }
.matriz-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 4px; }
.matriz { border-collapse: separate; border-spacing: 5px 6px; width: 100%; }
.matriz thead th { font-size: 13.5px; font-weight: 700; color: var(--violeta); text-align: center; padding: 0 2px; vertical-align: bottom; white-space: nowrap; }
.matriz thead th small { display: block; font-size: 10.5px; font-weight: 500; color: var(--texto-suave); }
.matriz thead th small.matriz-precio { color: var(--violeta); font-weight: 600; }
.matriz-pie { margin: 2px 0 0; font-size: 11px; color: var(--texto-suave); }
.matriz tbody th { text-align: left; font-weight: 400; padding: 0; min-width: 96px; }
.matriz td { text-align: center; padding: 0; }
.matriz-color { display: flex; align-items: center; gap: 9px; border: none; background: none; padding: 2px 0; text-align: left; }
.matriz-color .punto-color { width: 22px; height: 22px; }
.matriz-color .muestra-color { width: 38px; height: 38px; border-radius: 9px; }
.matriz tr.activa .matriz-color .muestra-color { border-color: var(--violeta); box-shadow: 0 0 0 2px var(--violeta-suave); }
.matriz-color b { font-size: 13.5px; font-weight: 600; line-height: 1.15; }
.matriz tr.activa .matriz-color b { color: var(--violeta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.matriz .matriz-nota td { text-align: left; font-size: 11px; line-height: 1.35; color: var(--texto-suave); padding: 0 0 4px 30px; }
.celda {
  width: 100%; min-width: 44px; max-width: 72px; height: 44px;
  border: 1.5px solid var(--borde); border-radius: 10px; background: #fff;
  text-align: center; font-weight: 700; font-size: 16px; outline: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.celda::placeholder { font-size: 11px; font-weight: 500; color: var(--texto-suave); }
.celda:focus { border-color: var(--violeta); box-shadow: 0 0 0 3px var(--violeta-suave); }
.celda.con { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.celda-agotada, .celda-nada {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 44px; max-width: 72px; height: 44px; margin: 0 auto;
  border-radius: 10px; font-size: 10.5px; color: var(--texto-suave);
}
.celda-agotada { background: repeating-linear-gradient(-45deg, var(--fondo) 0 6px, var(--violeta-100) 6px 12px); }
.celda-nada { color: var(--violeta-200); }

.modelo-pie {
  position: sticky; bottom: 0; z-index: 1;
  background: #fff; border-top: 1px solid var(--borde);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.modelo-pie-meta { font-size: 13px; color: var(--violeta); line-height: 1.35; }
.modelo-pie-meta strong { background: var(--amarillo); color: var(--violeta-oscuro); padding: 0 5px; border-radius: 5px; }
/* En el pie del modal (fondo blanco) los importes ya van en chip amarillo: la etiqueta
   se invierte a violeta para que siga leyendose como etiqueta y no como un valor mas. */
.modelo-pie-meta .meta-insignia { background: var(--violeta-700); color: #fff; vertical-align: 0; }
.modelo-pie-track { height: 6px; background: var(--violeta-suave); border-radius: 999px; overflow: hidden; }
.modelo-pie-track div { height: 100%; background: linear-gradient(90deg, var(--amarillo), var(--amarillo-fuerte)); border-radius: 999px; transition: width 0.35s ease; }
.modelo-pie-fila { display: flex; align-items: center; gap: 12px; }
.modelo-pie-total { flex: 1; min-width: 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.3; }
.modelo-pie-total strong { font-family: var(--fuente-titulos); font-size: 17px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.modelo-pie-listo { border: none; background: var(--violeta); color: #fff; font-weight: 700; padding: 11px 22px; border-radius: var(--radio-s); }
.modelo-pie-listo:hover { background: var(--violeta-oscuro); }

/* ---------- Seguir mi pedido ---------- */
/* Franja de arriba de todo: contacto, direccion y seguimiento, todo como texto. */
.topbar {
  background: var(--violeta-800);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 0;
  padding: 9px 16px;
}
.topbar a, .topbar-boton { color: inherit; text-decoration: none; font-weight: 500; }
.topbar a:hover, .topbar-boton:hover { color: #fff; text-decoration: underline; }
/* El punto separador lo pone el CSS, no el HTML: asi al esconder un elemento en el celular
   no queda su punto colgando. Solo se usa cuando la franja entra en un renglon: un elemento
   escondido (o uno que paso al renglon de abajo) sigue siendo hermano, y su punto quedaria
   suelto al principio de la linea. Con los nombres cortos la franja entera mide 801px, de ahi
   el corte en 820. Debajo de ese ancho los elementos se separan con aire. */
.topbar { gap: 4px 20px; }
/* Abajo de 820px no entran todos en una fila: los separadores se esconden (si no, al
   envolver quedan puntos sueltos al principio de un renglon) y el aire lo da el gap. */
.topbar-sep { display: none; }
@media (min-width: 820px) {
  .topbar { gap: 4px 11px; }
  .topbar-sep { display: inline; opacity: 0.4; font-weight: 400; }
}
@media (max-width: 560px) { .topbar .solo-ancho { display: none; } }
.topbar-dato { display: inline-flex; align-items: center; gap: 6px; }
.topbar-wa { display: inline-flex; align-items: center; gap: 6px; }
.topbar-wa svg { width: 15px; height: 15px; flex: none; }
.topbar-dato svg { width: 14px; height: 14px; flex: none; opacity: 0.85; }
.topbar-boton {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; font: inherit; font-weight: 500;
  padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.topbar-boton svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 560px) { .topbar { font-size: 12.5px; gap: 3px 10px; padding: 8px 14px; } }
.modal.modal-chico { width: min(520px, 100%); padding: 22px 20px 24px; }
.seg-cuerpo h2 { font-family: var(--fuente-titulos); font-size: 23px; font-weight: 600; padding-right: 40px; }
.seg-ayuda { font-size: 13.5px; color: var(--texto-suave); margin: 8px 0 14px; line-height: 1.5; }
.seg-form { display: flex; gap: 8px; }
.seg-form input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--borde); border-radius: var(--radio-s);
  font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; outline: none;
}
.seg-form input:focus { border-color: var(--violeta); box-shadow: 0 0 0 3px var(--violeta-suave); }
/* Buscar es la accion principal de esta ventana: va en amarillo como las demas. */
.seg-form .seg-buscar { width: auto; padding: 12px 22px; }
.seg-error { margin-top: 12px; background: var(--alerta-suave); color: var(--alerta); border-radius: var(--radio-s); padding: 10px 12px; font-size: 13.5px; }
.seg-cancelado { background: var(--alerta-suave); color: var(--alerta); border-radius: var(--radio-s); padding: 12px 14px; font-size: 14px; }
.seg-pasos { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.seg-pasos li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; position: relative; }
.seg-pasos li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: -6px; width: 2px; background: var(--borde); }
.seg-pasos li:last-child::before { display: none; }
.seg-pasos li.hecho::before { background: var(--ok); }
.seg-punto {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--fondo); color: var(--texto-suave); font-size: 13px; font-weight: 700; border: 2px solid var(--borde); position: relative; z-index: 1;
}
.seg-pasos li.hecho .seg-punto { background: var(--ok); border-color: var(--ok); color: #fff; }
.seg-pasos li.actual .seg-punto { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.seg-pasos li > div { padding-top: 4px; font-size: 14px; }
.seg-pasos li > div strong { display: block; font-weight: 600; color: var(--texto-suave); }
.seg-pasos li.hecho > div strong { color: var(--texto); }
.seg-pasos li.actual > div strong { color: var(--violeta); font-weight: 700; }
.seg-pasos li > div span { display: block; font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.seg-detalle { margin-bottom: 14px; }
.seg-detalle summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--violeta); }
.seg-detalle ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--texto-suave); line-height: 1.7; }
.seg-cuerpo .btn-whatsapp { margin-top: 4px; }
.seg-cuerpo .btn-link { margin-top: 10px; }

/* ---------- Envios (pantalla aparte) ---------- */
/* La ventana tiene alto fijo. Si creciera al abrir una zona, al estar centrada se reacomodaria
   entera y parecerian moverse hasta el titulo y los renglones de arriba. Asi lo unico que se
   mueve es lo que esta abajo de la zona que abriste, adentro de un marco quieto. */
.modal-envios {
  height: min(620px, calc(100dvh - 32px));
  display: flex; flex-direction: column; overflow: hidden;
}
/* El alto fijo tiene que bajar por toda la cadena: modal > #envios-cuerpo > .envios > lista. */
#envios-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.envios { padding: 26px 22px 24px; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.envios-zonas { overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.envios-consulta { flex: none; }
.envios-titulo { font-family: var(--fuente-titulos); font-size: 27px; font-weight: 600; color: var(--violeta); margin: 0 0 2px; padding-right: 34px; }
.envios-bajada { margin: 0 0 16px; font-size: 14px; color: var(--texto-suave); padding-right: 34px; }
.envios-zonas { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.envios-consulta { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }
.envios-consulta a { color: var(--violeta); font-weight: 600; }
.envio-zona { border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--superficie); }
.envio-zona summary, .envio-zona-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; font-size: 15px; list-style: none; cursor: pointer;
}
.envio-zona-plana .envio-zona-fila { cursor: default; }
.envio-zona summary::-webkit-details-marker { display: none; }
.envio-zona summary:hover { background: var(--violeta-50); border-radius: var(--radio-m); }
.envio-zona summary:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; border-radius: var(--radio-m); }
.envio-zona-der { display: inline-flex; align-items: center; gap: 10px; }
.envio-chevron { width: 18px; height: 18px; flex: none; color: var(--violeta); transition: transform 0.2s ease; }
.envio-zona[open] .envio-chevron { transform: rotate(180deg); }
.envio-zona-nombre { font-weight: 700; color: var(--violeta); letter-spacing: 0.02em; }
.envio-zona-precio { font-family: var(--fuente-titulos); font-size: 17px; font-weight: 600; white-space: nowrap; }
.envio-zona-lugares { margin: 0; padding: 0 15px 13px; font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.envio-zona[open] summary { border-bottom: 1px solid var(--violeta-100); }

/* ---------- Quienes somos (pantalla aparte) ---------- */
.modal-nosotros { width: min(940px, 100%); }
.nosotros { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 26px 22px 24px; }
@media (min-width: 820px) { .nosotros { grid-template-columns: 1fr 1fr; gap: 30px; padding: 32px 30px 30px; align-items: start; } }
.nosotros-titulo { font-family: var(--fuente-titulos); font-size: 27px; font-weight: 600; color: var(--violeta); margin: 0 0 12px; padding-right: 34px; }
.nosotros-texto { color: var(--texto); line-height: 1.65; font-size: 15px; }
.nosotros-texto p { margin: 0 0 12px; }
.nosotros-texto p:last-child { margin-bottom: 0; }
.nosotros-destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; }
.nosotros-item {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-m);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
}
.nosotros-emoji { font-size: 26px; line-height: 1.1; }
.nosotros-item strong { font-size: 15px; }
.nosotros-item span { font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* Pasaje de fotos: las fotos estan todas apiladas y se cruzan con opacidad. */
.pasaje-marco {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radio-m); background: var(--violeta-50);
}
.pasaje-foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease;
}
.pasaje-foto.activa { opacity: 1; }
.pasaje-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.9); color: var(--violeta-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-1); opacity: 0; transition: opacity 0.2s ease;
}
.pasaje-flecha svg { width: 18px; height: 18px; display: block; }
.pasaje-despues svg { transform: scaleX(-1); }
.pasaje-marco:hover .pasaje-flecha, .pasaje-flecha:focus-visible { opacity: 1; }
.pasaje-antes { left: 8px; }
.pasaje-despues { right: 8px; }
.pasaje-pie { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: var(--texto-suave); min-height: 2.9em; }
.pasaje-puntos { display: flex; gap: 6px; justify-content: center; }
.pasaje-punto {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--violeta-200); transition: background 0.2s ease, width 0.2s ease;
}
.pasaje-punto.activo { background: var(--violeta-600); width: 18px; border-radius: 999px; }
/* En el celular las flechas no se pueden "hover": se ven siempre. */
@media (hover: none) { .pasaje-flecha { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pasaje-foto { transition: none; } }