/* ==========================================================================
   Escola e Berçário A Corujinha — Piracicaba/SP
   Design system: lúdico premium, base clara e quente.
   Paleta derivada da marca REAL da escola (fachada azul+amarelo,
   uniforme azul-noite, mascote coruja vermelha).
   ========================================================================== */

:root{
  /* Marca */
  --azul:            #1B6FB8;   /* primária — azul da fachada */
  --azul-hover:      #155C9B;
  --azul-noite:      #173A6B;   /* títulos — azul do uniforme */
  --coral:           #E5432C;   /* acento CTA — a coruja e o letreiro */
  --coral-hover:     #C9351F;
  --amarelo:         #FFC42E;   /* destaque — faixa da fachada */
  --amarelo-escuro:  #E9A800;
  --verde:           #6FBF4A;
  --ciano:           #35BEE0;
  --rosa:            #F16A93;

  /* Superfícies pastel */
  --creme:           #FFF7E4;
  --azul-claro:      #EAF3FB;
  --menta:           #F1F9EC;
  --pessego:         #FFF2E6;
  --rosa-claro:      #FFF0F3;

  /* Neutros tintados */
  --fundo:           #FBFAF6;
  --superficie:      #FFFFFF;
  --titulo:          #173A6B;
  --texto:           #5C6072;
  --texto-suave:     #8A8E9E;
  --borda:           #ECE7E0;

  /* Tipografia */
  --display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --corpo:   "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* Escala fluida */
  --t-hero:  clamp(2.35rem, 1.35rem + 3.6vw, 4rem);
  --t-1:     clamp(1.85rem, 1.25rem + 2.2vw, 2.7rem);
  --t-2:     clamp(1.3rem, 1.08rem + .8vw, 1.6rem);
  --t-3:     clamp(1.06rem, .98rem + .35vw, 1.22rem);
  --t-corpo: clamp(1rem, .96rem + .18vw, 1.09rem);
  --t-peq:   .875rem;
  --t-mini:  .78rem;

  /* Espaço */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 120px;
  --secao: clamp(4.5rem, 3rem + 6vw, 7.5rem);

  /* Raios */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-pill: 999px;

  /* Sombras discretas, tintadas de azul */
  --sombra-sutil: 0 2px 8px rgba(23,58,107,.045);
  --sombra-card:  0 10px 34px rgba(23,58,107,.07);
  --sombra-alta:  0 18px 48px rgba(23,58,107,.13);

  --container: 1180px;
  --header-h: 78px;
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:var(--corpo); font-size:var(--t-corpo); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3,h4{
  font-family:var(--display); color:var(--titulo);
  line-height:1.1; letter-spacing:-.02em; margin:0 0 var(--s-4);
  font-weight:600; text-wrap:balance;
}
h1{ font-size:var(--t-hero); font-weight:700; }
h2{ font-size:var(--t-1); }
h3{ font-size:var(--t-2); }
p{ margin:0 0 var(--s-4); max-width:64ch; }
a{ color:var(--azul); text-decoration-thickness:1.5px; text-underline-offset:3px; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:4px; }

.container{ width:min(100% - 2.5rem, var(--container)); margin-inline:auto; }
@media (min-width:768px){ .container{ width:min(100% - 4rem, var(--container)); } }

[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

.pular{ position:absolute; left:-9999px; }
.pular:focus{ left:var(--s-4); top:var(--s-4); z-index:200; background:var(--coral);
  color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-pill); font-weight:700; }

/* --------------------------------------------------- barra utilitária */
.barra-topo{
  background:var(--azul-noite); color:#DCE6F5;
  font-size:var(--t-mini); min-height:38px; display:flex; align-items:center;
}
.barra-topo .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding-block:.45rem; flex-wrap:wrap;
}
.barra-topo a{ color:#fff; text-decoration:none; font-weight:600; }
.barra-topo a:hover{ color:var(--amarelo); }
.barra-topo .frase{ display:none; align-items:center; gap:.5rem; color:#B9CBE6; }
@media (min-width:960px){ .barra-topo .frase{ display:flex; } }
.barra-topo .social{ display:flex; align-items:center; gap:.6rem; }
.barra-topo .social svg{ width:16px; height:16px; }
.barra-topo .fone{ display:flex; align-items:center; gap:.45rem; }
.barra-topo .fone svg{ width:14px; height:14px; }

/* ------------------------------------------------------------- header */
.cabecalho{
  position:sticky; top:0; z-index:50; background:var(--superficie);
  border-bottom:1px solid transparent; transition:box-shadow .3s ease, border-color .3s ease;
}
.cabecalho.rolou{ box-shadow:var(--sombra-sutil); border-bottom-color:var(--borda);
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px); }
.cabecalho .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-5); min-height:var(--header-h);
}
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
/* logo real da escola (PNG com fundo transparente) */
.marca .marca-mark{ width:auto; height:54px; flex-shrink:0; object-fit:contain; }
@media (max-width:420px){ .marca .marca-mark{ height:46px; } }
/* no rodapé escuro o mascote ganha um disco claro pra não sumir no azul */
.rodape .marca .marca-mark{
  height:62px; width:62px; padding:7px; background:var(--creme);
  border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.marca-texto{ display:flex; flex-direction:column; line-height:1; }
.marca-nome{
  font-family:var(--display); font-weight:700; font-size:1.32rem;
  color:var(--azul-noite); letter-spacing:-.03em;
}
.marca-nome em{ font-style:normal; color:var(--coral); }
.marca-sub{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-suave); font-weight:700; margin-top:3px; }

