/* ===================================================================
   Seções da home — Colégio Lima Guimarães
   Complementa style.css. Só tokens, nada de valor solto.
   =================================================================== */

.secao{padding:var(--secao-y) 0}
.secao-creme{background:var(--creme)}
.secao-azul{background:var(--azul-800);color:var(--branco)}
.secao-azul h2,.secao-azul h3{color:var(--branco)}
.secao-azul p{color:rgba(255,255,255,.82)}

.cabeca-secao{max-width:60ch;margin-bottom:var(--e-12)}
.cabeca-secao.centro{margin-inline:auto;text-align:center}
.cabeca-secao h2{font-size:clamp(1.65rem,3.2vw,var(--t-2xl))}
.cabeca-secao p{color:var(--tinta-70);font-size:var(--t-md)}
.secao-azul .cabeca-secao p{color:rgba(255,255,255,.8)}
/* A tag de seção é o selo amarelo da marca: fundo amarelo cheio, texto azul.
   Vale igual em fundo claro e em fundo azul — um selo só no site inteiro. */
.olho{
  display:inline-block;
  font-size:var(--t-xs);font-weight:var(--peso-black);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul-800);background:var(--sol-amarelo);
  padding:6px 15px;border-radius:var(--raio-pill);
  margin-bottom:var(--e-4);
  box-shadow:0 4px 12px -4px rgba(247,211,0,.7);
}
.centro .olho{margin-inline:auto}

/* ---------- proposta pedagógica ---------- */
.proposta .container{display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(28px,5vw,72px);align-items:center}
.proposta img{border-radius:var(--raio-lg);box-shadow:var(--sombra-alta)}

/* ---------- etapas de ensino ---------- */
.etapas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-6)}
.etapa{
  background:var(--branco);border-radius:var(--raio-lg);overflow:hidden;
  box-shadow:var(--sombra-card);display:flex;flex-direction:column;
  transition:transform var(--medio) var(--saida),box-shadow var(--medio) var(--entrada);
}
.etapa:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.etapa .capa{position:relative;aspect-ratio:16/10;overflow:hidden}
.etapa .capa img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--lento) var(--saida)}
.etapa:hover .capa img{transform:scale(1.045)}
.etapa .capa::after{
  content:"";position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(to top,rgba(0,34,71,.86),transparent);
}
.etapa .capa h3{
  position:absolute;left:var(--e-5);right:var(--e-5);bottom:var(--e-4);
  color:var(--branco);font-size:var(--t-lg);margin:0;z-index:var(--z-conteudo);
}
.etapa .corpo{padding:var(--e-5) var(--e-5) var(--e-6);display:flex;
  flex-direction:column;gap:var(--e-4);flex:1}
.etapa .corpo p{color:var(--tinta-70);font-size:var(--t-sm);margin:0}
.etapa .corpo .link-seta{margin-top:auto}

/* faixa de séries: tira a dúvida de "1º ano" ser série ou idade */
.series{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.series li{
  font-size:var(--t-xs);font-weight:var(--peso-medio);color:var(--azul-700);
  background:var(--azul-050);border:1px solid var(--azul-100);
  padding:3px 10px;border-radius:var(--raio-pill);
}
.series li.idade{background:var(--creme);border-color:rgba(0,51,98,.1);color:var(--cinza-600)}

/* etiqueta sobre a foto, canto superior */
.etapa .capa .etiqueta{
  position:absolute;top:var(--e-4);left:var(--e-4);z-index:var(--z-conteudo);
  background:rgba(255,255,255,.92);color:var(--azul-800);
  font-size:var(--t-xs);font-weight:var(--peso-forte);letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--raio-pill);
  backdrop-filter:blur(6px);
}

/* ---------- o dia a dia com a família ---------- */
.rotina{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-6)}
.rotina-item{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--raio);padding:var(--e-6);
}
.rotina-item .n{
  font-family:var(--fonte-titulo);font-weight:var(--peso-black);font-size:var(--t-xl);
  color:var(--sol-amarelo);line-height:1;display:block;margin-bottom:var(--e-3);
}
.rotina-item h3{font-size:var(--t-base);margin-bottom:var(--e-2)}
.rotina-item p{font-size:var(--t-sm);margin:0}

/* ---------- atividades ---------- */
/* 4 colunas fixas. O card do inglês atravessa a linha inteira, para não sobrar
   um card sozinho embaixo. */
