/* =========================================================
   ÁPICE EDUCAÇÃO INFANTIL — Design System
   Base clean e sofisticada · explosões de cor pontuais
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* Brand — extraídas do logotipo */
  --green:      #5DA833;
  --green-700:  #4C8E29;
  --green-300:  #8FCB5E;
  --green-100:  #E5F2D8;
  --green-50:   #F1F8EA;

  --gold:       #FBC23D;
  --gold-soft:  #FFE9A8;
  --magenta:    #C0399A;
  --purple:     #9A4FA0;
  --cyan:       #2FB4C6;
  --silver:     #B8BFC4;

  /* Neutrals — warm */
  --ink:        #26291F;
  --ink-soft:   #565a4e;
  --line:       #ECEAE1;
  --paper:      #FCFBF6;
  --paper-2:    #F6F4EC;
  --white:      #ffffff;

  /* Type */
  --display: 'Fredoka', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;

  /* Rhythm */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 44px;
  --shadow-sm: 0 2px 10px rgba(38,41,31,.05);
  --shadow:    0 18px 50px -22px rgba(38,41,31,.22);
  --shadow-lg: 0 40px 90px -40px rgba(38,41,31,.30);
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
p{margin:0 0 1.1em;text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1.6vw,1.32rem);color:var(--ink-soft);line-height:1.6}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-tight{padding-block:clamp(48px,6vw,80px)}
.center{text-align:center}
.stack-sm>*+*{margin-top:.6rem}

/* eyebrow / kicker */
.kicker{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);
  margin-bottom:1rem;
}
.kicker::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--gold)}
.kicker.k-center::after{content:"";width:26px;height:3px;border-radius:3px;background:var(--gold)}
.kicker.k-center{color:var(--green-700)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green);--fg:#fff;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  background:var(--bg);color:var(--fg);
  padding:.9em 1.6em;border-radius:999px;border:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .2s;
  box-shadow:0 14px 26px -14px color-mix(in srgb,var(--bg) 75%, transparent);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 34px -14px color-mix(in srgb,var(--bg) 70%, transparent)}
.btn svg{width:1.1em;height:1.1em}
.btn.gold{--bg:var(--gold);--fg:#5a3d00}
.btn.ghost{--bg:transparent;--fg:var(--ink);box-shadow:none;border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--green);color:var(--green-700)}
.btn.white{--bg:#fff;--fg:var(--green-700)}
.btn.lg{font-size:1.12rem;padding:1.05em 2em}

/* ---------- Decorative ---------- */
.dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.blob{position:absolute;border-radius:46% 54% 60% 40%/52% 44% 56% 48%;filter:blur(2px);opacity:.5;z-index:0;pointer-events:none}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.confetti span{position:absolute;border-radius:3px}

/* color chips row */
.ring-bar{display:flex;height:6px;border-radius:6px;overflow:hidden}
.ring-bar i{flex:1}
.ring-bar i:nth-child(1){background:var(--magenta)}
.ring-bar i:nth-child(2){background:var(--purple)}
.ring-bar i:nth-child(3){background:var(--cyan)}
.ring-bar i:nth-child(4){background:var(--green)}
.ring-bar i:nth-child(5){background:var(--gold)}

/* ---------- Image placeholder ---------- */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg, #efeadd 0 14px, #e9e3d3 14px 28px);
  border-radius:var(--r-md);overflow:hidden;color:#9b9580;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.ph::after{
  content:attr(data-label);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.74rem;
  letter-spacing:.04em;padding:.5em 1em;border:1px dashed #c8c0aa;border-radius:8px;
  background:rgba(255,255,255,.55);color:#8a8369;max-width:80%;
}
/* universal image container — shows a branded placeholder with a monospace
   label behind the photo; if the <img> fails to load it adds .failed and the
   label shows through. */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--green-50) 0%,#eaf3df 60%,#f3ecd6 100%)}
.media::after{content:attr(data-label);position:absolute;inset:0;z-index:0;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:1.4em;line-height:1.4;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.72rem;letter-spacing:.03em;color:#7ba156}
.media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(93,168,51,.05) 22px 23px)}
.media img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block}
.media img.failed{opacity:0}
.media.tall{aspect-ratio:3/4}
.media.wide{aspect-ratio:4/3}
.media.video{aspect-ratio:16/10}
.media.sq{aspect-ratio:1/1}

/* photo frame accent */
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:-14px;border-radius:calc(var(--r-lg) + 8px);
  border:2px solid var(--green-300);z-index:-1}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.card.hover:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--green-300)}
.card .ico{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:var(--green-50);color:var(--green-700);margin-bottom:1rem;
}
.card .ico svg{width:28px;height:28px}