.nav-desktop{ display:none; }
@media (min-width:1080px){ .nav-desktop{ display:flex; align-items:center; gap:.3rem; } }
.nav-desktop a{
  font-size:.875rem; font-weight:700; color:var(--azul-noite); text-decoration:none;
  padding:.55rem .72rem; border-radius:var(--r-pill); transition:background .2s, color .2s;
}
.nav-desktop a:hover{ background:var(--azul-claro); color:var(--azul); }
.nav-desktop a[aria-current="true"]{ background:var(--azul); color:#fff; }

.header-acoes{ display:flex; align-items:center; gap:var(--s-3); }
.header-acoes .btn{ display:none; }
@media (min-width:1080px){ .header-acoes .btn{ display:inline-flex; } }
.hamburguer{
  display:grid; place-items:center; width:46px; height:46px; padding:0;
  background:var(--azul-claro); border:none; border-radius:var(--r-md);
  color:var(--azul-noite); cursor:pointer;
}
@media (min-width:1080px){ .hamburguer{ display:none; } }
.hamburguer svg{ width:22px; height:22px; }
.hamburguer .icone-x{ display:none; }
.hamburguer[aria-expanded="true"] .icone-menu{ display:none; }
.hamburguer[aria-expanded="true"] .icone-x{ display:block; }

.nav-mobile{
  display:none; border-top:1px solid var(--borda); background:var(--superficie);
  padding:var(--s-4) 0 var(--s-6);
}
.nav-mobile.aberto{ display:block; }
@media (min-width:1080px){ .nav-mobile{ display:none !important; } }
.nav-mobile a{
  display:block; padding:.85rem .5rem; font-weight:700; color:var(--azul-noite);
  text-decoration:none; border-bottom:1px solid var(--borda); font-size:1.02rem;
}
.nav-mobile .btn{ margin-top:var(--s-5); width:100%; }

/* ------------------------------------------------------------- botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.6rem; border-radius:var(--r-pill);
  font-family:var(--corpo); font-weight:800; font-size:.95rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-coral{ background:var(--coral); color:#fff; box-shadow:0 6px 18px rgba(229,67,44,.26); }
.btn-coral:hover{ background:var(--coral-hover); box-shadow:0 10px 26px rgba(229,67,44,.34); }
.btn-azul{ background:var(--azul); color:#fff; box-shadow:0 6px 18px rgba(27,111,184,.24); }
.btn-azul:hover{ background:var(--azul-hover); box-shadow:0 10px 26px rgba(27,111,184,.32); }
.btn-amarelo{ background:var(--amarelo); color:var(--azul-noite); box-shadow:0 6px 18px rgba(0,0,0,.16); }
.btn-amarelo:hover{ background:var(--amarelo-escuro); }
.btn-contorno{ background:transparent; color:var(--azul-noite); border-color:var(--borda); }
.btn-contorno:hover{ border-color:var(--azul); color:var(--azul); background:var(--azul-claro); }
.btn-branco{ background:#fff; color:var(--azul-noite); }
.btn-texto{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:800;
  color:var(--azul); text-decoration:none; font-size:.95rem;
}
.btn-texto svg{ width:18px; height:18px; transition:transform .2s ease; }
.btn-texto:hover svg{ transform:translateX(4px); }
.btn-peq{ min-height:46px; padding:0 1.15rem; font-size:.86rem; }

/* ----------------------------------------------------------- seções */
.secao{ padding-block:var(--secao); position:relative; }
.secao-creme{ background:var(--creme); }
.secao-branca{ background:var(--superficie); }
.olho{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--t-mini); font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral); margin-bottom:var(--s-4);
}
.olho::before{ content:""; width:22px; height:2px; background:var(--amarelo); border-radius:2px; }
.cabeca-secao{ max-width:660px; margin-bottom:var(--s-8); }
.cabeca-secao.centro{ margin-inline:auto; text-align:center; }
.cabeca-secao.centro .olho{ justify-content:center; }
.cabeca-secao p{ font-size:1.06rem; margin-bottom:0; }
.cabeca-secao.centro p{ margin-inline:auto; }
.destaque-amarelo{
  background:linear-gradient(180deg, transparent 62%, rgba(255,196,46,.55) 62%);
  padding-inline:.1em;
}

