/* ==========================================================================
   Crianças Respeitadas e Protegidas — sistema de design
   Um único arquivo governa o site inteiro: páginas do Elementor e blog.
   Flux Comunicação · v1.0.0
   ========================================================================== */

/* --------------------------------------------------------------- tokens
   Paleta oficial da marca (manual da Anna Clara), amostrada por pixel da
   barra de cores das pranchas — não deduzida a olho:
     #e2552d terracota · #ed6c1e laranja · #1d1c1e preto · #3669b8 azul
   O laranja da marca dá 3,1:1 com branco e reprova em AA para texto. Por isso
   ele fica reservado a fundos e decoração, e existe --orange-strong para
   botão e texto. */
:root{
  /* marca */
  --orange:#ed6c1e;         /* laranja oficial — fundos e elementos decorativos */
  --orange-strong:#b34a00;  /* botões e texto laranja — contraste AA garantido */
  --orange-dark:#8f3b00;    /* hover */
  --terracota:#e2552d;      /* acento secundário da marca */
  --deep:#3669b8;           /* azul oficial — títulos e seções escuras */
  --deep-dark:#24518f;      /* azul de apoio — hover e gradientes */
  --sky:#5b8ede;            /* azul claro — detalhes sobre fundo escuro */
  --ink:#1d1c1e;            /* preto oficial — texto */
  --muted:#4a4952;          /* texto de apoio */
  --cream:#f5f4f0;          /* fundo claro oficial das pranchas */
  --cream-warm:#fdf0dc;     /* fundo quente — seções alternadas */
  --card:#ffffff;           /* fundo de cartão */
  --line:#dcd9d2;           /* divisórias e bordas */
  --whats:#25d366;          /* WhatsApp — cor oficial, não alterar */

  /* tipografia */
  --display:'Baloo 2','Nunito',system-ui,sans-serif;
  --sans:'Nunito','Inter',system-ui,-apple-system,sans-serif;

  /* medidas */
  --wrap:1180px;
  --leitura:760px;
  --radius:1rem;
  --radius-sm:.625rem;
  --radius-pill:999px;
  --shadow:0 10px 30px -12px rgba(237,108,30,.32);
  --shadow-lg:0 20px 50px -20px rgba(54,105,184,.28);
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body.crp{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

.crp h1,.crp h2,.crp h3,.crp h4{
  font-family:var(--display);
  color:var(--deep);
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0;
  /* temas que forçam capitalize quebram o português: "Áreas De Atuação" */
  text-transform:none;
}

.crp h1{font-size:clamp(2rem,1.4rem + 3vw,3.25rem);font-weight:800}
.crp h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.5rem);font-weight:800}
.crp h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:700}
.crp h4{font-size:1.05rem;font-weight:700}

.crp p{margin:0 0 1.1em;max-width:var(--leitura)}
.crp a{color:var(--orange-strong);text-decoration:none}
.crp a:hover{color:var(--orange-dark);text-decoration:underline}
.crp img{max-width:100%;height:auto;display:block}
.crp strong{font-weight:700}

/* texto sempre à esquerda — nunca justificado */
.crp p,.crp li{text-align:left}

/* foco visível: obrigatório para navegação por teclado */
.crp a:focus-visible,
.crp button:focus-visible,
.crp input:focus-visible,
.crp textarea:focus-visible,
.crp select:focus-visible{
  outline:3px solid var(--orange-strong);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* pular para o conteúdo — leitor de tela e teclado */
.crp-pular,.crp a.crp-pular{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--deep);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 var(--radius-sm) 0;font-weight:700;text-decoration:none;
}
.crp-pular:focus,.crp a.crp-pular:focus{left:0}

/* ------------------------------------------------------------ estrutura */
.crp-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.crp-secao{padding:clamp(56px,7vw,104px) 0}
.crp-secao--clara{background:var(--cream)}
.crp-secao--quente{background:var(--cream-warm)}
.crp-secao--branca{background:var(--card)}
.crp-secao--escura{background:var(--deep);color:#fff}
.crp-secao--escura h1,
.crp-secao--escura h2,
.crp-secao--escura h3{color:#fff}
.crp-secao--escura p{color:rgba(255,255,255,.9)}

/* rótulo de seção (eyebrow) */
.crp-rotulo{
  display:inline-block;
  font-family:var(--sans);
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--orange-strong);
  margin-bottom:.5rem;
}
.crp-secao--escura .crp-rotulo{color:var(--cream-warm)}

.crp-cabeca{max-width:var(--leitura);margin-bottom:clamp(32px,4vw,56px)}
.crp-cabeca p{color:var(--muted);font-size:1.0625rem;margin-top:.75rem}
.crp-secao--escura .crp-cabeca p{color:rgba(255,255,255,.88)}

/* --------------------------------------------------------------- botões */
.crp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.75rem;
  border:2px solid transparent;border-radius:var(--radius-pill);
  font-family:var(--sans);font-size:1rem;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
  min-height:48px; /* alvo de toque confortável */
}
.crp-btn:hover{transform:translateY(-2px);text-decoration:none}

