/* ===========================================================
   Cosmoluxa — botanical editorial, hand-written CSS
   Green linen canvas · DM Serif Display + Rubik · no shadows
   =========================================================== */

:root{
  --canvas:#c3e6c8;
  --canvas-top:#d5efd8;
  --canvas-deep:#aedcb6;
  --cream:#fbfaee;
  --cream-deep:#f3f1e0;
  --bone:#fffff3;
  --ink:#0f1c13;
  --charcoal:#3a4a3f;
  --forest:#2f7a42;
  --sage:#7fd08a;
  --sage-wash:#dcf1de;
  --sage-line:#8fc99a;
  --lotus:#ef7fab;
  --lotus-wash:#fbe0ec;
  --sun:#f4c945;
  --line:rgba(15,28,19,.16);
  --line-soft:rgba(15,28,19,.10);

  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --pad:clamp(18px,5vw,84px);
  --gap-sec:clamp(72px,10vw,140px);
  --r-card:18px;
  --r-pill:999px;

  --sh-sm:0 2px 10px -2px rgba(20,58,32,.14);
  --sh-md:0 16px 34px -12px rgba(20,58,32,.24);
  --sh-lg:0 30px 64px -18px rgba(20,58,32,.34);
  --ring:1.5px solid var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.55vw + .9rem,1.19rem);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* botanical canvas: soft vertical wash + leaf grain + glows */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,var(--canvas-top),var(--canvas) 42%,var(--canvas-deep));
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background:
    radial-gradient(520px 380px at 8% 4%, rgba(127,208,138,.28), transparent 62%),
    radial-gradient(560px 420px at 96% 12%, rgba(239,127,171,.10), transparent 60%),
    radial-gradient(680px 520px at 84% 92%, rgba(63,154,82,.14), transparent 64%),
    radial-gradient(420px 320px at 4% 74%, rgba(244,201,69,.08), transparent 62%);
}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0}
p{margin:0}

/* ---------- helpers ---------- */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.reading{max-width:66ch}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bone);
  padding:12px 18px;border-radius:0 0 12px 0;z-index:200}
