/* ============================================================
   TOKENS — lidos das variáveis CSS declaradas em
   knowaeducation.com.br (:root), não amostrados de screenshot.
   Nomes mantidos iguais aos do site oficial para facilitar a troca.
   ============================================================ */
:root{
  --red:#ED2E38;
  --red-dark:#C9202A;
  --purple:#664778;
  --purple-dark:#4A3159;
  --purple-ink:#2E2138;
  --blue:#78B3E0;
  --orange:#EF6B00;
  --green:#009E60;
  --blue-soft:#EAF4FB;
  --blue-mist:#DDEDF9;
  --paper:#FFFFFF;
  --cloud:#F2F7FF;
  --sand:#F4F9FD;
  --line:#E6EDF4;
  --muted:#5E6D7E;
  --placeholder:#A2AFBD;

  --r-sm:8px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:999px;
  --shadow-sm:0 4px 8px rgba(38,54,153,.06);
  --shadow-md:0 8px 20px rgba(38,54,153,.08);
  --shadow-lg:0 16px 40px rgba(38,54,153,.10);

  --display:'Titan One','Trebuchet MS',sans-serif;
  --body:'Ubuntu','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* imagens embutidas */
  --logo-creme:url("img/logo-creme.png");

  --ilha-fundo:url("img/ilha-fundo.webp");
  /* fotos de rotina e personagens da Knowa Island */
  --foto-lendo:url("img/foto-lendo.webp");
  --foto-lupa:url("img/foto-lupa.webp");
  --foto-planeta:url("img/foto-planeta.webp");
  --p-jacob:url("img/p-jacob.webp");
  --p-luna:url("img/p-luna.webp");
  --p-gavin:url("img/p-gavin.webp");
  --p-ring:url("img/p-ring.webp");

  /* fotos reais da padronização Knowa (unidade já entregue) */
  --f-oceano:url("img/f-oceano.webp");
  --f-safari:url("img/f-safari.webp");
  --f-espaco:url("img/f-espaco.webp");
  --f-floresta:url("img/f-floresta.webp");
  --f-inverno:url("img/f-inverno.webp");
  --f-soninho:url("img/f-soninho.webp");
  --f-playground:url("img/f-playground.webp");
  --f-hall:url("img/f-hall.webp");
  --f-corredor:url("img/f-corredor.webp");
  --f-portal:url("img/f-portal.webp");
  --arte-hero-cel:url("img/arte-hero-cel.webp");
  --arte-hero:url("img/arte-hero.webp");

  /* casca da apresentação, fora do site */
  --shell-bg:#E8ECF1;
  --shell-panel:#FFFFFF;
  --shell-ink:#232C36;
  --shell-soft:#5E6D7E;
  --shell-line:#CFD8E2;
  --shell-accent:#664778;

  /* marcação de campo pendente */
  --ph-line:#C0576F;
  --ph-fill:rgba(192,87,111,.07);
  --ph-ink:#A34057;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shell-bg:#191E25;
    --shell-panel:#232B34;
    --shell-ink:#E7EDF4;
    --shell-soft:#9FAEBE;
    --shell-line:#35404C;
    --shell-accent:#C3A5D6;
    --ph-line:#D98BA0;
    --ph-ink:#E6A5B6;
  }
}
:root[data-theme="dark"]{
  --shell-bg:#191E25;
  --shell-panel:#232B34;
  --shell-ink:#E7EDF4;
  --shell-soft:#9FAEBE;
  --shell-line:#35404C;
  --shell-accent:#C3A5D6;
  --ph-line:#D98BA0;
  --ph-ink:#E6A5B6;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--purple-ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}

.site .wrap{padding-left:22px;padding-right:22px;max-width:1040px;margin:0 auto}
.site h1,.site h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.02;margin:0;text-wrap:balance}
.site h3{font-family:var(--body);font-weight:700;line-height:1.25;margin:0}
.site p{margin:0}

/* header: barra flutuante, no padrao do site oficial
   gradiente amostrado da barra da franquia: #387DAA -> #479BC4 */
