/* ═══════════════════════════════════════════════════════════════════════
   ESENCIA Y ESTILO CO — Sistema de diseño Apple / Liquid Glass
   Guía completa: DISENO.md

   Dos capas, como manda Apple:
     · FUNCIONAL (flota sobre el contenido) → Liquid Glass
     · CONTENIDO (lo que se lee y se compra) → sin vidrio, pero con el
       resto del oficio: elevación, aire, radio continuo, filo especular
       y movimiento con la curva de Apple.

   Se carga SOLO en localhost mientras probamos.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --glass-blur:28px; --glass-sat:1.4;
  --glassd-brd:rgba(242,238,232,.14);
  --glassd-spec:rgba(242,238,232,.22);
  --glass-fill:rgba(242,238,232,.74);
  --glass-brd:rgba(255,255,255,.55);
  --ease-glass:cubic-bezier(.32,.72,0,1);

  /* Elevación en dos capas: contacto + ambiente */
  --el-1:0 1px 2px rgba(33,28,22,.05), 0 8px 22px -16px rgba(33,28,22,.18);
  --el-2:0 1px 2px rgba(33,28,22,.05), 0 12px 30px -18px rgba(33,28,22,.20);
  --el-3:0 2px 6px rgba(33,28,22,.06), 0 44px 70px -30px rgba(33,28,22,.34);

  /* Filo especular: la luz de 1px que da volumen a un material opaco */
  --spec:inset 0 1px 0 rgba(255,255,255,.55);
}

/* ── ARREGLO BASE ──
   overflow-x:hidden en body lo vuelve contenedor de scroll y rompe
   position:sticky. Con clip se recorta igual y el header sí se pega. */
html,body{overflow-x:clip !important}
body{overflow-y:visible !important}


/* ═══════════════════════════════════════════════════════════════════════
   1 · CAPA FUNCIONAL — aquí y solo aquí va el vidrio
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header: sólido en reposo (la marca manda; translúcido sobre crema
   se vuelve barro gris), vidrio al desplazar, que es cuando hay
   contenido fluyendo por debajo para refractar. ── */
/* El checkout tiene su propio header CLARO, con el nombre de la marca en
   texto oscuro. Pintarlo de espresso dejaba "Esencia y Estilo Co"
   invisible: espresso sobre espresso. Por eso se excluye. */
html:not(.ee-claro) .hdr{
  background:var(--dark) !important;
  /* En reposo NO lleva filo ni borde: está pegado a la franja del mismo
     color, así que cualquier línea se lee como una raya arbitraria.
     El filo especular pertenece a una superficie que flota, no a una
     barra sólida contra otra barra sólida. */
  border-bottom:none !important;
  box-shadow:none !important;
  transition:background .4s var(--ease-glass), box-shadow .4s var(--ease-glass);
  isolation:isolate;
}
html:not(.ee-claro) .hdr.ee-scrolled{
  background:rgba(26,21,17,.86) !important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  /* Ya flota sobre el contenido: ahora sí tiene sentido el filo y la sombra */
  box-shadow:inset 0 1px 0 rgba(242,238,232,.10), 0 10px 34px -18px rgba(18,15,12,.6) !important;
}
/* La franja y la navegación son el mismo bloque: nada las separa */
.topbar,.nav{border:none !important;box-shadow:none !important}
/* Borde de scroll: solo desenfoque que se desvanece, sin color
   (un degradado de color mancha el contenido oscuro). */
.hdr::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:16px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);
  pointer-events:none;opacity:0;transition:opacity .35s var(--ease-glass);
}
.hdr.ee-scrolled::after{opacity:1}
.hdr-icon,.hdr-cart,.burger,.hdr-wa{transition:transform .18s var(--ease-glass)}
.hdr-icon:active,.hdr-cart:active,.burger:active{transform:scale(.92)}

/* ── Menú desplegable ── */
.nav-drop-menu{
  background:rgba(38,31,25,.80) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid var(--glassd-brd) !important;
  border-radius:20px !important;
  box-shadow:inset 0 1px 0 var(--glassd-spec), 0 28px 60px -18px rgba(0,0,0,.65) !important;
}
.ndm{border-radius:13px !important;transition:background .25s var(--ease-glass) !important}

/* ── Carrito ── */
.drawer{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:blur(34px) saturate(1.45);
  backdrop-filter:blur(34px) saturate(1.45);
  border-left:1px solid var(--glass-brd);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.6), -30px 0 70px rgba(18,15,12,.22) !important;
  border-radius:24px 0 0 24px;
}
.dr-head,.dr-foot{border-color:rgba(33,28,22,.07) !important}
.dr-foot{
  background:rgba(233,227,218,.5) !important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.dr-it{border-color:rgba(33,28,22,.06) !important}
.dr-sw,.dr-add{border-radius:14px !important}
.dr-x,.dr-rm,.dr-ctrl{transition:transform .18s var(--ease-glass) !important}
.dr-x:active,.dr-rm:active,.dr-ctrl:active{transform:scale(.9) !important}

/* ── Menú móvil ── */
#mobmenu{
  background:rgba(26,21,17,.86) !important;
  -webkit-backdrop-filter:blur(32px) saturate(1.45);
  backdrop-filter:blur(32px) saturate(1.45);
  border-right:1px solid var(--glassd-brd);
  box-shadow:inset 0 1px 0 var(--glassd-spec);
}
.mm-a,.mm-thumb{border-radius:14px !important}

/* ── Buscador y modales ── */
.sm-panel,.search-modal .sm-panel{
  background:var(--glass-fill) !important;
  -webkit-backdrop-filter:blur(32px) saturate(1.45);
  backdrop-filter:blur(32px) saturate(1.45);
  border:1px solid var(--glass-brd) !important;
  border-radius:24px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 30px 64px -20px rgba(33,28,22,.32) !important;
}
.sr-item{border-radius:14px !important;transition:background .2s var(--ease-glass) !important}

/* ── Muro de pago (checkout) ── */
.pw-card{
  background:rgba(26,21,17,.88) !important;
  -webkit-backdrop-filter:blur(34px) saturate(1.4);
  backdrop-filter:blur(34px) saturate(1.4);
  border:1px solid var(--glassd-brd);
  box-shadow:inset 0 1px 0 var(--glassd-spec), 0 44px 88px -34px rgba(18,15,12,.7) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   2 · PRIMITIVAS DE CONTENIDO — botones, campos, superficies
   ═══════════════════════════════════════════════════════════════════════ */

/* Acción primaria: cápsula con filo especular. La misma lógica óptica
   del vidrio aplicada a un material opaco le da volumen físico. */
.btn-gold,.card-buy,.dr-go,.go,.more-btn,.dr-empty-cta{
  border-radius:100px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -1px 0 rgba(33,28,22,.10),
    0 2px 6px -2px rgba(154,110,46,.30),
    0 10px 22px -10px rgba(154,110,46,.42) !important;
  transition:transform .18s var(--ease-glass), box-shadow .3s var(--ease-glass) !important;
}
.btn-gold:hover,.card-buy:hover,.dr-go:hover,.go:hover,.more-btn:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(33,28,22,.10),
    0 3px 8px -2px rgba(154,110,46,.34),
    0 16px 30px -12px rgba(154,110,46,.50) !important;
}
.btn-gold:active,.card-buy:active,.dr-go:active,.go:active,.more-btn:active{transform:scale(.97) !important}
.card-buy{padding:14px !important;font-size:12.5px !important}

/* Acciones secundarias: monocromas, sin sombra de color.
   Presupuesto de Apple: una acción tintada por vista, dos máximo. */
.btn-ghost,.see-all,.back,.pw-btn-ghost{
  transition:transform .18s var(--ease-glass), border-color .25s var(--ease-glass),
             color .25s var(--ease-glass) !important;
}
.btn-ghost:active,.see-all:active,.back:active{transform:scale(.97) !important}

/* Campos de formulario: radio generoso, sin borde duro, anillo de foco
   con el acento de la marca. */
.fg input,.fg textarea,.fg select,.dd-btn,.cat-srch input,.dd-srch input{
  border-radius:14px !important;
  transition:border-color .25s var(--ease-glass), box-shadow .25s var(--ease-glass),
             background .25s var(--ease-glass) !important;
}
.fg input:focus,.fg textarea:focus,.fg select:focus,.dd-btn:focus,.cat-srch input:focus{
  outline:none !important;
  border-color:var(--gold) !important;
  box-shadow:0 0 0 4px rgba(196,145,62,.15) !important;
}
.dd-menu{
  border-radius:18px !important;
  box-shadow:0 26px 56px -22px rgba(33,28,22,.34) !important;
  overflow:hidden;
}
.dd-opt{transition:background .18s var(--ease-glass) !important}

/* Fichas de filtro: controles segmentados. El activo se eleva. */
.cat-chip,.fam-chip{
  border-radius:100px !important;
  transition:transform .28s var(--ease-glass), box-shadow .28s var(--ease-glass),
             background .28s var(--ease-glass), border-color .28s var(--ease-glass) !important;
}
.cat-chip:active,.fam-chip:active{transform:scale(.96) !important}
.cat-chip.on,.fam-chip.on{
  box-shadow:var(--spec), 0 6px 16px -8px rgba(154,110,46,.4) !important;
}

