/* Postres en Vaso para Vender — página de ventas (pensada para celular) */
@font-face{font-family:'Titan One';src:url('fonts/titan-one.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --amarillo:#FFC629; --rosa:#E5284A; --cacao:#3B1E14; --crema:#FFF7E6; --verde:#0E8C86;
  --naranja:#F08A00; --caramelo:#B8702C; --blanco:#FFFFFF; --suave:#6E5245;
  --col:480px;
}
*{box-sizing:border-box}
html{background:#2A150E;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0 auto;max-width:var(--col);background:var(--blanco);color:var(--cacao);
  font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.5;overflow-x:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 60px rgba(0,0,0,.45);position:relative}
img,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3{font-family:'Titan One',sans-serif;font-weight:400;line-height:1;margin:0;letter-spacing:-.3px}
h2{font-size:34px}
h3{font-size:21px;line-height:1.1}
p{margin:0 0 14px}
a{color:inherit}
.cuplabel{font-family:'DM Sans',sans-serif}
.sec{position:relative;padding:54px 22px 58px}
.lead{font-size:18px;line-height:1.45;margin:14px 0 22px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* gotas de crema entre secciones */
.drip{position:absolute;left:0;right:0;top:-1px;height:16px;z-index:2;
  background-image:radial-gradient(circle at 16px 0,var(--d) 15.4px,transparent 16px);background-size:32px 16px;background-repeat:repeat-x}

/* botón */
.btn{display:block;width:100%;text-align:center;text-decoration:none;font-family:'Titan One',sans-serif;font-size:22px;line-height:1.1;
  padding:19px 18px 20px;border-radius:18px;border:3px solid var(--cacao);background:var(--rosa);color:#fff;
  box-shadow:0 7px 0 var(--cacao);transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--cacao)}
.btn:focus-visible{outline:4px solid var(--verde);outline-offset:3px}
.btn.am{background:var(--amarillo);color:var(--cacao)}
.micro{font-size:14.5px;font-weight:700;text-align:center;margin:16px 0 0}

/* aviso de configuración (solo lo ve el dueño mientras falte algo) */
#aviso{display:none;background:#111;color:#fff;font-size:13.5px;line-height:1.35;padding:10px 14px;position:relative;z-index:50}
#aviso b{color:var(--amarillo)}

/* ---------- hero ---------- */
.hero{background:var(--amarillo);padding:30px 22px 0;overflow:hidden}
.marca{font-weight:700;font-size:13.5px;margin:0 0 18px;display:flex;align-items:center;gap:8px}
.marca i{width:11px;height:11px;border-radius:50%;background:var(--rosa);border:2px solid var(--cacao);display:inline-block}
.titular{position:relative}
.hero h1{font-size:clamp(42px,12.8vw,60px);line-height:.93;text-shadow:4px 4px 0 var(--crema)}
.hero .lead{font-weight:500;margin:16px 0 0}
.escena{position:relative;height:268px;margin:14px -22px 0}
.escena .mesa{position:absolute;left:0;right:0;bottom:0;height:54px;background:var(--rosa);border-top:6px solid var(--cacao)}
.escena .vasos{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;align-items:flex-end}
.escena .v{margin:0 -9px;transform-origin:50% 100%;animation:sube .7s cubic-bezier(.2,1.5,.4,1) both,flota 3.4s ease-in-out infinite}
.escena .v:nth-child(1){animation-delay:.05s,.9s}
.escena .v:nth-child(2){animation-delay:.18s,1.4s;z-index:2}
.escena .v:nth-child(3){animation-delay:.31s,1.9s}
.sello{position:absolute;right:-6px;bottom:-4px;width:clamp(104px,30vw,136px);height:clamp(104px,30vw,136px);z-index:3;animation:pop .5s .55s cubic-bezier(.2,1.6,.4,1) both,bambolea 4s 1.2s ease-in-out infinite}
.sello svg{position:absolute;inset:0;width:100%;height:100%}
.sello div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--crema);text-align:center}
.sello b{font-family:'Titan One';font-weight:400;font-size:clamp(29px,8.4vw,38px);line-height:.95}
.sello span{font-weight:700;font-size:11.5px;margin-top:2px}
.hero-cta{background:var(--rosa);padding:6px 22px 46px}
.hero-cta .micro{color:#fff}
@keyframes sube{from{transform:translateY(60px) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-.8deg)}}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(9deg)}}
@keyframes bambolea{0%,100%{transform:rotate(9deg)}50%{transform:rotate(3deg)}}