.nav{position:sticky;top:10px;z-index:30;padding:16px 12px 0}
.nav-in{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  max-width:1060px;margin:0 auto;
  background:linear-gradient(90deg,#387DAA 0%,#4189B5 55%,#479BC4 100%);
  border:5px solid var(--paper);
  border-radius:var(--r-pill);
  padding:7px 7px 7px 16px;
  flex-wrap:nowrap;
  box-shadow:0 12px 28px -14px rgba(46,33,56,.55);
}
.logo{
  display:block;height:24px;width:74px;flex:none;
  background:var(--logo-creme) left center/contain no-repeat;
}
.nav-brand{flex:none;display:flex;align-items:center;line-height:0}
.foot .logo{height:34px;width:104px;margin-bottom:16px}
/* marcadores de seção */
.nav-links{
  order:0;flex:1 1 auto;min-width:0;display:flex;gap:2px;list-style:none;margin:0;padding:0;
  font-size:13px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links li{flex:none;scroll-snap-align:center}
.nav-links a{
  position:relative;display:block;color:#fff;text-decoration:none;opacity:.82;
  padding:8px 11px 10px;border-radius:var(--r-pill);white-space:nowrap;
  transition:opacity .15s,background .15s;
}
.nav-links a:hover{opacity:1;background:rgba(255,255,255,.14)}
.nav-links a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:3px;translate:-50% 0;
  width:5px;height:5px;border-radius:50%;background:#fff;
  opacity:0;scale:.4;transition:opacity .2s,scale .2s;
}
.nav-links a[aria-current="true"]{opacity:1;background:rgba(255,255,255,.2);font-weight:700}
.nav-links a[aria-current="true"]::after{opacity:1;scale:1}
@media (prefers-reduced-motion: reduce){
  .nav-links a,.nav-links a::after{transition:none}
}

/* âncoras não podem parar embaixo da barra */
.site section[id]{scroll-margin-top:90px}
.nav .btn{
  font-size:12.5px;padding:0;width:38px;height:38px;justify-content:center;gap:0;
  border-radius:50%;box-shadow:0 4px 12px -4px rgba(0,0,0,.35);white-space:nowrap;flex:none;
}
.nav .btn .full,.nav .btn .short,.nav .btn .arrow{display:none}
.nav .btn .wa{width:19px;height:19px}
.nav .btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.navbar-spacer{height:0}

/* botões */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:15px;padding:13px 22px;border-radius:var(--r-lg);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--red-dark)}
.btn-outline{background:transparent;color:var(--purple-ink);border-color:var(--purple-ink)}
.btn-outline:hover{background:var(--blue-soft)}
.btn-light{background:#fff;color:var(--purple)}
.btn svg{width:17px;height:17px;flex:none}
.btn .arrow{margin-left:-2px}

/* ============================================================
   CARROSSEL — navegação por flechas, uma peça de cada vez
   ============================================================ */
.carousel{position:relative;--w:100%;--off:0%;margin-top:26px}
.car-viewport{overflow:hidden;padding-block:6px}
.car-track{
  display:flex;
  transform:translateX(calc(var(--off) - var(--i,0) * var(--w)));
  transition:transform .5s cubic-bezier(.3,.85,.3,1)
}
.car-slide{
  flex:0 0 var(--w);min-width:0;
  opacity:.4;transform:scale(.93);
  transition:opacity .45s, transform .45s
}
.car-slide[aria-current="true"]{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .car-track,.car-slide{transition:none}
}
.car-nav{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:16px}
.car-btn{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--purple);
  display:grid;place-items:center;box-shadow:0 10px 24px -16px rgba(46,33,56,.6)
}
.car-btn:hover{background:var(--blue-soft)}
.car-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.car-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.car-dots{display:flex;align-items:center;gap:8px}
.car-dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(94,109,126,.35);transition:width .3s, background .3s
}
.car-dots button[aria-current="true"]{background:var(--red);width:24px}
.car-dots button:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ambientes: o card vizinho aparece pela borda */
#ambientes .carousel{--w:86%;--off:7%}
#ambientes .car-slide{padding-inline:9px}

/* ============================================================
   KNOWA ISLAND — painel com a ilha ao fundo
   ============================================================ */