.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* pill tag */
.tag{display:inline-flex;align-items:center;gap:.45em;font-family:var(--display);
  font-weight:500;font-size:.84rem;padding:.32em .9em;border-radius:999px;
  background:var(--green-50);color:var(--green-700)}
.tag.gold{background:var(--gold-soft);color:#7a5300}
.tag.magenta{background:#f7e3f1;color:var(--magenta)}
.tag.cyan{background:#daf1f4;color:#1d7d8b}
.tag.purple{background:#efe1f0;color:var(--purple)}

/* ---------- Header ---------- */
.site-sticky{position:sticky;top:0;z-index:60}
.topbar{background:var(--green-700);color:#eaf3e0;font-size:.86rem}
.topbar .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:18px;height:42px}
.topbar a{color:#eaf3e0;opacity:.92;transition:opacity .2s}
.topbar a:hover{opacity:1}
.topbar .tb-left{display:flex;gap:22px;align-items:center}
.topbar .tb-left span{display:inline-flex;align-items:center;gap:.5em}
.topbar .tb-left span a{display:inline-flex;align-items:center;gap:.5em}
.topbar .tb-soc{display:flex;gap:14px;align-items:center}
.topbar svg{width:15px;height:15px;display:block}
@media(max-width:820px){.topbar .tb-left span.hide-sm{display:none}}
@media(max-width:560px){.topbar{display:none}}

.site-head{position:relative;z-index:60;background:rgba(252,251,246,.85);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s, box-shadow .3s, background .3s}
.site-head.scrolled{border-color:var(--line);box-shadow:var(--shadow-sm);background:rgba(252,251,246,.96)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:92px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:74px;width:auto}

.menu{display:flex;align-items:center;gap:6px}
.menu>li{position:relative;list-style:none}
.menu>li>a{display:flex;align-items:center;gap:.35em;font-family:var(--display);font-weight:500;
  font-size:1.02rem;padding:.6em .85em;border-radius:12px;color:var(--ink);transition:background .2s,color .2s}
.menu>li>a:hover{background:var(--green-50);color:var(--green-700)}
.menu>li>a.active{color:var(--green-700)}
.menu .caret{width:11px;height:11px;opacity:.6}
.menu ul{position:absolute;top:calc(100% + 10px);left:0;min-width:248px;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;list-style:none;margin:0}
.menu li:hover>ul{opacity:1;visibility:visible;transform:translateY(0)}
.menu ul li a{display:block;padding:.62em .8em;border-radius:11px;font-family:var(--body);font-weight:600;font-size:.97rem}
.menu ul li a:hover{background:var(--green-50);color:var(--green-700)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:13px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px;transition:.3s}

@media(max-width:1080px){
  .menu,.nav .nav-cta .btn{display:none}
  .burger{display:block}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none;overflow:hidden}
.drawer .ov{position:absolute;inset:0;background:rgba(38,41,31,.4);opacity:0;transition:.3s}
.drawer .panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--paper);
  box-shadow:var(--shadow-lg);transform:translateX(100%);transition:.34s cubic-bezier(.3,.8,.3,1);
  padding:24px;overflow-y:auto}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .ov{opacity:1}
.drawer.open .panel{transform:translateX(0)}
.drawer .panel a{display:block;font-family:var(--display);font-weight:500;font-size:1.1rem;padding:.7em 0;border-bottom:1px solid var(--line)}
.drawer .panel .sub a{font-family:var(--body);font-weight:600;font-size:.98rem;padding-left:16px;color:var(--ink-soft);border:none;padding-block:.45em}
.drawer .grp{font-family:var(--display);font-weight:600;color:var(--green-700);margin-top:18px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.drawer .x{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:20px;cursor:pointer;line-height:1}

/* ---------- Section heading block ---------- */
.sh{max-width:720px}
.sh.center{margin-inline:auto}

/* ---------- Footer ---------- */
.site-foot{background:#23271c;color:#c9cdbf;padding-block:clamp(56px,7vw,84px) 0;margin-top:40px}
.site-foot a{color:#c9cdbf;transition:color .2s}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:48px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr;gap:36px}}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.foot-brand .plate{width:84px;height:84px;border-radius:20px;background:#fff;display:grid;place-items:center;flex:none}
.foot-brand .plate img{width:64px;height:64px}
.foot-brand b{font-family:var(--display);font-weight:600;font-size:1.4rem;color:#fff;display:block;line-height:1}
.foot-brand small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-300)}
.foot h4{color:#fff;font-size:1.1rem;margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.98rem}
.foot .ci{display:flex;gap:11px;align-items:flex-start;font-size:.98rem;margin-bottom:13px}
.foot .ci svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green-300)}
.foot-soc{display:flex;gap:12px;margin-top:6px}
.foot-soc a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.foot-soc a:hover{background:var(--green)}
.foot-soc svg{width:19px;height:19px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:52px;padding-block:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.86rem;color:#8d917f}
.foot-map{margin-top:48px;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12);line-height:0;box-shadow:var(--shadow)}
.foot-map iframe{width:100%;height:300px;border:0;display:block;filter:grayscale(.2)}
@media(max-width:860px){.foot-map iframe{height:240px}}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 16px 30px -10px rgba(37,211,102,.6);
  transition:transform .25s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;color:#fff}

/* ---------- Page hero (interior) ---------- */
.phero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--green-50),var(--paper));padding-block:clamp(54px,8vw,96px) clamp(40px,6vw,72px)}
.phero .crumb{font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--green-700);margin-bottom:14px;display:flex;gap:.5em;align-items:center}
.phero .crumb a{opacity:.8}.phero .crumb a:hover{opacity:1}
.phero h1{max-width:16ch}
.phero p{max-width:54ch;margin-top:14px}