/* -------------------------------------------------------------- hero */
.hero{ background:var(--creme); position:relative; overflow:hidden;
  padding-top:clamp(2.5rem,1.5rem + 4vw,4.5rem); padding-bottom:clamp(5rem,3rem + 8vw,8rem); }
.hero-grid{ display:grid; gap:clamp(2.5rem,2rem + 3vw,4rem); align-items:center;
  position:relative; z-index:2; }
@media (min-width:980px){
  .hero-grid{ grid-template-columns:1fr .92fr; }
  /* faixa de benefícios ocupa a largura toda, abaixo das duas colunas */
  .hero-grid .hero-beneficios{ grid-column:1 / -1; margin-top:var(--s-2); }
}
.hero h1{ margin-bottom:var(--s-5); }
.hero h1 span{ color:var(--coral); display:block; }
.hero-texto{ font-size:clamp(1.04rem,1rem + .3vw,1.16rem); max-width:50ch; margin-bottom:var(--s-6); }
.hero-botoes{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-bottom:0; align-items:center; }

.hero-beneficios{
  display:grid; gap:var(--s-5); padding-top:var(--s-6);
  border-top:1.5px dashed rgba(23,58,107,.18);
}
@media (min-width:560px){ .hero-beneficios{ grid-template-columns:repeat(3,1fr); gap:var(--s-6); } }
.beneficio{ display:flex; gap:.8rem; align-items:flex-start; }
.beneficio-icone{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
}
.beneficio-icone svg{ width:21px; height:21px; }
.beneficio-icone.rosa{ background:var(--rosa); }
.beneficio-icone.verde{ background:var(--verde); }
.beneficio-icone.ciano{ background:var(--ciano); }
.beneficio strong{ display:block; font-family:var(--display); font-weight:600;
  color:var(--azul-noite); font-size:.98rem; line-height:1.25; margin-bottom:2px; }
.beneficio span{ font-size:var(--t-peq); color:var(--texto); line-height:1.4; }

/* mascote animada */
.hero-mascote{ position:relative; display:grid; place-items:center; }
.mascote-disco{
  position:relative; width:min(100%,420px); aspect-ratio:1; overflow:hidden;
  background:#FFFCF3; border-radius:52% 48% 46% 54% / 48% 52% 48% 52%;
  box-shadow:var(--sombra-alta); z-index:2;
}
/* o vídeo tem fundo cinza-claro; o multiply casa esse fundo com o creme do hero
   e mantém as cores da coruja. Sem suporte, cai no vídeo normal — segue legível. */