/* A especificidade aqui é intencional: `.crp a` (0,1,1) venceria uma classe
   sozinha (0,1,0) e pintaria o texto do botão de laranja sobre laranja. */
.crp a.crp-btn--principal,.crp .crp-btn--principal{background:var(--orange-strong);color:#fff;box-shadow:var(--shadow)}
.crp a.crp-btn--principal:hover,.crp .crp-btn--principal:hover{background:var(--orange-dark);color:#fff}

.crp a.crp-btn--contorno,.crp .crp-btn--contorno{background:transparent;color:var(--deep);border-color:var(--line)}
.crp a.crp-btn--contorno:hover,.crp .crp-btn--contorno:hover{background:var(--card);border-color:var(--deep);color:var(--deep)}

.crp a.crp-btn--whats,.crp .crp-btn--whats{background:var(--whats);color:#0b3d1f}
.crp a.crp-btn--whats:hover,.crp .crp-btn--whats:hover{background:#1fb857;color:#0b3d1f}

/* Contexto escuro. Precisa empatar em especificidade com `.crp a.crp-btn--contorno`
   e vir depois no arquivo, senão o azul do botão fica azul sobre azul. */
.crp-secao--escura a.crp-btn--contorno,.crp-secao--escura .crp-btn--contorno,
.crp-cta a.crp-btn--contorno,.crp-cta .crp-btn--contorno,
.crp-phead a.crp-btn--contorno,.crp-phead .crp-btn--contorno,
.crp-rodape a.crp-btn--contorno{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.crp-secao--escura a.crp-btn--contorno:hover,.crp-secao--escura .crp-btn--contorno:hover,
.crp-cta a.crp-btn--contorno:hover,.crp-cta .crp-btn--contorno:hover,
.crp-phead a.crp-btn--contorno:hover,.crp-phead .crp-btn--contorno:hover,
.crp-rodape a.crp-btn--contorno:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* botão flutuante de WhatsApp — presente em todas as páginas */
.crp-whats-flutua{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--whats);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.4);
  transition:transform .2s ease;
}
.crp-whats-flutua:hover{transform:scale(1.08)}
.crp-whats-flutua svg{width:30px;height:30px;fill:currentColor}

/* --------------------------------------------------------------- cartão */
.crp-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.crp-card--link:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--orange);
}

/* --------------------------------------------------------------- grades */
.crp-grade{display:grid;gap:24px}
.crp-grade--2{grid-template-columns:repeat(2,1fr)}
.crp-grade--3{grid-template-columns:repeat(3,1fr)}
.crp-grade--4{grid-template-columns:repeat(4,1fr)}
.crp-grade--5{grid-template-columns:repeat(5,1fr)}

/* ------------------------------------------------------ cartão de produto */
.crp-produto{
  display:flex;flex-direction:column;height:100%;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.crp-produto:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--orange)}

.crp-produto__figura{
  position:relative;aspect-ratio:4/3;background:var(--cream-warm);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.crp-produto__figura img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.crp-produto:hover .crp-produto__figura img{transform:scale(1.05)}

.crp-selo{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--orange-strong);color:#fff;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.35rem .75rem;border-radius:var(--radius-pill);
}
.crp-selo--escola{background:var(--deep)}

.crp-produto__corpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.crp-produto__cat{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);
}
.crp-produto__nome{margin:.4rem 0 .5rem;font-size:1.0625rem;line-height:1.3}
/* o nome do produto é título, não link laranja: herda o azul profundo */
.crp .crp-produto__nome a{color:var(--deep);text-decoration:none}
.crp .crp-produto__nome a:hover{color:var(--orange-strong)}
.crp-produto__desc{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 0 1rem;flex:1}
.crp-produto__rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.crp-preco{font-family:var(--display);font-size:1.375rem;font-weight:800;color:var(--deep);white-space:nowrap}
.crp-produto__rodape .crp-btn{padding:.6rem 1.15rem;font-size:.9375rem;min-height:42px;white-space:nowrap;flex:1 1 auto}

/* ------------------------------------------------------- pilares/escudos */
.crp-escudo{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;position:relative;height:100%;
  transition:transform .25s ease,box-shadow .25s ease;
}
.crp-escudo:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.crp-escudo__num{
  font-family:var(--display);font-size:.875rem;font-weight:800;
  color:var(--orange-strong);letter-spacing:.1em;
}
.crp-escudo__icone{width:56px;height:56px;margin:14px 0 4px}
.crp-escudo__icone img,.crp-escudo__icone svg{width:100%;height:100%;object-fit:contain}
.crp-escudo h3{margin:.75rem 0 .5rem}
.crp-escudo p{color:var(--muted);font-size:.9375rem;line-height:1.65;margin:0}