/* cinta de sabores */
.cinta{background:var(--cacao);color:var(--crema);overflow:hidden;white-space:nowrap;padding:11px 0;font-family:'Titan One';font-size:16px}
.cinta div{display:inline-block;animation:corre 46s linear infinite;padding-left:0}
.cinta span{margin:0 14px}
.cinta span:nth-child(3n+1){color:var(--amarillo)}
.cinta span:nth-child(3n+2){color:#FF9DB0}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- sabores (interactivo) ---------- */
.sabores{background:var(--crema)}
.chips{display:flex;gap:9px;overflow-x:auto;margin:0 -22px 4px;padding:6px 22px 14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font:700 15.5px 'DM Sans',sans-serif;color:var(--cacao);background:#fff;border:2.5px solid var(--cacao);border-radius:30px;
  padding:10px 16px;box-shadow:0 4px 0 var(--cacao);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .08s}
.chip[aria-selected="true"]{background:var(--cacao);color:#fff;transform:translateY(4px);box-shadow:0 0 0 var(--cacao)}
.chip:focus-visible{outline:4px solid var(--verde);outline-offset:2px}
.ficha{background:#fff;border:3px solid var(--cacao);border-radius:22px;padding:18px 16px 16px;box-shadow:0 7px 0 var(--cacao)}
.panel{display:none}
.panel.on{display:block}
.panel h3{font-size:25px}
.panel .sub{font-size:15.5px;color:var(--suave);margin:5px 0 12px}
.panel .fila{display:flex;gap:10px;align-items:flex-start}
.panel .dib{flex:0 0 156px}
.panel ol{list-style:none;padding:0;margin:44px 0 0;font-size:14.5px;line-height:1.3;flex:1}
.panel li{display:flex;gap:7px;margin-bottom:8px;opacity:0;animation:entra .35s both}
.panel li b{flex:0 0 19px;height:19px;border-radius:50%;background:var(--cacao);color:#fff;font-size:11.5px;display:flex;align-items:center;justify-content:center}
.panel.on .cfill{animation:llena .85s cubic-bezier(.3,.9,.3,1) both}
.panel.on .ctop{transform-box:fill-box;transform-origin:50% 100%;animation:topping .45s .7s cubic-bezier(.2,1.7,.4,1) both}
.datos{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.datos span{border:2px solid var(--cacao);border-radius:20px;padding:3px 11px;font-size:13.5px}
.datos b{font-weight:700}
.nota{font-size:15px;color:var(--suave);margin:18px 0 0}
@keyframes llena{from{transform:translateY(100%)}to{transform:none}}
@keyframes topping{from{transform:scale(0) translateY(-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes entra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* ---------- qué recibes ---------- */
.recibes{background:var(--rosa);color:#fff}
.recibes h2{text-shadow:3px 3px 0 var(--cacao)}
.tarj{background:#fff;color:var(--cacao);border:3px solid var(--cacao);border-radius:20px;padding:18px 18px 16px;margin-bottom:16px;box-shadow:0 6px 0 var(--cacao);position:relative}
.tarj:nth-of-type(1){transform:rotate(-1.2deg)}
.tarj:nth-of-type(2){transform:rotate(1deg)}
.tarj:nth-of-type(3){transform:rotate(-.6deg)}
.tarj p{margin:8px 0 0;font-size:16px}
.tarj .n{position:absolute;right:-8px;top:-14px;width:44px;height:44px;border-radius:50%;background:var(--amarillo);border:3px solid var(--cacao);
  font-family:'Titan One';font-size:21px;display:flex;align-items:center;justify-content:center}
.carr-t{font-family:'Titan One';font-size:22px;margin:34px 0 4px;line-height:1.05}
.carr-s{font-size:14.5px;font-weight:500;margin:0 0 12px;opacity:.95}
.carr{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;padding:6px 22px 16px;scrollbar-width:none}
.carr::-webkit-scrollbar{display:none}
.carr figure{flex:0 0 72%;margin:0;scroll-snap-align:center}
.carr img{width:100%;height:auto;border:3px solid var(--cacao);border-radius:12px;background:#fff;box-shadow:0 6px 0 var(--cacao)}
.carr figcaption{font-size:14px;font-weight:700;margin-top:14px}

/* ---------- lista de recetas ---------- */
.lista h2 span{display:block}
details{border:3px solid var(--cacao);border-radius:18px;margin-bottom:12px;overflow:hidden;background:#fff}
summary{list-style:none;cursor:pointer;padding:15px 16px;font-family:'Titan One';font-size:19px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';font-size:26px;line-height:.6;flex:0 0 auto}
details[open] summary:after{content:'–'}
summary:focus-visible{outline:4px solid var(--verde);outline-offset:-4px}
details ul{list-style:none;margin:0;padding:10px 16px 14px;font-size:16.5px}
details li{padding:6px 0;border-bottom:1.5px dashed #E3D5CB;display:flex;gap:10px}
details li:last-child{border:0}
details li b{flex:0 0 26px;font-family:'Titan One';font-weight:400;color:var(--suave)}
.faq summary{color:var(--cacao);font-family:'DM Sans';font-weight:700;font-size:17px;line-height:1.25}
.faq details p{padding:0 16px 16px;margin:0;font-size:16px}

/* ---------- planilla ---------- */
.planilla{background:var(--verde);color:#fff}
.planilla h2{text-shadow:3px 3px 0 var(--cacao)}
.captura{border:3px solid var(--cacao);border-radius:14px;overflow:hidden;box-shadow:0 7px 0 var(--cacao);background:#fff;transform:rotate(-1.4deg);margin:6px 0 30px}
.pasos3{list-style:none;padding:0;margin:0;counter-reset:p}
.pasos3 li{counter-increment:p;position:relative;padding:0 0 16px 50px;font-size:16.5px}
.pasos3 li:before{content:counter(p);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--amarillo);color:var(--cacao);
  border:3px solid var(--cacao);font-family:'Titan One';font-size:18px;display:flex;align-items:center;justify-content:center}
.pasos3 b{font-weight:700}

/* ---------- para quién ---------- */
.si,.no{border:3px solid var(--cacao);border-radius:20px;padding:18px 18px 8px;margin-bottom:16px}
.si{background:#E4F6E9}
.no{background:#FDE3E8}
.si ul,.no ul{list-style:none;padding:0;margin:12px 0 0;font-size:16.5px}
.si li,.no li{position:relative;padding:0 0 12px 32px}
.si li:before,.no li:before{position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--cacao);font:700 13px/17px 'DM Sans';text-align:center}
.si li:before{content:'✓';background:#7CC36B}
.no li:before{content:'×';background:#FF9DB0;font-size:16px}
.claro{background:var(--cacao);color:var(--crema);border-radius:20px;padding:20px 18px 8px;margin-top:22px}
.claro h3{color:var(--amarillo)}
.claro p{font-size:16.5px;margin-top:10px}

/* ---------- compra ---------- */
.compra{background:var(--amarillo)}
.garantia{display:flex;gap:14px;align-items:center;background:#fff;border:3px solid var(--cacao);border-radius:20px;padding:16px;margin-top:26px;box-shadow:0 6px 0 var(--cacao)}
.garantia .g{flex:0 0 78px;height:78px;position:relative}
.garantia .g svg{position:absolute;inset:0}
.garantia .g b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Titan One';font-weight:400;font-size:30px;color:#fff}
.garantia p{margin:6px 0 0;font-size:15.5px}

/* ---------- cierre ---------- */
.cierre{background:var(--rosa);color:#fff;text-align:center;padding-bottom:70px}
.cierre h2{font-size:38px;text-shadow:3px 3px 0 var(--cacao)}
.precio{font-family:'Titan One';font-size:78px;line-height:1;margin:22px 0 2px;text-shadow:5px 5px 0 var(--cacao)}
.cierre .lead{margin-bottom:6px}
.cierre .micro{color:#fff}
.mini{display:flex;justify-content:center;align-items:flex-end;margin:26px 0 -6px}
.mini>div{margin:0 -4px}

footer{background:var(--cacao);color:#D9C8BC;font-size:13.5px;line-height:1.5;padding:30px 22px 120px;position:relative}
footer strong{color:var(--crema);font-family:'Titan One';font-weight:400;font-size:17px;display:block;margin-bottom:8px}
footer a{color:var(--amarillo)}
footer p{margin:0 0 10px}

/* barra fija */
.fija{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:min(100%,var(--col));z-index:40;background:var(--crema);border-top:3px solid var(--cacao);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;transition:transform .25s}
.fija.on{transform:translate(-50%,0)}
.fija div{font-size:13px;line-height:1.15;font-weight:700}
.fija div b{display:block;font-family:'Titan One';font-weight:400;font-size:25px}
.fija .btn{flex:1;font-size:19px;padding:13px 10px 14px;box-shadow:0 5px 0 var(--cacao)}

/* página legal */
.legal{padding:34px 22px 60px}
.legal h1{font-size:34px;margin-bottom:18px}
.legal h2{font-size:21px;margin:26px 0 8px}
.legal p,.legal li{font-size:16px}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .panel li{opacity:1}
}