/* NutriHabits by Vale — pastel, kid-friendly, parent-trustworthy */
:root{
  --cream:#FFF9F1; --surface:#FFFFFF; --ink:#1F2A4D; --ink-2:#5B6585; --line:#EADFCF;
  --pink:#F9C9D6; --pink-d:#E98AA6; --blue:#BFE0F5; --blue-d:#6FB3DE; --mint:#C6EBC9; --mint-d:#6CC27B;
  --yellow:#FCE38A; --yellow-d:#F2C230; --lilac:#D9CCF5; --lilac-d:#9C85DA; --tangerine:#F59B6B;
  --radius:28px; --radius-sm:16px;
  --shadow:0 10px 30px -12px rgba(31,42,77,.22);
  --font-display:"Fraunces", ui-serif, serif; --font-body:"Nunito", ui-rounded, system-ui, sans-serif; --font-hand:"Caveat", cursive;
  --gap:clamp(4rem, 9vw, 7rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;font-variation-settings:"SOFT" 100,"WONK" 1}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
h3{font-size:clamp(1.3rem,2vw,1.6rem)}
p{margin:0 0 1em}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--lilac-d);outline-offset:3px;border-radius:6px}

/* ---------- type helpers ---------- */
.eyebrow{font-family:var(--font-body);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:22px;height:10px;border-radius:10px;background:var(--pink-d)}
.hl{position:relative;white-space:nowrap;z-index:0;font-style:italic}
.hl::after{content:"";position:absolute;left:-.12em;right:-.12em;bottom:.06em;height:.52em;background:var(--yellow);border-radius:.3em .5em .4em .6em;z-index:-1;transform:rotate(-1.5deg) scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1) .2s}
.hl.pink::after{background:var(--pink)} .hl.mint::after{background:var(--mint)} .hl.blue::after{background:var(--blue)} .hl.lilac::after{background:var(--lilac)}
.in .hl::after,.hl.in::after,.no-js .hl::after{transform:rotate(-1.5deg) scaleX(1)}
.lead{font-size:1.18rem;color:var(--ink-2);max-width:56ch}
.hand{font-family:var(--font-hand);font-size:1.7rem;line-height:1;color:var(--ink)}
.muted{color:var(--ink-2)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.5rem;border-radius:999px;font-weight:800;font-size:1rem;text-decoration:none;border:2px solid var(--ink);cursor:pointer;font-family:var(--font-body);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s;box-shadow:0 4px 0 var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-primary{background:var(--ink);color:var(--cream);box-shadow:0 4px 0 var(--lilac-d)}
.btn-primary:hover{box-shadow:0 6px 0 var(--lilac-d)} .btn-primary:active{box-shadow:0 1px 0 var(--lilac-d)}
.btn-ghost{background:var(--surface);color:var(--ink)}
.btn-wa{background:var(--mint);color:var(--ink)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn svg{width:20px;height:20px}
.btn-sm{min-height:42px;padding:.55rem 1.1rem;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,249,241,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-color:var(--line)}
.header-row{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand-mark{width:44px;height:44px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-display);font-size:1.32rem;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1}
.brand-name em{font-family:var(--font-hand);font-style:normal;font-weight:600;color:var(--pink-d);font-size:1.35em}
.brand-sub{font-size:.78rem;color:var(--ink-2);font-weight:700;letter-spacing:.04em}
.main-nav{display:flex;gap:.3rem}
.main-nav a{text-decoration:none;font-weight:700;padding:.5rem .85rem;border-radius:999px;transition:background .2s}
.main-nav a:hover{background:var(--surface)}
.main-nav a[aria-current="page"]{background:var(--yellow)}
.menu-toggle{display:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{width:20px;height:2.5px;background:var(--ink);border-radius:3px;transition:transform .3s}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{margin-bottom:.45em}
.hero .lead{margin-bottom:2rem}
.trust{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:2rem;font-weight:700;font-size:.95rem;color:var(--ink-2)}
.trust span{display:inline-flex;align-items:center;gap:.45rem}
.trust i{width:12px;height:12px;border-radius:50%;display:inline-block}
.hero-art{position:relative;justify-self:center;width:min(440px,100%)}
.arch{position:relative;border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;aspect-ratio:4/5.2;background:var(--blue);z-index:1}
.arch img{width:100%;height:100%;object-fit:cover}
.arch-ring{position:absolute;inset:-14px -14px 14px 14px;border-radius:999px 999px var(--radius) var(--radius);background:var(--pink);z-index:0}
.arch-ring.mint{background:var(--mint)} .arch-ring.blue{background:var(--blue)} .arch-ring.lilac{background:var(--lilac)} .arch-ring.yellow{background:var(--yellow)}
.sticker{position:absolute;z-index:3;width:84px;height:84px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.sticker svg{width:56%;height:56%}
.sticker.s1{top:12%;left:-34px}
.sticker.s2{top:44%;right:-30px;animation-delay:-2s;width:72px;height:72px}
.sticker.s3{bottom:22%;left:-26px;animation-delay:-4s;width:64px;height:64px}
.badge-spin{position:absolute;z-index:4;right:-22px;bottom:-26px;width:132px;height:132px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:var(--shadow)}
.badge-spin svg.ring{position:absolute;inset:0;animation:spin 18s linear infinite}
.badge-spin text{font:800 11.5px var(--font-body);letter-spacing:.2em;fill:var(--ink);text-transform:uppercase}
.badge-spin .cam{width:40px;height:40px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* page hero (subpages) */
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
.page-hero .hero-grid{grid-template-columns:1.15fr .85fr}
.page-hero .hero-art{width:min(380px,100%)}

/* ---------- marquee ---------- */
.band{background:var(--ink);color:var(--cream);padding:1.15rem 0;overflow:hidden;transform:rotate(-1.2deg);margin:0 -2rem;position:relative;z-index:2}
.band-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.band-track span{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;padding:0 1.2rem;display:inline-flex;align-items:center;gap:2.4rem;white-space:nowrap;font-variation-settings:"SOFT" 100,"WONK" 1}
.band-track svg{width:26px;height:26px;flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:var(--gap) 0;position:relative}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-head h2{margin:0}
.section-head p{margin:0;color:var(--ink-2);max-width:46ch;justify-self:end}
.bg-mint{background:var(--mint)} .bg-pink{background:var(--pink)} .bg-blue{background:var(--blue)} .bg-lilac{background:var(--lilac)} .bg-yellow{background:var(--yellow)} .bg-white{background:var(--surface)}
.blob-top{border-radius:clamp(36px,6vw,72px) clamp(36px,6vw,72px) 0 0}
.rounded-block{border-radius:clamp(28px,5vw,56px);margin-inline:clamp(.6rem,2vw,1.5rem)}

/* worries: tilted stickers */
.worries{display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:auto auto;gap:1.2rem}
.worry-photo{grid-row:span 2;border-radius:var(--radius);overflow:hidden;position:relative;min-height:420px}
.worry-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.worry-photo .note{position:absolute;left:1rem;right:1rem;bottom:1rem;background:var(--surface);border-radius:var(--radius-sm);padding:.9rem 1.1rem;font-weight:700;font-size:.98rem;box-shadow:var(--shadow)}
.worry{border-radius:var(--radius);padding:1.6rem 1.6rem 1.3rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;transition:transform .45s cubic-bezier(.3,1.5,.5,1);min-height:190px}
.worry:nth-child(2){transform:rotate(-1.6deg)} .worry:nth-child(3){transform:rotate(1.4deg)} .worry:nth-child(4){transform:rotate(1.2deg)} .worry:nth-child(5){transform:rotate(-1.8deg)}
.worry:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
.worry q{font-family:var(--font-display);font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.2;quotes:"“" "”";font-variation-settings:"SOFT" 100}
.worry small{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.worries-foot{margin-top:2rem;font-weight:700}
.worries-foot a{color:var(--ink);text-decoration-color:var(--pink-d);text-decoration-thickness:3px;text-underline-offset:4px}

/* approach: plate + steps */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.plate{position:relative;aspect-ratio:1;max-width:460px;justify-self:center;width:100%}
.plate-ring{position:absolute;inset:0;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 18px rgba(255,255,255,.7)}
.plate img{position:absolute;inset:9%;width:82%;height:82%;object-fit:cover;border-radius:50%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.plate:hover img{transform:rotate(12deg) scale(1.02)}
.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.4rem}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:1rem;align-items:start}
.steps .num{width:52px;height:52px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--font-display);font-size:1.3rem;font-weight:600;border:2px solid var(--ink)}
.steps h3{margin:.2rem 0 .25rem;font-size:1.25rem}
.steps p{margin:0;color:var(--ink-2)}

/* services / topics bento */
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.topic{border-radius:var(--radius);padding:1.5rem;background:var(--surface);border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s;position:relative;overflow:hidden}
.topic:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 10px 0 var(--ink)}
.topic.wide{grid-column:span 2}
.topic .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:1rem}
.topic .ico svg{width:32px;height:32px}
.topic h3{font-size:1.2rem;margin-bottom:.35rem}
.topic p{margin:0;color:var(--ink-2);font-size:.98rem}

/* pricing */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:stretch}
.price{border-radius:var(--radius);padding:clamp(1.8rem,3vw,2.6rem);position:relative;display:flex;flex-direction:column;border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink)}
.price .tag{align-self:flex-start;background:var(--surface);border-radius:999px;padding:.35rem .85rem;font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2rem}
.price h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:.2rem}
.price .amount{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.4rem);font-weight:600;line-height:1;margin:1.2rem 0 .3rem;letter-spacing:-.03em}
.price .amount small{font-size:.32em;font-family:var(--font-body);font-weight:700;color:var(--ink-2);letter-spacing:0}
.price ul{list-style:none;padding:0;margin:1.2rem 0 1.8rem;display:grid;gap:.55rem}
.price li{display:grid;grid-template-columns:22px 1fr;gap:.6rem;align-items:start}
.price li svg{width:22px;height:22px;margin-top:2px}
.price .btn{margin-top:auto;align-self:flex-start}
.price-figure{position:absolute;right:1.4rem;top:-38px;width:92px;height:92px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;transform:rotate(8deg)}
.price-figure svg{width:54px;height:54px}