/* --------------------------------------------------------------- faixa de topo
   Um componente só dá unidade a todas as páginas internas. */
.crp-phead{
  background:var(--deep);color:#fff;
  padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px);
  position:relative;overflow:hidden;
}
.crp-phead::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(237,108,30,.30),transparent 62%);
  pointer-events:none;
}
.crp-phead .crp-wrap{position:relative;z-index:1}
.crp-phead h1{color:#fff;margin-top:.5rem}
.crp-phead p{color:rgba(255,255,255,.9);font-size:1.0625rem;margin-top:.85rem}
.crp-phead .crp-rotulo{color:var(--cream-warm)}

/* migalha de pão */
.crp-migalha{font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:.35rem}
.crp-migalha a{color:rgba(255,255,255,.92);text-decoration:none}
.crp-migalha a:hover{color:#fff;text-decoration:underline}
.crp-migalha span{margin:0 .4rem;opacity:.6}

/* ------------------------------------------------------------------ hero
   O banner ilustrado tem as crianças à direita e paisagem vazia à esquerda —
   a composição pede texto à esquerda. Medido, o texto direto sobre a arte só
   passaria em AA no preto, e mesmo assim o contraste oscilaria entre céu e
   grama ao longo do bloco. Por isso o véu creme: o texto fica sobre base
   sólida e o contraste deixa de depender de onde a linha cai na ilustração. */
.crp-hero{
  position:relative;overflow:hidden;
  background:var(--ink);
  /* a imagem começa no topo absoluto da página e passa por baixo do menu:
     o padding de cima abre espaço para o cabeçalho transparente */
  padding:calc(76px + clamp(48px,6vw,96px)) 0 clamp(56px,7vw,104px);
  min-height:clamp(560px,64vh,760px);
  display:flex;align-items:center;
}
.crp-hero__fundo{position:absolute;inset:0;z-index:0}
/* ancorado embaixo: o corte do `cover` come o céu, que sobra, em vez dos pés
   das crianças, que são o assunto da ilustração */
.crp-hero__fundo img{width:100%;height:100%;object-fit:cover;object-position:76% bottom}
/* Véu escuro. Mais denso à esquerda, onde fica o texto, e leve à direita, para
   as crianças continuarem visíveis. A densidade não é chute: foi calibrada até
   o branco passar de 4,5:1 medido nos pixels da captura. */
.crp-hero__fundo::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(20,26,38,.78) 0%,
      rgba(20,26,38,.70) 36%,
      rgba(20,26,38,.42) 60%,
      rgba(20,26,38,.22) 100%),
    linear-gradient(180deg, rgba(20,26,38,.32) 0%, rgba(20,26,38,.08) 36%, rgba(20,26,38,.22) 100%);
}
.crp-hero .crp-wrap{position:relative;z-index:1;width:100%}
.crp-hero__texto{max-width:min(52%,620px)}
.crp-hero h1{font-size:clamp(2.25rem,1.5rem + 4vw,4.25rem);color:#fff;
  text-shadow:0 2px 18px rgba(11,15,22,.45)}
.crp-hero .crp-rotulo{color:var(--cream-warm)}
.crp-hero__sub{font-size:1.125rem;color:rgba(255,255,255,.94);max-width:42ch;
  text-shadow:0 1px 12px rgba(11,15,22,.5)}
.crp-hero__acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.75rem}
.crp-hero__credencial{
  margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.28);
  font-size:.9375rem;color:rgba(255,255,255,.9);max-width:42ch;
}
.crp-hero__credencial strong{color:#fff}
/* sobre a arte, o botão de contorno é claro */
.crp-hero a.crp-btn--contorno,.crp-hero .crp-btn--contorno{
  color:#fff;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.08)}
.crp-hero a.crp-btn--contorno:hover,.crp-hero .crp-btn--contorno:hover{
  background:rgba(255,255,255,.2);border-color:#fff;color:#fff}

/* o recorte vertical só entra no celular, como fundo — nunca como bloco solto */
.crp-hero__criancas{display:none}

/* ------------------------------------------------------------ formulário */
.crp-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,36px)}
.crp-form label{display:block;font-weight:700;font-size:.9375rem;color:var(--deep);margin-bottom:.35rem}
.crp-form .obrig{color:var(--orange-strong)}
.crp-form input[type=text],
.crp-form input[type=email],
.crp-form input[type=tel],
.crp-form input[type=number],
.crp-form select,
.crp-form textarea{
  width:100%;padding:.8rem 1rem;margin-bottom:1.15rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--card);
  min-height:48px;
}
.crp-form textarea{min-height:140px;resize:vertical}
.crp-form input:focus,.crp-form select:focus,.crp-form textarea:focus{
  border-color:var(--orange-strong);
  box-shadow:0 0 0 4px rgba(179,74,0,.14);
  outline:none;
}
.crp-form__lgpd{display:flex;gap:.6rem;align-items:flex-start;font-size:.875rem;color:var(--muted);margin-bottom:1.25rem}
.crp-form__lgpd input{margin-top:.35rem;width:18px;height:18px;flex:0 0 auto}
.crp-form__nota{font-size:.875rem;color:var(--muted);margin-top:.75rem}