.atividades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-5)}
.atividade{
  border-radius:var(--raio-lg);padding:var(--e-6);background:var(--branco);
  border:1px solid var(--cinza-100);position:relative;
  display:flex;flex-direction:column;gap:var(--e-3);
  box-shadow:var(--sombra-card);
  transition:border-color var(--medio) var(--entrada),transform var(--medio) var(--saida),
             box-shadow var(--medio) var(--entrada);
}
.atividade:hover{transform:translateY(-5px);border-color:var(--sol-amarelo);box-shadow:var(--sombra-alta)}
.atividade .icone{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--azul-050);color:var(--azul-600);position:relative;z-index:var(--z-conteudo);
}
.atividade .icone svg{width:22px;height:22px}
.atividade h3{font-size:var(--t-md);margin:0}
.atividade p{font-size:var(--t-sm);color:var(--tinta-70);margin:0;position:relative;z-index:var(--z-conteudo)}
.atividade .marca-inclusa{
  align-self:flex-start;margin-top:auto;font-size:var(--t-xs);font-weight:var(--peso-forte);
  padding:4px 11px;border-radius:var(--raio-pill);background:#E4F4EC;color:#14694A;
  border:1px solid rgba(20,105,74,.18);
}
.atividade .marca-paga{background:var(--creme);color:var(--cinza-600);border-color:var(--cinza-300)}

/* o card do inglês atravessa a grade e é o único azul */
.atividade.destaque{
  grid-column:1/-1;background:var(--azul-800);border-color:var(--azul-800);color:var(--branco);
  flex-direction:row;align-items:center;gap:var(--e-5);padding:var(--e-5) var(--e-6);
}
.atividade.destaque h3{color:var(--branco);white-space:nowrap}
.atividade.destaque p{color:rgba(255,255,255,.88);flex:1;font-size:var(--t-base)}
.atividade.destaque .icone{background:rgba(247,211,0,.16);color:var(--sol-amarelo);
  width:52px;height:52px;flex:none}
.atividade.destaque .icone svg{width:26px;height:26px}
.atividade.destaque .marca-inclusa{
  margin:0;background:var(--sol-amarelo);color:var(--azul-800);border-color:var(--sol-amarelo);
}
.atividade.destaque:hover{border-color:var(--sol-amarelo);transform:none}

/* ---------- integral ---------- */
.integral .container{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);align-items:center}
.relogio{
  background:var(--azul-800);color:var(--branco);border-radius:var(--raio-lg);
  padding:clamp(28px,4vw,48px);position:relative;overflow:hidden;
  border-top:6px solid var(--sol-amarelo);
}
.relogio .hora{font-family:var(--fonte-titulo);font-weight:var(--peso-black);
  font-size:clamp(2rem,5vw,var(--t-3xl));line-height:1;color:var(--branco)}
.relogio .hora small{display:block;font-size:var(--t-sm);font-weight:var(--peso-normal);
  color:var(--sol-amarelo);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--e-3)}
.relogio ul{list-style:none;margin:var(--e-6) 0 0;padding:0;
  display:flex;flex-direction:column;gap:var(--e-3);position:relative;z-index:var(--z-conteudo)}
.relogio li{display:flex;gap:var(--e-3);font-size:var(--t-sm);color:rgba(255,255,255,.88)}
.relogio li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--sol-amarelo);margin-top:9px}

/* ---------- eventos ---------- */
.eventos-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-5)}
.evento{
  background:var(--branco);border-radius:var(--raio-lg);overflow:hidden;
  box-shadow:var(--sombra-card);text-decoration:none;color:inherit;display:block;
  position:relative;border:1px solid var(--cinza-100);
  transition:transform var(--medio) var(--saida),box-shadow var(--medio) var(--entrada);
}
.evento:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.evento .moldura{position:relative;overflow:hidden}
.evento img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block;
  transition:transform var(--lento) var(--saida)}
