/* =========================================================
   Fruti Beach · landing / carta
   Paleta tomada del logo y los flyers de la marca
   ========================================================= */

:root{
  --fucsia:#E5197F;
  --fucsia-osc:#BF0A64;
  --fucsia-claro:#FF67AC;
  --morado:#6B2C91;
  --morado-osc:#4E1D6D;
  --rosa:#FFBFDC;
  --rosa-suave:#FFDCEC;
  --crema:#FFEFF6;
  --tinta:#3E1129;
  --tinta-suave:#7A5468;
  --blanco:#fff;
  --ok:#12925A;

  --r-s:12px;
  --r-m:20px;
  --r-l:28px;
  --r-xl:36px;

  --sombra:0 10px 30px rgba(191,10,100,.10);
  --sombra-fuerte:0 18px 46px rgba(191,10,100,.20);
  --borde:1px solid rgba(229,25,127,.14);

  --max:1140px;
  --gap:clamp(16px, 3vw, 28px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth; scroll-padding-top:78px; -webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--tinta);
  background:var(--crema);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Baloo 2", "Nunito", sans-serif; line-height:1.08; margin:0; letter-spacing:-.01em}
h1 em, h2 em{font-family:"Pacifico", cursive; font-style:normal; color:var(--fucsia); letter-spacing:0}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}