/* ------------------------------------------------------ depoimentos */
.crp-depo{
  margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow);
  display:flex;flex-direction:column;height:100%;
}
.crp-depo--unico{max-width:900px;margin-inline:auto}

.crp-depo blockquote{margin:0 0 1.5rem;padding:0;border:0}
/* a aspa é decorativa: fica no ::before para o leitor de tela não anunciar
   um caractere solto antes da primeira frase */
.crp-depo blockquote::before{
  content:'“';display:block;font-family:var(--display);
  font-size:3.25rem;line-height:.6;color:var(--orange);margin-bottom:.5rem;
}
.crp-depo blockquote p{margin:0 0 1rem;max-width:62ch;line-height:1.8}
.crp-depo blockquote p:last-child{margin-bottom:0}

/* CELULAR — não cabem duas colunas: a foto vira retrato redondo pequeno junto
   do nome, no pé do cartão. margin-top:auto encosta a assinatura no fim; sem
   isso, cartões de alturas diferentes deixam o nome boiando no vazio. */
.crp-depo__assina{
  display:flex;align-items:center;gap:14px;
  margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line);
}
.crp-depo__foto{flex:0 0 auto;width:64px}
.crp-depo__foto img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
}
.crp-depo__nome{margin:0;font-weight:800;color:var(--deep);font-size:1.0625rem}
.crp-depo__cargo{margin:.15rem 0 0;color:var(--muted);font-size:.9375rem}

/* DESKTOP — a foto ganha coluna própria, ao lado do texto, com o nome logo
   abaixo dela. O HTML continua sendo frase → assinatura; quem inverte para
   pôr a foto à esquerda é o grid, então o leitor de tela ouve a recomendação
   antes de saber quem assinou. */
@media (min-width:900px){
  .crp-depo--com-foto{
    display:grid;grid-template-columns:200px minmax(0,1fr);
    column-gap:clamp(28px,3vw,44px);align-items:start;
  }
  .crp-depo--com-foto blockquote{grid-column:2;grid-row:1;margin-bottom:0}
  .crp-depo--com-foto .crp-depo__assina{
    grid-column:1;grid-row:1;display:block;
    margin-top:0;padding-top:0;border-top:0;
  }
  .crp-depo--com-foto .crp-depo__foto{width:200px}
  .crp-depo--com-foto .crp-depo__foto img{
    width:200px;height:200px;border-radius:16px;margin-bottom:1rem;
  }
}

/* -------------------------------------------------------- carrossel
   A partir de dois depoimentos: um por vez. Sem JavaScript continua sendo uma
   faixa de rolagem horizontal comum, com scroll-snap — setas e bolinhas só
   somam. Não gira sozinho: rodízio automático troca a frase na cara de quem
   está lendo. */
.crp-carrossel{position:relative}
.crp-carrossel__trilho{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px;margin:-4px;              /* espaço para o anel de foco não ser cortado */
}
.crp-carrossel__trilho::-webkit-scrollbar{display:none}
/* cada cartão fica com a altura do próprio texto: um depoimento curto esticado
   até a altura do mais longo vira um vão branco embaixo da assinatura. A
   trilha continua com a altura do maior, então a página não pula ao trocar. */
.crp-carrossel__trilho{align-items:flex-start}
.crp-carrossel .crp-depo{height:auto}
.crp-carrossel__trilho:focus-visible{outline:3px solid var(--orange-strong);outline-offset:2px}
.crp-carrossel__slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}

.crp-carrossel__controles{
  display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px;
}
.crp-carrossel__seta{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--deep);font-size:1.6rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,opacity .2s ease;
}
.crp-carrossel__seta:hover:not(:disabled){background:var(--cream);border-color:var(--orange)}
.crp-carrossel__seta:disabled{opacity:.35;cursor:default}
.crp-carrossel__pontos{display:flex;align-items:center;gap:6px}
/* alvo de toque de 44px com bolinha de 10px: a área clicável é o botão
   inteiro, o desenho é o ::before */