/* quiz */
.quiz-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.quiz{background:var(--surface);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow);border:2px solid var(--ink);min-height:420px;display:flex;flex-direction:column}
.quiz-progress{display:flex;gap:.4rem;margin-bottom:1.3rem}
.quiz-progress i{flex:1;height:8px;border-radius:8px;background:var(--lilac);transition:background .4s}
.quiz-progress i.done{background:var(--ink)}
.quiz-q{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.quiz h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:1.2rem}
.quiz-options{display:grid;gap:.7rem}
.quiz-opt{display:flex;align-items:center;gap:.9rem;text-align:left;width:100%;min-height:56px;padding:.8rem 1.1rem;border-radius:var(--radius-sm);border:2px solid var(--line);background:var(--cream);font:700 1rem var(--font-body);color:var(--ink);cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.quiz-opt:hover{border-color:var(--ink);transform:translateX(4px)}
.quiz-opt .dot{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:1rem}
.quiz-opt.picked{background:var(--yellow);border-color:var(--ink)}
.quiz-result{animation:pop .6s cubic-bezier(.3,1.5,.5,1)}
.quiz-result .res-ico{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin-bottom:1rem}
.quiz-result .res-ico svg{width:50px;height:50px}
.quiz-back{background:none;border:0;font:700 .95rem var(--font-body);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-top:auto;align-self:flex-start;padding:.6rem 0}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
.fade-swap{animation:pop .45s cubic-bezier(.3,1.4,.5,1)}

/* testimonials */
.tests{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.2rem;align-items:start}
.test{border-radius:var(--radius);padding:1.7rem;position:relative}
.test:nth-child(1){grid-row:span 2}
.test:nth-child(2){transform:rotate(1.4deg);margin-top:1.5rem}
.test:nth-child(3){transform:rotate(-1.2deg)}
.test:nth-child(4){transform:rotate(-.8deg)}
.test:nth-child(5){transform:rotate(1.6deg)}
.test blockquote{margin:0 0 1.2rem;font-family:var(--font-display);font-size:1.22rem;line-height:1.35;font-variation-settings:"SOFT" 100}
.test:nth-child(1) blockquote{font-size:clamp(1.4rem,2.3vw,1.9rem)}
.test .who{display:flex;align-items:center;gap:.8rem;font-weight:800;font-size:.95rem}
.test .who span{display:block;font-weight:600;color:var(--ink-2);font-size:.86rem}
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;background:var(--surface);border:2px solid var(--ink);flex:none}
.sample-tag{position:absolute;top:-12px;right:18px;background:var(--surface);border:1.5px dashed var(--ink-2);color:var(--ink-2);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px}
.stars{display:flex;gap:2px;margin-bottom:.9rem}
.stars svg{width:18px;height:18px}