.evento:hover img{transform:scale(1.05)}
/* o ano sai do rodapé apagado e vira selo em cima da foto */
.evento .ano-selo{
  position:absolute;top:var(--e-3);left:var(--e-3);
  background:var(--sol-amarelo);color:var(--azul-800);
  font-size:var(--t-xs);font-weight:var(--peso-black);letter-spacing:.06em;
  padding:5px 12px;border-radius:var(--raio-pill);
  box-shadow:0 4px 12px -3px rgba(10,25,50,.4);
}
.evento .rot{padding:var(--e-4) var(--e-5) var(--e-5);text-align:center}
.evento .rot b{display:block;color:var(--azul-800);font-weight:var(--peso-forte);font-size:var(--t-base)}
.evento .rot .desc{display:block;font-size:var(--t-sm);color:var(--tinta-70);margin-top:2px}
.evento .rot .qtd{display:block;font-size:var(--t-xs);color:var(--azul-600);
  font-weight:var(--peso-forte);margin-top:var(--e-2);letter-spacing:.02em}

/* ---------- banner de uma arte só, de ponta a ponta da tela ----------
   A arte já traz selo, título e frase; o título em HTML fica fora da vista. */
.banner-largo{margin:0;background:var(--azul-800);line-height:0}
.banner-largo img{width:100%;height:auto;display:block}
/* no celular a arte inteira fica baixa e a frase miúda: mostra só o miolo,
   onde está o texto, e deixa as fotos das pontas saírem da tela */
@media (max-width:600px){
  .banner-largo img,.capa-banner img{aspect-ratio:4/3;object-fit:cover}
}
.atividades-home{padding-top:0}
.atividades-home .banner-largo{margin-bottom:var(--secao-y)}

.anos{
  margin-top:var(--e-12);text-align:center;
}
.anos h3{font-size:var(--t-lg);margin-bottom:var(--e-2)}
.anos .apoio{color:var(--tinta-70);font-size:var(--t-sm);max-width:52ch;margin:0 auto var(--e-6)}
.grade-anos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2)}
.grade-anos a{
  display:inline-block;padding:6px 13px;border-radius:var(--raio-sm);
  border:1px solid var(--cinza-300);color:var(--azul-700);text-decoration:none;
  font-size:var(--t-sm);font-weight:var(--peso-medio);
  transition:all var(--rapido) var(--entrada);
}
.grade-anos a:hover{background:var(--azul-800);border-color:var(--azul-800);color:var(--branco)}
.grade-anos a.atual{background:var(--sol-amarelo);border-color:var(--sol-amarelo);color:var(--azul-800);font-weight:var(--peso-forte)}

/* ---------- estrutura: trilho com setas ----------
   Todo carrossel ocupa a largura da tela: a foto entra e sai cortada na borda,
   e as setas ficam alinhadas com a coluna do texto. */
.galeria{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
/* Sem scroll-snap e sem scroll-behavior:smooth: os dois brigam com o giro
   automático e deixam o carrossel aos trancos. */
.trilho-fotos{
  display:flex;gap:var(--e-4);overflow-x:auto;padding:var(--e-2) 0 var(--e-5);
  scrollbar-width:none;
}
.trilho-fotos::-webkit-scrollbar{display:none}
.foto{
  position:relative;flex:0 0 clamp(250px,30vw,376px);margin:0;
  border-radius:var(--raio-lg);overflow:hidden;box-shadow:var(--sombra-card);
  aspect-ratio:4/3;background:var(--cinza-100);
}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--lento) var(--saida)}
.foto:hover img{transform:scale(1.05)}
.foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--e-8) var(--e-5) var(--e-4);
  color:var(--branco);font-weight:var(--peso-forte);font-size:var(--t-sm);
  background:linear-gradient(to top,rgba(0,24,50,.9),transparent);
}
.galeria .seta-foto{
  position:absolute;top:calc(50% - 16px);transform:translateY(-50%);z-index:var(--z-conteudo);
  width:46px;height:46px;border-radius:50%;border:1px solid var(--cinza-100);cursor:pointer;
  background:var(--branco);color:var(--azul-800);display:grid;place-items:center;
  box-shadow:var(--sombra-alta);
  transition:transform var(--rapido) var(--saida),background var(--rapido) var(--entrada),opacity var(--medio);
}
.galeria .seta-foto:hover{background:var(--azul-800);color:var(--branco);transform:translateY(-50%) scale(1.06)}
.galeria .seta-foto[disabled]{opacity:0;pointer-events:none}
.galeria .seta-foto.ant{left:max(10px,calc(50vw - var(--largura) / 2 + 8px))}
.galeria .seta-foto.prox{right:max(10px,calc(50vw - var(--largura) / 2 + 8px))}
.galeria .seta-foto svg{width:20px;height:20px}