/* Paneles y superficies de contenido: elevación, nunca líneas duras */
/* (El hero no va aquí: su radio depende de si sangra o no — más abajo) */
.panel,.sum-card,.pyr,.benefits,.agotado-box{
  border-radius:22px !important;
  box-shadow:var(--el-1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   3 · TIENDA (index)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tarjeta de producto ──
   Apple separa con AIRE y ELEVACIÓN, no con líneas: fuera el borde
   hairline y las rayas divisorias internas. */
.card{
  border:none !important;
  box-shadow:var(--el-2) !important;
  transition:transform .5s var(--ease-glass), box-shadow .5s var(--ease-glass) !important;
}
@media(min-width:901px){ .card{border-radius:26px !important} }
@media(max-width:900px){ .card{border-radius:18px !important} }
.card:hover{transform:translateY(-10px) !important;box-shadow:var(--el-3) !important}
.card:active{transform:translateY(-4px) scale(.99) !important;transition-duration:.16s !important}
.card:hover .card-photo,.card:hover .flacon{transform:translateY(-8px) scale(1.07) !important}
/* Fuera las líneas divisorias internas en todos los tamaños */
.card-price{border-top:none !important;padding-top:4px !important}
.card-ver{border-top:none !important;padding-top:6px !important}
.card-name{letter-spacing:-.022em !important}

/* Los TAMAÑOS solo en escritorio: por debajo de 900px el sitio ya tiene
   una escala fluida con clamp() bien pensada y no hay que pisarla. */
@media(min-width:901px){
  .card-img{height:200px !important}
  .card-body{padding:18px !important}
  .card-name{font-size:15.5px !important;margin-bottom:7px !important}
  .card-note{margin-bottom:16px !important}
  .card-price{margin-bottom:14px !important}
  .card-price .now{font-size:22px !important;letter-spacing:-.03em !important}
}

/* ── Etiquetas sobre la foto: VIDRIO CLEAR ──
   Único punto de la tarjeta donde Apple autoriza vidrio: controles que
   flotan sobre contenido visualmente rico. El tono conserva su
   significado (dorado = nuevo, rojo = oferta). */
.card-badge,.card-off,.g-badge{
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  border:.5px solid rgba(255,255,255,.28) !important;
  padding:6px 12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -6px rgba(33,28,22,.45) !important;
}
.badge-top{background:rgba(26,21,17,.58) !important}
.badge-new{background:rgba(196,145,62,.72) !important}
.badge-sale,.card-off{background:rgba(179,64,47,.70) !important}

/* ── Portada: hero y categorías ──
   Antes el radio iba SOLO por encima de 900px: mas abajo el hero salia
   a sangre y una superficie que toca los bordes no es una tarjeta, es
   una franja —redondearla dejaba muescas del fondo en las esquinas.
   Eso dejo de ser cierto: ahora el hero lleva 14px de aire a los lados
   tambien en el telefono, asi que SI es una tarjeta y le toca su radio.
   Uno un poco menor, proporcionado al tamaño. */
.hero-card{
  border-radius:22px !important;
  box-shadow:0 2px 8px rgba(33,28,22,.06), 0 26px 56px -32px rgba(33,28,22,.42) !important;
}
@media(min-width:901px){
  .hero-card{
    border-radius:30px !important;
    box-shadow:0 2px 8px rgba(33,28,22,.06), 0 40px 80px -40px rgba(33,28,22,.45) !important;
  }
}
.hero-l h1{letter-spacing:-.035em !important;line-height:1.0 !important}
.hero-l h1{letter-spacing:-.035em !important;line-height:1.0 !important}


/* ── CATEGORÍAS con el frasco real ──
   PNG recortados de nuestros propios envases (uploads/envases): mismo
   frasco, un color por categoría. Parejo por construcción y muestra lo
   que el cliente recibe, no el frasco de la marca original.
   El halo de color queda detrás para dar profundidad. */
/* Tarjetas de categoría en VIDRIO ESMERILADO.
   Nota: Apple reserva el vidrio para la capa funcional; aquí es una
   decisión del cliente, y funciona porque el halo de color queda
   detrás del cristal. Relleno translúcido + desenfoque + filo de luz. */
/* ═══ TARJETAS DE CATEGORÍA ═══
   Sin imágenes (se probaron y no funcionaron). El atractivo tiene que
   venir de la tipografía, el contraste y la respuesta al gesto:
   · el NOMBRE manda: es lo que se busca ("¿dónde está caballero?")
   · el conteo pasa a pestaña de esquina, como en el catálogo del sitio
   · un filete dorado crece desde la izquierda al pasar el cursor */
.cat::after{display:none !important}

.cat{
  overflow:hidden;isolation:isolate;
  min-height:150px !important;
  padding:20px !important;
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border:.5px solid rgba(255,255,255,.85) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--el-1) !important;
  transition:transform .45s var(--ease-glass), box-shadow .45s var(--ease-glass),
             background .45s var(--ease-glass) !important;
}
.cat:hover{
  transform:translateY(-7px) !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:inset 0 1px 0 #fff, var(--el-3) !important;
}
.cat:active{transform:translateY(-3px) scale(.99) !important}

/* Filete dorado que crece desde la izquierda */
.cat::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;z-index:1;
  background:linear-gradient(var(--gold),rgba(196,145,62,.2));
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease-glass);
}
.cat:hover::before{transform:scaleY(1)}