.skip-link:focus{left:0}
.eyebrow{
  display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal);
  padding:.42em .95em;border:1px solid var(--sage-line);border-radius:var(--r-pill);
  background:var(--sage-wash);margin-bottom:1.1em;
}
.eyebrow.on-dark{color:#e8f6ea;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}

/* ---------- buttons (pill anchors) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1;
  padding:.92em 1.5em;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  text-decoration:none;cursor:pointer;transition:transform .16s ease,background .2s ease,color .2s ease;
}
.btn svg{width:1.1em;height:1.1em}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone);transform:translateY(-2px)}
.btn-lg{padding:1.05em 1.85em;font-size:1.06rem}

/* ---------- header / nav ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(191,227,196,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;gap:1rem;max-width:1180px;margin-inline:auto;
  padding:.75rem var(--pad)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--serif);font-size:1.4rem;color:var(--ink);letter-spacing:-.01em}
.brand svg{width:38px;height:38px;flex:0 0 auto}
.nav-links{list-style:none;display:flex;gap:.35rem;margin:0 auto 0 1.5rem;padding:0;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--ink);
  padding:.45em .8em;border-radius:var(--r-pill);white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--sage-wash)}
.nav-cta{margin-left:.5rem}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;
  background:transparent;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;background:var(--ink);
  transform:translate(-50%,-50%);transition:.22s}
.burger span::before{transform:translate(-50%,-8px)}
.burger span::after{transform:translate(-50%,6px)}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav.open .burger span::after{transform:translate(-50%,-50%) rotate(-45deg)}

@media(max-width:860px){
  .nav-cta{display:none}
  .burger{display:block;order:3;margin-left:auto}
  .nav-links{order:4;flex-basis:100%;flex-direction:column;gap:.15rem;margin:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav.open .nav-links{max-height:60vh;padding-top:.6rem}
  .nav-links a{display:block;padding:.7em .9em}
}

/* ---------- sections ---------- */
main section{padding-block:var(--gap-sec)}
.sec-label{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(30px,5vw,58px)}
.sec-label h2{font-size:clamp(2rem,4.6vw,3.35rem);max-width:16ch}
.sec-label p{color:var(--charcoal);max-width:56ch;margin-top:.9rem}

/* ---------- HERO ---------- */
.hero{position:relative;text-align:center;padding-top:clamp(48px,8vw,92px)}
.hero-inner{max-width:900px;margin-inline:auto;position:relative;z-index:2}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.3rem);letter-spacing:-.02em}
.hero h1 .leaf-word{color:#2f7a42;font-style:italic}
.hero-lead{color:var(--charcoal);max-width:52ch;margin:1.5rem auto 0;font-size:1.12rem}
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.hero-trust{display:inline-flex;align-items:center;gap:.5em;margin-top:1.7rem;
  font-size:.9rem;color:var(--charcoal)}
.hero-trust svg{width:1.05em;height:1.05em;color:#2f7a42}

.mascot-stage{position:relative;margin:clamp(34px,6vw,60px) auto 0;max-width:560px}
.mascot-frog{width:clamp(210px,42vw,340px);margin-inline:auto;position:relative;z-index:2}
.mascot-photo{display:block;width:100%;height:auto;position:relative;z-index:2;
  border:1.5px solid var(--ink);border-radius:var(--r-card);background:var(--bone)}
.leaf-bleed{position:absolute;z-index:1;pointer-events:none}
.leaf-a{width:clamp(90px,17vw,150px);left:-6%;bottom:-8%;transform:rotate(-16deg)}
.leaf-b{width:clamp(80px,15vw,132px);right:-8%;top:-4%;transform:rotate(22deg)}
.leaf-c{width:clamp(64px,12vw,108px);right:6%;bottom:-14%;transform:rotate(-6deg)}
.pond-tag{position:absolute;z-index:3;top:2%;left:50%;transform:translateX(-50%) rotate(-4deg);
  background:var(--bone);border:1.5px solid var(--ink);border-radius:var(--r-pill);
  font-size:.8rem;font-weight:600;padding:.4em 1em;white-space:nowrap}
.pond-caption{display:block;text-align:center;margin-top:.8rem;font-size:.78rem;color:var(--charcoal);opacity:.85}

/* ---------- A RÃ : split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center}
.split.rev .split-media{order:-1}
.split-text h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:.7rem}
.split-text p + p{margin-top:1rem}
.split-text .tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.6rem 0 0}
.split-text .tags li{background:var(--sage-wash);border:1px solid var(--sage-line);
  border-radius:var(--r-pill);padding:.35em 1em;font-size:.85rem;font-weight:500}
.frog-card{position:relative;background:var(--bone);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:clamp(26px,4vw,44px)}
.frog-card svg.scene{width:100%}
.frog-card .scene-frame{border-radius:12px}
.scene-img{display:block;width:100%;height:auto}
.frog-card .leaf-bleed-r{position:absolute;width:clamp(80px,13vw,120px);right:-30px;bottom:-26px;
  transform:rotate(18deg);z-index:3;pointer-events:none}
.frog-card figcaption{margin-top:1rem;text-align:center;font-size:.85rem;color:var(--charcoal)}

/* ---------- CHARCO : color scene gallery ---------- */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.scene-card{background:var(--bone);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:18px 18px 20px;display:flex;flex-direction:column}
.scene-card.wide{grid-column:span 2}
.scene-card figure{margin:0}
.scene-frame{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--canvas-deep);aspect-ratio:16/10}
.scene-frame svg{width:100%;display:block}
.scene-frame img{width:100%;height:100%;object-fit:cover;display:block}
.scene-card.wide .scene-frame{aspect-ratio:16/7}
.scene-card h3{font-size:1.5rem;margin-top:1.05rem}
.scene-card p{color:var(--charcoal);font-size:.98rem;margin-top:.4rem;line-height:1.7}

/* ---------- PORQUE ENCANTA : feature triples ---------- */
.charms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,54px)}
.charm{text-align:center}
.charm .ic{width:64px;height:64px;margin:0 auto .9rem;display:grid;place-items:center;
  border-radius:50%;background:var(--sage-wash);border:1.5px solid var(--sage-line)}