.crp-carrossel__ponto{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.crp-carrossel__ponto::before{
  content:'';width:10px;height:10px;border-radius:50%;
  background:var(--line);transition:background .2s ease,transform .2s ease;
}
.crp-carrossel__ponto:hover::before{background:var(--muted)}
.crp-carrossel__ponto[aria-current]::before{background:var(--orange-strong);transform:scale(1.4)}

@media (prefers-reduced-motion:reduce){
  .crp-carrossel__trilho{scroll-behavior:auto}
}

/* ------------------------------------------- vídeo "veja por dentro"
   O vídeo é vertical (gravado no celular). Deixá-lo ocupar a largura do texto
   viraria uma tira estreita e altíssima que empurra a página inteira para
   baixo — então ele fica com largura fixa de retrato, e o texto vai ao lado. */
.crp-video{display:grid;gap:28px;justify-items:center}
.crp-video__player{
  width:100%;max-width:320px;aspect-ratio:9/16;height:auto;
  background:#1d1c1e;border-radius:var(--radius);
  box-shadow:var(--shadow);object-fit:cover;display:block;
}
.crp-video__lado{max-width:56ch}
.crp-video__lado p{margin:0 0 1rem}
.crp-video__lado p:last-child{margin-bottom:0}

/* sem texto ao lado, o vídeo sozinho no meio — encostado à esquerda ele
   pareceria que faltou alguma coisa do lado direito */
.crp-video--so{justify-items:center}

@media (min-width:820px){
  .crp-video{
    grid-template-columns:320px minmax(0,1fr);
    gap:clamp(32px,4vw,56px);align-items:center;justify-items:start;
  }
  .crp-video--so{grid-template-columns:320px;justify-content:center;justify-items:center}
}

/* ------------------------------------------------------------ loja */
.crp-filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.crp-filtros .crp-btn{padding:.6rem 1.25rem;font-size:.9375rem;min-height:44px}

.crp-vazio{
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:1.5rem 1.75rem;color:var(--muted);max-width:none;margin:0;
}

/* o texto do material fica na coluna da direita, ao lado da foto — não pode
   herdar a centralização de .crp-artigo, que é do blog */
.crp-material__texto{margin-top:1rem}
.crp-material__texto p{max-width:none}
.crp-material__texto p:last-child{margin-bottom:0}

.crp-ficha__rotulo{
  margin:0;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);
}
.crp-ficha__valor{margin:.25rem 0 0;font-weight:700;color:var(--deep)}

.crp-inclui{list-style:none;padding:0;margin:0 0 1.75rem}
.crp-inclui li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.6rem}
.crp-inclui li span[aria-hidden]{color:var(--orange-strong);font-weight:800}

/* recado só para quem edita o site — o visitante nunca vê */
.crp-pendente{
  background:#fff3cd;border:2px dashed #bd4d00;border-radius:.625rem;
  padding:.85rem 1.1rem;color:#7a3200;font-size:.875rem;margin-top:1rem;max-width:none;
}