.island-panel{
  position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;
  padding:30px 20px 26px;
  background-color:#0E3247;
  background-image:
    linear-gradient(100deg, rgba(6,28,42,.9) 0%, rgba(6,28,42,.78) 42%, rgba(6,28,42,.42) 72%, rgba(6,28,42,.22) 100%),
    var(--ilha-fundo);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat
}
.island-panel .eyebrow{color:var(--blue)}
.site .island-panel h2{color:#fff}
.island-panel .sec-lead{color:rgba(255,255,255,.84)}
.island-info{margin-top:24px;border-left:3px solid var(--orange);padding-left:16px}
.island-info .nome{font-family:var(--display);font-size:23px;line-height:1.1;color:#fff;margin:0 10px 0 0;display:inline}
.island-info .papel{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--orange);font-weight:700}
.island-info .texto{margin:9px 0 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.88)}
.char-art{height:270px;background-repeat:no-repeat;background-position:center bottom;background-size:contain}
.island-panel .car-btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:none}
.island-panel .car-btn:hover{background:rgba(255,255,255,.28)}
.island-panel .car-btn:focus-visible{outline-color:#fff}
.island-panel .car-dots button{background:rgba(255,255,255,.38)}
.island-panel .car-dots button[aria-current="true"]{background:#fff}

/* ============================================================
   FOTOS REAIS E AMBIENTES
   ============================================================ */
.foto{background-size:cover;background-position:center;background-repeat:no-repeat;outline:0}
.foto-nota{margin-top:20px;font-size:13px;color:var(--muted);line-height:1.6}

.amb{border-radius:var(--r-md);overflow:hidden;background:var(--paper);box-shadow:0 14px 30px -22px rgba(46,33,56,.5)}
.amb .img{height:250px}
.amb b{display:block;padding:15px 17px 3px;font-size:15.5px;color:var(--purple-ink)}
.amb span{display:block;padding:0 17px 17px;font-size:13.5px;color:var(--muted);line-height:1.5}

.mapcard{
  margin-top:24px;border-radius:var(--r-md);padding:24px 22px;
  background:linear-gradient(135deg,var(--blue-soft),var(--blue-mist));
  border:1px solid var(--line);display:flex;gap:16px;align-items:flex-start
}
.mapcard svg{width:26px;height:26px;flex:none;stroke:var(--purple);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mapcard b{display:block;font-size:16px;color:var(--purple-ink)}
.mapcard p{margin:5px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
.mapcard a{display:inline-block;margin-top:10px;font-weight:700;color:var(--red);font-size:14px;text-decoration:none}
.mapcard a:hover{text-decoration:underline}

.manifesto{
  margin-top:30px;border-left:4px solid var(--red);padding:4px 0 4px 20px
}
.manifesto p{margin:0 0 12px;font-size:16.5px;line-height:1.7;color:var(--purple-ink)}
.manifesto p:last-child{margin-bottom:0}
.manifesto .assina{font-family:var(--display);font-size:17px;color:var(--purple)}

/* hero */
/* No estreito a ilustração é uma faixa no rodapé do hero: recortá-la
   na vertical transformaria a cena em dois rostos gigantes.
   A partir de 700px ela vira o fundo inteiro, como no site da franquia. */
/* O hero é a ilustração inteira, sem véu por cima: o texto branco
   se apoia nas árvores escuras das bordas, como no site da franquia.
   No estreito a cena é recortada no centro e um degradê baixo,
   puxado do verde da grama, segura a leitura do bloco de texto. */
.hero{
  position:relative;overflow:hidden;color:#fff;
  margin-top:-88px;padding-top:88px;
  min-height:812px;
  display:flex;flex-direction:column;justify-content:flex-start;
  /* No estreito entra a versão vertical da arte, inteira. */
  background-color:#1290CD;
  background-image:var(--arte-hero-cel);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}
/* Branco sobre o céu dessa arte dá 1,8:1 de contraste, muito abaixo
   do mínimo legível. Este tingimento azul-marinho cobre só a faixa do
   céu onde o texto fica, e leva o contraste para cerca de 8:1. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,48,76,.42) 0%, rgba(10,48,76,.50) 26%, rgba(10,48,76,.48) 46%, rgba(10,48,76,.40) 62%, rgba(10,48,76,.16) 74%, rgba(10,48,76,0) 86%);
}
.hero-in{padding-block:18px 34px;position:relative;width:100%}
.hero-marca{
  display:block;margin:0 auto 22px;filter:drop-shadow(0 3px 16px rgba(16,36,18,.45));
  width:clamp(140px,26cqw,240px);aspect-ratio:416/140;
  background:var(--logo-creme) center/contain no-repeat;
}
.hero-grid{display:grid;gap:22px;align-items:end}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:var(--r-pill)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.hero h1{font-size:clamp(30px,7.6cqw,52px);color:#fff;margin-top:16px;text-shadow:0 2px 6px rgba(16,36,18,.55), 0 6px 28px rgba(16,36,18,.45)}
.hero-lead{font-size:16.5px;line-height:1.6;color:#fff;max-width:44ch;text-shadow:0 1px 4px rgba(16,36,18,.6), 0 4px 18px rgba(16,36,18,.5)}
.hero-cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.hero-note{font-size:13px;color:rgba(255,255,255,.95);line-height:1.55;text-shadow:0 1px 4px rgba(16,36,18,.65), 0 3px 14px rgba(16,36,18,.5)}

/* faixa de fatos */
.facts{background:var(--blue)}
.facts-in{display:grid;gap:0}
.fact{padding:19px 22px;border-bottom:1px solid rgba(255,255,255,.4)}
.fact:last-child{border-bottom:0}
.fact dt{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(46,33,56,.65)}
.fact dd{margin:6px 0 0;font-family:var(--display);font-size:20px;line-height:1.15;color:var(--purple-ink);text-transform:uppercase}

/* seções */
.sec{padding-block:50px}
.sec-cloud{background:var(--cloud)}
.sec-sand{background:var(--sand)}
.sec-mist{background:var(--blue-mist)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sec h2{font-size:clamp(25px,5.6cqw,40px);margin-top:12px;color:var(--purple-ink)}
.sec-lead{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--muted);max-width:58ch}

/* cartões com tag colorida */
.tagcards{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.tagcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.tagcard-art{position:relative}
.tagcard-art{height:150px}
.tagcard-art .ph-box{min-height:0;height:100%}
.tagcard .tag{position:absolute;top:12px;left:12px;z-index:3;font-size:12px;font-weight:700;color:#fff;padding:5px 12px;border-radius:var(--r-sm)}
.tagcard:nth-child(1) .tag{background:var(--orange)}
.tagcard:nth-child(2) .tag{background:var(--blue);color:var(--purple-ink)}
.tagcard:nth-child(3) .tag{background:var(--red)}
.tagcard-body{padding:18px 20px 22px}
.tagcard h3{font-size:18px;color:var(--purple-ink)}
.tagcard p{margin-top:9px;font-size:15px;line-height:1.65;color:var(--muted)}

/* checks */
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:15px}
.check-item{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.check-item .tick{width:22px;height:22px;border-radius:7px;background:var(--green);display:grid;place-items:center;margin-top:2px}
.checks.checks-blue .tick{background:var(--blue)}
.check-item .tick svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.check-item b{display:block;font-weight:700;font-size:15.5px;color:var(--purple-ink);line-height:1.4}
.check-item span{display:block;font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:3px}

/* personagens */
.cast{margin-top:28px;display:grid;gap:14px}
.cast-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;grid-template-rows:auto 1fr;gap:12px;box-shadow:var(--shadow-sm)}
.cast-art{border-radius:var(--r-sm);height:132px}
.cast-art .ph-box{min-height:0;height:100%}
.cast-card h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--purple);line-height:1}
.cast-role{display:block;font-weight:700;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-top:6px}
.cast-card p{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* fases */
.phases{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.phase{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 12px 20px;box-shadow:var(--shadow-sm)}
.phase-art{position:relative;border-radius:11px;margin-bottom:16px;height:132px}
.phase-art .ph-box{min-height:0;height:100%}
.phase-badge{position:absolute;right:10px;bottom:-14px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:700;font-size:11.5px;color:#fff;line-height:1.15;border:2px dashed rgba(255,255,255,.85);box-shadow:var(--shadow-md)}
.phase-body{padding:14px 8px 0}
.phase-eyebrow{display:block;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.phase h3{font-size:17.5px;color:var(--purple-ink);min-height:2.5em}
.phase p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.phase:nth-child(1) .phase-badge{background:var(--blue)}
.phase:nth-child(1) .phase-eyebrow{color:var(--blue)}
.phase:nth-child(2) .phase-badge{background:var(--green)}
.phase:nth-child(2) .phase-eyebrow{color:var(--green)}
.phase:nth-child(3) .phase-badge{background:var(--orange)}
.phase:nth-child(3) .phase-eyebrow{color:var(--orange)}
.phase:nth-child(4) .phase-badge{background:var(--blue)}
.phase:nth-child(4) .phase-eyebrow{color:var(--purple)}

/* princípios numerados */
.principles{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;counter-reset:pr}
.principle{counter-increment:pr;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-sm)}
.principle > p{font-size:15px;line-height:1.65;color:var(--muted)}
.principle .who{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.principle .who::before{content:counter(pr);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff}
.principle:nth-child(1) .who::before{background:var(--blue);color:var(--purple-ink)}
.principle:nth-child(2) .who::before{background:var(--orange)}
.principle:nth-child(3) .who::before{background:var(--green)}
.principle .who b{display:block;font-weight:700;font-size:15.5px;color:var(--purple-ink);line-height:1.3}
.principle .who span{display:block;font-size:14px;color:var(--placeholder);line-height:1.5;margin-top:3px}

/* obra */
.obra-grid{margin-top:26px;display:grid;gap:12px}
.obra-grid .ph{border-radius:var(--r-md)}
.obra-grid .ph-box{min-height:150px}
.obra-cta{margin-top:26px;background:var(--purple);color:#fff;border-radius:var(--r-md);padding:24px}
.obra-cta h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:21px;line-height:1.05;color:#fff}
.obra-cta p{margin-top:10px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);max-width:44ch}
.obra-cta .btn{margin-top:18px}

/* onde */
.map{margin-top:24px;border-radius:var(--r-md);overflow:hidden}
.map .ph-box{min-height:210px}
.addr{margin-top:22px;display:grid;gap:14px}
.addr-item dt{font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--placeholder)}
.addr-item dd{margin:5px 0 0;font-size:16px;color:var(--purple-ink)}

/* faq */
.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;font-weight:700;font-size:16px;color:var(--purple-ink);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
.faq .answer{padding:0 0 18px;font-size:15.5px;line-height:1.7;color:var(--muted);max-width:58ch}

/* cta final */
.final{background:linear-gradient(165deg,var(--purple) 0%,var(--purple-dark) 100%);color:#fff;padding-block:50px}
.final h2{font-size:clamp(25px,5.6cqw,38px);color:#fff}
.final .sec-lead{color:rgba(255,255,255,.85)}
.final .eyebrow{color:var(--blue)}
.channels{margin-top:28px;display:grid;gap:12px}
.channel{display:flex;align-items:center;gap:14px;text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-md);padding:16px 18px;transition:background .18s}
.channel:hover{background:rgba(255,255,255,.18)}
.channel svg{width:22px;height:22px;flex:none;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.channel b{display:block;font-weight:700;font-size:16px;color:#fff;line-height:1.3}
.channel > span > span{display:block;font-size:13.5px;color:rgba(255,255,255,.75);margin-top:3px;line-height:1.45}
.channel.is-primary{background:var(--red);border-color:var(--red)}
.channel.is-primary:hover{background:var(--red-dark)}

/* footer */
.foot{background:var(--purple-ink);color:rgba(255,255,255,.62);padding-block:34px;font-size:13.5px;line-height:1.75}
.foot .logo{color:var(--blue);margin-bottom:14px}
.foot-grid{display:grid;gap:22px}
.foot a{color:rgba(255,255,255,.8)}
.foot h4{font-family:var(--body);font-weight:700;font-size:13.5px;color:#fff;margin:0 0 8px}
.foot ul{list-style:none;margin:0;padding:0}
.foot-legal{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.45)}

/* ---------- acima de 700px de largura do FRAME ---------- */
@container (min-width: 700px){
  .site .wrap{padding-left:44px;padding-right:44px}
  .nav{padding:18px 22px 0;top:16px}
  .nav-in{padding:7px 7px 7px 24px;gap:10px}
  .nav-links{flex:0 1 auto;justify-content:center;gap:2px;font-size:13.5px;overflow:visible}
  .nav-links a{padding:8px 12px 10px}
  .logo{height:30px;width:92px;flex:none}
  .site section[id]{scroll-margin-top:106px}
  .nav .btn{
    font-size:13.5px;padding:11px 18px;width:auto;height:auto;border-radius:var(--r-pill);
    gap:9px;justify-content:flex-start;
  }
  .nav .btn .full,.nav .btn .arrow{display:inline}
  .nav .btn .wa{display:none}
  /* a partir daqui a ilustração ocupa o hero inteiro, sem véu,
     igual ao site da franquia */
  .hero{
    min-height:548px;
    justify-content:flex-end;
    background-image:var(--arte-hero);
    background-position:50% 50%;
    background-size:cover;
  }
  .hero::before{background:none}
  /* No desktop a arte fica limpa: sem véu e sem mancha atrás do texto.
     A legibilidade fica por conta da sombra do próprio texto. */
  /* frases que só aparecem no estreito */
  .cel-only{display:none}
  /* colunas empurradas para as bordas, para não passarem por cima
     dos personagens que ficam no centro da ilustração */
  .hero-in{padding-block:26px 46px;padding-left:110px;padding-right:56px}
  .hero-marca{margin-bottom:40px}
  .hero-grid{grid-template-columns:minmax(0,1fr) 332px;gap:70px}
  .hero h1{max-width:340px}
  .hero-lead{max-width:none}
  .hero-lead{font-size:18.5px}
  .hero-cta{flex-direction:row;align-items:center;gap:18px}
  .hero-art .ph-box{min-height:300px}
  .facts-in{grid-template-columns:repeat(3,1fr)}
  .fact{border-bottom:0;border-right:1px solid rgba(255,255,255,.4);padding:26px 30px}
  .fact:last-child{border-right:0}
  .sec{padding-block:80px}
  .final{padding-block:80px}
  .tagcards{grid-template-columns:repeat(3,1fr);gap:20px}
  .tagcard-art{height:170px}
  .checks{gap:18px}
  .cast{grid-template-columns:repeat(4,1fr)}
  .phases{grid-template-columns:repeat(4,1fr);gap:20px}
  .phase-art{height:152px}
  .principles{grid-template-columns:repeat(3,1fr);gap:18px}
  .obra-grid{grid-template-columns:repeat(3,1fr)}
  .obra-cta{padding:34px 38px}
  .addr{grid-template-columns:repeat(3,1fr)}
  .channels{grid-template-columns:repeat(2,1fr);align-items:stretch}
  .channel{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .amb .img{height:220px}
  .mapcard{padding:30px 30px}
  #ambientes .carousel{--w:56%;--off:22%}
  .amb .img{height:330px}
  .island-panel{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:46px;align-items:center;padding:50px 46px}
  .island-panel .car-nav{justify-content:flex-end}
  .char-art{height:390px}
}

/* ============================================================
   PÁGINA
   A moldura da apresentação virou só o container das container
   queries: o site agora ocupa a largura inteira da janela.
   ============================================================ */
.site-frame{
  container-type:inline-size;width:100%;
  background:var(--paper);color:var(--purple-ink);font-family:var(--body);
  overflow:clip
}
.pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--purple);padding:12px 18px;border-radius:0 0 var(--r-md) 0;font-weight:700
}
.pular:focus{left:0}

/* ============================================================
   PÁGINA DA LISTA DE ESPERA
   ============================================================ */
:root{--line-forte:#C6D6E4}

.capa{
  position:relative;color:#fff;
  margin-top:-88px;padding-top:104px;padding-bottom:34px;
  background:linear-gradient(135deg,#2E7FB0 0%,var(--purple) 100%)
}
.capa h1{font-size:clamp(27px,6.4cqw,42px);color:#fff}
.capa .eyebrow{color:#BFE0F5}
.capa p{margin:13px 0 0;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.9);max-width:52ch}

.form-sec{padding-block:40px 56px}
.form-card{
  margin-inline:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px;box-shadow:0 24px 54px -40px rgba(46,33,56,.6);max-width:650px
}
.campo{margin-bottom:20px}
.campo:last-of-type{margin-bottom:0}
.campo > label,.campo > .rotulo{
  display:block;font-size:14.5px;font-weight:500;margin-bottom:7px;color:var(--purple-ink)
}
.obrig{color:var(--red);font-weight:700}
.ajuda{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px;line-height:1.45}
.form-card input[type=text],
.form-card input[type=tel],
.form-card select,
.form-card textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--purple-ink);
  background:#fff;border:1px solid var(--line-forte);border-radius:10px;padding:11px 13px
}
.form-card textarea{min-height:86px;resize:vertical;line-height:1.5}
.form-card :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.form-card input:user-invalid,.form-card select:user-invalid{border-color:var(--red)}

.opcoes{display:grid;gap:9px}
.opcao{
  display:flex;gap:11px;align-items:center;cursor:pointer;font-size:15px;
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff
}
.opcao input{accent-color:var(--red);width:17px;height:17px;flex:none;margin:0}
.opcao:has(input:checked){border-color:var(--red);background:#FFF4F4}

.consent{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;line-height:1.55;color:var(--muted);cursor:pointer
}
.consent input{accent-color:var(--red);width:17px;height:17px;flex:none;margin:3px 0 0}

.form-rodape{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.form-aviso{font-size:13px;color:var(--muted);line-height:1.5}
.form-erro{
  margin:16px 0 0;font-size:14px;line-height:1.55;color:#A31621;font-weight:500;
  background:#FFF0F0;border:1px solid #F3C6C6;border-radius:10px;padding:12px 14px
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.obrigado{
  margin-inline:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 24px;max-width:650px;box-shadow:0 24px 54px -40px rgba(46,33,56,.6)
}
.obrigado .selo{
  width:54px;height:54px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;margin-bottom:18px
}
.obrigado .selo svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.obrigado h2{font-size:26px;color:var(--purple-ink)}
.obrigado p{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--muted)}
.obrigado .btn{margin-top:22px}

@container (min-width: 700px){
  .capa{padding-top:138px;padding-bottom:52px}
  .form-sec{padding-block:56px 76px}
  .form-card,.obrigado{padding:34px 34px}
  .dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .opcoes.linha{grid-template-columns:1fr 1fr}
}

/* ============================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   Fica fora do .site-frame de propósito: container-type torna o
   frame o bloco de referência de quem é position:fixed, e aí o
   botão rolaria junto com a página em vez de ficar parado.
   O verde é mais escuro que o da marca do WhatsApp para o branco
   por cima passar de 5:1 de contraste.
   ============================================================ */
.zap{
  position:fixed;z-index:60;
  right:calc(16px + env(safe-area-inset-right, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:inline-flex;align-items:center;gap:10px;
  padding:15px;border-radius:999px;
  background:#0F7A63;color:#fff;text-decoration:none;
  font-family:var(--body);font-weight:700;font-size:15.5px;line-height:1;
  box-shadow:0 16px 32px -12px rgba(10,60,48,.6), 0 2px 6px rgba(0,0,0,.2);
  transition:transform .2s ease, background .2s ease
}
.zap svg{width:26px;height:26px;fill:currentColor;flex:none;display:block}
.zap span{display:none}
.zap:hover{background:#0C6653;transform:translateY(-2px)}
.zap:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(15,122,99,.55)}
@media (prefers-reduced-motion: reduce){.zap{transition:none}.zap:hover{transform:none}}

@media (min-width: 700px){
  .zap{
    right:calc(24px + env(safe-area-inset-right, 0px));
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    padding:15px 23px 15px 19px
  }
  .zap span{display:inline}
}

/* ============================================================
   SEÇÃO DO VÍDEO
   Cartão roxo: texto de um lado, vídeo vertical do outro.
   ============================================================ */
.video-card{
  background:var(--purple);color:#fff;border-radius:var(--r-lg);
  padding:30px 22px;display:grid;gap:28px;align-items:center
}
.site .video-card h2{color:#fff}
.video-card .eyebrow{color:var(--blue)}
.video-card .sec-lead{color:rgba(255,255,255,.86)}
.video-card .check-item b{color:#fff}
.video-card .check-item .tick{background:var(--blue)}
.video-card .check-item .tick svg{stroke:var(--purple-ink)}

.video-wrap{
  width:100%;max-width:330px;margin-inline:auto;
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.6)
}
.video-wrap video{
  display:block;width:100%;height:auto;aspect-ratio:9/16;
  background:#141018;object-fit:cover
}

@container (min-width: 700px){
  .video-card{
    grid-template-columns:minmax(0,1fr) 330px;
    gap:48px;padding:52px 48px
  }
  .video-card .checks-tres{grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
  .video-card .checks-tres .check-item{grid-template-columns:22px 1fr}
  .video-wrap{max-width:none}
}