.charm .ic svg{width:32px;height:32px;color:#2f7a42}
.charm .ic-img{width:84px;height:84px;overflow:hidden}
.charm .ic-img img{max-width:76%;max-height:76%;width:auto;height:auto;object-fit:contain}
.charm .ic-frog img{max-width:100%;max-height:100%;border-radius:50%}
.charm h3{font-size:1.55rem;margin-bottom:.4rem}
.charm p{color:var(--charcoal);font-size:1rem;line-height:1.7}

/* ---------- CURIOSIDADES : sage band ---------- */
.curio{background:#2f7a42;color:#eef8ef;border-radius:0}
.curio .curio-in{max-width:1180px;margin-inline:auto;padding:clamp(52px,8vw,96px) var(--pad);position:relative}
.curio h2{color:#fffff3;font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch}
.curio-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.5vw,48px);margin-top:2rem}
.curio-cols p{color:#dcefdd;line-height:1.85}
.curio-cols strong{color:#fffff3}
.curio .leaf-band{position:absolute;width:clamp(120px,16vw,190px);right:-10px;top:-46px;
  transform:rotate(-12deg);opacity:.9;pointer-events:none}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.55rem);color:var(--ink);
  padding:1.15em 2.4em 1.15em 0;position:relative;line-height:1.25}
.faq-q .plus{position:absolute;right:.2em;top:1.35em;width:18px;height:18px}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:#2f7a42;
  left:50%;top:50%;transition:.24s}
.faq-q .plus::before{width:18px;height:2px;transform:translate(-50%,-50%)}
.faq-q .plus::after{width:2px;height:18px;transform:translate(-50%,-50%)}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{color:var(--charcoal);padding-bottom:1.3em;max-width:64ch;font-size:1rem;line-height:1.75}
.faq-item.open .faq-a{max-height:320px}

/* ---------- FORM ---------- */
.subscribe{position:relative}
.form-plate{max-width:640px;margin-inline:auto;background:var(--bone);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:clamp(26px,4vw,46px);position:relative}
.form-plate .leaf-bleed-l{position:absolute;width:clamp(80px,12vw,120px);left:-32px;top:-30px;
  transform:rotate(-20deg);z-index:3;pointer-events:none}