/* ---------- depoimentos: trilho que anda sozinho, mas aceita arrasto e setas ---------- */
.esteira-trilho{
  display:flex;gap:var(--e-5);overflow-x:auto;padding:var(--e-2) 0 var(--e-5);
  scrollbar-width:none;
}
.esteira-trilho::-webkit-scrollbar{display:none}

.depoimento{
  flex:0 0 clamp(268px,26vw,340px);
  background:var(--branco);border-radius:var(--raio-lg);padding:var(--e-6);
  box-shadow:var(--sombra-card);position:relative;display:flex;flex-direction:column;gap:var(--e-4);
  border:1px solid var(--cinza-100);
}
.depoimento::before{
  content:"";position:absolute;left:0;top:var(--e-6);bottom:var(--e-6);width:4px;
  border-radius:0 4px 4px 0;background:var(--sol-grad);
}
.depoimento .aspas{
  font-family:Georgia,serif;font-size:46px;line-height:.8;color:var(--sol-amarelo);
  height:22px;
}
.depoimento p{font-size:var(--t-sm);color:var(--tinta);margin:0;flex:1}
.depoimento footer{display:flex;align-items:center;gap:var(--e-3);border-top:1px solid var(--cinza-100);
  padding-top:var(--e-4)}
.depoimento .inicial{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--azul-050);color:var(--azul-700);font-weight:var(--peso-forte);font-size:var(--t-sm);
}
.depoimento cite{font-style:normal;font-weight:var(--peso-forte);font-size:var(--t-sm);color:var(--azul-800);display:block}
.depoimento .vinculo{font-size:var(--t-xs);color:var(--cinza-600);display:block}

/* arrastar com o mouse em qualquer trilho */
.arrastavel{cursor:grab}
.arrastavel.arrastando{cursor:grabbing;scroll-behavior:auto}
.arrastavel.arrastando *{pointer-events:none}

/* ---------- visita e formulário ---------- */
.visita{background:var(--azul-800);color:var(--branco);position:relative;overflow:hidden}
.visita .container{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;position:relative;z-index:var(--z-conteudo)}
.texto-visita{max-width:480px;justify-self:center}

/* consentimento LGPD do formulário */
.consentimento{
  display:flex;gap:var(--e-3);align-items:flex-start;margin-top:var(--e-5);
  font-size:var(--t-xs);line-height:1.5;color:var(--cinza-600);cursor:pointer;
}
.consentimento input{
  flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--azul-600);cursor:pointer;
}
.consentimento a{color:var(--azul-600);font-weight:var(--peso-forte)}
.campo select optgroup{font-weight:var(--peso-forte);color:var(--azul-800)}
.campo select option{font-weight:var(--peso-normal);color:var(--tinta)}
.visita h2{font-size:clamp(1.7rem,3.4vw,var(--t-2xl))}
.visita .horarios{list-style:none;padding:0;margin:var(--e-6) 0 0;display:flex;
  flex-direction:column;gap:var(--e-4)}
.visita .horarios li{display:flex;gap:var(--e-4);align-items:baseline}
.visita .horarios b{color:var(--sol-amarelo);min-width:72px;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.06em}
.visita .horarios span{font-size:var(--t-sm);color:rgba(255,255,255,.88)}

.cartao-form{
  background:var(--branco);border-radius:var(--raio-lg);padding:clamp(24px,3vw,36px);
  box-shadow:var(--sombra-alta);color:var(--tinta);
}
.cartao-form h3{font-size:var(--t-lg);margin-bottom:var(--e-1)}
.cartao-form .apoio{font-size:var(--t-sm);color:var(--tinta-70);margin-bottom:var(--e-6)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
.campo{display:flex;flex-direction:column;gap:var(--e-2)}
.campo.largo{grid-column:1/-1}
.campo label{font-size:var(--t-xs);font-weight:var(--peso-forte);color:var(--azul-800);
  text-transform:uppercase;letter-spacing:.05em}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:var(--t-sm);padding:12px 14px;border-radius:var(--raio-sm);
  border:1.5px solid var(--cinza-100);background:var(--branco);color:var(--tinta);
  transition:border-color var(--rapido) var(--entrada),box-shadow var(--rapido) var(--entrada);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-500);box-shadow:0 0 0 4px var(--azul-100)}