.mascote-disco video, .mascote-disco img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.06);
  mix-blend-mode:multiply;
}
.hero-blob{
  position:absolute; width:min(96%,400px); aspect-ratio:1; z-index:1;
  background:var(--azul); opacity:.3;
  border-radius:46% 54% 58% 42% / 55% 44% 56% 45%;
  transform:translate(10%,-8%);
}
.hero-blob.dois{ background:var(--amarelo); opacity:.65; transform:translate(-14%,12%) scale(.8); }
.selo-anos{
  position:absolute; z-index:3; left:0; bottom:4%;
  width:118px; aspect-ratio:1; display:grid; place-items:center; text-align:center;
  background:var(--coral); color:#fff; padding:.5rem;
  border-radius:48% 52% 55% 45% / 45% 48% 52% 55%;
  box-shadow:0 12px 30px rgba(229,67,44,.3);
}
.selo-anos .selo-rotulo{ font-size:.63rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; line-height:1; display:block; margin-bottom:4px; }
.selo-anos b{ font-family:var(--display); font-size:1.6rem; line-height:1; display:block; }
@media (max-width:560px){ .selo-anos{ width:94px; } .selo-anos b{ font-size:1.28rem; } }

/* doodles decorativos */
.doodle{ position:absolute; pointer-events:none; z-index:1; }
.doodle svg{ width:100%; height:100%; }
.d-sol{ width:74px; height:74px; top:7%; right:3%; color:var(--amarelo); }
.d-nuvem{ width:98px; height:66px; top:2%; left:46%; color:var(--ciano); opacity:.7; }
.d-estrela{ width:44px; height:44px; bottom:22%; right:6%; color:var(--rosa); }
.d-espiral{ width:70px; height:70px; bottom:5%; left:1%; color:var(--verde); opacity:.8; }
.d-aviao{ width:60px; height:60px; top:40%; left:-1%; color:var(--rosa); opacity:.5; }
@media (max-width:900px){ .d-aviao,.d-espiral,.d-nuvem{ display:none; } }

/* onda de transição */
.onda{ display:block; width:100%; height:auto; margin-bottom:-2px; }

