/* =========================================================
   Estilos compartidos de la tienda: inicio, página de producto
   y cuenta. Cada página agrega lo suyo en su propio <style>.
   ========================================================= */
:root{
  --crema:#fffaf1; --crema2:#fcefd8; --card:#ffffff;
  --verde:#e07c0c; --verde2:#f7a823; --hoja:#7a3608; --menta:#fff0d2;
  --naranja:#f7a21b; --naranja-osc:#c2560f; --durazno:#fff1de;
  --texto:#2a190a; --texto2:#5c4632; --muted:#8a735e; --rgb:122,54,8;
  --borde:rgba(var(--rgb),.1); --borde2:rgba(var(--rgb),.16);
  --sombra:0 10px 30px rgba(var(--rgb),.08),0 1px 2px rgba(var(--rgb),.06);
  --serif:"Fraunces",Georgia,serif; --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,sans-serif; --mano:"Caveat",cursive;
  --tab:0px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{font-family:var(--sans);background:var(--crema);color:var(--texto);-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom));min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}
svg{flex-shrink:0}
[hidden]{display:none!important}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f{fill:currentColor;stroke:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.pressable{transition:transform .18s cubic-bezier(.3,.7,.4,1)}
.pressable:active{transform:scale(.96)}
/* Las fotos y el logo son parte de la página: no se arrastran ni se guardan con un toque largo. */
img,svg.bolsa{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
img{pointer-events:none}
.logo-dlt{border-radius:50%;display:block;box-shadow:0 2px 10px rgba(242,138,10,.18),0 0 0 1px rgba(242,138,10,.14);background:#fff}

/* ---------- Barra superior ---------- */
.nav{position:sticky;top:0;z-index:40;padding:10px 0;transition:background .3s,box-shadow .3s}
.nav.solida{background:rgba(251,247,239,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--borde)}
.nav .wrap{display:flex;align-items:center;gap:10px}
.marca{display:flex;align-items:center;gap:11px;min-width:0}
.marca b{font-family:var(--serif);font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--hoja);display:block;line-height:1.1}
.marca small{display:block;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.links{margin-left:auto;display:flex;gap:4px;background:var(--card);padding:5px;border-radius:999px;box-shadow:var(--sombra)}
.links a{padding:9px 16px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--muted);transition:background .2s,color .2s}
.links a.on,.links a:hover{background:var(--menta);color:var(--hoja)}
.redondo{position:relative;width:46px;height:46px;border-radius:50%;background:var(--card);color:var(--hoja);display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra);flex-shrink:0;font-weight:800;font-size:17px}
.redondo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.redondo.oscuro{background:var(--hoja);color:#fff;box-shadow:0 8px 20px rgba(var(--rgb),.25)}
.redondo.dentro{background:var(--menta);box-shadow:inset 0 0 0 2px var(--verde)}
.volver-nav{margin-right:2px}
.badge{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--naranja);color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--crema);transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.badge.ver{transform:scale(1)}
.salta{animation:salta .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes salta{40%{transform:scale(1.18)}}
.btn-panel{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:999px;background:var(--hoja);color:#fff;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(var(--rgb),.2)}
.btn-panel svg{width:18px;height:18px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 22px;border-radius:16px;font-weight:800;font-size:15.5px;white-space:nowrap}
.btn.verde{background:var(--hoja);color:#fff;box-shadow:0 10px 22px rgba(var(--rgb),.18)}
.btn.naranja{background:var(--naranja);color:#fff;box-shadow:0 10px 22px rgba(240,130,28,.25)}
.btn.blanco{background:var(--card);color:var(--hoja);box-shadow:inset 0 0 0 1.5px var(--borde2)}
.btn.claro{background:#fff;color:var(--hoja)}
.btn.wa{background:#1f9d55;color:#fff;box-shadow:0 10px 22px rgba(31,157,85,.25)}
.btn:disabled{opacity:.6;cursor:default}
.btn svg{width:19px;height:19px}
.giro{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite;display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}

/* ---------- Secciones ---------- */
section{padding-top:60px}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.cab h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--hoja)}
.cab p{color:var(--muted);font-weight:600;font-size:15px;margin-top:6px}
.ver-todo{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 10px 0 16px;border-radius:999px;background:var(--card);box-shadow:var(--sombra);font-weight:800;font-size:14px;color:var(--hoja);white-space:nowrap;flex-shrink:0}
.ver-todo svg{width:18px;height:18px}

/* ---------- Tarjetas de producto ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin-bottom:18px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;height:40px;padding:0 16px;border-radius:999px;background:var(--card);font-weight:700;font-size:14px;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--borde);transition:background .2s,color .2s}
.chip.on{background:var(--hoja);color:#fff;box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{position:relative;background:var(--card);border-radius:24px;padding:10px;box-shadow:var(--sombra);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.3,.7,.4,1),box-shadow .3s}
.prod:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(var(--rgb),.12)}
.prod.oculto{display:none}
.prod .foto{position:relative;aspect-ratio:1/1;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod .foto svg.bolsa{width:56%;filter:drop-shadow(0 14px 14px rgba(var(--rgb),.22));transition:transform .5s cubic-bezier(.3,.7,.4,1)}
.prod:hover .foto svg.bolsa{transform:translateY(-6px) rotate(-3deg)}
.prod .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.3,.7,.4,1)}
.prod:hover .foto img{transform:scale(1.04)}
.prod .deco{position:absolute;opacity:.9;left:-14px;bottom:-14px}
.fav{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--muted);z-index:2}
.fav.on{color:#e5484d}
.fav.on svg{fill:currentColor}
.prod .info{padding:12px 6px 4px;flex:1;display:flex;flex-direction:column}
.prod .nom{font-weight:800;font-size:16.5px;letter-spacing:-.01em}
.prod .ing{font-size:13px;color:var(--muted);font-weight:600;margin-top:3px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .pie{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px}
.prod .pie small{display:block;font-size:11.5px;color:var(--muted);font-weight:700}
.prod .pie b{font-size:17px;font-weight:800}
.mas{width:40px;height:40px;border-radius:13px;background:var(--hoja);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.etq-envio{position:absolute;left:18px;top:18px;z-index:2;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;background:var(--hoja);color:#fff}
.vacio{display:none;text-align:center;padding:40px 0;color:var(--muted);font-weight:700}

/* ---------- Kits ---------- */
.kits{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kit{position:relative;border-radius:28px;padding:26px;overflow:hidden;min-height:250px;display:flex;flex-direction:column;color:#fff}
.kit.naranja{background:linear-gradient(140deg,#f29a2e,#e8701a)}
.kit.verde{background:linear-gradient(140deg,var(--verde),var(--hoja))}
.kit.crema{background:linear-gradient(140deg,#fff3dc,#f6dfb5);color:var(--hoja)}
.kit .tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.22)}
.kit h3{font-family:var(--serif);font-size:32px;font-weight:800;margin-top:14px;letter-spacing:-.01em}
.kit .desc{font-weight:600;opacity:.88;margin-top:4px;font-size:15px}
.kit .precio{position:relative;z-index:2;margin-top:auto;padding-top:20px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kit .precio b{font-size:38px;font-weight:800;letter-spacing:-.03em}
.kit .precio s{font-weight:700;opacity:.65}
.kit .ahorro{font-size:13px;font-weight:800;background:#fff;color:var(--hoja);padding:5px 10px;border-radius:999px}
.kit .btn{margin-top:16px;align-self:flex-start;background:#fff;color:var(--hoja);position:relative;z-index:2}
.kit.crema .btn{background:var(--hoja);color:#fff}
.kit .trio{position:absolute;right:-6px;bottom:10px;display:flex;align-items:flex-end;pointer-events:none}
.kit .trio svg{width:92px;margin-left:-34px;filter:drop-shadow(0 14px 14px rgba(0,0,0,.22))}
.kit .trio svg:nth-child(2){width:108px;z-index:1}
.kit .trio img{width:84px;height:104px;object-fit:cover;border-radius:18px;margin-left:-28px;border:3px solid rgba(255,255,255,.92);box-shadow:0 12px 20px rgba(0,0,0,.2)}
.kit .trio img:nth-child(2){width:96px;height:118px;z-index:1}

/* ---------- Pie ---------- */
footer{margin-top:70px;padding:34px 0 40px;border-top:1px solid var(--borde)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.redes{display:flex;gap:10px}
.redes a{width:44px;height:44px;border-radius:14px;background:var(--card);box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;color:var(--hoja)}
footer small{color:var(--muted);font-weight:600}
footer .tel{font-weight:800;color:var(--hoja)}

/* ---------- Hojas (carrito, kit, entrega) ---------- */
.velo{position:fixed;inset:0;z-index:60;background:rgba(10,30,15,.38);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.velo.ver{opacity:1;pointer-events:auto}
.hoja{position:fixed;z-index:61;left:50%;bottom:0;width:min(560px,100%);max-height:92vh;max-height:92dvh;background:var(--crema);border-radius:30px 30px 0 0;transform:translate(-50%,105%);transition:transform .45s cubic-bezier(.2,.9,.25,1);display:flex;flex-direction:column;box-shadow:0 -20px 60px rgba(0,0,0,.2)}
.hoja.ver{transform:translate(-50%,0)}
.hoja .asa{padding:10px 0 4px;display:flex;justify-content:center;cursor:grab;touch-action:none}
.hoja .asa i{width:42px;height:5px;border-radius:3px;background:rgba(var(--rgb),.18)}
.hoja .cuerpo{overflow-y:auto;padding:4px 20px 18px;overscroll-behavior:contain}
.hoja .barra{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--borde);background:var(--crema);display:flex;gap:12px;align-items:center}
.hoja .barra .btn{flex:1;height:54px}
.hoja h3{font-family:var(--serif);font-size:28px;font-weight:800;letter-spacing:-.015em;color:var(--hoja);margin:8px 46px 4px 0}
.hoja .sub{color:var(--muted);font-weight:600;font-size:14.5px;line-height:1.45}
.cerrar{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:var(--card);box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;z-index:3}
.lbl{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin:22px 0 10px}
.nota{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:16px;background:#fff4e6;color:#8a4a0a;font-weight:600;font-size:13.5px;line-height:1.45}
.nota.verde{background:var(--menta);color:var(--hoja)}
.nota svg{width:18px;height:18px;margin-top:1px}
.nota a{font-weight:800;text-decoration:underline}
.cant{display:flex;align-items:center;background:var(--card);border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--borde);height:52px}
.cant button{width:44px;height:52px;display:flex;align-items:center;justify-content:center}
.cant span{min-width:26px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.pasos-hoja{display:flex;gap:6px;margin:4px 0 10px}
.pasos-hoja i{flex:1;height:4px;border-radius:2px;background:var(--crema2)}
.pasos-hoja i.on{background:var(--verde)}

/* Armador de kits */
.huecos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.hueco{aspect-ratio:3/4;border-radius:20px;border:2px dashed rgba(var(--rgb),.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);position:relative;text-align:center;padding:8px}
.hueco.lleno{border:0;background:var(--card);box-shadow:var(--sombra);color:var(--texto)}
.hueco.lleno svg.bolsa{width:62%;animation:entra .45s cubic-bezier(.3,1.5,.5,1)}
.hueco.lleno img.foto-mini{width:72%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;animation:entra .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes entra{from{transform:scale(.4) translateY(20px);opacity:0}}
.hueco .x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--crema2);display:flex;align-items:center;justify-content:center}
.hueco .x svg{width:14px;height:14px}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.op{display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--borde);text-align:left;font-weight:700;font-size:14px}
.op .mini{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.op .mini svg{width:24px}
.op .mini img{width:100%;height:100%;object-fit:cover}
.op .cnt{margin-left:auto;min-width:22px;height:22px;border-radius:11px;background:var(--verde);color:#fff;font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 6px}
.op.on{box-shadow:inset 0 0 0 2px var(--verde)}
.op.on .cnt{display:flex}
.resumen-kit{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border-radius:18px;background:var(--menta);font-weight:700;color:var(--hoja);font-size:14px}

/* Carrito */
.linea{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--borde)}
.linea .mini{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.linea .mini svg{width:36px}
.linea .mini img{width:100%;height:100%;object-fit:cover}
.linea .t{flex:1;min-width:0}
.linea .t b{display:block;font-weight:800;font-size:15px}
.linea .t span{display:block;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linea .t em{font-style:normal;font-weight:800;font-size:14.5px;margin-top:3px;display:block}
.linea .cant{height:38px;border-radius:12px}
.linea .cant button{width:32px;height:38px}
.linea .cant svg{width:16px;height:16px}
.totales{margin-top:14px;display:grid;gap:8px;font-weight:700;font-size:14.5px}
.totales div{display:flex;justify-content:space-between;gap:10px}
.totales .gris{color:var(--muted)}
.totales .total{font-size:20px;font-weight:800;padding-top:8px;border-top:1px solid var(--borde)}
.carrito-vacio,.listo{text-align:center;padding:30px 10px 10px}
.carrito-vacio .ic,.listo .ic{width:72px;height:72px;border-radius:22px;background:var(--menta);color:var(--verde);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.listo .ic{animation:entra .5s cubic-bezier(.3,1.5,.5,1)}
.listo .ic svg{width:34px;height:34px}
.carrito-vacio b,.listo b.t{display:block;font-family:var(--serif);font-size:24px;font-weight:800;color:var(--hoja)}
.carrito-vacio p,.listo p{color:var(--muted);font-weight:600;margin:6px auto 0;line-height:1.5;max-width:360px}
.codigo{display:inline-block;margin-top:12px;font-weight:800;letter-spacing:.08em;padding:8px 14px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--borde)}

/* Formularios */
.campo{margin-top:14px}
.campo label{display:block;font-size:13.5px;font-weight:800;margin-bottom:7px}
.campo .ayuda{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:6px}
.entrada{width:100%;height:52px;border-radius:15px;border:1.5px solid var(--borde2);background:var(--card);padding:0 15px;font-size:16px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s}
textarea.entrada{height:auto;min-height:84px;padding:13px 15px;resize:vertical;line-height:1.45}
.entrada:focus{border-color:var(--verde);box-shadow:0 0 0 4px rgba(var(--rgb),.13)}
.entrada[aria-invalid="true"]{border-color:#b4322b;box-shadow:0 0 0 4px rgba(180,50,43,.1)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.marcar{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:700;font-size:14px;cursor:pointer}
.marcar input{width:20px;height:20px;accent-color:var(--verde)}
.error{display:none;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:14px;background:#fdecea;color:#8c1f1a;font-size:14px;font-weight:600;line-height:1.45}
.error.ver{display:flex}
.error svg{width:18px;height:18px;margin-top:1px}

/* Aviso corto */
.aviso{position:fixed;left:50%;bottom:calc(var(--tab) + 18px + env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,30px);opacity:0;display:flex;align-items:center;gap:10px;background:var(--hoja);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14.5px;box-shadow:0 14px 34px rgba(var(--rgb),.35);transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .25s;pointer-events:none;max-width:calc(100% - 28px)}
.aviso.ver{transform:translate(-50%,0);opacity:1}
body.con-hoja .aviso{bottom:auto;top:calc(14px + env(safe-area-inset-top))}
.aviso .ok{width:24px;height:24px;border-radius:50%;background:var(--verde2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aviso .ok svg{width:14px;height:14px;stroke-width:3}

/* Pestañas (teléfono) */
.tabs{display:none}
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rev.ver{opacity:1;transform:none}

@media (max-width:1000px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
  :root{--tab:76px}
  body.sin-tabs{--tab:0px}
  .links,.btn-panel{display:none!important}
  .nav .marca{margin-right:auto}
  .marca b{font-size:20px}
  .wrap{padding:0 14px}
  section{padding-top:42px}
  .cab{margin-bottom:16px;align-items:center}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .prod{border-radius:20px;padding:8px}
  .prod .info{padding:10px 4px 2px}
  .prod .nom{font-size:15px}
  .prod .ing{font-size:12px}
  .prod .pie b{font-size:15.5px}
  .fav{top:14px;right:14px;width:32px;height:32px}
  .fav svg{width:17px;height:17px}
  .etq-envio{left:14px;top:14px;font-size:10px;padding:4px 8px}
  .mas{width:36px;height:36px;border-radius:12px}
  .kits{grid-template-columns:1fr}
  .kit{min-height:230px;padding:22px}
  .kit h3{font-size:28px}
  .kit .trio{bottom:18px;right:14px}
  .kit .trio svg{width:56px;margin-left:-22px}
  .kit .trio svg:nth-child(2){width:66px}
  .kit .trio img{width:56px;height:70px;margin-left:-20px;border-radius:13px}
  .kit .trio img:nth-child(2){width:64px;height:80px}
  .dos{grid-template-columns:1fr}
  .tabs{display:flex;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:45;height:62px;border-radius:22px;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 8px 28px rgba(var(--rgb),.16),inset 0 0 0 1px rgba(var(--rgb),.07)}
  body.sin-tabs .tabs{display:none}
  .tabs a,.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted);position:relative;transition:color .2s}
  .tabs .on{color:var(--hoja)}
  .tabs .on::before{content:"";position:absolute;top:7px;width:44px;height:30px;border-radius:12px;background:var(--menta);z-index:-1}
  .tabs .badge{top:4px;right:calc(50% - 22px)}
  footer{padding-bottom:20px}
}
@media (min-width:761px){
  .hoja{bottom:auto;top:50%;border-radius:30px;transform:translate(-50%,-45%) scale(.96);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.25,1),opacity .25s;max-height:88vh}
  .hoja.ver{transform:translate(-50%,-50%) scale(1);opacity:1}
  .hoja .asa{visibility:hidden}
  .hoja .barra{border-radius:0 0 30px 30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
}

.prod-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.prod .fav,.prod .mas{z-index:3}
.btn-texto{margin-bottom:6px}

.hoja .barra.dos{flex-direction:column;align-items:stretch;gap:8px}
.hoja .barra.dos .btn{flex:none;width:100%;height:52px}
.formas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.formas > div{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--borde);font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.4}
.formas b{display:block;font-size:14px;color:var(--texto);margin-bottom:2px}
.formas .ic{width:32px;height:32px;border-radius:10px;background:var(--menta);color:var(--verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.formas .ic svg{width:17px;height:17px}
.sin-cuenta{margin-top:10px;font-size:13px;font-weight:700;color:var(--verde);text-align:center}
.error a{font-weight:800;text-decoration:underline}
@media (max-width:420px){.formas{grid-template-columns:1fr}}

/* ---------- Tarjetas de kit (con foto) ---------- */
.kits-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.kitc{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:30px;overflow:hidden;box-shadow:var(--sombra);transition:transform .35s cubic-bezier(.3,.7,.4,1),box-shadow .35s}
.kitc:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(var(--rgb),.16)}
.kc-foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,var(--menta),var(--crema2))}
.kc-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.kitc:hover .kc-foto > img{transform:scale(1.05)}
.kc-foto::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.18));pointer-events:none}
.kc-collage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:20px}
.kc-collage > span{width:28%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(var(--rgb),.16)}
.kc-collage > span:nth-child(2){width:32%;transform:translateY(-8px)}
.kc-collage img{width:100%;height:100%;object-fit:cover}
.kc-collage svg.bolsa{width:70%}
.kc-etq{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--hoja);font-weight:800;font-size:12.5px;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.kc-ahorro{position:absolute;right:16px;top:16px;z-index:2;height:34px;padding:0 13px;border-radius:999px;background:var(--naranja);color:#fff;font-weight:800;font-size:12.5px;display:inline-flex;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.14);transform:rotate(3deg)}
.kc-cuerpo{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.kc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kc-top b{font-family:var(--serif);font-size:28px;font-weight:800;letter-spacing:-.015em;color:var(--hoja);line-height:1.05}
.kc-n{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--verde);background:var(--menta);padding:5px 10px;border-radius:999px}
.kc-desc{color:var(--texto2);font-weight:600;font-size:15px;line-height:1.5}
.kc-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;flex-wrap:wrap}
.kc-precio{display:flex;align-items:baseline;gap:8px}
.kc-precio b{font-size:32px;font-weight:800;letter-spacing:-.03em}
.kc-precio s{font-weight:700;color:var(--muted)}
.kc-btn{height:48px;padding:0 18px}
.observa{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:16px 18px;border-radius:20px;background:var(--durazno);color:var(--texto2);font-weight:600;font-size:14.5px;line-height:1.5;box-shadow:inset 0 0 0 1.5px rgba(var(--rgb),.08)}
.observa b{color:var(--hoja)}
.observa .ic{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--naranja-osc);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- Taza ---------- */
.taza .vapor path{stroke-dasharray:26;animation:vapor 3.4s ease-in-out infinite;opacity:0}
.taza .vapor path:nth-child(2){animation-delay:.9s}
.taza .vapor path:nth-child(3){animation-delay:1.8s}
@keyframes vapor{0%{stroke-dashoffset:26;opacity:0;transform:translateY(6px)}35%{opacity:.9}100%{stroke-dashoffset:-26;opacity:0;transform:translateY(-6px)}}

/* ---------- Navidad ---------- */
#nieve{position:fixed;inset:0;pointer-events:none;z-index:39;overflow:hidden}
#nieve i{position:absolute;top:-12px;width:var(--t);height:var(--t);border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 1px rgba(var(--rgb),.4);opacity:.85;animation:nieve linear infinite}
@keyframes nieve{to{transform:translate3d(30px,105vh,0)}}

@media (max-width:760px){
  .kc-top b{font-size:24px}
  .kc-cuerpo{padding:16px 18px 18px}
  .kc-precio b{font-size:28px}
  .kc-btn{width:100%}
}

.pie-emp{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--hoja)}
.pie-emp svg{width:18px;height:18px}