.form-plate h2{font-size:clamp(1.7rem,3.4vw,2.5rem);text-align:center;margin-bottom:.5rem}
.form-plate .form-lead{text-align:center;color:var(--charcoal);max-width:44ch;margin:0 auto 1.8rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.4rem}
.field input[type=text],.field input[type=email]{width:100%;font-family:var(--sans);font-size:1rem;
  padding:.85em 1em;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus{outline:none;border-color:#2f7a42}
.field.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--charcoal)}
.field.check input{margin-top:.35em;accent-color:#2f7a42;width:18px;height:18px;flex:0 0 auto}
.field.check label{font-weight:400;margin:0}
.field.check a{color:#2f7a42}
.form-plate button{width:100%;justify-content:center;margin-top:.4rem}
.form-ok{margin-top:1.1rem;background:var(--sage-wash);border:1px solid var(--sage-line);
  border-radius:10px;padding:1em 1.2em;font-size:.95rem;color:#1c4a2a;text-align:center}

/* ---------- page hero (inner pages) ---------- */
.page-hero{text-align:center;max-width:760px;margin-inline:auto;padding-top:clamp(20px,4vw,40px)}
.page-hero h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
.page-hero p{color:var(--charcoal);margin-top:1rem;max-width:56ch;margin-inline:auto}

/* info cards (contactos) */
.info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-bottom:clamp(24px,4vw,40px)}
.info-card{background:var(--bone);border:1.5px solid var(--ink);border-radius:var(--r-card);padding:22px 24px}
.info-card h3{font-size:1.25rem;margin-bottom:.35rem}
.info-card p{color:var(--charcoal);font-size:.96rem;line-height:1.65}
.info-card a{color:#2f7a42;text-decoration:none;font-weight:500}

/* legal prose */
.prose{max-width:760px;margin-inline:auto}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.2rem 0 .7rem}
.prose h3{font-size:1.2rem;margin:1.6rem 0 .5rem;font-family:var(--sans);font-weight:600}
.prose p,.prose li{color:var(--charcoal);font-size:1rem;line-height:1.8}
.prose p{margin-top:.7rem}
.prose ul{margin:.6rem 0 0;padding-left:1.2rem}
.prose li{margin-top:.35rem}
.prose a{color:#2f7a42}
.prose .updated{font-size:.85rem;color:var(--charcoal);opacity:.8}

/* 404 */
.notfound{text-align:center;max-width:640px;margin-inline:auto;padding-block:clamp(60px,12vw,140px)}
.notfound .big{font-family:var(--serif);font-size:clamp(5rem,20vw,11rem);line-height:.9;color:#2f7a42}
.notfound h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:.5rem}
.notfound p{color:var(--charcoal);margin:1rem auto 2rem;max-width:44ch}

/* obrigado */
.thanks{text-align:center;max-width:620px;margin-inline:auto;padding-block:clamp(56px,10vw,120px)}
.thanks .frog-lg{width:clamp(150px,30vw,220px);margin:0 auto 1.6rem}
.thanks h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.thanks p{color:var(--charcoal);margin:1rem auto 2rem;max-width:46ch}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#e8f2ea;margin-top:var(--gap-sec);position:relative;overflow:hidden}
.site-foot .leaf-foot{position:absolute;width:clamp(120px,18vw,220px);right:-30px;bottom:-40px;
  opacity:.16;transform:rotate(-8deg);pointer-events:none}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-block:clamp(46px,7vw,78px)}
.foot-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-size:1.5rem;color:#fffff3}
.foot-brand svg{width:40px;height:40px}
.foot-about{color:#b8ccbe;font-size:.95rem;line-height:1.7;margin-top:1rem;max-width:40ch}
.site-foot h4{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;
  color:#8bb195;margin:0 0 1rem}
.foot-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.foot-links a{color:#e8f2ea;text-decoration:none;font-size:.96rem;opacity:.9}
.foot-links a:hover{opacity:1;text-decoration:underline}
.foot-disclaimer{border-top:1px solid rgba(255,255,255,.14);padding-block:clamp(22px,3vw,32px)}
.foot-disclaimer p{color:#93ad99;font-size:.8rem;line-height:1.7;max-width:88ch}
.foot-copy{margin-top:.8rem;color:#7c9682;font-size:.8rem}

/* ===========================================================
   MOTION + NEW SECTIONS  (frogs, cast, jump path, palette)
   =========================================================== */

/* ---- keyframes ---- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes flyBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes swayA{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-9deg) translateY(-6px)}}
@keyframes swayB{0%,100%{transform:rotate(22deg)}50%{transform:rotate(15deg) translateY(-7px)}}
@keyframes swayC{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-12deg) translateY(-5px)}}
@keyframes hop1{0%,100%{transform:translateY(0)}25%{transform:translateY(-26px) rotate(-8deg)}50%{transform:translateY(0)}}
@keyframes hop2{0%,100%{transform:translateY(0)}30%{transform:translateY(-20px) rotate(6deg)}55%{transform:translateY(0)}}
@keyframes drift{0%{transform:translate(0,0) rotate(-4deg)}33%{transform:translate(18px,-14px) rotate(5deg)}66%{transform:translate(-10px,-6px) rotate(-6deg)}100%{transform:translate(0,0) rotate(-4deg)}}
@keyframes ripplePulse{0%{transform:scale(.6);opacity:.55}70%{opacity:.15}100%{transform:scale(1.25);opacity:0}}
@keyframes hopPath{
  0%{left:4%;transform:translateY(0) rotate(0)}
  5%{transform:translateY(-48px) rotate(-7deg)}
  10%{left:31%;transform:translateY(0) rotate(0)}
  15%{transform:translateY(-48px) rotate(-7deg)}
  20%{left:58%;transform:translateY(0) rotate(0)}
  25%{transform:translateY(-48px) rotate(-7deg)}
  30%{left:85%;transform:translateY(0) rotate(0)}
  52%{left:85%;transform:translateY(0) rotate(0)}
  57%{transform:translateY(-48px) rotate(7deg)}
  62%{left:58%;transform:translateY(0) rotate(0)}
  67%{transform:translateY(-48px) rotate(7deg)}
  72%{left:31%;transform:translateY(0) rotate(0)}
  77%{transform:translateY(-48px) rotate(7deg)}
  82%{left:4%;transform:translateY(0) rotate(0)}
  100%{left:4%;transform:translateY(0) rotate(0)}
}

/* ---- gentle motion on existing pieces ---- */
.mascot-photo{animation:floatY 6s ease-in-out infinite}
.leaf-a{animation:swayA 7s ease-in-out infinite}
.leaf-b{animation:swayB 8s ease-in-out infinite}
.leaf-c{animation:swayC 6.5s ease-in-out infinite}
.pond-tag{animation:bob 4.5s ease-in-out infinite}
.scene-card,.charm .ic,.swatch,.cast-card{transition:transform .22s ease}
.scene-card.reveal:hover{transform:translateY(-6px)}
.charm:hover .ic{transform:translateY(-5px) rotate(-4deg)}
.frog-card .leaf-bleed-r{animation:swayB 7.5s ease-in-out infinite}

/* ---- hero floating critters ---- */
.float-frog,.float-fly{position:absolute;z-index:1;pointer-events:none}
.float-frog{width:clamp(40px,6vw,62px)}
.ff-1{left:4%;top:34%;animation:hop1 3.4s ease-in-out infinite}
.ff-2{right:5%;top:46%;width:clamp(34px,5vw,52px);animation:hop2 4.1s ease-in-out infinite .6s}
.float-fly{width:clamp(46px,7vw,74px);left:8%;top:10%;animation:drift 9s ease-in-out infinite}
@media(max-width:640px){.float-frog,.float-fly{display:none}}

/* ---- CAST (pond cast) : staggered medallions ---- */
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,34px)}
.cast-card{text-align:center;background:var(--bone);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:clamp(20px,2.5vw,30px) clamp(14px,2vw,22px) clamp(22px,3vw,30px)}
.cast-card:nth-child(even){margin-top:clamp(10px,2.4vw,28px)}
.cast-card.reveal:hover{transform:translateY(-6px)}
.cast-medal{width:clamp(92px,12vw,120px);height:clamp(92px,12vw,120px);margin:0 auto 1rem;
  display:grid;place-items:center;border-radius:50%;overflow:hidden;
  background:var(--sage-wash);border:1.5px solid var(--sage-line)}
.cast-medal img{width:100%;height:100%;object-fit:cover}
.cast-medal svg{width:78%;height:78%}
.cast-bob{animation:bob 4.2s ease-in-out infinite}
.cast-wiggle img{animation:wiggle 3s ease-in-out infinite;transform-origin:center}
.cast-fly svg{animation:flyBob 3.6s ease-in-out infinite;transform-origin:center}
.delay-1{animation-delay:.4s}.delay-2{animation-delay:.8s}.delay-3{animation-delay:1.2s}
.cast-card h3{font-size:1.45rem;margin-bottom:.15rem}
.cast-role{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#2f7a42;margin-bottom:.7rem}
.cast-card p:not(.cast-role){color:var(--charcoal);font-size:.94rem;line-height:1.65}

/* ---- SALTO : jump-path band ---- */
.salto-band{background:linear-gradient(180deg,#c9ead0,#bfe3c4);border-block:1px solid var(--line-soft)}
.salto-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:center}
.salto-text h2{font-size:clamp(2rem,4.2vw,3rem);margin:.4rem 0 1rem}
.salto-text p{color:var(--charcoal)}
.salto-steps{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.7rem}
.salto-steps li{display:flex;align-items:center;gap:.8rem;font-weight:500;font-size:1rem}
.salto-steps li span{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;background:var(--ink);color:var(--bone);font-size:.9rem;font-family:var(--serif)}
.jump-lane{position:relative;height:clamp(210px,30vw,280px);background:var(--bone);
  border:1.5px solid var(--ink);border-radius:var(--r-card);overflow:hidden}
.jump-lane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(143,211,224,.45))}
.jump-lane .pad{position:absolute;bottom:14%;width:clamp(64px,11vw,96px);height:auto;z-index:1}
.pad-1{left:4%}.pad-2{left:31%;bottom:20%}.pad-3{left:58%;bottom:13%}.pad-4{left:85%;bottom:19%}
.jump-frog{position:absolute;bottom:30%;left:4%;width:clamp(46px,7vw,64px);z-index:3;
  animation:hopPath 7.5s cubic-bezier(.5,0,.5,1) infinite}
.ripple{position:absolute;bottom:16%;left:50%;width:70px;margin-left:-35px;z-index:2;
  animation:ripplePulse 2.6s ease-out infinite}

/* ---- CORES : palette swatches ---- */
.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,18px)}
.swatch{background:var(--bone);border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:12px 12px 16px;text-align:center}
.swatch:hover{transform:translateY(-6px) rotate(-1.5deg)}
.swatch .chip{display:block;width:100%;height:clamp(70px,9vw,96px);border-radius:10px;
  border:1.5px solid var(--ink);margin-bottom:.7rem}
.swatch b{display:block;font-size:.95rem;font-weight:600}
.swatch i{display:block;font-style:normal;font-size:.78rem;color:var(--charcoal);margin-top:.15rem}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.btn:hover{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .jump-frog{left:4%!important}
}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split.rev .split-media{order:0}
  .scenes{grid-template-columns:1fr 1fr}
  .scene-card.wide{grid-column:span 2}
  .charms{grid-template-columns:1fr;gap:2.4rem}
  .curio-cols{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .info-row{grid-template-columns:1fr}
  .cast{grid-template-columns:repeat(2,1fr)}
  .salto-in{grid-template-columns:1fr;gap:2rem}
  .palette{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .scenes{grid-template-columns:1fr}
  .scene-card.wide{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .cast{grid-template-columns:1fr;gap:1.2rem}
  .cast-card:nth-child(even){margin-top:0}
  .palette{grid-template-columns:repeat(2,1fr)}
}

/* ---------- inline-SVG art placements ---------- */
.mascot-photo{overflow:hidden}
.cast-wiggle svg{animation:wiggle 3s ease-in-out infinite;transform-origin:center}
.charm .ic-img svg{width:72%;height:72%}
.charm .ic-frog svg{width:100%;height:100%;border-radius:50%}

/* ---------- O JOGO : cover tile ---------- */
.jogo-sec{padding-top:0}
.jogo-card{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,52px);
  align-items:center;background:var(--bone);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden}
.jogo-card h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:.7rem}
.jogo-card h2 em{color:#2f7a42;font-style:italic}
.jogo-card p{color:var(--charcoal)}
.jogo-cover{margin:0;text-align:center;justify-self:center}
.jogo-cover img{width:230px;height:320px;max-width:100%;object-fit:cover;border:1.5px solid var(--ink);
  border-radius:12px;box-shadow:0 12px 26px rgba(15,28,19,.16)}
.jogo-cover figcaption{margin-top:.7rem;font-size:.85rem;font-weight:600;color:var(--charcoal)}
@media(max-width:720px){
  .jogo-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .jogo-cover{order:-1}
}

/* ===========================================================
   DESIGN UPGRADE — depth, section rhythm, framing, accents
   =========================================================== */

/* full-bleed section bands to break the flat green */
.band-cream{position:relative;z-index:0}
.band-cream::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-1;background:var(--cream);
  box-shadow:inset 0 1px 0 rgba(15,28,19,.06),inset 0 -1px 0 rgba(15,28,19,.06)}
.jogo-sec.band-cream{padding-top:var(--gap-sec)}

/* ---- eyebrow chips ---- */
.eyebrow{background:var(--cream);border:1.5px solid var(--ink);color:var(--forest);
  box-shadow:var(--sh-sm);font-weight:700;max-width:100%;line-height:1.5}
.eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:6px;height:6px;
  border-radius:50%;background:var(--lotus);margin-right:.5em;margin-top:-2px}
.eyebrow.on-dark{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);color:#eaf7ea;box-shadow:none}
.eyebrow.on-dark::before{background:var(--sun)}

/* ---- heading flourishes ---- */
.sec-label h2::after{content:"";display:block;width:66px;height:4px;border-radius:3px;
  margin:1rem auto 0;background:linear-gradient(90deg,var(--forest),var(--sage))}
.split-text h2::after,.salto-text h2::after,.jogo-card h2::after{content:"";display:block;
  width:56px;height:4px;border-radius:3px;margin-top:.9rem;
  background:linear-gradient(90deg,var(--forest),var(--sage))}

/* ---- buttons ---- */
.btn-ink{box-shadow:var(--sh-md)}
.btn-ink:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.btn-ghost{background:var(--cream);box-shadow:var(--sh-sm)}
.btn-ghost:hover{background:var(--ink);color:var(--bone);transform:translateY(-3px);box-shadow:var(--sh-md)}

/* ---- nav ---- */
.site-head{background:rgba(199,231,203,.82);box-shadow:0 1px 0 rgba(15,28,19,.05),0 8px 24px -20px rgba(20,58,32,.5)}
.nav-cta{box-shadow:var(--sh-sm)}
.brand svg{filter:drop-shadow(0 3px 4px rgba(20,58,32,.18))}

/* ---- HERO ---- */
.hero{padding-bottom:clamp(28px,5vw,64px)}
.mascot-stage::before{content:"";position:absolute;inset:-16% -10% -20%;z-index:0;border-radius:48% 52% 55% 45%/50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.6),rgba(127,208,138,.28) 58%,transparent);filter:blur(2px)}
.mascot-photo{border:6px solid var(--bone);border-radius:22px;background:var(--bone);
  box-shadow:var(--sh-lg);outline:1.5px solid rgba(15,28,19,.16);outline-offset:-6px}