/* --------------------------------------------------------- números */
.numeros{ background:var(--azul-noite); color:#fff; padding-block:clamp(2.5rem,2rem + 2vw,3.5rem); }
.numeros-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-4); text-align:center; }
@media (min-width:820px){ .numeros-grid{ grid-template-columns:repeat(4,1fr); } }
.numero b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,1.5rem + 1.9vw,2.9rem); line-height:1; color:var(--amarelo);
  letter-spacing:-.03em;
}
.numero span{ display:block; margin-top:.5rem; font-size:var(--t-peq);
  color:#C3D2E8; line-height:1.4; }

/* ---------------------------------------------------- turmas (âncora) */
.turmas-grid{ display:grid; gap:var(--s-5); }
@media (min-width:640px){ .turmas-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .turmas-grid{ grid-template-columns:repeat(4,1fr); gap:var(--s-4); } }
.turma{
  background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.turma:hover{ transform:translateY(-5px); box-shadow:var(--sombra-card); border-color:transparent; }
.turma-foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--azul-claro); }
.turma-foto img{ width:100%; height:100%; object-fit:cover; }
.turma-idade{
  position:absolute; left:var(--s-4); bottom:var(--s-4); z-index:2;
  background:#fff; color:var(--azul-noite); font-family:var(--display); font-weight:600;
  font-size:.82rem; padding:.34rem .8rem; border-radius:var(--r-pill);
  box-shadow:0 4px 14px rgba(23,58,107,.18);
}
.turma-corpo{ padding:var(--s-5) var(--s-5) var(--s-6); flex:1; display:flex; flex-direction:column; }
.turma-corpo h3{ font-size:1.22rem; margin-bottom:.6rem; }
.turma-corpo p{ font-size:var(--t-peq); line-height:1.62; margin-bottom:var(--s-5); flex:1; }
.turma .btn-texto{ font-size:.85rem; }
.turma:nth-child(1) .turma-corpo{ background:var(--azul-claro); }
.turma:nth-child(2) .turma-corpo{ background:var(--menta); }
.turma:nth-child(3) .turma-corpo{ background:var(--pessego); }
.turma:nth-child(4) .turma-corpo{ background:var(--rosa-claro); }
.turma:nth-child(1) h3{ color:var(--azul); }
.turma:nth-child(2) h3{ color:#4E9130; }
.turma:nth-child(3) h3{ color:#C06A12; }
.turma:nth-child(4) h3{ color:#D14A72; }
.turmas-nota{
  margin:var(--s-8) auto 0; max-width:760px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-4) var(--s-6);
  padding:var(--s-5) var(--s-6);
  background:var(--azul-claro); border-radius:var(--r-lg);
}
.turmas-nota p{
  margin:0; max-width:none; text-align:center;
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  color:var(--azul-noite); line-height:1.35;
}
@media (max-width:560px){
  .turmas-nota{ padding:var(--s-6) var(--s-5); }
  .turmas-nota .btn{ width:100%; }
}

/* ------------------------------------------------------------- sobre */
.sobre-grid{ display:grid; gap:clamp(2.5rem,2rem + 3vw,4.5rem); align-items:center; }
@media (min-width:900px){ .sobre-grid{ grid-template-columns:.95fr 1fr; } }
.sobre-foto{ position:relative; }
.sobre-foto img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:60% center;
  border-radius:var(--r-xl); box-shadow:var(--sombra-card); position:relative; z-index:2;
}
.sobre-foto::after{
  content:""; position:absolute; right:-16px; bottom:-16px; width:130px; height:130px;
  background:var(--amarelo); z-index:1;
  border-radius:46% 54% 58% 42% / 55% 44% 56% 45%;
}
.sobre-lista{ display:grid; gap:var(--s-4); margin-top:var(--s-6); }
.sobre-lista li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.97rem; }
.sobre-lista svg{ width:21px; height:21px; color:var(--verde); flex-shrink:0; margin-top:3px; }

/* --------------------------------------------------------- estrutura */
.mosaico-wrap{ position:relative; }
/* no celular estreito cada foto ocupa a largura toda — com 2 colunas a legenda
   quebrava em 3 linhas e cobria a imagem */
.mosaico{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:600px){
  .mosaico{ grid-template-columns:repeat(2,1fr); }
  .mosaico figure:nth-child(1){ grid-column:span 2; }
}
@media (min-width:900px){
  .mosaico{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,225px); }
  .mosaico figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
}
.mosaico figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--azul-claro); min-height:190px; }
.mosaico img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mosaico figure:hover img{ transform:scale(1.05); }
.mosaico figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.6rem .95rem .85rem; font-size:var(--t-peq); font-weight:700; color:#fff;
  background:linear-gradient(to top, rgba(15,32,60,.85), transparent);
}
.selo-mosaico{
  position:absolute; z-index:3; right:-38px; top:-46px;
  width:136px; aspect-ratio:1; display:grid; place-items:center; text-align:center;
  background:var(--verde); color:#fff; padding:.9rem; font-family:var(--display);
  font-weight:600; font-size:.86rem; line-height:1.22;
  border-radius:48% 52% 55% 45% / 45% 48% 52% 55%;
  box-shadow:0 12px 28px rgba(111,191,74,.34);
}
@media (max-width:900px){ .selo-mosaico{ display:none; } }