/* newsletter / guide */
.guide{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.booklet{position:relative;justify-self:center;width:min(360px,90%);aspect-ratio:3/4}
.booklet .page{position:absolute;inset:0;border-radius:20px 28px 28px 20px;border:2px solid var(--ink)}
.booklet .page.p3{background:var(--mint);transform:rotate(9deg) translate(26px,8px)}
.booklet .page.p2{background:var(--blue);transform:rotate(4deg) translate(12px,4px)}
.booklet .cover{background:var(--surface);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;transform:rotate(-3deg);box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.booklet:hover .cover{transform:rotate(0) translateY(-8px)}
.cover .cover-kicker{font-weight:800;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-d)}
.cover h3{font-size:2rem;margin:0}
.cover .lunchbox-mini{margin-top:auto;border-radius:16px;background:var(--yellow);border:2px solid var(--ink);padding:.8rem;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:.45rem;aspect-ratio:1.5}
.lunchbox-mini div{border-radius:10px;background:var(--surface);display:grid;place-items:center}
.lunchbox-mini div:first-child{grid-row:span 2}
.lunchbox-mini svg{width:60%;height:60%}
.form{display:grid;gap:1rem;margin-top:1.6rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:800;font-size:.9rem}
.field input,.field select,.field textarea{font:600 1rem var(--font-body);color:var(--ink);padding:.85rem 1rem;border-radius:14px;border:2px solid var(--ink);background:var(--surface);min-height:52px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 4px var(--lilac)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--ink-2)}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--ink)}
.form-note{font-size:.86rem;color:var(--ink-2);margin:0}
.form-success{display:none;background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;font-weight:700;animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
.form.sent .form-success{display:block}
.form.sent .form-fields{display:none}
.form-fields{display:grid;gap:1rem}

/* about strip */
.about-strip{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.about-strip .hero-art{width:min(380px,100%)}

/* big CTA */
.cta-big{background:var(--ink);color:var(--cream);border-radius:clamp(32px,5vw,56px);padding:clamp(3rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden}
.cta-big h2{max-width:18ch;margin-inline:auto}
.cta-big p{color:#CBD2EA;max-width:52ch;margin:0 auto 2rem}
.cta-big .btn-row{justify-content:center}
.cta-big .btn-primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:0 4px 0 var(--pink-d)}
.cta-big .btn-wa{border-color:var(--mint)}
.cta-doodle{position:absolute;width:110px;opacity:.95;animation:float 7s ease-in-out infinite}
.cta-doodle.d1{left:5%;top:14%} .cta-doodle.d2{right:6%;bottom:12%;animation-delay:-3s} .cta-doodle.d3{right:12%;top:10%;width:70px;animation-delay:-5s}

/* steps cards (consultas) */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:flow}
.flow-card{border-radius:var(--radius);padding:1.6rem;background:var(--surface);border:2px solid var(--ink);position:relative}
.flow-card:nth-child(odd){transform:rotate(-1deg)} .flow-card:nth-child(even){transform:rotate(1deg);margin-top:1.6rem}
.flow-card .n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.3rem;margin-bottom:1rem;border:2px solid var(--ink)}
.flow-card h3{font-size:1.2rem}
.flow-card p{margin:0;color:var(--ink-2);font-size:.98rem}
.bank-box{border:2px dashed var(--ink-2);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;background:var(--cream);display:grid;gap:.25rem;font-weight:700}
.bank-box span{font-weight:600;color:var(--ink-2)}

/* faq */
.faq{display:grid;gap:.8rem;max-width:860px}
.faq details{background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:0 1.3rem;transition:background .3s}
.faq details[open]{background:var(--cream)}
.faq summary{cursor:pointer;list-style:none;font-weight:800;font-size:1.06rem;padding:1.1rem 2.2rem 1.1rem 0;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%231F2A4D' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1.2rem;color:var(--ink-2)}

/* booking mock */
.booking{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cal{background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:0 6px 0 var(--ink)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-weight:800}
.cal-head small{font-weight:700;color:var(--ink-2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;text-align:center;font-size:.9rem}
.cal-grid b{font-size:.72rem;color:var(--ink-2);letter-spacing:.08em}
.cal-grid button{aspect-ratio:1;border-radius:12px;border:0;background:var(--cream);font:700 .95rem var(--font-body);color:var(--ink-2);cursor:default}
.cal-grid button.free{background:var(--mint);color:var(--ink);cursor:pointer}
.cal-grid button.free:hover,.cal-grid button.sel{background:var(--ink);color:var(--cream)}
.cal-times{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0}
.cal-times button{border:2px solid var(--ink);background:var(--surface);border-radius:999px;padding:.45rem .9rem;font:700 .9rem var(--font-body);cursor:pointer;min-height:40px}
.cal-times button.sel{background:var(--yellow)}
.cal-foot{font-size:.85rem;color:var(--ink-2);margin:.8rem 0 0}

/* lunchbox builder */
.builder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.pantry{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.food{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.8rem .4rem;border-radius:18px;background:var(--surface);border:2px solid var(--ink);font:800 .85rem var(--font-body);color:var(--ink);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s;min-height:96px}
.food svg{width:44px;height:44px}
.food:hover{transform:translateY(-4px) rotate(-3deg)}
.food:active{transform:scale(.94)}
.food.used{opacity:.35;pointer-events:none}
.box{background:var(--yellow);border:2px solid var(--ink);border-radius:30px;padding:1rem;box-shadow:0 6px 0 var(--ink);position:relative}
.box-handle{width:110px;height:30px;border:6px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;margin:-44px auto 8px}
.box-slots{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:110px 110px;gap:.6rem}
.slot{background:var(--surface);border-radius:18px;border:2px dashed rgba(31,42,77,.35);display:grid;place-items:center;position:relative}
.slot:first-child{grid-row:span 2}
.slot svg{width:52px;height:52px;animation:drop .5s cubic-bezier(.3,1.6,.5,1)}
.slot:first-child svg{width:72px;height:72px}
.slot button{position:absolute;inset:0;background:none;border:0;cursor:pointer;border-radius:18px}
.slot .lbl{position:absolute;bottom:6px;font-size:.72rem;font-weight:800;color:var(--ink-2)}
@keyframes drop{from{transform:translateY(-30px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.meter{margin-top:1.3rem}
.meter-bar{height:16px;border-radius:16px;background:var(--surface);border:2px solid var(--ink);overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;background:var(--mint-d);transition:width .6s cubic-bezier(.3,1.3,.5,1),background .4s}
.meter-msg{font-weight:700;margin:.8rem 0 0;min-height:3.2em}
.groups{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.groups span{font-size:.78rem;font-weight:800;padding:.25rem .65rem;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);transition:all .3s}
.groups span.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* recipes */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{border:2px solid var(--ink);background:var(--surface);border-radius:999px;padding:.5rem 1.1rem;font:800 .92rem var(--font-body);cursor:pointer;min-height:44px;color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.recipe{background:var(--surface);border-radius:var(--radius);border:2px solid var(--ink);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.recipe:hover{transform:translateY(-6px) rotate(-.8deg)}
.recipe.hide{display:none}
.recipe-art{aspect-ratio:4/3;display:grid;place-items:center;position:relative}
.recipe-art svg{width:46%;height:auto}
.recipe-body{padding:1.3rem 1.4rem 1.5rem}
.recipe-body .cat{font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-d)}
.recipe-body h3{margin:.3rem 0 .5rem;font-size:1.3rem}
.recipe-body p{margin:0 0 .9rem;color:var(--ink-2);font-size:.96rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chips span{font-size:.76rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;background:var(--cream)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-list{display:grid;gap:1rem;margin-top:2rem}
.contact-item{display:grid;grid-template-columns:56px 1fr;gap:1rem;align-items:center;padding:1rem 1.2rem;background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-sm);text-decoration:none;transition:transform .25s}
a.contact-item:hover{transform:translateX(6px)}
.contact-item .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center}
.contact-item .ico svg{width:28px;height:28px}
.contact-item b{display:block}
.contact-item span{color:var(--ink-2);font-size:.95rem}
.panel{background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 6px 0 var(--ink)}

/* about page */
.values{display:grid;grid-template-columns:1.3fr 1fr;grid-auto-rows:auto;gap:1.2rem}
.value{border-radius:var(--radius);padding:1.8rem}
.value:first-child{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px}
.value h3{font-size:1.45rem}
.value p{margin:0;color:var(--ink)}
.timeline{display:grid;gap:1rem;margin-top:1.5rem}
.timeline div{display:grid;grid-template-columns:14px 1fr;gap:1rem}
.timeline i{width:14px;height:14px;border-radius:50%;margin-top:.45rem;border:2px solid var(--ink)}
.timeline b{display:block}
.timeline span{color:var(--ink-2)}
.signature{font-family:var(--font-hand);font-size:2.4rem;color:var(--pink-d);margin:.5rem 0 0;line-height:1}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4}
.gallery figure:nth-child(even){transform:translateY(2rem)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.gallery figure:hover img{transform:scale(1.06)}

/* floating whatsapp */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:.5rem;background:#25D366;color:#fff;text-decoration:none;font-weight:800;border-radius:999px;padding:.75rem 1.1rem .75rem .85rem;box-shadow:0 10px 24px -8px rgba(31,42,77,.45);transition:transform .25s}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:translateY(-3px) scale(1.03)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--cream);padding:.85rem 1.2rem;border-radius:14px;font-weight:700;z-index:70;opacity:0;pointer-events:none;transition:all .35s;max-width:min(92vw,440px);text-align:center;font-size:.95rem}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* footer */
.site-footer{background:var(--ink);color:#CBD2EA;margin-top:var(--gap);padding:clamp(3rem,6vw,4.5rem) 0 2rem;border-radius:clamp(36px,6vw,72px) clamp(36px,6vw,72px) 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.footer-grid a{display:block;text-decoration:none;padding:.3rem 0;color:#E8ECF8}
.footer-grid a:hover{color:var(--yellow)}
.footer-grid .btn{display:inline-flex;margin-top:.6rem;color:var(--ink)}
.footer-logo{font-family:var(--font-display);font-size:1.7rem;color:var(--cream);margin-bottom:.6rem}
.footer-logo em{font-family:var(--font-hand);font-style:normal;color:var(--pink)}
.footer-h{font-weight:800;color:var(--cream);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;margin-bottom:.7rem}
.footer-base{border-top:1px solid rgba(255,255,255,.14);margin-top:3rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.86rem}
.footer-base p{margin:0}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* doodles */
.doodle{position:absolute;pointer-events:none;z-index:0}
.relative{position:relative}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .main-nav{position:fixed;inset:76px 0 auto 0;flex-direction:column;background:var(--cream);padding:1rem 1.25rem 1.5rem;border-bottom:2px solid var(--ink);transform:translateY(-120%);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:-1}
  .main-nav.open{transform:none}
  .main-nav a{padding:.9rem 1rem;font-size:1.1rem}
  .menu-toggle{display:flex}
  .topics{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .tests{grid-template-columns:1fr 1fr}
  .test:nth-child(1){grid-column:span 2;grid-row:auto}
}
@media (max-width:767px){
  body{font-size:1rem}
  .header-cta{display:none}
  .hero-grid,.page-hero .hero-grid,.split,.quiz-wrap,.guide,.about-strip,.prices,.booking,.builder,.contact-grid,.values,.section-head{grid-template-columns:1fr}
  .section-head p{justify-self:start}
  .hero-art{width:min(330px,82%);margin-top:1rem}
  .sticker.s1{left:-18px} .sticker.s2{right:-16px} .sticker.s3{left:-12px}
  .badge-spin{width:104px;height:104px;right:-12px}
  .worries{grid-template-columns:1fr}
  .worry-photo{grid-row:auto;min-height:340px}
  .topics,.flow,.tests,.recipes{grid-template-columns:1fr}
  .topic.wide,.test:nth-child(1){grid-column:auto}
  .flow-card:nth-child(even){margin-top:0}
  .test:nth-child(2){margin-top:0}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .value:first-child{min-height:300px}
  .pantry{grid-template-columns:repeat(3,1fr)}
  .box-slots{grid-template-rows:90px 90px}
  .wa-float span{display:none}
  .wa-float{padding:.8rem}
  .band{margin:0 -1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.value img{border-radius:20px;width:100%;flex:1;min-height:200px;object-fit:cover;margin-bottom:1.4rem}

/* ===== fixes ===== */
html,body{overflow-x:clip}
.test .who div>span{display:block;font-weight:600;color:var(--ink-2);font-size:.86rem}
.test .who .avatar{display:grid}
.worry small.hand{font-family:var(--font-hand);font-size:1.45rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}

/* ===== motion identity (motion-design skill)
   personality: playful for illustration, calm for UI
   signature easing: --ease-out (UI) / --ease-back (stickers, icons)
   durations: quick 160ms · standard 320ms · slow 700ms
   entrance: rise 24px + fade, stagger <= 420ms total ===== */
:root{--ease-out:cubic-bezier(.2,0,0,1);--ease-back:cubic-bezier(.175,.885,.32,1.275);--ease-sine:cubic-bezier(.37,0,.63,1);--t-quick:160ms;--t-std:320ms;--t-slow:700ms}
.reveal{transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}

/* 3D stickers: pop in (primary), shadow follows (secondary), sine float (ambient) */
.s3d{position:absolute;z-index:3;width:var(--size,96px);pointer-events:auto}
.s3d img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 12px rgba(31,42,77,.18));transform:scale(.3) rotate(-20deg);opacity:0;transition:transform 520ms var(--ease-back),opacity 220ms var(--ease-out)}
.s3d::after{content:"";position:absolute;left:18%;right:18%;bottom:-14px;height:10px;border-radius:50%;background:rgba(31,42,77,.14);filter:blur(3px);opacity:0;transition:opacity 400ms 200ms}
.in .s3d img,.s3d.in img{transform:none;opacity:1}
.in .s3d::after,.s3d.in::after{opacity:1}
.s3d .bob{animation:bob var(--dur,6s) var(--ease-sine) infinite;animation-delay:var(--d,0s)}
.s3d::after{animation:shadow var(--dur,6s) var(--ease-sine) infinite;animation-delay:var(--d,0s)}
.s3d:hover img{animation:wiggle 420ms var(--ease-out)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(5deg)}}
@keyframes shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.7);opacity:.5}}
@keyframes wiggle{0%{transform:rotate(0)}30%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(7deg) scale(1.04)}100%{transform:none}}

/* topic icons (recolored flat set) */
.topic .ico{width:76px;height:76px;border-radius:0;background:none!important;margin-bottom:.6rem;display:block}
.topic .ico img{width:76px;height:76px;transition:transform var(--t-std) var(--ease-back)}
.topic:hover .ico img{transform:rotate(-8deg) scale(1.1)}

/* Lottie stage */
.lottie-stage{position:relative;aspect-ratio:1;max-width:480px;width:100%;justify-self:center;background:var(--cream);border-radius:50%;box-shadow:inset 0 0 0 18px rgba(255,255,255,.7)}
.lottie-stage .lottie{position:absolute;inset:4%}
.lottie-stage .lottie svg{display:block}

/* kawaii guide in quiz */
.quiz-guide{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;font-weight:700;font-size:.95rem}
.quiz-guide img{width:52px;height:52px;border-radius:50%;background:var(--pink);padding:4px;animation:bob 5s var(--ease-sine) infinite}
.quiz-guide span{background:var(--cream);border-radius:14px 14px 14px 4px;padding:.45rem .8rem}

/* recipe art with 3D render */
.recipe-art img{width:52%;height:auto;filter:drop-shadow(0 12px 14px rgba(31,42,77,.2));transition:transform var(--t-std) var(--ease-back)}
.recipe:hover .recipe-art img{transform:translateY(-8px) rotate(-6deg) scale(1.06)}
.cta-big .s3d{--size:110px}

@media (max-width:767px){
  .s3d{--size:72px}
  .cta-big .s3d{--size:70px;opacity:.9}
  .lottie-stage{max-width:340px}
}
@media (prefers-reduced-motion:reduce){.s3d img{transform:none;opacity:1}}
.s3d img{transition-delay:var(--pop,0ms)}
@media (max-width:767px){
  .hero-art .s3d[style*="left:-"]{left:-14px!important}
  .hero-art .s3d[style*="right:-"]{right:-14px!important}
  .booklet .page.p3{transform:rotate(6deg) translate(12px,6px)}
}