.campo textarea{resize:vertical;min-height:88px}
.opcoes{display:flex;gap:var(--e-3)}
.opcoes label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--e-2);
  padding:11px;border:1.5px solid var(--cinza-100);border-radius:var(--raio-sm);
  cursor:pointer;font-size:var(--t-sm);font-weight:var(--peso-medio);color:var(--cinza-600);
  text-transform:none;letter-spacing:0;
  transition:all var(--rapido) var(--entrada);
}
.opcoes input{position:absolute;opacity:0;width:0;height:0}
.opcoes label:has(input:checked){border-color:var(--azul-600);background:var(--azul-050);color:var(--azul-800)}
.opcoes label:has(input:focus-visible){outline:3px solid var(--sol-amarelo);outline-offset:2px}
.cartao-form .btn{width:100%;margin-top:var(--e-5)}
.privacidade{font-size:var(--t-xs);color:var(--cinza-600);margin:var(--e-4) 0 0;line-height:1.5}
.ou-zap{margin-top:var(--e-6);font-size:var(--t-sm);color:rgba(255,255,255,.88)}
.ou-zap a{color:var(--sol-amarelo);font-weight:var(--peso-forte)}

/* ---------- rodapé ---------- */
.rodape{background:var(--azul-900);color:rgba(255,255,255,.78);padding:var(--secao-y) 0 var(--e-8)}
.rodape .container{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--e-10)}
.rodape h4{color:var(--branco);font-size:var(--t-sm);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:var(--e-4)}
.rodape p,.rodape li{font-size:var(--t-sm);line-height:1.7}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape a{color:rgba(255,255,255,.82);text-decoration:none}
.rodape a:hover{color:var(--sol-amarelo)}
.rodape .logo-rodape{height:56px;margin-bottom:var(--e-5);filter:brightness(0) invert(1);opacity:.95}
.assinatura{
  margin-top:var(--e-10);padding-top:var(--e-5);border-top:1px solid rgba(255,255,255,.14);
  text-align:center;font-size:var(--t-xs);color:rgba(255,255,255,.6);
}

/* ---------- botão flutuante do WhatsApp ---------- */
.zap-flutua{
  position:fixed;right:18px;bottom:18px;z-index:var(--z-flutuante);
  width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(37,211,102,.45);transition:transform var(--medio) var(--saida);
}
.zap-flutua:hover{transform:scale(1.08)}
.zap-flutua svg{width:30px;height:30px;fill:#fff}

/* ---------- responsivo ----------
   Três marcos: tablet deitado (1080), tablet em pé (860) e celular (600).
   Tudo em grade fixa, para nunca sobrar um card sozinho na última linha. */
@media (max-width:1080px){
  .etapas{grid-template-columns:repeat(2,1fr)}
  .etapas .etapa:last-child{grid-column:1/-1}
  .etapas .etapa:last-child .capa{aspect-ratio:21/9}
  .atividades{grid-template-columns:repeat(2,1fr)}
  .eventos-cards{grid-template-columns:repeat(2,1fr)}
  .rotina{grid-template-columns:repeat(2,1fr)}
  .atividade.destaque{flex-direction:column;align-items:flex-start;gap:var(--e-3)}
  .atividade.destaque h3{white-space:normal}
}
@media (max-width:860px){
  .proposta .container,.integral .container,.visita .container{grid-template-columns:1fr}
  .rodape .container{grid-template-columns:1fr;gap:var(--e-8)}
  .proposta img{order:-1}
  .cabeca-secao{margin-bottom:var(--e-8)}
}
@media (max-width:600px){
  .etapas,.atividades,.eventos-cards,.rotina{grid-template-columns:1fr}
  .etapas .etapa:last-child .capa{aspect-ratio:16/10}
  .campos{grid-template-columns:1fr}
  .foto{flex-basis:78vw}
  .depoimento{flex-basis:80vw}
  .visita .horarios li{flex-direction:column;gap:2px}
  .visita .horarios b{min-width:0}
}
/* telas curtas ou com zoom alto: o carrossel não pode comer a página inteira */
@media (max-height:520px) and (orientation:landscape){
  .slide img{max-height:70vh;object-fit:cover}
}

/* ---------- formulário: campo para robô e aviso de envio ---------- */
.campo-robo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso-envio{margin:0 0 var(--e-4);padding:var(--e-3) var(--e-4);border-radius:var(--raio-sm);
  background:#FFF6D6;border:1px solid var(--sol-amarelo);color:var(--azul-800);font-size:var(--t-sm)}