/* ----------------------------------------------------- diferenciais */
.dif-grid{ display:grid; gap:var(--s-5); }
@media (min-width:860px){ .dif-grid{ grid-template-columns:repeat(3,1fr); } }
.dif{ padding:var(--s-6); border-radius:var(--r-lg); position:relative; overflow:hidden; }
.dif:nth-child(1){ background:var(--azul-claro); }
.dif:nth-child(2){ background:var(--menta); }
.dif:nth-child(3){ background:var(--pessego); }
.dif-num{
  font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1;
  letter-spacing:-.04em; display:block; margin-bottom:var(--s-4); opacity:.3;
}
.dif:nth-child(1) .dif-num{ color:var(--azul); }
.dif:nth-child(2) .dif-num{ color:#4E9130; }
.dif:nth-child(3) .dif-num{ color:#C06A12; }
.dif h3{ font-size:1.2rem; margin-bottom:.65rem; }
.dif p{ font-size:var(--t-peq); line-height:1.65; margin-bottom:0; position:relative; z-index:2; }
.dif-icone{ position:absolute; right:-16px; bottom:-16px; width:100px; height:100px; opacity:.1; z-index:1; }
.dif-icone svg{ width:100%; height:100%; }

/* ------------------------------------------------------------ rotina */
.rotina-grid{ display:grid; gap:clamp(2.5rem,2rem + 3vw,4rem); align-items:start; }
@media (min-width:900px){ .rotina-grid{ grid-template-columns:1fr 1fr; } }
.horarios{ display:grid; gap:var(--s-4); }
.horario{
  display:flex; align-items:center; gap:var(--s-4); background:var(--superficie);
  border:1px solid var(--borda); border-radius:var(--r-md); padding:var(--s-5);
}
.horario-hora{
  font-family:var(--display); font-weight:700; font-size:1.14rem; color:var(--azul);
  background:var(--azul-claro); padding:.55rem .9rem; border-radius:var(--r-sm);
  white-space:nowrap; flex-shrink:0; letter-spacing:-.02em;
}
.horario strong{ display:block; font-family:var(--display); font-weight:600;
  color:var(--azul-noite); font-size:1.02rem; }
.horario span{ font-size:var(--t-peq); color:var(--texto); }
.linha-tempo{ display:grid; gap:0; }
.momento{ display:flex; gap:var(--s-5); padding-bottom:var(--s-6); position:relative; }
.momento:last-child{ padding-bottom:0; }
.momento::before{
  content:""; position:absolute; left:20px; top:46px; bottom:0; width:2px;
  background:repeating-linear-gradient(to bottom, var(--borda) 0 6px, transparent 6px 12px);
}
.momento:last-child::before{ display:none; }
.momento-icone{
  flex-shrink:0; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:#fff; z-index:1;
}
.momento-icone svg{ width:20px; height:20px; }
.momento:nth-child(1) .momento-icone{ background:var(--amarelo); color:var(--azul-noite); }
.momento:nth-child(2) .momento-icone{ background:var(--ciano); }
.momento:nth-child(3) .momento-icone{ background:var(--verde); }
.momento:nth-child(4) .momento-icone{ background:var(--rosa); }
.momento:nth-child(5) .momento-icone{ background:var(--azul); }
.momento strong{ display:block; font-family:var(--display); font-weight:600;
  color:var(--azul-noite); font-size:1.04rem; margin-bottom:2px; }
.momento p{ font-size:var(--t-peq); margin:0; line-height:1.55; }

/* ------------------------------------------------------------- FAQ */
.faq{ max-width:800px; margin-inline:auto; display:grid; gap:var(--s-3); }
.faq details{
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-md); overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.faq details[open]{ border-color:var(--azul); box-shadow:var(--sombra-sutil); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem var(--s-5);
  font-family:var(--display); font-weight:600; font-size:1.03rem; color:var(--azul-noite);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex-shrink:0; width:11px; height:11px; border-right:2.5px solid var(--azul);
  border-bottom:2.5px solid var(--azul); transform:rotate(45deg) translateY(-2px);
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.faq .faq-corpo{ padding:0 var(--s-5) var(--s-5); }
.faq .faq-corpo p{ font-size:.95rem; margin:0; max-width:none; }

/* --------------------------------------------------------- CTA final */
.cta{ background:var(--azul); color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem); }
.cta::before{
  content:""; position:absolute; width:460px; height:460px; right:-160px; top:-180px;
  background:rgba(255,255,255,.07); border-radius:50%;
}
.cta::after{
  content:""; position:absolute; width:300px; height:300px; left:-120px; bottom:-150px;
  background:rgba(255,196,46,.16); border-radius:50%;
}
.cta-grid{ position:relative; z-index:2; display:grid; gap:var(--s-6); align-items:center; }
@media (min-width:900px){ .cta-grid{ grid-template-columns:1.35fr auto; gap:var(--s-8); } }
.cta h2{ color:#fff; margin-bottom:var(--s-4); }
.cta p{ color:#D6E7F6; margin-bottom:0; font-size:1.05rem; }
.cta-acoes{ display:flex; flex-direction:column; gap:var(--s-3); }
.cta-acoes .btn{ white-space:nowrap; }
.cta-acoes small{ color:#AFCCE8; font-size:var(--t-mini); text-align:center; }

/* --------------------------------------------------------- contato */
.contato-grid{ display:grid; gap:clamp(2.5rem,2rem + 3vw,4rem); align-items:start; }
@media (min-width:900px){ .contato-grid{ grid-template-columns:1fr 1fr; } }
.form{ display:grid; gap:var(--s-4); }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-size:var(--t-peq); font-weight:800; color:var(--azul-noite); }
.campo .obrig{ color:var(--coral); }
.campo input,.campo select,.campo textarea{
  font-family:var(--corpo); font-size:1rem; color:var(--titulo);
  padding:.85rem 1rem; border:1.5px solid var(--borda); border-radius:var(--r-sm);
  background:var(--superficie); width:100%; transition:border-color .2s, box-shadow .2s;
}
.campo textarea{ min-height:118px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(27,111,184,.14);
}
.campo input:user-invalid,.campo select:user-invalid,.campo textarea:user-invalid{
  border-color:var(--coral);
}
.campo .erro{ font-size:var(--t-mini); color:var(--coral); font-weight:700; min-height:1em; }
.form-nota{ font-size:var(--t-mini); color:var(--texto-suave); margin:0; max-width:none; }

.contato-dados{ display:grid; gap:var(--s-5); }
.dado{ display:flex; gap:var(--s-4); align-items:flex-start; }
.dado-icone{
  flex-shrink:0; width:44px; height:44px; border-radius:var(--r-md);
  background:var(--azul-claro); color:var(--azul); display:grid; place-items:center;
}
.dado-icone svg{ width:21px; height:21px; }
.dado strong{ display:block; font-family:var(--display); font-weight:600;
  color:var(--azul-noite); font-size:1rem; margin-bottom:2px; }
.dado a,.dado p{ font-size:var(--t-peq); margin:0; color:var(--texto); max-width:none; }
.dado a{ display:block; text-decoration:none; }
.dado a:hover{ color:var(--azul); text-decoration:underline; }
.mapa-wrap{
  position:relative; margin-top:var(--s-2); border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:16/10; background:var(--azul-claro); border:1px solid var(--borda);
  display:grid; place-items:center;
}
.mapa-wrap iframe{ position:relative; z-index:2; width:100%; height:100%; border:0; }
.mapa-fallback{
  position:absolute; inset:0; z-index:1; display:grid; place-content:center;
  gap:.5rem; justify-items:center; text-align:center; padding:var(--s-5);
  color:var(--azul); font-size:var(--t-peq); font-weight:700;
}
.mapa-fallback svg{ width:30px; height:30px; }
.mapa-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--s-4);
  font-size:var(--t-peq); font-weight:800; color:var(--azul); text-decoration:none; }
.mapa-link svg{ width:16px; height:16px; }
.mapa-link:hover{ text-decoration:underline; }

/* ---------------------------------------------------------- rodapé */
.rodape{ background:var(--azul-noite); color:#B9CBE6; padding-block:var(--s-9) var(--s-6);
  font-size:var(--t-peq); }
.rodape-grid{ display:grid; gap:var(--s-7); }
@media (min-width:760px){ .rodape-grid{ grid-template-columns:1.5fr 1fr 1fr; } }
.rodape h4{ color:#fff; font-size:.94rem; margin-bottom:var(--s-4);
  letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.rodape a{ color:#B9CBE6; text-decoration:none; }
.rodape a:hover{ color:var(--amarelo); text-decoration:underline; }
.rodape li{ margin-bottom:.6rem; line-height:1.55; }
.rodape .marca-nome{ color:#fff; }
.rodape .marca-sub{ color:#8AA5C9; }
.rodape .marca{ margin-bottom:var(--s-4); }
.rodape p{ line-height:1.65; max-width:44ch; }
.rodape-social{ display:flex; gap:var(--s-3); margin-top:var(--s-5); }
.rodape-social a{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.09);
  display:grid; place-items:center; color:#fff; transition:background .2s;
}
.rodape-social a:hover{ background:var(--coral); }
.rodape-social svg{ width:19px; height:19px; }
.rodape-base{
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.11);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  font-size:var(--t-mini); color:#8AA5C9;
}
.rodape-base a{ color:#8AA5C9; }

/* ------------------------------------------------- WhatsApp flutuante */
.wa-float{
  position:fixed; right:1.15rem; bottom:1.15rem; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; color:#fff; z-index:60;
  box-shadow:0 8px 24px rgba(0,0,0,.22); text-decoration:none;
}
.wa-float svg{ width:31px; height:31px; }
@media (prefers-reduced-motion: no-preference){
  .wa-float{ animation:wa-pulso 2.6s ease-out infinite; }
}
@keyframes wa-pulso{
  0%{ box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.5); }
  100%{ box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 18px rgba(37,211,102,0); }
}

/* ------------------------------------------------------ banner LGPD */
#cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--azul-noite);
  color:#DCE6F5; padding:var(--s-4) 0; box-shadow:0 -6px 24px rgba(0,0,0,.2);
}
#cookie-bar[hidden]{ display:none; }
#cookie-bar .container{ display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s-4); }
#cookie-bar p{ margin:0; font-size:var(--t-peq); max-width:62ch; }
#cookie-bar a{ color:var(--amarelo); }
#cookie-bar .cookie-acoes{ display:flex; gap:var(--s-3); flex-shrink:0; }
#cookie-bar button{
  font-family:var(--corpo); font-weight:800; font-size:.85rem; padding:.6rem 1.15rem;
  border-radius:var(--r-pill); border:1.5px solid rgba(255,255,255,.3);
  background:transparent; color:#fff; cursor:pointer;
}
#cookie-bar #cookie-accept{ background:var(--amarelo); color:var(--azul-noite); border-color:var(--amarelo); }

/* ------------------------------------------------------------ 404 */
.pagina-erro{ min-height:66vh; display:grid; place-items:center; text-align:center;
  padding-block:var(--secao); background:var(--creme); }
.pagina-erro img{ width:180px; margin:0 auto var(--s-6); border-radius:var(--r-lg); }
.pagina-erro p{ margin-inline:auto; }
.pagina-erro .btn{ margin-top:var(--s-5); }

/* --------------------------------------------------- página de texto */
.texto-legal{ padding-block:var(--secao); }
.texto-legal .container{ max-width:760px; }
.texto-legal h2{ margin-top:var(--s-8); font-size:var(--t-2); }
.texto-legal h2:first-of-type{ margin-top:var(--s-6); }
.texto-legal ul{ list-style:disc; padding-left:1.4rem; margin-bottom:var(--s-4); }
.texto-legal li{ margin-bottom:.5rem; }

/* ---------------------------------------------------------- animação */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease; }
.js .reveal.visivel{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.09s; }
.js .reveal[data-delay="2"]{ transition-delay:.18s; }
.js .reveal[data-delay="3"]{ transition-delay:.27s; }

@media (prefers-reduced-motion: no-preference){
  .flutua{ animation:flutuar 6s ease-in-out infinite; }
  .flutua-2{ animation:flutuar 7.5s ease-in-out infinite .8s; }
  @keyframes flutuar{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-9px) rotate(2deg); }
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
}