.skip{position:absolute; left:-9999px; top:0; background:var(--fucsia); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--morado); outline-offset:2px; border-radius:6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; text-decoration:none;
  font-family:"Baloo 2", sans-serif; font-weight:700; font-size:1rem;
  padding:12px 22px; border-radius:999px;
  background:var(--rosa-suave); color:var(--fucsia-osc);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(135deg, var(--fucsia) 0%, var(--fucsia-osc) 100%);
  color:#fff; box-shadow:0 8px 20px rgba(191,10,100,.30);
}
.btn-primary:hover{box-shadow:0 12px 26px rgba(191,10,100,.38)}
.btn-morado{background:linear-gradient(135deg,#8A3CB8,var(--morado-osc)); color:#fff; box-shadow:0 8px 20px rgba(78,29,109,.28)}
.btn-ghost{background:#fff; color:var(--fucsia-osc); box-shadow:var(--sombra); border:var(--borde)}
.btn-wa{background:#25D366; color:#0b2e19; box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn-wa .ico{width:20px; height:20px; fill:currentColor; flex:none}
.btn-lg{padding:15px 30px; font-size:1.1rem}
.btn-sm{padding:9px 16px; font-size:.95rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(229,25,127,.12);
}
.topbar-in{
  max-width:var(--max); margin:0 auto; padding:8px clamp(14px,4vw,28px);
  display:flex; align-items:center; gap:12px;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.12rem; color:var(--fucsia-osc)}
.brand img{width:42px; height:42px; border-radius:50%; box-shadow:0 3px 10px rgba(191,10,100,.22)}
.brand-txt{white-space:nowrap}
@media (max-width:440px){ .brand-txt{display:none} }
.estado{
  flex:none; font-size:.78rem; font-weight:800; padding:5px 11px; border-radius:999px;
  background:#E9F8F0; color:var(--ok); white-space:nowrap;
}
.estado.cerrado{background:var(--rosa-suave); color:var(--fucsia-osc)}
.topnav{display:none; margin-left:auto; gap:22px; font-weight:700}
.topnav a{text-decoration:none; color:var(--tinta-suave)}
.topnav a:hover{color:var(--fucsia)}
.topbar .btn-wa{margin-left:auto}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, #FFD1E5 0%, rgba(255,209,229,0) 60%),
    radial-gradient(90% 80% at 100% 20%, #FFC0DE 0%, rgba(255,192,222,0) 65%),
    linear-gradient(180deg, #FFE6F1 0%, var(--crema) 100%);
  padding:clamp(28px,6vw,64px) clamp(14px,4vw,28px) clamp(40px,7vw,80px);
}
.hero::before,.hero::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(255,103,172,.35), rgba(255,103,172,0) 70%);
}
.hero::before{width:340px; height:340px; top:-90px; right:-70px}
.hero::after{width:260px; height:260px; bottom:-110px; left:-80px; background:radial-gradient(circle at 30% 30%, rgba(138,60,184,.22), rgba(138,60,184,0) 70%)}
.hero-in{position:relative; max-width:var(--max); margin:0 auto; display:grid; gap:clamp(22px,4vw,40px)}
.eyebrow{
  display:inline-block; font-weight:800; font-size:.9rem; color:var(--fucsia-osc);
  background:#fff; padding:7px 15px; border-radius:999px; box-shadow:var(--sombra); margin-bottom:14px;
}
.hero h1{font-size:clamp(2.15rem, 8.5vw, 3.9rem); font-weight:800; color:var(--tinta)}
.hero h1 em{display:inline-block; font-size:.72em; margin-top:.12em; color:var(--fucsia)}
.lead{margin-top:16px; font-size:clamp(1rem,3.4vw,1.18rem); color:var(--tinta-suave); max-width:34ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.hero-chips li{
  background:#fff; border:var(--borde); border-radius:999px;
  padding:9px 16px; font-size:.92rem; font-weight:600; box-shadow:0 4px 14px rgba(191,10,100,.07);
}
.hero-chips b{color:var(--fucsia-osc)}

.hero-img{margin:0; position:relative; display:flex; justify-content:center; align-items:flex-end; padding-bottom:18px}
.hero-img img{
  width:min(78%, 380px); border-radius:var(--r-xl);
  box-shadow:var(--sombra-fuerte); rotate:-2deg;
}
.hero-img-2{
  width:min(38%, 175px) !important; position:absolute; right:2%; bottom:0;
  rotate:5deg !important; border:5px solid #fff;
}

/* ---------- Secciones ---------- */
.section{max-width:var(--max); margin:0 auto; padding:clamp(44px,8vw,84px) clamp(14px,4vw,28px)}
.section-alt{
  max-width:none;
  background:linear-gradient(180deg, #FFDDEC 0%, #FFCCE2 100%);
  border-top:1px solid rgba(229,25,127,.16);
  border-bottom:1px solid rgba(229,25,127,.16);
}
.section-alt > *{max-width:var(--max); margin-inline:auto}
.sec-head{text-align:center; margin-bottom:clamp(26px,5vw,44px)}
.kicker{
  font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem;
  color:var(--morado); margin-bottom:10px;
}
.sec-head h2{font-size:clamp(1.85rem,6.4vw,2.9rem); font-weight:800}
.sec-head h2 em{display:inline-block; font-size:.88em}
.sec-sub{margin:14px auto 0; color:var(--tinta-suave); max-width:56ch; font-size:clamp(.98rem,2.9vw,1.06rem)}

/* ---------- Tarjetas de producto ---------- */
.cards{display:grid; gap:var(--gap)}
.card{
  background:#fff; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sombra); border:var(--borde);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sombra-fuerte)}
.card-img{position:relative; margin:0; background:linear-gradient(160deg,#FFE3EF,#FFD0E4); aspect-ratio:16/11; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.card-badge{
  position:absolute; top:14px; left:14px; background:#fff; color:var(--fucsia-osc);
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:.82rem;
  padding:6px 14px; border-radius:999px; box-shadow:var(--sombra);
}
.card-body{padding:clamp(20px,4vw,28px); display:flex; flex-direction:column; flex:1; gap:16px}
.card-body h3{font-size:clamp(1.5rem,5vw,2rem); font-weight:800}
.card-desc{color:var(--tinta-suave); font-size:.98rem}
.prices{display:flex; flex-wrap:wrap; gap:10px}
.price{
  flex:1 1 130px; text-align:center; border-radius:var(--r-m); padding:12px 10px;
  background:var(--rosa-suave); border:1px solid rgba(229,25,127,.16);
}
.price:nth-child(2){background:#EEDDFA; border-color:rgba(107,44,145,.24)}
.price b{display:block; font-family:"Baloo 2",sans-serif; font-size:1.5rem; font-weight:800; color:var(--fucsia-osc); line-height:1.1}
.price:nth-child(2) b{color:var(--morado)}
.price span{display:block; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tinta-suave); margin-top:2px}
.price i{display:block; font-style:normal; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.15rem; margin-top:4px; color:var(--tinta)}
.incluye{background:var(--crema); border-radius:var(--r-m); padding:16px 18px; border:var(--borde)}
.incluye h4{margin:0 0 8px; font-family:"Baloo 2",sans-serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fucsia)}
.incluye li{position:relative; padding-left:22px; font-size:.95rem; margin-bottom:4px}
.incluye li::before{content:"♥"; position:absolute; left:0; color:var(--fucsia-claro)}
.incluye li small{color:var(--tinta-suave)}
.card .btn{margin-top:auto}
.extra-nota{font-size:.86rem; color:var(--tinta-suave); text-align:center}

/* ---------- Caja ---------- */
.box-wrap{display:grid; gap:var(--gap)}
.box-img{margin:0; position:relative}
.box-img img{border-radius:var(--r-xl); box-shadow:var(--sombra-fuerte); width:100%}
.box-img figcaption{
  background:#fff; border-radius:var(--r-m); box-shadow:var(--sombra);
  padding:14px 18px; margin:-30px 16px 0; position:relative; text-align:center; border:var(--borde);
}
.box-img figcaption span{display:block; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--fucsia)}
.box-img figcaption b{font-family:"Baloo 2",sans-serif; font-size:1.02rem}
.box-steps{display:grid; gap:14px; align-content:start}
.step{background:#fff; border-radius:var(--r-l); padding:18px 20px; box-shadow:var(--sombra); border:var(--borde)}
.step-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.step-n{
  width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--fucsia),var(--fucsia-osc)); color:#fff;
  font-family:"Baloo 2",sans-serif; font-weight:800;
}
.step-head h3{font-size:1.1rem; font-weight:800}
.step-head small{display:block; font-family:"Nunito",sans-serif; font-weight:600; font-size:.82rem; color:var(--tinta-suave)}
.step-opts{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  background:var(--rosa-suave); border:1px solid rgba(229,25,127,.16);
  border-radius:999px; padding:7px 14px; font-size:.88rem; font-weight:600;
}
.box-cta{margin-top:6px; display:grid; gap:10px; justify-items:center; text-align:center}
.box-cta p{font-size:.9rem; color:var(--tinta-suave)}

/* ---------- Sabores ---------- */
.flavors{display:grid; gap:var(--gap)}
.flavor-col{background:#fff; border-radius:var(--r-xl); padding:clamp(20px,4vw,30px); box-shadow:var(--sombra); border:var(--borde)}
.flavor-col h3{margin-bottom:16px}
.tag{
  display:inline-block; font-family:"Baloo 2",sans-serif; font-size:.86rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:7px 18px; border-radius:999px;
}
.tag-fucsia{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-osc))}
.tag-morado{background:linear-gradient(135deg,#8A3CB8,var(--morado-osc))}
.flavor-list li{position:relative; padding-left:24px; margin-bottom:8px; font-size:.97rem}
.flavor-list li::before{content:"♥"; position:absolute; left:0; top:-1px; color:var(--fucsia-claro)}
.flavor-list-2{columns:2; column-gap:20px}
.flavor-list-2 li{break-inside:avoid}
.thanks{
  text-align:center; margin-top:clamp(24px,5vw,38px);
  font-family:"Pacifico",cursive; font-size:clamp(1.15rem,4vw,1.6rem); color:var(--fucsia);
}

/* ---------- Visita ---------- */
.visit{display:grid; gap:var(--gap)}
.visit-card{
  background:#fff; border-radius:var(--r-xl); padding:clamp(22px,4vw,30px);
  box-shadow:var(--sombra); border:var(--borde); display:grid; gap:10px; align-content:start;
}
.visit-card h3{font-size:1.15rem; font-weight:800; color:var(--fucsia-osc)}
.visit-big{font-family:"Baloo 2",sans-serif; font-size:1.4rem; font-weight:800; line-height:1.2}
.visit-hours{
  font-family:"Baloo 2",sans-serif; font-size:2.1rem; font-weight:800; color:var(--morado); line-height:1;
}
.visit-note{font-size:.9rem; font-weight:700; color:var(--ok)}
.visit-note.cerrado{color:var(--fucsia-osc)}
.visit-card .btn{margin-top:6px; justify-self:start}
.link-ig{font-weight:800; color:var(--fucsia-osc); text-decoration:none; font-size:.95rem}
.link-ig:hover{text-decoration:underline}

/* ---------- Footer ---------- */
.foot{
  text-align:center; padding:44px 20px calc(120px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, var(--crema), #FFC9E0);
  display:grid; gap:6px; justify-items:center;
}
.foot img{border-radius:50%; margin-bottom:8px; box-shadow:var(--sombra)}
.foot-sm{font-size:.85rem; color:var(--tinta-suave)}
.foot a{color:var(--fucsia-osc); font-weight:700}

/* ---------- Barra carrito ---------- */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:10px clamp(12px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-top:1px solid rgba(229,25,127,.14);
  animation:up .28s ease;
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cartbar-main{
  width:100%; max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:12px; cursor:pointer; border:0;
  background:linear-gradient(135deg,var(--fucsia),var(--fucsia-osc)); color:#fff;
  border-radius:999px; padding:13px 20px; box-shadow:0 10px 24px rgba(191,10,100,.34);
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.05rem;
}
.cartbar-count{
  background:#fff; color:var(--fucsia-osc); min-width:28px; height:28px; padding:0 8px;
  border-radius:999px; display:grid; place-items:center; font-size:.92rem;
}
.cartbar-txt{flex:1; text-align:left}

/* ---------- Overlay + hoja ---------- */
.overlay{position:fixed; inset:0; background:rgba(62,17,41,.5); z-index:50; animation:fade .2s ease; backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0}to{opacity:1}}

.sheet{
  position:fixed; z-index:60; left:0; right:0; bottom:0;
  max-height:92dvh; display:flex; flex-direction:column;
  background:var(--crema); border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -12px 40px rgba(62,17,41,.28);
  animation:slide .28s cubic-bezier(.22,1,.36,1);
}
@keyframes slide{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-head{
  display:flex; align-items:center; gap:12px; padding:18px clamp(16px,4vw,26px) 14px;
  border-bottom:1px solid rgba(229,25,127,.14); background:#fff;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.sheet-head h2{font-size:1.3rem; font-weight:800; flex:1}
.sheet-close{
  width:38px; height:38px; flex:none; border:0; border-radius:50%; cursor:pointer;
  background:var(--rosa-suave); color:var(--fucsia-osc); font-size:1.6rem; line-height:1;
}
.sheet-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:clamp(16px,4vw,24px); display:grid; gap:20px}
.sheet-foot{
  padding:14px clamp(16px,4vw,26px) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(229,25,127,.14); background:#fff; display:grid; gap:10px;
}

/* grupos de opciones */
.grp-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.grp-head h3{font-size:1.08rem; font-weight:800}
.grp-head small{font-size:.84rem; color:var(--tinta-suave); font-weight:700}
.grp-head .contador{margin-left:auto; font-size:.8rem; font-weight:800; color:var(--fucsia-osc); background:var(--rosa-suave); padding:3px 10px; border-radius:999px}
.grp-head .contador.ok{background:#E9F8F0; color:var(--ok)}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{
  cursor:pointer; user-select:none; position:relative;
  background:#fff; border:1.5px solid rgba(229,25,127,.20); border-radius:999px;
  padding:9px 16px; font-size:.92rem; font-weight:600; transition:all .14s ease;
}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt:hover{border-color:var(--fucsia-claro)}
.opt.sel{background:linear-gradient(135deg,var(--fucsia),var(--fucsia-osc)); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(191,10,100,.28)}
.opt.sel .costo{color:#fff}
.opt .costo{font-size:.8rem; font-weight:800; color:var(--fucsia-osc); margin-left:5px}
.opt-size{flex:1 1 130px; text-align:center; border-radius:var(--r-m); padding:14px 12px; font-family:"Baloo 2",sans-serif; font-weight:800}
.opt-size b{display:block; font-size:1.3rem}
.opt-size span{display:block; font-size:.78rem; font-weight:700; opacity:.75; text-transform:uppercase; letter-spacing:.05em}

.campo{display:grid; gap:6px}
.campo label{font-weight:800; font-size:.92rem}
.campo input, .campo textarea{
  font:inherit; padding:12px 14px; border-radius:var(--r-s);
  border:1.5px solid rgba(229,25,127,.2); background:#fff; color:inherit; width:100%;
}
.campo textarea{min-height:70px; resize:vertical}

.qty{display:flex; align-items:center; gap:14px; justify-content:center; background:#fff; border-radius:999px; padding:6px; border:var(--borde)}
.qty button{width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:var(--rosa-suave); color:var(--fucsia-osc); font-size:1.4rem; font-weight:800; line-height:1}
.qty b{font-family:"Baloo 2",sans-serif; font-size:1.25rem; min-width:26px; text-align:center}

.resumen{display:flex; align-items:center; justify-content:space-between; font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.2rem}
.resumen span{color:var(--tinta-suave); font-size:.95rem; font-family:"Nunito",sans-serif; font-weight:700}
.aviso{font-size:.86rem; color:var(--fucsia-osc); font-weight:700; text-align:center}

/* carrito */
.ci{display:flex; gap:12px; background:#fff; border-radius:var(--r-m); padding:14px 16px; box-shadow:var(--sombra); border:var(--borde)}
.ci-info{flex:1; min-width:0}
.ci-info h4{margin:0 0 2px; font-family:"Baloo 2",sans-serif; font-size:1.05rem; font-weight:800}
.ci-info p{font-size:.85rem; color:var(--tinta-suave); word-break:break-word}
.ci-side{text-align:right; display:grid; gap:8px; justify-items:end}
.ci-side b{font-family:"Baloo 2",sans-serif; font-size:1.05rem; color:var(--fucsia-osc); white-space:nowrap}
.ci-del{border:0; background:none; cursor:pointer; color:var(--tinta-suave); font-size:.82rem; font-weight:700; text-decoration:underline}
.vacio{text-align:center; color:var(--tinta-suave); padding:30px 10px}

/* ---------- Tablet ---------- */
@media (min-width:700px){
  .hero-in{grid-template-columns:1.05fr .95fr; align-items:center}
  .hero-img img{width:min(88%,420px)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .box-wrap{grid-template-columns:.95fr 1.05fr; align-items:start; gap:clamp(24px,4vw,44px)}
  .box-img{position:sticky; top:92px}
  .flavors{grid-template-columns:1fr 1.7fr; align-items:start}
  .visit{grid-template-columns:repeat(auto-fit, minmax(290px, 1fr))}
  .sheet{
    left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
    width:min(660px, 94vw); max-height:88dvh; border-radius:var(--r-xl);
    animation:pop .25s cubic-bezier(.22,1,.36,1);
  }
  @keyframes pop{from{opacity:0; transform:translate(-50%,-46%) scale(.97)}to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
  .sheet-foot{border-radius:0 0 var(--r-xl) var(--r-xl)}
  .cartbar-main{max-width:520px}
}

/* ---------- Desktop ---------- */
@media (min-width:960px){
  .topnav{display:flex}
  .topbar .btn-wa{margin-left:0}
  .flavor-list-2{columns:3}
  .hero h1{font-size:clamp(2.8rem,4.4vw,4rem)}
}

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