/* El conteo manda: dorado, grande, con las unidades pequeñas */
.cat span{
  position:relative;z-index:2;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  color:var(--gold-deep,#9A6E2E) !important;
  margin-bottom:8px !important;
}
.cat b{
  position:relative;z-index:2;
  font-size:23px !important;
  letter-spacing:-.03em !important;
  line-height:1.05 !important;
  transition:transform .45s var(--ease-glass) !important;
}
.cat:hover b{transform:translateX(3px) !important}
.cat small{
  position:relative;z-index:2;
  font-size:12px !important;
  color:var(--txt-3) !important;
  margin-top:5px !important;
}

/* Las tarjetas de categoría van SIN imagen: ni fotos del catálogo ni
   frascos. Ya se probó y no funciona. Solo cristal y tipografía. */


@media(max-width:900px){
  .cat{min-height:118px !important;padding:15px !important}
  .cat b{font-size:18px !important}
  .cat small{font-size:11px !important}
}

/* ── Promesas y confianza ── */
.promo{
  border:none !important;border-radius:20px !important;
  box-shadow:var(--el-1) !important;
  transition:transform .4s var(--ease-glass), box-shadow .4s var(--ease-glass) !important;
}
.promo:hover{transform:translateY(-4px) !important}
.trust{border-top-color:rgba(33,28,22,.07) !important}

/* ── Ritmo vertical ──
   Una sola escala para todo el sitio. Antes cada sección tenía su
   margen puesto a ojo; esto es lo que hace que una página se sienta
   ordenada aunque no sepas explicar por qué. */
@media(min-width:901px){
  .sec{padding:72px 0 !important}
  .sec + .sec{padding-top:0 !important}   /* sin doble aire entre vitrinas */
  .sec-head{margin-bottom:32px !important}
  .hero{padding:24px 0 40px !important}
  .slogan{padding:96px 20px !important}
  .blk{margin-bottom:56px !important}
}
@media(max-width:900px){
  .sec{padding:clamp(32px,7vw,52px) 0 !important}
  .sec + .sec{padding-top:0 !important}
  .sec-head{margin-bottom:clamp(16px,4vw,24px) !important}
}

/* ── Encabezados de sección: jerarquía tipográfica Apple ── */
.sec-head h2,.blk h2{letter-spacing:-.028em !important}
.eye{letter-spacing:.16em !important}

/* ── Pie de página ── */
.ft-pay-card{border-radius:14px !important;box-shadow:var(--el-1) !important}


/* ═══════════════════════════════════════════════════════════════════════
   4 · FICHA DE PRODUCTO
   ═══════════════════════════════════════════════════════════════════════ */

/* NOTA: nada de barras flotantes inferiores. Son spam visual: tapan el
   contenido y no dejan leer. Decisión firme. */

.gal-main{border-radius:26px !important}
.gal-th{border-radius:14px !important;transition:transform .25s var(--ease-glass), border-color .25s !important}
.gal-th:hover{transform:translateY(-3px) !important}
/* ── Aviso de imagen de referencia: PIE DE FOTO ──
   Vive dentro de la imagen (lo mueve _glass.js). Barra de cristal
   apoyada en el borde inferior: informa sin robarle espacio al
   producto ni competir con la ficha. */
.ee-nota-dentro{position:relative}

/* El frasco sube para dejarle sitio al pie y no quedar montado encima */
.ee-nota-dentro .gal-photo{padding:7% 9% 25% !important}
.ee-nota-dentro .gal-flacon{top:42% !important}

.ee-nota-dentro .gal-nota{
  /* Al ras del borde inferior y de lado a lado: así es una franja de la
     propia tarjeta, no una etiqueta pegada encima. Las esquinas de
     abajo siguen el radio del contenedor. */
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  margin:0 !important;
  display:block !important;
  border:none !important;
  border-top:1px solid rgba(255,255,255,.85) !important;
  border-radius:0 0 25px 25px !important;
  padding:13px 18px 15px !important;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.88)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:none !important;
  font-size:10.5px !important;
  line-height:1.6 !important;
  color:var(--txt-3,#887E74) !important;
  text-align:left;
}
/* Rótulo en versalitas doradas: se lee como pie de foto editorial */
.ee-nota-dentro .gal-nota::before{
  content:'Imagen de referencia';
  display:block;
  font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep,#9A6E2E);
  margin-bottom:4px;
}
.ee-nota-dentro .gal-nota svg{display:none !important}   /* el rótulo ya avisa */
.ee-nota-dentro .gal-nota b{font-weight:700 !important;color:var(--txt-2,#4A4039) !important}
/* Marca de agua como ETIQUETA discreta: píldora tenue arriba a la
   derecha. Se lee como rótulo, pero en tono bajo — no compite con el
   producto ni con el pie de foto. */
.ee-nota-dentro .gal-wm{
  display:inline-block !important;
  position:absolute !important;
  top:12px;right:12px;left:auto !important;bottom:auto !important;
  z-index:4;
  width:auto !important;max-width:64%;
  text-align:center !important;
  padding:4px 10px !important;
  border-radius:100px !important;
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:none !important;
  font-size:7.5px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1.4 !important;
  color:rgba(33,28,22,.62) !important;
}
/* NO se desvanece al pasar el cursor: es un aviso, debe leerse siempre. */
/* Dos renglones: rótulo arriba, aclaración debajo en tono más bajo */
.ee-nota-dentro .gal-wm .ee-wm-1{
  display:block;
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(33,28,22,.72);
}
.ee-nota-dentro .gal-wm .ee-wm-2{
  display:block;
  font-weight:600;
  letter-spacing:.08em;
  color:rgba(33,28,22,.52);
  margin-top:1px;
}
@media(max-width:560px){
  .ee-nota-dentro .gal-wm{top:9px;right:9px;font-size:7px !important;padding:3px 8px !important}
}

@media(max-width:560px){
  .ee-nota-dentro .gal-nota{font-size:10px !important;padding:10px 12px !important;left:9px;right:9px;bottom:9px}
  .ee-nota-dentro .gal-photo{padding:6% 8% 27% !important}
}

/* Selector de tamaño: control segmentado, el elegido se eleva */
.size{
  border-radius:16px !important;
  transition:transform .3s var(--ease-glass), box-shadow .3s var(--ease-glass),
             border-color .3s var(--ease-glass), background .3s var(--ease-glass) !important;
}
.size:not(.off):hover{background:rgba(255,255,255,.82) !important}
.size:not(.off):active{transform:scale(.97) !important}
.size.on{
  background:rgba(255,252,246,.9) !important;
  border-color:var(--gold) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             0 0 0 3px rgba(196,145,62,.14),
             0 8px 20px -10px rgba(154,110,46,.4) !important;
}

/* Complementos y cantidad */
.addon{
  border-radius:16px !important;
  transition:border-color .3s var(--ease-glass), background .3s var(--ease-glass),
             box-shadow .3s var(--ease-glass), transform .3s var(--ease-glass) !important;
}
.addon:hover{
  transform:translateY(-2px) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--el-2) !important;
}
.qty{border-radius:100px !important}
.qty button{transition:transform .16s var(--ease-glass), background .2s !important}
.qty button:active{transform:scale(.88) !important}

/* Acción primaria de la ficha: filo especular sobre el verde */
.add{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 6px -2px rgba(14,138,68,.34),
    0 12px 26px -10px rgba(14,138,68,.45) !important;
  transition:transform .18s var(--ease-glass), box-shadow .3s var(--ease-glass) !important;
}
.add:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 3px 8px -2px rgba(14,138,68,.38),
    0 18px 34px -12px rgba(14,138,68,.52) !important;
}
.add:active{transform:scale(.975) !important}

/* Tiras informativas */
.deliv,.paystrip,.addi-banner{border-radius:16px !important}
/* Addi es un control, no un cartel: le toca vidrio como al resto de la
   ficha. Conserva el verde de la marca, pero translúcido y con el filo
   especular arriba. El desenfoque solo se nota cuando algo pasa por
   detrás al desplazar; lo que da el aspecto de vidrio es la luz del filo. */
.addi-banner{
  background:rgba(22,163,74,.07) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(22,163,74,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -1px 0 rgba(22,163,74,.10),
             var(--el-1) !important;
  transition:transform .3s var(--ease-glass), box-shadow .3s var(--ease-glass),
             background .3s var(--ease-glass) !important;
}
.addi-banner:hover{
  transform:translateY(-2px) !important;
  background:rgba(22,163,74,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(22,163,74,.12),
             var(--el-2) !important;
}

/* ── Perfil olfativo: los acordes como LÍQUIDO, no como gráfico ──
   Mismo oficio óptico del vidrio (cápsula, luz especular, sombra
   interior) aplicado al contenido. Los tonos son semánticos
   (cítrico/amaderado/acuático) y no se tocan. */
.accord{
  position:relative;overflow:hidden;
  border-radius:100px !important;
  padding:8px 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 4px -2px rgba(33,28,22,.35),
    0 3px 8px -4px rgba(33,28,22,.30) !important;
  transition:transform .35s var(--ease-glass), box-shadow .35s var(--ease-glass) !important;
}
.accord::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 45%,rgba(33,28,22,.10) 100%);
}
.accord:hover{
  transform:translateX(3px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -2px 4px -2px rgba(33,28,22,.35),
             0 6px 14px -6px rgba(33,28,22,.34) !important;
}
.note-chip,.note{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(33,28,22,.04) !important;
  transition:border-color .25s var(--ease-glass), transform .25s var(--ease-glass),
             box-shadow .25s var(--ease-glass) !important;
}
.note-chip:hover{
  transform:translateY(-1px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 10px -5px rgba(33,28,22,.22) !important;
}

/* ── "Cuándo usarlo": mismas cápsulas de líquido ── */
.occ-bar{height:6px !important;border-radius:100px !important;
  box-shadow:inset 0 1px 2px rgba(33,28,22,.14) !important}
.occ-bar i{border-radius:100px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important}
.occ{transition:transform .3s var(--ease-glass) !important}
.occ:hover{transform:translateY(-3px) !important}
.occ:hover .occ-ic{stroke:var(--gold-deep) !important}
.occ:hover .occ-ic--solid{fill:var(--gold-deep) !important}

/* ── Preguntas frecuentes: controles de revelación ── */
.faq details{
  background:#fff !important;border:none !important;
  border-radius:18px !important;padding:16px 20px !important;margin-bottom:10px !important;
  box-shadow:var(--el-1) !important;
  transition:box-shadow .35s var(--ease-glass), transform .35s var(--ease-glass) !important;
}
.faq details:hover{transform:translateY(-2px) !important;box-shadow:var(--el-2) !important}
.faq details[open]{
  background:var(--bg-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px -14px rgba(33,28,22,.2) !important;
}
.faq summary{padding:2px 0 !important}
.faq summary::after{font-size:22px !important;line-height:1 !important;
  transition:transform .4s var(--ease-glass) !important}
.faq details[open] summary::after{transform:rotate(135deg) !important}

/* ── Relacionados ──
   La rejilla usaba auto-fill y dejaba un producto huérfano en la
   segunda fila. Son siempre 4: cuatro columnas en escritorio, 2×2 en
   móvil. Y fuera la línea divisoria: separa el aire, no una raya. */
.reco{border-top:none !important;margin-top:64px !important;padding-top:0 !important}
.reco-grid{grid-template-columns:repeat(4,1fr) !important;gap:16px !important}
@media(max-width:900px){.reco-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}}
.rc{
  border:none !important;border-radius:20px !important;
  box-shadow:var(--el-1) !important;
  transition:transform .45s var(--ease-glass), box-shadow .45s var(--ease-glass) !important;
}
.rc:hover{transform:translateY(-6px) !important;box-shadow:var(--el-3) !important}


/* ═══════════════════════════════════════════════════════════════════════
   5 · CHECKOUT
   ═══════════════════════════════════════════════════════════════════════ */

.panel{border:none !important;box-shadow:var(--el-2) !important}
.sum-card{border:none !important}
.sum-row,.sum-rows{border-color:rgba(33,28,22,.07) !important}

/* Opciones de pago y envío: controles seleccionables */
.pay-opt,.sm-opt,.branch{
  border-radius:16px !important;
  transition:transform .28s var(--ease-glass), box-shadow .28s var(--ease-glass),
             border-color .28s var(--ease-glass), background .28s var(--ease-glass) !important;
}
.pay-opt:active,.sm-opt:active,.branch:active{transform:scale(.99) !important}
.pay-opt:has(input:checked),.sm-opt.on,.branch.on{
  box-shadow:var(--spec), 0 6px 18px -10px rgba(154,110,46,.4) !important;
}
.pay-ic,.pay-ic-img,.branch-ic{border-radius:11px !important}

/* Cupón: caja de ticket (ya en producción, se afina aquí) */
.ee-cup{border-radius:16px !important}
.ee-cup-box input{border-radius:12px !important}
.ee-cup-box button{border-radius:12px !important;transition:transform .18s var(--ease-glass) !important}
.ee-cup-box button:active{transform:scale(.96) !important}

/* Pasos */
.steps{letter-spacing:.02em}


/* ═══════════════════════════════════════════════════════════════════════
   PRUEBA — solo en la portada (.ee-prueba), para comparar
   1) Tipografía editorial en titulares
   2) Colores de categoría armonizados con la marca
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tipografía: descartado ──
   Se probó un serif editorial (Fraunces) en titulares y no convenció.
   La marca se queda en Plus Jakarta Sans. No reintentar cambios de
   tipografía sin pedirlo. */

/* ── 2 · Colores de categoría dentro de la paleta ──
   El rosa y el azul de plantilla peleaban con el espresso y el dorado.
   Se conserva la distinción (cada categoría sigue siendo reconocible)
   pero dentro de la familia cálida de la marca. */
.ee-prueba .ct-dama{background:rgba(168,106,122,.14) !important;color:#8E4F62 !important}
.ee-prueba .ct-cab{background:rgba(90,106,124,.14) !important;color:#4A5A6B !important}
.ee-prueba .ct-arab{background:rgba(196,145,62,.16) !important;color:#8A6425 !important}
.ee-prueba .ct-amb{background:rgba(94,132,104,.14) !important;color:#3F6B4C !important}


/* ═══════════════════════════════════════════════════════════════════════
   6 · ACCESIBILIDAD — obligatorio, no opcional
   ═══════════════════════════════════════════════════════════════════════ */

/* Transparencia reducida → superficies opacas */
@media (prefers-reduced-transparency:reduce){
  .hdr,.hdr.ee-scrolled,.nav-drop-menu,.drawer,#mobmenu,.sm-panel,
  .dr-foot,.pw-card,.card-badge,.card-off,.g-badge,.cat,.addi-banner{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  html:not(.ee-claro) .hdr,html:not(.ee-claro) .hdr.ee-scrolled,#mobmenu{background:var(--dark) !important}
  .nav-drop-menu,.pw-card{background:#2C251D !important}
  .drawer,.sm-panel{background:var(--bg) !important}
  .dr-foot{background:var(--bg-2) !important}
  .badge-top{background:var(--dark) !important}
  .badge-new{background:var(--gold) !important}
  .badge-sale,.card-off{background:var(--sale) !important}
  .cat{background:#fff !important}
  .addi-banner{background:rgba(22,163,74,.10) !important}
  .hdr::after{display:none}
}

/* Más contraste → rellenos sólidos y bordes definidos */
@media (prefers-contrast:more){
  html:not(.ee-claro) .hdr,html:not(.ee-claro) .hdr.ee-scrolled,#mobmenu{background:var(--dark) !important}
  .drawer,.sm-panel{background:var(--bg) !important}
  .card,.cat,.promo,.faq details,.rc{border:1px solid var(--txt-3) !important}
  .card-badge,.card-off{border-color:var(--txt) !important}
}

/* Menos movimiento → sin transformaciones ni transiciones */
@media (prefers-reduced-motion:reduce){
  .hdr,.hdr::after,.card,.cat,.promo,.rc,.faq details,.accord,.note-chip,
  .occ,.btn-gold,.card-buy,.add,.size,.addon,.pay-opt,.hdr-cart,.burger{
    transition:none !important;
  }
  .card:hover,.cat:hover,.promo:hover,.rc:hover,.faq details:hover,
  .accord:hover,.note-chip:hover,.occ:hover,.addi-banner:hover{transform:none !important}
  .card:hover .card-photo,.card:hover .flacon{transform:none !important}
}

/* Sin soporte de backdrop-filter → relleno sólido */
/* OJO: hasta Safari 17 el navegador SOLO entiende -webkit-backdrop-filter.
   Preguntando unicamente por la propiedad sin prefijo, Safari respondia
   "no lo soporto" y se llevaba el relleno solido: la barra nunca se
   teñia en iPhone. Hay que preguntar por las dos. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cat{background:#fff !important}
  .addi-banner{background:rgba(22,163,74,.10) !important}
  html:not(.ee-claro) .hdr,html:not(.ee-claro) .hdr.ee-scrolled,#mobmenu{background:var(--dark) !important}
  .drawer,.sm-panel{background:var(--bg) !important}
  .pw-card{background:#2C251D !important}
  .badge-top{background:var(--dark) !important}
  .badge-new{background:var(--gold) !important}
  .badge-sale,.card-off{background:var(--sale) !important}
}

/* ── Menú móvil: sin el logo en la cabecera ──
   El logo es un círculo oscuro sobre un panel oscuro: se pierde y solo
   ensucia. El nombre de la marca solo, con su peso, identifica igual y
   deja la cabecera limpia. */
#mobmenu .mm-brand img{display:none !important}
#mobmenu .mm-brand{gap:0 !important}
#mobmenu .mm-brand span{
  font-size:16px !important;font-weight:700 !important;letter-spacing:-.015em !important;
  color:#F2EEE8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7 · SAFARI iOS — costuras de medio pixel
   En pantallas de densidad 3x las alturas caen en fracciones de pixel
   (la franja usa padding en vw). Safari redondea cada bloque por su
   cuenta y entre uno y otro asoma media linea del fondo crema del
   documento: eso son las rayas blancas bajo la franja y bajo el header.
   Se cubren solapando 1 px entre bloques del mismo espresso, donde el
   solape no se ve. Nada de posiciones ni capas nuevas: solo el solape.
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.ee-claro) .topbar{
  margin-bottom:-1px !important;
  padding-bottom:calc(clamp(7px,1.8vw,10px) + 1px) !important;
}
html:not(.ee-claro) .hdr{margin-bottom:-1px !important}

/* ═══════════════════════════════════════════════════════════════════════
   8 · CARRITO — el boton de eliminar
   Estaba gris y solo se ponia rojo en :hover. En un telefono no existe
   el hover: el icono era gris SIEMPRE y no se leia como una accion
   destructiva. El color de una accion destructiva no puede depender de
   un estado que la mitad de los clientes nunca alcanza.
   ═══════════════════════════════════════════════════════════════════════ */
.dr-rm{
  color:#A63D28 !important;
  width:36px !important;height:36px !important;
  margin:-4px -4px -4px 0 !important;   /* crece el area sin mover el layout */
  border-radius:50% !important;
  transition:color .18s var(--ease-glass), background .18s var(--ease-glass),
             transform .18s var(--ease-glass) !important;
}
.dr-rm svg{width:17px !important;height:17px !important;stroke-width:1.7 !important}
.dr-rm:active{background:rgba(166,61,40,.13) !important;color:#8A3221 !important}
.dr-rm:focus-visible{outline:2px solid #A63D28;outline-offset:2px}
@media(hover:hover){
  .dr-rm:hover{color:#8A3221 !important;background:rgba(166,61,40,.10) !important}
}
/* La version pequena de los complementos mantiene la proporcion */
.dr-add .dr-rm{width:32px !important;height:32px !important;margin:-4px -4px -4px 0 !important}
.dr-add .dr-rm svg{width:15px !important;height:15px !important}

/* ═══════════════════════════════════════════════════════════════════════
   9 · ETIQUETAS DE TARJETA — pestaña de esquina, no pastilla flotante
   La pastilla despegada de la esquina deja un marco de aire irregular
   alrededor y compite con la foto. La pestaña se ancla al vertice: el
   radio exterior copia el de la tarjeta, asi que se lee como parte de
   la pieza y no como algo pegado encima. Es el mismo gesto que ya usan
   las novedades del sitio institucional.
   El COLOR sigue significando lo mismo: oro = nuevo, espresso = top
   ventas, rojo = oferta.
   ═══════════════════════════════════════════════════════════════════════ */
.card-badge{
  top:0 !important;left:0 !important;
  border-radius:26px 0 13px 0 !important;
  padding:7px 15px 7px 16px !important;
  font-size:8.5px !important;letter-spacing:.2em !important;font-weight:800 !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             4px 4px 14px -6px rgba(33,28,22,.45) !important;
}
/* Las de la esquina opuesta —stock bajo y descuento— con el radio
   espejado. El descuento ademas NO estaba posicionado: un
   ".card:hover" suelto sin bloque en la hoja de la tienda se comia el
   selector siguiente, asi que ".card-off" solo existia como
   ".card:hover .card-off". En reposo era un span suelto en medio de la
   foto. El selector roto ya esta corregido; esto le da su sitio. */
.card-badge[style*="left:auto"],.card-off{
  position:absolute !important;
  left:auto !important;right:0 !important;top:0 !important;z-index:3;
  border-radius:0 26px 0 13px !important;
  padding:7px 16px 7px 15px !important;
  font-size:8.5px !important;letter-spacing:.2em !important;font-weight:800 !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             -4px 4px 14px -6px rgba(33,28,22,.45) !important;
}
.card-off{font-size:10px !important;letter-spacing:.04em !important;font-variant-numeric:tabular-nums}
/* Los tonos suben de cuerpo: al ir pegadas al borde ya no tienen el
   aire que antes las separaba de la foto. */
/* El oro claro dejaba el texto en 3.97:1. Este tono lo sube sobre 4.5
   sin dejar de leerse como dorado. */
.badge-new{background:rgba(132,93,33,.93) !important;color:#FFF8EC !important}
.badge-top{background:rgba(26,21,17,.82) !important;color:#F4EFE6 !important}
.badge-sale{background:rgba(166,61,40,.86) !important;color:#FFF3F0 !important}
@media(max-width:900px){
  .card-badge{border-radius:18px 0 12px 0 !important;padding:6px 13px 6px 14px !important}
  .card-badge[style*="left:auto"],.card-off{border-radius:0 18px 0 12px !important;padding:6px 14px 6px 13px !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   10 · iOS — la zona sobre la franja superior
   Con viewport-fit=cover la pagina pasa por debajo de la barra de estado
   del telefono, y al desplazar Safari deja ver el contenido ahi arriba
   durante un instante. Se pinta esa zona con una sombra solida del mismo
   espresso: no ocupa espacio ni mueve nada.
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.ee-claro) .topbar{
  box-shadow:0 -400px 0 var(--dark) !important;
  padding-top:calc(clamp(7px,1.8vw,10px) + env(safe-area-inset-top,0px)) !important;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORÍAS · sin flecha, sin huérfana y con la jerarquía al
   derecho
   Tres arreglos:
   1 · Fuera el círculo con la flecha. La tarjeta entera ya es un
       enlace; repetir la invitación cinco veces era ruido. Quien
       invita ahora es el material: se levanta y le crece el filete.
   2 · El conteo mandaba en dorado ENCIMA del nombre, y el nombre
       es lo que se busca ("¿dónde está caballero?"). El nombre
       pasa al frente y el número se va a la esquina, con la misma
       pestaña que ya usan las fichas del catálogo del sitio.
   3 · Cinco tarjetas en una rejilla automática dejaban siempre
       una suelta al final. Ahora la rejilla es 2 o 4 columnas
       exactas e Insumos —que no es una familia olfativa, es otra
       cosa— ocupa su propia fila a lo ancho, a propósito.
   ══════════════════════════════════════════════════════════════ */
.cats{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(10px,1.1vw,14px) !important;
}
@media(min-width:900px){
  .cats{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
.cats > .c-ins{grid-column:1 / -1}

/* El conteo, como pestaña de esquina: su ángulo externo copia el
   radio de la tarjeta y el interno se redondea. */
.cat span{
  position:absolute !important;top:0 !important;right:0 !important;
  margin:0 !important;z-index:3;
  padding:7px 13px 7px 14px !important;
  border-radius:0 14px 0 13px !important;
  background:rgba(196,145,62,.13) !important;
  color:var(--gold-deep,#9A6E2E) !important;
  font-size:9px !important;letter-spacing:.16em !important;
  text-transform:uppercase;white-space:nowrap;
  border-left:.5px solid rgba(196,145,62,.22) !important;
  border-bottom:.5px solid rgba(196,145,62,.22) !important;
  transition:background .45s var(--ease-glass) !important;
}
.cat:hover span{background:rgba(196,145,62,.20) !important}

/* El nombre arranca arriba, con sitio para la pestaña */
.cat{
  display:flex !important;flex-direction:column;justify-content:flex-end;
  min-height:132px !important;
}
/* El contenido se apoya abajo y la pestaña vive arriba: no chocan, asi
   que el texto NO necesita reservar sitio a la derecha. Reservarlo dejaba
   "Florales · frutales · dulces" en tres lineas dentro de una tarjeta de
   158 px. Solo se guarda un respiro en las tarjetas anchas, donde el
   nombre podria llegar a la altura de la pestaña. */
.cat b{margin-top:0 !important}
.cat{padding-top:42px !important}

/* Insumos ocupa una fila entera: en vez de estirar el texto, se
   reparte —nombre a la izquierda, de qué va a la derecha—. */
@media(min-width:640px){
  .cats > .c-ins{
    display:grid !important;
    grid-template-columns:auto 1fr;align-items:baseline;
    column-gap:18px;min-height:96px !important;
  }
  .cats > .c-ins small{margin-top:0 !important;padding-right:120px}
}
@media(max-width:899px){
  .cat{min-height:124px !important;padding-top:38px !important}
  .cat span{font-size:8.5px !important;letter-spacing:.12em !important;padding:6px 11px 6px 12px !important}
  .cat b{font-size:19px !important}
}

/* ══════════════════════════════════════════════════════════════
   PORTADA DE LA TIENDA · que lo primero que se lea sea el mensaje
   En el telefono el logo salia PRIMERO, a 180 px, ocupando 196 de
   los 812 px de la pantalla inicial — y la barra de arriba, treinta
   pixeles mas arriba, ya llevaba el mismo logo. Dos veces la misma
   marca antes de decir una sola palabra de lo que se vende.
   El logo no se va: pasa a filigrana detras del texto, el mismo
   recurso que la letra gigante de las tarjetas de catalogo. Se
   sigue viendo la marca y el titular arranca arriba del todo.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:899px){
  .hero{padding:14px 0 !important}
  .hero > .c{padding-left:14px !important;padding-right:14px !important}
  .hero-card{min-height:0 !important;display:block !important;position:relative}

  /* La marca, de bloque a filigrana */
  .hero-r{
    position:absolute !important;top:-34px !important;right:-46px !important;
    min-height:0 !important;width:250px !important;height:250px !important;
    margin:0 !important;pointer-events:none;z-index:0;
  }
  .hero-logo{width:250px !important;opacity:.11 !important;filter:grayscale(1) contrast(.8)}
  .hero-glow{
    width:230px !important;height:230px !important;
    background:radial-gradient(circle,rgba(196,145,62,.30),transparent 70%) !important;
  }

  .hero-l{
    padding:30px 22px 26px !important;width:100% !important;position:relative;z-index:2;
  }
  .hero-tag{margin-bottom:16px !important}
  .hero-l h1{font-size:clamp(29px,8.6vw,38px) !important;margin-bottom:12px !important}
  .hero-l p{font-size:14.5px !important;margin-bottom:22px !important;max-width:34ch}
  /* Dos acciones, no dos bloques: la principal pesa, la otra acompaña */
  .hero-btns{flex-direction:column;gap:9px !important}
  .hero-btns .btn{width:100%;justify-content:center;height:50px}
  .hero-btns .btn-ghost{
    background:rgba(242,238,232,.06) !important;
    border:.5px solid rgba(242,238,232,.22) !important;
    color:rgba(242,238,232,.88) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LA FRANJA DE MARCA Y LA FILA DE CIFRAS
   · La franja iba a sangre, de borde a borde, mientras todo lo
     demas de la tienda vive en tarjetas redondeadas: rompia el
     ritmo justo antes del pie.
   · La fila de cifras era una tabla disfrazada: cuatro cajas con
     "filetes" hechos de gap de 1 px sobre un fondo gris. El ojo
     cuenta casillas en vez de leer datos. Pasan a ser cuatro
     columnas separadas por un filete que nace y muere en el aire.
   · Y la cuarta cifra no era una cifra: "Contra entrega" partido
     en dos lineas estiraba toda la fila. Ahora va en una linea, a
     su tamaño, marcada como lo que es: una palabra, no un numero.
   ══════════════════════════════════════════════════════════════ */
.slogan{
  margin:0 clamp(12px,3vw,40px) !important;
  border-radius:20px !important;
  padding:clamp(44px,6vw,64px) clamp(22px,4vw,40px) !important;
  box-shadow:0 2px 8px rgba(18,15,12,.10), 0 26px 60px -34px rgba(18,15,12,.55) !important;
}
.slogan .btn{margin-top:4px}

.trust{
  gap:0 !important;background:none !important;
  border:0 !important;border-radius:0 !important;
  border-top:1px solid var(--rule) !important;
  border-bottom:1px solid var(--rule) !important;
  overflow:visible !important;
}
.trust > div{
  background:none !important;position:relative;
  padding:26px 14px !important;min-height:0 !important;
}
/* El filete entre columnas se desvanece arriba y abajo: separa sin
   dibujar una reja. */
.trust > div + div::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 22%,var(--rule) 78%,transparent);
}
.trust .n{font-size:clamp(22px,2.6vw,28px) !important;line-height:1.05 !important}
.trust .n-txt{
  font-size:clamp(15px,1.7vw,18px) !important;
  letter-spacing:-.01em !important;white-space:nowrap;
  padding-top:5px;padding-bottom:4px;
}
.trust .l{margin-top:7px !important;font-size:10.5px !important;letter-spacing:.1em !important}
@media(max-width:640px){
  .trust{grid-template-columns:1fr 1fr !important}
  /* Con dos columnas, el filete vertical solo va entre pares, y
     aparece uno horizontal entre filas. */
  .trust > div + div::before{display:none}
  .trust > div:nth-child(even)::before{display:block}
  .trust > div:nth-child(n+3)::after{
    content:'';position:absolute;left:14px;right:14px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--rule) 22%,var(--rule) 78%,transparent);
  }
}

/* ══════════════════════════════════════════════════════════════
   CAJÓN DE NAVEGACIÓN · el mismo material que el del sitio
   Era un rectángulo a escuadra pegado al borde, de 86 vw, con un
   palmo de nada entre la última entrada y el botón de WhatsApp.
   · Esquinas redondeadas a la derecha: es una superficie que se
     desliza SOBRE la página, no un trozo de pantalla partido.
   · Un poco más angosto, para que se vea mejor lo que queda
     detrás desenfocado y se entienda que la página sigue ahí.
   · El pie sigue al contenido en vez de irse al fondo de un
     salto: el hueco sobrante se va todo al final, donde no
     estorba.
   · Y el botón de WhatsApp deja de ser lo más luminoso del
     panel — es una salida, no la acción principal de la tienda.
   ══════════════════════════════════════════════════════════════ */
#mobmenu{
  width:min(80vw,336px) !important;
  border-radius:0 24px 24px 0 !important;
  border-right:.5px solid rgba(242,238,232,.10) !important;
  box-shadow:24px 0 60px -24px rgba(0,0,0,.62) !important;
  overflow:hidden;
}
.mm-back{
  background:rgba(18,15,12,.46) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2) !important;
  backdrop-filter:blur(14px) saturate(1.2) !important;
}

/* La cabecera se separa con aire, no con un filete más */
.mm-head{padding-bottom:14px !important}

/* El pie acompaña a la última entrada */
.mm-body{flex:0 1 auto !important;padding-bottom:6px !important}
.mm-foot{
  margin-top:14px !important;
  border-top:1px solid rgba(242,238,232,.08) !important;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
}
#mobmenu{justify-content:flex-start}

/* WhatsApp: verde de marca, sin el halo que lo hacía gritar */
.mm-wa{
  min-height:46px !important;padding:12px !important;
  font-size:11px !important;letter-spacing:.1em !important;
  background:rgba(37,211,102,.92) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.mm-wa:hover{background:#25D366 !important;transform:none !important}

/* Las entradas: el toque cubre toda la fila y se redondea como el resto */
.mm-a{border-radius:13px !important}
.mm-cat .mm-n{
  background:rgba(196,145,62,.16) !important;
  color:var(--gold-2) !important;
  font-size:10px !important;letter-spacing:.04em !important;
}

/* ══════════════════════════════════════════════════════════════
   "También te podría gustar" · las etiquetas, al día
   Las tarjetas del catálogo ya llevan el sello pegado a la esquina,
   formando parte de la pieza. Las de recomendados se quedaron atrás:
   seguían con una pastilla flotando a 10 px del borde, que sobre una
   esquina de 20 px de radio se lee como algo pegado encima y mal
   puesto. Mismo gesto que las demás, mismo significado del color:
   oro = nuevo, espresso = top ventas, rojo = oferta.
   ══════════════════════════════════════════════════════════════ */
.rc .g-badge{
  position:absolute !important;top:0 !important;left:0 !important;
  right:auto !important;bottom:auto !important;z-index:3 !important;
  border-radius:20px 0 13px 0 !important;
  padding:6px 13px 6px 14px !important;
  font-size:8px !important;letter-spacing:.2em !important;font-weight:800 !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             4px 4px 14px -6px rgba(33,28,22,.45) !important;
}

/* La fila de arriba tenía dos cosas en dorado —la casa y la familia—
   compitiendo entre sí y las dos por encima del NOMBRE, que es lo que
   se lee para decidir. La casa baja a gris: es un dato, no un titular.
   La familia conserva su color, que es lo único que ahí informa de un
   vistazo. Y el nombre sube. */
.rc-h{color:var(--txt-4) !important;font-size:8.5px !important;letter-spacing:.12em !important}
.rc-cat{font-size:8px !important;letter-spacing:.1em !important;padding:3px 9px !important}
.rc-n{
  font-size:15px !important;margin:7px 0 8px !important;
  letter-spacing:-.02em !important;line-height:1.2 !important;
}
.rc-p{font-size:14.5px !important}
.rc-body{padding:13px 14px 15px !important}

/* ══════════════════════════════════════════════════════════════
   EL CARRITO NO VA EN VIDRIO
   El panel llevaba relleno translúcido y desenfoque, y sobre una
   página con foto y franja oscura detrás se ensuciaba: "Tu carrito
   está vacío" caía encima de la barra y el botón quedaba sobre un
   borrón. El vidrio de Apple es para la capa FUNCIONAL que flota
   sobre el contenido —una barra, un menú—, no para una hoja donde
   hay que leer precios y decidir una compra.
   Así que se invierte: el panel es opaco y el vidrio se va al velo
   de detrás, que es justo su sitio — ahí sí ayuda a entender que la
   página sigue debajo.
   ══════════════════════════════════════════════════════════════ */
.drawer{
  background:#FBF9F6 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-left:1px solid rgba(33,28,22,.10) !important;
  box-shadow:-30px 0 70px -20px rgba(18,15,12,.38) !important;
}
.dr-foot{
  background:#F4F1EC !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-top:1px solid rgba(33,28,22,.09) !important;
}
.dr-head{background:#FBF9F6 !important;border-bottom:1px solid rgba(33,28,22,.08) !important}
/* El desenfoque, detrás: ahí sí cumple */
#cart-ov{
  background:rgba(18,15,12,.46) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2) !important;
  backdrop-filter:blur(14px) saturate(1.2) !important;
}

/* ══════════════════════════════════════════════════════════════
   EL ENVÍO, SOLO EN EL CARRITO
   En la ficha se probó un recuadro bajo el precio y sobraba: ahí ya
   viven el precio, la presentación, el pago contra entrega, Addi,
   los tamaños y los complementos. El dato se queda donde de verdad
   se decide seguir o no — encima del total del carrito.
   ══════════════════════════════════════════════════════════════ */
/* En el carrito: encima del total, que es donde se decide seguir */
.envio-carrito{margin-bottom:12px}
.ec-l{font-size:11.5px;line-height:1.5;color:var(--txt-3)}
.ec-l b{color:var(--txt);font-weight:700}
.ec-ok b{color:#128C4A}
.ec-bar{
  height:5px;margin-top:7px;border-radius:100px;
  background:rgba(33,28,22,.09);overflow:hidden;
}
.ec-bar i{
  display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--gold-deep,#9A6E2E),var(--gold,#C4913E));
  transition:width .45s var(--ease-glass,cubic-bezier(.32,.72,0,1));
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT · el vidrio donde toca, y solo ahí
   Los paneles de Contacto, Entrega y Pago son CONTENIDO: ahí se
   leen datos y se escriben los propios. El vidrio no pinta nada en
   una superficie que no flota sobre nada — lo que sí hacía falta
   era que dejaran de ser blanco puro (#FFF), que al lado del crema
   del resto de la tienda se lee como si fuera otro sitio.
   El vidrio se lo lleva el RESUMEN, que es lo único de esta página
   que de verdad flota: se queda pegado arriba mientras el pedido
   pasa por debajo. Eso es la capa funcional de Apple, literal.
   ══════════════════════════════════════════════════════════════ */
.panel{
  background:#FBF9F6 !important;
  border:1px solid rgba(33,28,22,.09) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 8px rgba(33,28,22,.04),
             0 22px 48px -32px rgba(33,28,22,.22) !important;
}
/* El resumen: espresso con vidrio, no un bloque opaco */
.sum-card{
  background:linear-gradient(168deg,rgba(38,31,24,.94),rgba(26,21,17,.92)) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  backdrop-filter:blur(24px) saturate(1.5);
  border:.5px solid rgba(242,238,232,.14) !important;
  box-shadow:inset 0 1px 0 rgba(242,238,232,.16),
             0 2px 8px rgba(18,15,12,.20),
             0 30px 64px -34px rgba(18,15,12,.65) !important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sum-card{background:linear-gradient(168deg,#261F18,#1A1511) !important}
}
@media (prefers-reduced-transparency:reduce){
  .sum-card{background:linear-gradient(168deg,#261F18,#1A1511) !important;
            backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}

/* El total a pagar manda sobre el resto del resumen */
.sum-tot b{font-size:26px !important;letter-spacing:-.03em !important}
.sum-tot span{font-weight:700 !important}

/* Los campos, con el filo del sistema en vez del borde plano */
.panel input,.panel select,.panel textarea{
  background:#FFFDFB !important;
  border:1px solid rgba(33,28,22,.13) !important;
  border-radius:var(--r-sm,11px) !important;
  transition:border-color .25s var(--ease-glass), box-shadow .25s var(--ease-glass) !important;
}
.panel input:focus,.panel select:focus,.panel textarea:focus{
  border-color:rgba(196,145,62,.55) !important;
  box-shadow:0 0 0 3px rgba(196,145,62,.14) !important;
  outline:none !important;
}

/* ══════════════════════════════════════════════════════════════
   EL PIE DEL CARRITO · las tres cosas que pasan ahí
   Eran tres bloques sueltos con ritmos distintos: un aviso, una
   barra plana, un total y un botón verde brillante.
   · El aviso y la barra pasan a ser UNA pieza: rótulo arriba,
     barra pegada debajo, con la cifra que falta en tinta y el
     resto en gris — se lee "cuánto falta", no "hay una barra".
   · La barra deja de ser un rectángulo gris: canal hundido con
     filo interior y relleno dorado con brillo, como el resto de
     los materiales del sitio.
   · El botón sale del verde. En esta casa el verde significa
     WhatsApp —la burbuja flota en la misma pantalla— y usarlo
     también para pagar borra esa señal. La acción principal va
     en espresso, que es lo que más contrasta sobre el crema, y
     el oro se reserva para la respuesta al gesto.
   ══════════════════════════════════════════════════════════════ */
.envio-carrito{
  margin:0 0 14px !important;
  padding:0 0 14px;
  border-bottom:1px solid rgba(33,28,22,.08);
}
.ec-l{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font-size:11px !important;font-weight:500 !important;
  letter-spacing:.01em;color:var(--txt-3) !important;
}
.ec-l b{font-weight:700 !important;color:var(--txt) !important;font-variant-numeric:tabular-nums}
.ec-ok{color:#0E6E3C !important}
.ec-ok b{color:#0E6E3C !important}
.ec-bar{
  height:6px !important;margin-top:8px !important;
  background:rgba(33,28,22,.07) !important;
  box-shadow:inset 0 1px 2px rgba(33,28,22,.10) !important;
  border-radius:100px !important;overflow:hidden;
}
.ec-bar i{
  background:linear-gradient(90deg,#9A6E2E,#C4913E 70%,#D9A94E) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:width .5s var(--ease-glass) !important;
}

/* El total: rótulo callado, cifra con peso */
.dr-total{margin-bottom:12px !important;align-items:baseline !important}
.dr-total span{
  font-size:10px !important;letter-spacing:.18em !important;
  color:var(--txt-4) !important;font-weight:700 !important;
}
.dr-total b{
  font-size:25px !important;letter-spacing:-.03em !important;
  font-variant-numeric:tabular-nums;color:var(--txt) !important;
}

/* La acción, en el color de la casa */
.dr-go{
  background:linear-gradient(160deg,#342B21,#211C16) !important;
  color:#F4EFE6 !important;
  font-size:11.5px !important;letter-spacing:.14em !important;
  padding:16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 12px 26px -14px rgba(33,28,22,.65) !important;
  transition:background .3s var(--ease-glass), transform .18s var(--ease-glass) !important;
}
@media(hover:hover){
  .dr-go:hover{
    background:linear-gradient(160deg,#7A5618,#5E410F) !important;
    color:#FFF8EC !important;transform:none !important;
  }
}
.dr-go:active{transform:scale(.985) !important}

/* El cajón del carrito tenía su radio (24px a la izquierda), pero se veía
   a escuadra: sin overflow:hidden, la cabecera y el pie —que llevan su
   propio fondo— pintaban por encima de las esquinas y las cuadraban.
   El cuerpo conserva su propio scroll, así que recortar aquí no le quita
   nada. */
.drawer{
  overflow:hidden !important;
  border-radius:24px 0 0 24px !important;
}
@media(max-width:480px){
  /* A pantalla casi completa vuelve a ser una hoja de borde a borde: un
     radio de 24px contra el borde del teléfono deja ver el fondo en las
     esquinas y parece un error, no una tarjeta. */
  .drawer{border-radius:20px 0 0 20px !important}
}

/* ══════════════════════════════════════════════════════════════
   CON EL CARRITO ABIERTO, LA PÁGINA NO SE MUEVE
   openCart() ya ponía overflow:hidden en <body>, pero en escritorio
   quien desplaza es <html>: el bloqueo no surtía efecto y detrás del
   cajón seguía corriendo la página, con su barra de desplazamiento
   a la vista. Se bloquea donde toca.
   Se usa :has() para no tocar el guion de cada página; donde no
   exista, queda el bloqueo de <body> que ya estaba.
   ══════════════════════════════════════════════════════════════ */
html:has(#cart-ov.op),
html:has(body.menu-open){
  overflow:hidden !important;
  /* Al bloquear, la barra de desplazamiento desaparece y el contenido se
     corre hacia la derecha. scrollbar-gutter NO reserva el hueco cuando
     overflow es hidden, así que se compensa con un relleno del ancho
     exacto que midió glass.js. En móvil la barra flota y mide 0. */
  padding-right:var(--sbw,0px) !important;
}

/* ══════════════════════════════════════════════════════════════
   LA BARRA DE DESPLAZAMIENTO
   La del sistema es gris cemento, gorda y con flechitas en los
   extremos: lo único de la pantalla que no es de esta casa. Se
   viste con el material del sitio —tinta translúcida sobre el
   crema, extremos redondos y aire alrededor— y se reserva el
   contraste para cuando se agarra.
   En Mac y en el teléfono la barra flota sobre el contenido y
   esto no se ve: no estorba.
   ══════════════════════════════════════════════════════════════ */
*{scrollbar-width:thin;scrollbar-color:rgba(33,28,22,.22) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(33,28,22,.20);
  border-radius:100px;
  border:3px solid transparent;      /* el aire que lo adelgaza */
  background-clip:padding-box;
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover{background:rgba(33,28,22,.34);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:rgba(122,86,24,.55);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* Los extremos con flecha no existen en este sistema */
::-webkit-scrollbar-button{display:none;width:0;height:0}

/* Sobre superficies oscuras, el pulgar en claro */
#mob,#mobmenu,.slogan,footer,.sum-card{scrollbar-color:rgba(242,238,232,.26) transparent}
#mob::-webkit-scrollbar-thumb,
#mobmenu::-webkit-scrollbar-thumb,
.sum-card::-webkit-scrollbar-thumb{
  background:rgba(242,238,232,.24);background-clip:padding-box;
}
#mob::-webkit-scrollbar-thumb:hover,
#mobmenu::-webkit-scrollbar-thumb:hover{
  background:rgba(242,238,232,.40);background-clip:padding-box;
}

/* ══════════════════════════════════════════════════════════════
   EL RESUMEN DEL PEDIDO · vidrio de verdad, no vidrio de adorno
   Le había puesto blur(24px) y no se veía nada de vidrio. El motivo
   es simple: en escritorio el resumen es sticky y algo le pasa por
   detrás —ahí el desenfoque sí trabaja—, pero por debajo de 960px
   pasa a ser un bloque estático al principio de la página, con el
   crema plano detrás. Desenfocar un color liso no produce vidrio:
   produce el mismo color liso.
   Lo que hace que una superficie OSCURA se lea como material no es
   el desenfoque, es la LUZ: el filo especular de arriba, el brillo
   que cae en diagonal y los huecos rehundidos. Eso se ve a
   cualquier ancho, con o sino algo detrás.
   ══════════════════════════════════════════════════════════════ */
.sum-card{position:relative;isolation:isolate;overflow:hidden}
/* El brillo que entra por arriba a la izquierda, como en un cristal
   ahumado de verdad. No pinta, ilumina. */
.sum-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 12% -8%, rgba(255,244,224,.11), transparent 58%),
    radial-gradient(90% 60% at 92% 4%, rgba(196,145,62,.10), transparent 62%);
}
.sum-card > *{position:relative;z-index:1}
/* El filo de arriba, más presente: es lo que dice "esto es una pieza" */
.sum-card{
  box-shadow:inset 0 1px 0 rgba(255,248,236,.22),
             inset 0 -1px 0 rgba(0,0,0,.35),
             0 2px 8px rgba(18,15,12,.20),
             0 30px 64px -34px rgba(18,15,12,.65) !important;
}

/* El cupón NO es una caja. Probé hundirlo en el material y salió un
   bulto con halo: sobre espresso, un relleno oscuro con filo claro
   alrededor no se lee como hueco, se lee como pegote.
   Es una acción secundaria —la mayoría no tiene cupón—, así que se
   comporta como lo que es: una fila que se toca, separada por un
   filete, sin fondo y sin marco. */
.ee-cup-abrir{
  background:none !important;
  border:0 !important;
  border-top:1px solid rgba(255,248,236,.10) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:14px 0 !important;
  width:100% !important;
  color:rgba(242,238,232,.62) !important;
  font-size:12.5px !important;font-weight:500 !important;
  transition:color .25s var(--ease-glass) !important;
}
@media(hover:hover){.ee-cup-abrir:hover{color:rgba(242,238,232,.92) !important}}
/* El icono del cupón, sin su recuadro */
.ee-cup-abrir .cup-ic{
  background:none !important;border:0 !important;box-shadow:none !important;
  opacity:.55;
}
.ee-cup-abrir .cup-chev{opacity:.45}

/* La nota del envío: texto, no cartel */
.sum-ship{
  background:none !important;
  border:0 !important;
  border-top:1px solid rgba(255,248,236,.10) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:13px 0 0 !important;
  color:rgba(242,238,232,.52) !important;
}
.sum-ship b{color:rgba(242,238,232,.80) !important}

/* La cabecera plegable: una franja algo más clara, como el borde de
   un cristal más grueso */
.sum-bar{
  background:linear-gradient(180deg,rgba(255,248,236,.055),transparent) !important;
  border-bottom:1px solid rgba(255,248,236,.10) !important;
}

/* Las filas del desglose, separadas por luz y no por gris */
.sum-l{border-color:rgba(255,248,236,.08) !important}

/* ══════════════════════════════════════════════════════════════
   MÉTODO DE PAGO Y BOTÓN DE CONFIRMAR
   Mismo criterio que en el carrito: en esta casa el VERDE significa
   WhatsApp —la burbuja flota en esta misma pantalla— y teñir de
   verde el botón de pagar borra esa señal justo donde más falta
   claridad. La acción va en espresso, que es lo que más contrasta
   sobre el crema, con el oro para la respuesta al gesto.
   Y las opciones de pago: la elegida se reconoce por su aro dorado,
   así que las otras no necesitan un relleno gris encima — basta el
   crema del sistema con su filete.
   ══════════════════════════════════════════════════════════════ */
.go{
  background:linear-gradient(160deg,#342B21,#211C16) !important;
  color:#F4EFE6 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 14px 30px -16px rgba(33,28,22,.7) !important;
  transition:background .3s var(--ease-glass), transform .18s var(--ease-glass) !important;
}
@media(hover:hover){
  .go:hover{
    background:linear-gradient(160deg,#7A5618,#5E410F) !important;
    color:#FFF8EC !important;transform:none !important;
  }
}
.go:active{transform:scale(.985) !important}

/* Las opciones: superficie del sistema, no gris de formulario */
.pay-opt{
  background:#FBF9F6 !important;
  border:1px solid rgba(33,28,22,.10) !important;
  border-radius:15px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
  transition:border-color .25s var(--ease-glass), background .25s var(--ease-glass) !important;
}
@media(hover:hover){.pay-opt:hover{border-color:rgba(33,28,22,.20) !important}}
/* La elegida: aro dorado y un fondo apenas teñido, para que se note
   sin gritar */
.pay-opt.sel{
  background:rgba(196,145,62,.07) !important;
  border-color:rgba(196,145,62,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),
             0 0 0 3px rgba(196,145,62,.13) !important;
}
/* El cuadro del logo, igual para los tres */
.pay-ic{
  background:#FFFDFB !important;
  border:1px solid rgba(33,28,22,.09) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(33,28,22,.06) !important;
}

/* El contenedor del cupón venía con fondo crema y borde punteado —el
   ticket recortado de toda la vida—, pensado para una página clara.
   Dentro del resumen, que es espresso, eso era un papel blanco pegado
   encima. Se queda transparente: el filete del botón ya separa. */
.sum-card .ee-cup{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
}
/* El campo del cupón: UNA pieza, no un campo y un botón pegados.
   Estaban sueltos, de alturas distintas y con el botón dorado colgando
   al lado. Ahora el botón vive DENTRO del campo, con su aire, como los
   buscadores del sistema. */
.sum-card .ee-cup-box{
  display:flex !important;align-items:center;gap:0 !important;
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(255,248,236,.13) !important;
  border-radius:13px !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.30) !important;
  padding:4px 4px 4px 0 !important;
  margin:0 0 14px !important;height:46px;
}
.sum-card .ee-cup-box input{
  flex:1;min-width:0;height:100% !important;
  background:none !important;border:0 !important;outline:none !important;
  padding:0 14px !important;
  color:#F4EFE6 !important;font-size:13px !important;font-weight:500 !important;
  letter-spacing:.06em;text-transform:uppercase;
}
.sum-card .ee-cup-box input::placeholder{
  color:rgba(242,238,232,.34) !important;letter-spacing:.01em;text-transform:none;
}
.sum-card .ee-cup-box button{
  flex:0 0 auto;height:100% !important;
  padding:0 18px !important;border:0 !important;
  border-radius:10px !important;
  background:rgba(242,238,232,.10) !important;
  color:rgba(242,238,232,.80) !important;
  font-size:10.5px !important;font-weight:700 !important;
  letter-spacing:.14em !important;text-transform:uppercase;
  cursor:pointer;
  transition:background .25s var(--ease-glass), color .25s var(--ease-glass) !important;
}
@media(hover:hover){
  .sum-card .ee-cup-box button:hover{
    background:var(--gold,#C4913E) !important;color:#211C16 !important;
  }
}
.sum-card .ee-cup-box button:active{transform:scale(.97)}
.sum-card .ee-cup-msg{color:rgba(242,238,232,.62) !important}

/* ══════════════════════════════════════════════════════════════
   LOS LOGOS DE PAGO · una marca ancha no cabe en un cuadrado
   Medido: el de Bre-B es 584×202 —una palabra, casi 3:1— metida a
   la fuerza en un cuadro de 32×32; el de Wompi es cuadrado, 2001×
   1994, y salía a 26. Uno apretado, el otro más chico: los tres
   tamaños distintos.
   No se arregla cambiando de imagen: cualquier logotipo de palabra
   se ve igual de apretado dentro de un cuadrado. Se arregla dejando
   que cada uno entre CON SU PROPORCIÓN, centrado, dentro de un
   cuadro del mismo tamaño para los tres.
   ══════════════════════════════════════════════════════════════ */
.pay-ic{
  width:46px !important;height:46px !important;
  display:flex !important;align-items:center;justify-content:center;
  padding:0 !important;flex:0 0 auto;
}
.pay-ic img{
  width:auto !important;height:auto !important;
  max-width:78% !important;max-height:58% !important;
  object-fit:contain !important;display:block;
}
/* El icono dibujado (contra entrega) sí llena su cuadro como icono */
.pay-ic svg{width:21px !important;height:21px !important}

/* El cuadro de Wompi va en SU verde: el logotipo es blanco, así que
   sobre un cuadro claro desaparece. Al unificar los tamaños le pisé el
   fondo de marca con el crema del sistema y el logo se volvió invisible.
   Cada marca conserva el suyo; lo que se unifica es el tamaño. */
.pay-ic.pay-ic-wompi{
  background:#05C46B !important;
  border-color:#05C46B !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(5,88,48,.28) !important;
}
.pay-ic.pay-ic-wompi img{max-width:66% !important;max-height:66% !important}

/* Contra entrega: espresso con el carrito en oro. Es el único que no
   lleva logotipo de marca sino icono dibujado, así que su cuadro es la
   marca de la casa. (Al unificar los tamaños le había puesto el crema
   del sistema y perdió el contraste que tenía.) */
.pay-ic:not(.pay-ic-img){
  background:linear-gradient(160deg,#2C251D,#1A1511) !important;
  border-color:rgba(33,28,22,.9) !important;
  box-shadow:inset 0 1px 0 rgba(255,248,236,.14), 0 1px 3px rgba(33,28,22,.28) !important;
}
.pay-ic:not(.pay-ic-img) svg{
  stroke:var(--gold-2,#D9A94E) !important;
  fill:none !important;
  width:22px !important;height:22px !important;
}

/* Y con el material del sistema, no un cuadro plano: el filo especular
   arriba, el brillo que cae en diagonal y el canto oscuro abajo. Es la
   misma receta del resumen del pedido, en pequeño. */
.pay-ic:not(.pay-ic-img){position:relative;overflow:hidden}
.pay-ic:not(.pay-ic-img)::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(255,244,224,.20), transparent 62%),
    radial-gradient(90% 70% at 95% 8%, rgba(196,145,62,.16), transparent 66%);
}
.pay-ic:not(.pay-ic-img){
  box-shadow:inset 0 1px 0 rgba(255,248,236,.20),
             inset 0 -1px 0 rgba(0,0,0,.45),
             0 2px 6px -2px rgba(33,28,22,.35) !important;
}
.pay-ic:not(.pay-ic-img) svg{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════
   UNA CAPA DE VIDRIO SOBRE LOS TRES ICONOS
   No un fondo de vidrio —debajo hay logotipos que deben leerse—
   sino una LÁMINA encima: el brillo que entra por la esquina
   superior izquierda y muere a media diagonal, más un aro interior
   de luz. Va en modo "overlay", así que aclara los cuadros oscuros
   (Contra entrega, Wompi) y apenas roza los claros (Bre-B) en vez
   de lavarlos de blanco.
   ══════════════════════════════════════════════════════════════ */
.pay-ic{position:relative !important;overflow:hidden !important}
.pay-ic::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(152deg,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.16) 30%,
    rgba(255,255,255,0)   52%,
    rgba(0,0,0,.10)      100%);
  mix-blend-mode:overlay;
}
/* El aro interior: el canto del cristal */
.pay-ic{
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.45),
             inset 0 1px 0 rgba(255,255,255,.35),
             0 1px 3px rgba(33,28,22,.16) !important;
}
.pay-ic.pay-ic-wompi{
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.30),
             inset 0 1px 0 rgba(255,255,255,.40),
             0 2px 6px -2px rgba(5,88,48,.45) !important;
}
.pay-ic:not(.pay-ic-img){
  box-shadow:inset 0 0 0 .5px rgba(255,248,236,.18),
             inset 0 1px 0 rgba(255,248,236,.22),
             inset 0 -1px 0 rgba(0,0,0,.45),
             0 2px 6px -2px rgba(33,28,22,.38) !important;
}
/* La opción elegida levanta un poco su cristal */
.pay-opt.sel .pay-ic::after{
  background:linear-gradient(152deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.22) 30%,
    rgba(255,255,255,0)   54%,
    rgba(0,0,0,.10)      100%);
}

/* ══════════════════════════════════════════════════════════════
   EL HEADER DEL CHECKOUT
   · La barra decía llevar vidrio (backdrop-filter:blur(8px)) pero el
     fondo era OPACO: el desenfoque no tenía nada que hacer. Aquí sí
     está justificado —es sticky y el formulario le pasa por debajo—,
     así que se le da relleno translúcido y desenfoque de verdad.
   · El sello de seguridad escondía su texto en pantallas chicas y
     dejaba un candado suelto dentro de un círculo, que no dice nada.
     En la página donde el cliente entrega sus datos, dos palabras
     valen más que un icono. Se queda "Pago seguro", en tono callado
     en vez de la pastilla dorada que competía con el logo.
   · Y los pasos pasan de migas de pan con flechitas a un indicador
     de progreso: el hecho con su palomita, el actual lleno, el que
     falta hueco, unidos por un filete.
   ══════════════════════════════════════════════════════════════ */
.hdr{
  background:rgba(242,238,232,.82) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.6) !important;
  backdrop-filter:blur(20px) saturate(1.6) !important;
  border-bottom:1px solid rgba(33,28,22,.09) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) !important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{background:#F2EEE8 !important}
}
.hdr-sec{
  background:none !important;
  border:1px solid rgba(33,28,22,.12) !important;
  color:var(--txt-3) !important;
  font-size:9.5px !important;letter-spacing:.14em !important;
  padding:7px 13px !important;
}
.hdr-sec svg{width:12px;height:12px;stroke:var(--gold-deep,#9A6E2E);fill:none;stroke-width:1.9}
/* El texto NO se esconde: es lo que convierte el candado en mensaje */
.hdr-sec span{display:inline !important}

/* ── Los pasos, como progreso ── */
.steps{
  gap:0 !important;font-size:11.5px !important;
  letter-spacing:.02em !important;font-weight:600 !important;
}
.steps > a,.steps > span{
  display:inline-flex !important;align-items:center;gap:8px;
  padding:0 16px 0 0;position:relative;
}
/* El filete que une un paso con el siguiente */
.steps > a::after,.steps > span:not(:last-child)::after{
  content:'';width:26px;height:1px;margin-left:14px;
  background:rgba(33,28,22,.16);
}
/* El punto de cada paso */
.steps > a::before,.steps > span::before{
  content:'';width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid rgba(33,28,22,.20);
  background:transparent;
}
/* Hecho: relleno espresso con la palomita */
.steps > a::before{
  border-color:var(--txt);background:var(--txt);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EFE6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}
.steps > a{color:var(--txt-3) !important}
/* Actual: aro dorado con el corazón lleno */
.steps > .on::before{
  border-color:var(--gold,#C4913E);
  background:radial-gradient(circle, var(--gold,#C4913E) 0 42%, transparent 43%);
  box-shadow:0 0 0 3px rgba(196,145,62,.14);
}
.steps > .on{color:var(--txt) !important;font-weight:700 !important}
/* Las flechitas sobran: el filete ya une */
.steps > svg{display:none !important}
@media(max-width:560px){
  .steps > a::after,.steps > span:not(:last-child)::after{width:14px;margin-left:9px}
  .steps > a,.steps > span{padding-right:10px}
  .steps{font-size:10.5px !important}
}

/* El logo de Bre-B es un sello cuadrado: que LLENE su cuadro, no que
   flote en medio. Los otros dos son distintos —Wompi lleva su marca
   blanca sobre verde y necesita aire, Bre-B trae su propio fondo— así
   que este va al 100 % y el borde del cuadro lo recorta. */
.pay-ic.pay-ic-img:has(img[src*="Bre-B"]),
.pay-ic.pay-ic-img.pay-ic-breb{
  background:none !important;border-color:rgba(33,28,22,.10) !important;
}
.pay-ic.pay-ic-img img[src*="Bre-B"]{
  max-width:100% !important;max-height:100% !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;
}

/* El vidrio de los iconos no se veía sobre Bre-B: mix-blend-mode mezcla
   con el fondo del CONTEXTO de apilado, y sin aislar el cuadro se estaba
   mezclando con la página entera —crema clara—, donde un blanco en
   "overlay" no cambia nada. Aislando, la lámina se mezcla con lo que hay
   dentro del cuadro, que es el logo. Ahí sí se ve el cristal. */
.pay-ic{isolation:isolate !important}
/* Y un reflejo un punto más marcado, que estos sellos son pequeños */
.pay-ic::after{
  background:linear-gradient(150deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.22) 26%,
    rgba(255,255,255,0)   50%,
    rgba(0,0,0,.14)      100%) !important;
}
.pay-opt.sel .pay-ic::after{
  background:linear-gradient(150deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.30) 26%,
    rgba(255,255,255,0)   52%,
    rgba(0,0,0,.14)      100%) !important;
}

/* El "halo": el campo del cupón llevaba un anillo dorado de 3 px como
   señal de foco. Sobre crema se ve bien —es el foco de los formularios
   de abajo—, pero sobre el espresso del resumen queda un resplandor
   marrón flotando dentro de la caja, que es justo lo que se veía.
   Aquí el campo NO tiene forma propia: la pieza es el contenedor, así
   que el foco lo marca ÉL, encendiendo su filo. */
.sum-card .ee-cup-box input{
  box-shadow:none !important;
  border-radius:0 !important;
  outline:none !important;
}
.sum-card .ee-cup-box:focus-within{
  border-color:rgba(196,145,62,.50) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.30),
             0 0 0 3px rgba(196,145,62,.10) !important;
}

/* La aclaración del envío: misma línea, un punto más callada */
.ec-s{display:block;margin-top:2px;font-size:10.5px;color:var(--txt-4);font-weight:400}
.ec-ok .ec-s{color:var(--txt-4)}

/* ══════════════════════════════════════════════════════════════
   EL CUPÓN NO SE OFRECE SOLO
   Preguntarle "¿tienes un cupón de descuento?" a quien no lo tiene
   le está diciendo que hay un descuento que se está perdiendo: se
   va a buscar códigos por ahí y muchos no vuelven. El bloque queda
   oculto y aparece solo cuando el pedido llega con un código en el
   enlace (?cupon=XXXX), que es como se reparten en las campañas.
   ══════════════════════════════════════════════════════════════ */
.ee-cup.cup-oculto{display:none !important}

/* El botón "Aplicar": apagado mientras el campo esté vacío, dorado en
   cuanto hay algo que aplicar. Un botón que no puede hacer nada no
   debería ofrecerse a que lo pulsen. */
.sum-card .ee-cup-box button{
  opacity:.45 !important;cursor:not-allowed !important;
}
/* El estado se deduce del CAMPO, no de una clase que haya que mantener
   al día: tras aplicar un cupón el guion reactivaba el botón y la clase
   se quedaba atrás. Con :has() el botón se enciende mientras haya texto,
   punto. */
.sum-card .ee-cup-box:has(input:not(:placeholder-shown)) button:not(:disabled),
.sum-card .ee-cup-box button.listo{
  opacity:1 !important;cursor:pointer !important;
  background:var(--gold,#C4913E) !important;
  color:#211C16 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
}
@media(hover:hover){
  .sum-card .ee-cup-box:has(input:not(:placeholder-shown)) button:not(:disabled):hover,
  .sum-card .ee-cup-box button.listo:hover{
    background:var(--gold-2,#D9A94E) !important;
  }
}
.sum-card .ee-cup-box button:disabled{pointer-events:none}

/* El canje de código: plegado y callado. Una fila de servicio entre el
   desglose y el total, no un anuncio. Al abrirse, el campo se despliega
   con su animación y el filete se queda como bisagra. */
.sum-card .ee-cup-abrir{
  font-size:11.5px !important;
  color:rgba(242,238,232,.48) !important;
  letter-spacing:.02em !important;
}
@media(hover:hover){
  .sum-card .ee-cup-abrir:hover{color:rgba(242,238,232,.85) !important}
}
.sum-card .ee-cup-abrir .cup-ic{opacity:.42;width:15px;height:15px}
.sum-card .ee-cup-abrir .cup-chev{
  margin-left:auto;opacity:.38;
  transition:transform .3s var(--ease-glass);
}
.sum-card .ee-cup-abrir[aria-expanded="true"] .cup-chev,
.sum-card .ee-cup.abierto .cup-chev{transform:rotate(90deg)}
/* Se despliega, no aparece de golpe */
.sum-card .ee-cup-box{
  animation:eeCupAbre .32s var(--ease-glass) both;
  transform-origin:top;
}
@keyframes eeCupAbre{
  from{opacity:0;transform:translateY(-6px) scaleY(.92)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .sum-card .ee-cup-box{animation:none}
}


/* ══════════════════════════════════════════════════════════════
   EL BANNER DE ADDI, EN DOS RENGLONES
   Iba todo en una sola línea —"Paga a cuotas con Addi en compras
   desde $100.000 · solicita tu cupo"— y en el teléfono se partía
   donde caía, dejando el enlace colgando a mitad de frase. Ahora
   arriba va lo que informa y abajo, en su propio renglón, lo que
   se puede hacer.
   ══════════════════════════════════════════════════════════════ */
.addi-banner{align-items:center !important;gap:12px !important;padding:12px 14px !important}
/* El span va en BLOQUE, no en columna: al ponerlo como columna cada
   trozo de texto —incluido el <b>Addi</b> de en medio— se convertía en
   un renglón suelto y la frase salía partida en tres. En bloque, la
   primera línea fluye como texto normal y solo el enlace, que es flex,
   se lleva el renglón siguiente. */
.addi-banner span{
  display:block !important;line-height:1.5 !important;
}
.addi-banner span u{
  display:flex;align-items:center;gap:5px;width:fit-content;margin-top:4px;
  text-decoration:none !important;
  font-weight:700;font-size:11.5px;letter-spacing:.02em;
  color:var(--gold-deep,#9A6E2E) !important;
}
.addi-banner span u::after{
  content:'';width:5px;height:5px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);opacity:.85;
  transition:transform .25s var(--ease-glass);
}
@media(hover:hover){
  .addi-banner:hover span u::after{transform:rotate(-45deg) translate(2px,2px)}
}
/* El separador "·" sobraba al partir la frase en dos */
.addi-banner span .sep{display:none}

/* ══════════════════════════════════════════════════════════════
   LA CAPA DE PAGO, CON SALIDA CUANDO ALGO FALLA
   Un error —el carrito desactualizado, un monto por debajo del
   mínimo de Addi— tapaba el checkout entero y la única puerta
   decía "Volver a la tienda": se perdían los datos ya escritos y
   había que empezar de cero por algo que se arregla en un segundo.
   Ahora los estados de error llevan su X, cierran con Escape y
   devuelven el pedido tal como estaba.
   ══════════════════════════════════════════════════════════════ */
.pw-x{
  position:absolute;top:14px;right:14px;z-index:4;
  width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(242,238,232,.08);
  color:rgba(242,238,232,.62);
  display:grid;place-items:center;cursor:pointer;
  transition:background .2s var(--ease-glass), color .2s var(--ease-glass);
}
.pw-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media(hover:hover){
  .pw-x:hover{background:rgba(242,238,232,.16);color:#F2EEE8}
}
.pw-x:active{transform:scale(.92)}
#pw-card{position:relative}
/* La segunda acción, callada: la principal es reintentar */
.pw-btn-2{
  margin-top:9px !important;
  background:none !important;
  border:1px solid rgba(242,238,232,.20) !important;
  color:rgba(242,238,232,.72) !important;
}
@media(hover:hover){
  .pw-btn-2:hover{background:rgba(242,238,232,.08) !important;color:#F2EEE8 !important}
}

/* El aviso de error, junto al botón de pagar y no encima de la página */
.aviso-pago{
  display:flex;align-items:flex-start;gap:9px;
  margin:0 0 12px;padding:12px 14px;
  background:rgba(166,61,40,.08);
  border:1px solid rgba(166,61,40,.26);
  border-radius:var(--r-sm,12px);
  font-size:12.5px;font-weight:600;line-height:1.5;color:#8A3221;
  animation:avisoEntra .28s var(--ease-glass) both;
}
.aviso-pago svg{
  width:16px;height:16px;flex:0 0 auto;margin-top:1px;
  fill:none;stroke:#A63D28;stroke-width:1.9;stroke-linecap:round;
}
@keyframes avisoEntra{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .aviso-pago{animation:none} }
/* El campo señalado se marca y se limpia al escribir */
.fg.err input,.fg.err select,.fg.err textarea{
  border-color:rgba(166,61,40,.55) !important;
  box-shadow:0 0 0 3px rgba(166,61,40,.10) !important;
}

/* "Se prepara para tu pedido": sustituye al cartel de agotado. Es un
   aviso de plazo, no un impedimento — por eso va en el tono neutro del
   sistema y no en rojo de error. */
.bajo-pedido{
  display:flex;align-items:flex-start;gap:10px;
  margin:4px 0 14px;padding:12px 14px;
  background:rgba(196,145,62,.07);
  border:1px solid rgba(196,145,62,.22);
  border-radius:var(--r-sm,12px);
  font-size:12.5px;font-weight:400;line-height:1.55;color:var(--txt-2);
}
.bajo-pedido b{font-weight:700;color:var(--txt)}
.bajo-pedido svg{
  width:16px;height:16px;flex:0 0 auto;margin-top:1px;
  fill:none;stroke:var(--gold-deep,#9A6E2E);stroke-width:1.7;stroke-linecap:round;
}

/* El renglón de error de cada campo: ya existía para la validación del
   propio formulario; ahora también lo usan los errores que devuelve el
   servidor, para que el mensaje salga pegado al campo y no en una caja
   al final del formulario. */
.fg .err-t.visible{display:block !important}
.fg.err .err-t{color:#A63D28 !important;font-weight:600}