/* mensagens do Contact Form 7 dentro do nosso visual */
.wpcf7-not-valid-tip{color:#b3261e;font-size:.8125rem;margin:-.9rem 0 .9rem}
.wpcf7-response-output{
  border-radius:var(--radius-sm);border-width:2px!important;
  padding:.9rem 1.1rem!important;margin:1rem 0 0!important;font-size:.9375rem;
}

/* ------------------------------------------------------------ cabeçalho */
.crp-topo{
  position:sticky;top:0;z-index:100;
  background:rgba(245,244,240,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease,border-color .25s ease;
}

/* Cabeçalho sobre o banner: transparente enquanto está no topo, para a arte
   passar por baixo do menu. Ao rolar, `.rolou` devolve o fundo creme — sem
   isso o menu ficaria branco sobre branco no resto da página. */
.crp-topo--sobre{
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  margin-bottom:calc(-1 * (76px + 1px));  /* puxa o hero para debaixo do menu */
}
.crp-topo--sobre .crp-marca__txt{color:#fff;text-shadow:0 1px 10px rgba(11,15,22,.5)}
.crp-topo--sobre .crp-marca__txt span{color:rgba(255,255,255,.86)}
.crp-topo--sobre .crp-nav a{color:#fff;text-shadow:0 1px 10px rgba(11,15,22,.5)}
.crp-topo--sobre .crp-nav a:hover,
.crp-topo--sobre .crp-nav a[aria-current=page]{color:var(--cream-warm)}
.crp-topo--sobre .crp-nav a::after{background:var(--cream-warm)}
.crp-topo--sobre .crp-hamburguer{color:#fff;border-color:rgba(255,255,255,.5)}

.crp-topo--sobre.rolou{
  background:rgba(245,244,240,.94);backdrop-filter:saturate(180%) blur(12px);
  border-bottom-color:var(--line);
}
.crp-topo--sobre.rolou .crp-marca__txt{color:var(--deep);text-shadow:none}
.crp-topo--sobre.rolou .crp-marca__txt span{color:var(--muted)}
.crp-topo--sobre.rolou .crp-nav a{color:var(--deep);text-shadow:none}
.crp-topo--sobre.rolou .crp-nav a:hover,
.crp-topo--sobre.rolou .crp-nav a[aria-current=page]{color:var(--orange-strong)}
.crp-topo--sobre.rolou .crp-nav a::after{background:var(--orange-strong)}
.crp-topo--sobre.rolou .crp-hamburguer{color:var(--deep);border-color:var(--line)}
.crp-topo__linha{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.crp-marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.crp-marca img{height:48px;width:auto}
.crp-marca__txt{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15;color:var(--deep)}
.crp-marca__txt span{display:block;font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:.02em}

.crp-nav{display:flex;align-items:center;gap:28px}
.crp-nav a{
  font-weight:600;font-size:.9375rem;color:var(--deep);
  text-decoration:none;padding:.5rem 0;position:relative;
}
.crp-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--orange-strong);transition:width .22s ease;
}
.crp-nav a:hover::after,.crp-nav a[aria-current=page]::after{width:100%}
.crp-nav a:hover{color:var(--orange-strong);text-decoration:none}
.crp-nav a[aria-current=page]{color:var(--orange-strong)}

.crp-topo__acao{display:flex;align-items:center;gap:12px}
.crp-topo__acao .crp-btn{padding:.6rem 1.35rem;font-size:.9375rem;min-height:44px}

.crp-hamburguer{
  display:none;width:48px;height:48px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;color:var(--deep);
}
.crp-hamburguer svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}

/* --------------------------------------------------------------- rodapé */
.crp-rodape{background:var(--deep);color:rgba(255,255,255,.86);padding:clamp(48px,6vw,80px) 0 0}
.crp-rodape a{color:rgba(255,255,255,.86);text-decoration:none}
.crp-rodape a:hover{color:#fff;text-decoration:underline}
.crp-rodape__grade{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:40px}
.crp-rodape h4{color:#fff;font-size:.8125rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:1rem}
.crp-rodape ul{list-style:none;padding:0;margin:0}
.crp-rodape li{margin-bottom:.6rem;font-size:.9375rem}
.crp-rodape__marca{font-family:var(--display);font-weight:800;font-size:1.125rem;color:#fff;line-height:1.2}
.crp-rodape__marca span{display:block;font-size:.8125rem;font-weight:600;color:var(--cream-warm);letter-spacing:.02em}
.crp-rodape__sobre{font-size:.9375rem;line-height:1.7;margin:1rem 0 0;max-width:42ch;color:rgba(255,255,255,.82)}
.crp-rodape__pag{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.25rem}
.crp-rodape__pag span{
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);
  padding:.3rem .8rem;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.88);
}
.crp-rodape__barra{
  margin-top:clamp(36px,4vw,56px);border-top:1px solid rgba(255,255,255,.16);
  /* espaço à direita e embaixo para o botão flutuante do WhatsApp não cobrir o crédito */
  padding:22px 104px 44px 0;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;font-size:.8125rem;
}
/* crédito da Flux — a versão clara da marca, que é a que vive sobre fundo
   escuro. O link recebe o alvo de toque inteiro, não só a imagem. */
.crp-rodape__credito{display:flex;align-items:center;gap:10px}
.crp-rodape__credito a{display:inline-flex;align-items:center;padding:6px 2px}
.crp-rodape__credito img{height:34px;width:auto;opacity:.92;transition:opacity .2s ease}
.crp-rodape__credito a:hover img{opacity:1}

/* ------------------------------------------------------------------ blog */
.crp-post-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.crp-post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--orange)}
.crp-post-card__figura{aspect-ratio:16/9;overflow:hidden;background:var(--cream-warm)}
.crp-post-card__figura img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.crp-post-card:hover .crp-post-card__figura img{transform:scale(1.05)}
.crp-post-card__corpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.crp-meta{font-size:.8125rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crp-tag,.crp a.crp-tag{
  background:var(--cream-warm);color:var(--orange-dark);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  padding:.28rem .7rem;border-radius:var(--radius-pill);text-decoration:none;
}
.crp a.crp-tag:hover{background:var(--orange-strong);color:#fff}
.crp-post-card h2,.crp-post-card h3{font-size:1.0625rem;line-height:1.35;margin:.6rem 0 .5rem}
.crp .crp-post-card h2 a,.crp .crp-post-card h3 a,
.crp .crp-destaque__corpo h2 a{color:var(--deep);text-decoration:none}
.crp .crp-post-card h2 a:hover,.crp .crp-post-card h3 a:hover,
.crp .crp-destaque__corpo h2 a:hover{color:var(--orange-strong)}
.crp-post-card p{color:var(--muted);font-size:.9375rem;line-height:1.65;margin:0 0 1rem;flex:1}
.crp-leia{font-weight:700;font-size:.9375rem;color:var(--orange-strong)}

/* destaque da listagem */
.crp-destaque{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.crp-destaque__figura{aspect-ratio:16/10;overflow:hidden;background:var(--cream-warm)}
.crp-destaque__figura img{width:100%;height:100%;object-fit:cover}
.crp-destaque__corpo{padding:clamp(24px,3vw,40px)}

/* artigo */
.crp-artigo{max-width:var(--leitura);margin-inline:auto}
.crp-artigo__capa{border-radius:var(--radius);overflow:hidden;margin-bottom:2rem;box-shadow:var(--shadow-lg)}
.crp-artigo__corpo{font-size:1.0625rem;line-height:1.85;color:var(--ink)}
.crp-artigo__corpo h2{margin:2.25rem 0 .85rem;font-size:1.6rem}
.crp-artigo__corpo h3{margin:1.85rem 0 .7rem;font-size:1.25rem}
.crp-artigo__corpo ul,.crp-artigo__corpo ol{padding-left:1.35rem;margin:0 0 1.25rem}
.crp-artigo__corpo li{margin-bottom:.55rem}
.crp-artigo__corpo img{border-radius:var(--radius);margin:1.75rem 0}
.crp-artigo__corpo blockquote{
  margin:1.75rem 0;padding:.35rem 0 .35rem 1.35rem;
  border-left:4px solid var(--orange);
  font-size:1.125rem;color:var(--deep);font-style:italic;
}
.crp-artigo__corpo a{text-decoration:underline}

.crp-compartilhar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2.5rem 0;
  padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.crp-compartilhar span{font-weight:700;font-size:.875rem;color:var(--deep)}
.crp-compartilhar a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);color:var(--deep);
}
.crp-compartilhar a:hover{background:var(--orange-strong);border-color:var(--orange-strong);color:#fff}
.crp-compartilhar svg{width:19px;height:19px;fill:currentColor}

/* barra lateral */
.crp-blog-grade{display:grid;grid-template-columns:1fr 320px;gap:clamp(32px,4vw,56px);align-items:start}
.crp-lateral .crp-card{margin-bottom:24px}
.crp-lateral h4{font-size:.8125rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:1rem}
.crp-lateral ul{list-style:none;padding:0;margin:0}
.crp-lateral li{margin-bottom:.7rem;font-size:.9375rem;line-height:1.5}
.crp-lateral__cta{background:var(--deep);border-color:var(--deep);color:#fff}
.crp-lateral__cta h4,.crp-lateral__cta p{color:#fff}
.crp-lateral__cta p{font-size:.9375rem;margin-bottom:1.25rem;color:rgba(255,255,255,.9)}

/* paginação */
.crp-paginacao{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:56px}
.crp-paginacao .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:46px;padding:0 .75rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--card);color:var(--deep);font-weight:700;text-decoration:none;
}
.crp-paginacao .page-numbers:hover,
.crp-paginacao .page-numbers.current{background:var(--orange-strong);border-color:var(--orange-strong);color:#fff}

/* --------------------------------------------------------------- faixa CTA
   Repetida ao final de toda página interna. */
.crp-cta{background:var(--deep);color:#fff;border-radius:var(--radius);padding:clamp(32px,4vw,56px);text-align:center}
.crp-cta h2{color:#fff}
.crp-cta p{color:rgba(255,255,255,.9);margin-inline:auto;margin-bottom:1.75rem}
.crp-cta__acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ------------------------------------------------------------- movimento
   Discreto e uma vez só. Nada de carrossel automático nem parallax. */
.crp-entra{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.crp-entra.crp-visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .crp-entra{opacity:1;transform:none;transition:none}
  .crp *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ------------------------------------------------------------ responsivo
   Três faixas: >980 cheio · 620–980 hambúrguer · <620 coluna única. */
@media (max-width:980px){
  .crp-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:12px 24px 20px;
  }
  .crp-nav.aberto{display:flex}
  .crp-nav a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .crp-nav a::after{display:none}
  .crp-hamburguer{display:flex}
  .crp-topo__acao .crp-btn{display:none}

  /* Abaixo de 980px o banner deitado vira uma tira: o fundo passa a ser o
     recorte vertical nas crianças, com o mesmo véu e o texto por cima. */
  /* o texto fica no alto, sobre o céu estendido; as crianças ocupam a base */
  .crp-hero{min-height:clamp(600px,92vh,860px);align-items:flex-start}
  .crp-hero__texto{max-width:none}
  /* qual arquivo entra é decidido pelo <source media> do <picture>, não aqui */
  .crp-hero__fundo img{object-position:center bottom}
  /* No celular o texto cai sobre o céu e a grama claros, e o recorte não tem
     canto escuro para aproveitar: o véu precisa ser mais firme que no desktop. */
  .crp-hero__fundo::after{
    background:
      linear-gradient(180deg,
        rgba(20,26,38,.72) 0%,
        rgba(20,26,38,.70) 55%,
        /* o bloco de texto termina em ~80% da altura: o véu segura até lá
           e solta depois, deixando os pés das crianças e a grama em cor plena */
        rgba(20,26,38,.66) 82%,
        rgba(20,26,38,.18) 100%);
  }

  .crp-grade--4,.crp-grade--5{grid-template-columns:repeat(2,1fr)}
  .crp-grade--3{grid-template-columns:repeat(2,1fr)}
  .crp-blog-grade{grid-template-columns:1fr}
  .crp-destaque{grid-template-columns:1fr}
  .crp-rodape__grade{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:620px){
  body.crp{font-size:15.5px}
  .crp-wrap{padding-inline:18px}
  .crp-grade--2,.crp-grade--3,.crp-grade--4,.crp-grade--5{grid-template-columns:1fr}
  .crp-rodape__grade{grid-template-columns:1fr}
  .crp-hero__acoes .crp-btn,.crp-cta__acoes .crp-btn{width:100%}
  .crp-produto__rodape{flex-direction:column;align-items:stretch}
  .crp-produto__rodape .crp-btn{width:100%}
  .crp-marca img{height:40px}
  .crp-whats-flutua{right:14px;bottom:14px}
  .crp-rodape__barra{padding:22px 0 84px}
}

/* ------------------------------------------------------------- impressão */
@media print{
  .crp-topo,.crp-rodape,.crp-whats-flutua,.crp-compartilhar,.crp-lateral{display:none}
  body.crp{background:#fff;font-size:12pt}
  .crp-artigo{max-width:none}
}

/* -------------------------------------------------- galeria de eventos
   Mosaico de alturas diferentes: as fotos vêm de celular, umas em pé e outras
   deitadas, e forçar todas ao mesmo recorte cortaria justo quem está falando.
   Colunas com `column-count` deixam cada foto inteira, na proporção dela. */
.crp-galeria{columns:3;column-gap:18px}
.crp-galeria__item{break-inside:avoid;margin:0 0 18px;padding:0}
.crp-galeria__foto{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  box-shadow:var(--shadow);background:var(--line);
}
@media (max-width:900px){ .crp-galeria{columns:2;column-gap:14px} .crp-galeria__item{margin-bottom:14px} }
@media (max-width:560px){ .crp-galeria{columns:1} }

.crp-galeria__videos{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:32px;
}
.crp-galeria__video{
  width:100%;max-width:640px;aspect-ratio:16/9;height:auto;
  background:#1d1c1e;border-radius:var(--radius);box-shadow:var(--shadow);
  object-fit:cover;display:block;
}
.crp-galeria__video--pe{max-width:300px;aspect-ratio:9/16}

/* ------------------------------------------------- Nossa abordagem
 *
 * Os textos da Helenice são longos, e texto longo pede coluna estreita: linha
 * comprida faz o olho perder de onde volta. A largura de leitura já existe
 * como variável, é ela que manda aqui também.
 */
.crp-texto{max-width:var(--leitura)}
.crp-texto p{font-size:1.0625rem}

.crp-lista-titulo{font-weight:700;color:var(--deep);margin-bottom:.6rem}

/* A Helenice escreveu cada item com um emoji na frente. No site o marcador é
 * o mesmo de todas as outras listas: a identidade visual é a da marca, não a
 * do teclado do WhatsApp. */
.crp-lista-marcada{
  list-style:none;padding:0;margin:0 0 1.6rem;
  display:grid;gap:.6rem;max-width:var(--leitura);
}
.crp-lista-marcada li{
  position:relative;padding-left:1.9rem;line-height:1.55;
}
.crp-lista-marcada li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:.7rem;height:.7rem;border-radius:.2rem;
  background:var(--orange);
}

/* O nome óbvio, .crp-destaque, já era do card de destaque do blog: o texto
 * caía dentro da primeira coluna daquele grid e quebrava na metade da largura.
 * Classe é espaço de nomes compartilhado, e um nome genérico já usado custa
 * uma tela quebrada em silêncio. */
.crp-remate{
  border-left:4px solid var(--orange);padding-left:1.15rem;
  font-weight:600;color:var(--deep);
}

/* fecho dos cinco escudos: a frase que fecha o raciocínio, centrada e maior.
 * Precisa de .crp na frente para ganhar de `.crp p`, que fixa a largura de
 * leitura e o alinhamento à esquerda em todo parágrafo do site. */
.crp .crp-escudos__fecho{
  margin:clamp(28px,3.5vw,44px) auto 0;max-width:min(100%,62ch);text-align:center;
  font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.4rem);
  font-weight:700;color:var(--deep);
  /* se quebrar em telas menores, quebra em linhas do mesmo tamanho, e não
     numa linha cheia e outra com duas palavras */
  text-wrap:balance;
}
.crp .crp-secao--escura .crp-escudos__fecho{color:#fff}

/* cartão que virou link: precisa parecer clicável sem virar botão */
a.crp-card--link{display:block;text-decoration:none;color:inherit}
.crp-card__mais{
  margin:1rem 0 0;font-weight:700;color:var(--orange-strong);font-size:.95rem;
}
.crp-card__mais::after{content:" \2192"}