.pond-tag{box-shadow:var(--sh-sm);background:var(--cream)}
.pond-caption{position:relative;z-index:2}
.float-frog{width:clamp(52px,7vw,82px);filter:drop-shadow(0 8px 9px rgba(20,58,32,.22))}
.ff-2{width:clamp(42px,6vw,64px)}
.float-fly{width:clamp(56px,8vw,90px);filter:drop-shadow(0 6px 8px rgba(20,58,32,.16))}
@media(max-width:640px){.float-frog,.float-fly{display:none}}

/* ---- cards: elevation ---- */
.jogo-card{background:var(--bone);border:1.5px solid var(--ink);border-radius:calc(var(--r-card) + 4px);
  padding:clamp(28px,4vw,54px);box-shadow:var(--sh-md)}
.frog-card{box-shadow:var(--sh-md)}
.frog-card .scene-frame{border:1.5px solid var(--ink);border-radius:12px;box-shadow:var(--sh-md);overflow:hidden}
.cast-card{background:var(--cream);border-radius:calc(var(--r-card) + 2px);box-shadow:var(--sh-sm)}
.cast-card.reveal:hover{box-shadow:var(--sh-lg)}
.cast-medal{border-width:2.5px;box-shadow:var(--sh-sm)}
.cast-card:nth-child(2) .cast-medal{background:#fdf0cf;border-color:#c99a2c}
.cast-card:nth-child(4) .cast-medal{background:#dcf0f7;border-color:#5aa7bd}

/* ---- gallery: image bleeds edge-to-edge ---- */
.scene-card{padding:0;overflow:hidden;background:var(--bone);box-shadow:var(--sh-md)}
.scene-card figure{margin:0}
.scene-card .scene-frame{border:0;border-radius:0;border-bottom:1.5px solid var(--ink)}
.scene-card h3{margin:1.1rem 22px .3rem}
.scene-card p{margin:0 22px 24px}
.scene-card.reveal:hover{box-shadow:var(--sh-lg)}

/* ---- jogo cover ---- */
.jogo-cover img{box-shadow:var(--sh-lg)}

/* ---- SALTO band ---- */
.salto-band{background:linear-gradient(180deg,#cfeed6,#bfe3c4);border-block:1.5px solid rgba(15,28,19,.08)}
.jump-lane{box-shadow:var(--sh-md);background:linear-gradient(180deg,#fdfcf2 0%,#eaf6ec 62%,#dff3ef 100%)}
.salto-steps li span{box-shadow:var(--sh-sm)}
.jump-frog{filter:drop-shadow(0 8px 8px rgba(20,58,32,.22))}
.pad{filter:drop-shadow(0 4px 5px rgba(20,58,32,.16))}

/* ---- CORES swatches ---- */
.swatch{background:var(--cream);border-radius:16px;box-shadow:var(--sh-sm)}
.swatch .chip{height:clamp(84px,10vw,112px);box-shadow:inset 0 -10px 18px -10px rgba(0,0,0,.22)}

/* ---- CURIO dark band ---- */
.curio{background:radial-gradient(130% 150% at 18% -10%,#3b8b4f,#255f36);position:relative;overflow:hidden}
.curio::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px 340px at 88% 12%,rgba(255,255,255,.09),transparent 60%)}
.curio-cols p{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:20px 22px}
.curio .leaf-band{filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}

/* ---- FAQ ---- */
.faq-list{background:var(--bone);border:1.5px solid var(--ink);border-radius:calc(var(--r-card) + 4px);
  padding:6px clamp(20px,3vw,34px);box-shadow:var(--sh-md)}
.faq-item:last-child{border-bottom:0}
.faq-q .plus::before,.faq-q .plus::after{background:var(--lotus)}

/* ---- FORM ---- */
.form-plate{box-shadow:var(--sh-lg);border-radius:calc(var(--r-card) + 6px)}
.field input[type=text],.field input[type=email]{background:var(--cream);box-shadow:inset 0 1px 3px rgba(15,28,19,.08)}
.field input:focus{box-shadow:0 0 0 3px rgba(47,122,66,.18)}

/* ---- inline link accent ---- */
main p a{color:var(--forest);text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ---- tags pills ---- */
.split-text .tags li{background:var(--cream);box-shadow:var(--sh-sm)}

/* ---- final polish ---- */
.charm .ic{background:var(--cream);border:2.5px solid var(--sage-line);box-shadow:var(--sh-sm)}
.charm:nth-child(1) .ic{border-color:var(--lotus)}
.charm:nth-child(2) .ic{border-color:var(--forest)}
.charm:nth-child(3) .ic{border-color:#5aa7bd}
.mascot-stage::before{background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(127,208,138,.34) 55%,transparent 78%)}
.hero-trust svg{color:var(--forest)}
.curio-cols strong{color:#fffff3}
.foot-brand svg{filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}