/* reveal — base state is the VISIBLE end state (content never depends on a
   transition/animation completing). Entrance is enhancement-only. */
.reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
  .reveal.in{opacity:1;transform:none}
  /* failsafe: if the entrance never plays, force visible */
  .reveal.shown{opacity:1 !important;transform:none !important;transition:none !important}
}

/* stat */
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,3.8rem);color:var(--green-700);line-height:1}
.stat .l{font-family:var(--display);font-weight:500;color:var(--ink-soft);font-size:1rem}

/* list with check */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-weight:600}
.checks li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;margin-top:1px;
  background:var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C8E29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat}

/* quote / testimonial */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm);position:relative}
.tcard .q{font-size:1.04rem;line-height:1.6}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.tcard .av{width:46px;height:46px;border-radius:50%;background:var(--green-100);display:grid;place-items:center;
  font-family:var(--display);font-weight:600;color:var(--green-700);flex:none}
.tcard .who b{font-family:var(--display);font-weight:600;font-size:1rem;display:block;line-height:1.2}
.tcard .who span{font-size:.85rem;color:var(--ink-soft)}
.stars{color:var(--gold);letter-spacing:2px;font-size:.95rem}

/* Google reviews badge */
.gbadge{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:10px 18px 10px 14px;
  background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.gbadge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gbadge .glogo svg{width:26px;height:26px;display:block}
.gbadge .gtxt{text-align:left;line-height:1.1}
.gbadge .gtxt b{font-family:var(--display);font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:8px;color:var(--ink)}
.gbadge .gtxt b .stars{font-size:.9rem}
.gbadge .gtxt small{color:var(--ink-soft);font-size:.8rem}
.tcard .gsrc{position:absolute;top:22px;right:22px}
.tcard .gsrc svg{width:22px;height:22px;display:block;opacity:.9}
.tcard .q{padding-right:20px}

/* marquee strip */
.strip{background:var(--green-700);color:#fff;overflow:hidden;padding-block:16px}
.strip .row{display:flex;gap:48px;white-space:nowrap;animation:slide 28s linear infinite;width:max-content}
.strip .row span{font-family:var(--display);font-weight:500;font-size:1.1rem;display:inline-flex;gap:.6em;align-items:center;opacity:.95}
.strip .row span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip .row{animation:none}}

/* ---------- Interior helpers ---------- */
.prose{max-width:68ch}
.prose p{font-size:1.06rem;color:#41463a}
.prose h3{margin:1.6em 0 .5em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.rev .split-media{order:-1}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}

/* activity card: photo + caption */
.actv{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:300px;display:flex;
  flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;isolation:isolate;
  background:linear-gradient(150deg,var(--green-700),#39661f)}
.actv .media{position:absolute;inset:0;border-radius:0;z-index:-2}
.actv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(20,30,12,.82))}
.actv h3{color:#fff;margin-bottom:4px}
.actv p{color:rgba(255,255,255,.92);margin:0;font-size:.96rem}
.actv .tag{position:absolute;top:20px;left:20px;background:rgba(255,255,255,.92);color:var(--green-700)}

/* numbered feature */
.feat{display:flex;gap:18px;align-items:flex-start}
.feat .num{flex:none;width:46px;height:46px;border-radius:14px;background:var(--green-50);color:var(--green-700);
  display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.15rem}
.feat h3{font-size:1.18rem;margin-bottom:4px}
.feat p{margin:0;color:var(--ink-soft);font-size:.98rem}

/* big pull quote */
.pull{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.22;
  color:var(--ink);max-width:20ch;text-wrap:balance}
.pull .mk{color:var(--green)}

/* interior gallery */
.igal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.igal .media{aspect-ratio:1/1}

/* phero decorative dots */
.phero .ph-dots{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.phero>.wrap-wide{position:relative;z-index:2}