/* ===================================================================
   Site do Colégio Lima Guimarães — folha principal
   Checkpoint 1: barra superior, cabeçalho, carrossel e faixa institucional.
   =================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fonte-texto);
  font-weight:var(--peso-leve);
  font-size:var(--t-base);
  line-height:var(--altura-texto);
  color:var(--tinta);
  background:var(--branco);
  overflow-x:clip; /* os carrosséis de largura total não abrem rolagem lateral */
}
img{max-width:100%;height:auto;display:block}
a[href^="mailto:"]{overflow-wrap:anywhere} /* o e-mail da escola é maior que tela de celular */
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--fonte-titulo);font-weight:var(--peso-black);
  line-height:var(--altura-titulo);color:var(--azul-800);margin:0 0 var(--e-4)}
p{margin:0 0 var(--e-4)}

.container{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:3px solid var(--sol-amarelo);outline-offset:3px;border-radius:var(--e-1)}

/* ---------- a marca escrita: L e G caligráficos, como na logo ---------- */
.marca{font-weight:var(--peso-medio)}
.marca .ini{
  font-family:var(--fonte-marca);
  font-weight:var(--peso-normal);
  font-size:1.32em;
  line-height:0;
  position:relative;
  top:.055em;
  padding-right:.015em;
}

/* ---------- barra superior ---------- */
.barra-topo{
  background:linear-gradient(90deg,var(--azul-800) 0%,var(--azul-600) 55%,var(--azul-500) 100%);
  color:var(--branco);
  font-size:var(--t-xs);
  font-weight:var(--peso-medio);
}
.barra-topo .container{display:flex;align-items:center;gap:var(--e-5);
  min-height:38px;flex-wrap:wrap}
.barra-topo a{text-decoration:none;display:inline-flex;align-items:center;gap:var(--e-2);
  opacity:.94;transition:opacity var(--rapido) var(--entrada)}
.barra-topo a:hover{opacity:1}
.barra-topo .sociais{display:flex;gap:var(--e-3);margin-left:auto}
.barra-topo .portais{display:flex;gap:var(--e-2)}
.barra-topo .portais a{
  background:rgba(255,255,255,.14);padding:4px 11px;border-radius:var(--raio-pill);
  font-size:var(--t-xs);
}
.barra-topo .portais a:hover{background:rgba(255,255,255,.26)}

/* ---------- faixa da promessa ---------- */
.faixa-promessa{
  background:var(--creme);
  text-align:center;
  font-size:var(--t-md);
  font-weight:var(--peso-forte);
  color:var(--azul-800);
  padding:var(--e-3) var(--gutter);
}

/* ---------- cabeçalho ---------- */
/* Vidro: o conteúdo passa por baixo e aparece desfocado. */
.cabecalho{
  position:sticky;top:0;z-index:var(--z-menu);
  background:rgba(255,255,255,.62);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(10,35,70,.06), 0 10px 30px -18px rgba(10,35,70,.35);
  transition:background var(--medio) var(--entrada),box-shadow var(--medio) var(--entrada);
}
/* quando a página rola, o vidro fica um pouco mais denso para o menu seguir legível */
.cabecalho.rolou{
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(10,35,70,.08), 0 14px 34px -20px rgba(10,35,70,.5);
}
@supports not (backdrop-filter:blur(2px)){
  .cabecalho{background:rgba(255,255,255,.96)}
}
.cabecalho .container{display:flex;align-items:center;gap:var(--e-6);min-height:84px}
.cabecalho .logo img{height:58px;width:auto}
.menu{margin-left:auto;display:flex;align-items:center;gap:var(--e-6)}
.menu > ul{display:flex;align-items:center;gap:var(--e-6);list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;color:var(--azul-800);font-size:var(--t-sm);
  font-weight:var(--peso-medio);padding:var(--e-2) 0;position:relative;
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:2px;
  background:var(--sol-amarelo);transform:scaleX(0);transform-origin:left;
  transition:transform var(--medio) var(--saida);
}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu .tem-sub{position:relative}
.menu .tem-sub > a::before{
  content:"";position:absolute;right:-13px;top:50%;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.6;
}
.submenu{
  position:absolute;top:100%;left:-16px;min-width:224px;background:var(--branco);
  border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:var(--e-2);
  list-style:none;margin:8px 0 0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--medio) var(--entrada),transform var(--medio) var(--saida),visibility var(--medio);
}
.menu .tem-sub:hover .submenu,.menu .tem-sub:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.submenu a{display:block;padding:var(--e-3) var(--e-4);border-radius:var(--raio-sm);font-weight:var(--peso-normal)}
.submenu a::after{display:none}
.submenu a:hover{background:var(--azul-050);color:var(--azul-600)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  padding:13px 26px;border-radius:var(--raio-pill);border:2px solid transparent;
  font-weight:var(--peso-forte);font-size:var(--t-sm);text-decoration:none;cursor:pointer;
  letter-spacing:.01em;transition:transform var(--rapido) var(--saida),
    background-color var(--medio) var(--entrada),box-shadow var(--medio) var(--entrada);
}
.btn-sol{background:var(--sol-laranja);color:var(--branco);box-shadow:0 6px 16px rgba(243,139,26,.32)}
.btn-sol:hover{background:var(--sol-amarelo);color:var(--azul-800);transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(247,211,0,.4)}
.btn-zap{background:#1FA855;color:#fff}
.btn-zap:hover{background:#178A45;transform:translateY(-2px)}
.btn-contorno{border-color:var(--branco);color:var(--branco)}
.btn-contorno:hover{background:var(--branco);color:var(--azul-800)}

.abre-menu{display:none;background:none;border:0;padding:var(--e-2);cursor:pointer;color:var(--azul-800)}
.abre-menu span{display:block;width:26px;height:2px;background:currentColor;margin:5px 0;
  transition:transform var(--medio) var(--saida),opacity var(--rapido)}
.abre-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.abre-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.abre-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- carrossel de banners ---------- */
.carrossel{position:relative;background:var(--azul-900);overflow:hidden}
.trilho{display:flex;transition:transform var(--lento) var(--suave)}
.slide{min-width:100%;position:relative}
.slide img{width:100%;height:auto;object-fit:cover}

/* Ponto clicável sobre o botão desenhado na arte do banner.
   Só ele leva a algum lugar — clicar no resto da peça não faz nada.
   Posição em % da arte (1600x500), por slide, via --x --y --l --a. */
.ponto-cta{
  position:absolute;left:var(--x);top:var(--y);width:var(--l);height:var(--a);
  border-radius:var(--raio-pill);z-index:var(--z-conteudo);
  transition:box-shadow var(--medio) var(--entrada),transform var(--rapido) var(--saida);
}
.ponto-cta:hover{box-shadow:0 0 0 3px rgba(255,255,255,.75);transform:translateY(-1px)}
.ponto-cta:focus-visible{box-shadow:0 0 0 3px var(--sol-amarelo)}

.carrossel .seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-conteudo);
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.82);color:var(--azul-800);
  display:grid;place-items:center;
  box-shadow:var(--sombra-card);
  transition:background var(--rapido) var(--entrada),transform var(--rapido) var(--saida);
}
.carrossel .seta:hover{background:var(--branco);transform:translateY(-50%) scale(1.06)}
.carrossel .seta.ant{left:clamp(8px,2vw,22px)}
.carrossel .seta.prox{right:clamp(8px,2vw,22px)}
.carrossel .seta svg{width:18px;height:18px}

.pontos{
  position:absolute;left:0;right:0;bottom:clamp(10px,2vw,20px);
  display:flex;justify-content:center;gap:var(--e-2);z-index:var(--z-conteudo);
}
.pontos button{
  width:10px;height:10px;padding:0;border-radius:50%;border:2px solid var(--branco);
  background:transparent;cursor:pointer;transition:all var(--medio) var(--entrada);
}
.pontos button[aria-current="true"]{background:var(--sol-amarelo);border-color:var(--sol-amarelo);width:26px;border-radius:var(--raio-pill)}

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

/* ---------- bloco institucional ---------- */
.institucional{padding:var(--secao-y) 0;background:var(--branco)}
.institucional .container{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px);align-items:center}
.institucional h2{font-size:clamp(1.75rem,3.4vw,var(--t-3xl));margin-bottom:var(--e-5)}
.institucional p{color:var(--tinta-70);max-width:52ch}
.institucional .figura{position:relative}
.institucional .figura img{border-radius:var(--raio-lg);box-shadow:var(--sombra-alta)}
.institucional .selo-ano{
  position:absolute;left:-18px;bottom:-18px;background:var(--branco);
  border-radius:var(--raio);padding:var(--e-4) var(--e-5);box-shadow:var(--sombra-alta);
  display:flex;align-items:center;gap:var(--e-3);
}
.institucional .selo-ano b{font-family:var(--fonte-titulo);font-weight:var(--peso-black);
  font-size:var(--t-xl);color:var(--azul-800);line-height:1}
.institucional .selo-ano span{font-size:var(--t-xs);color:var(--cinza-600);max-width:14ch;line-height:1.3}

/* o traço ondulado sob os títulos, elemento próprio do site */
.traco{display:block;width:74px;height:10px;margin:var(--e-3) 0 var(--e-5)}
.traco path{fill:none;stroke:var(--sol-amarelo);stroke-width:3;stroke-linecap:round}
.traco.azul path{stroke:var(--azul-500)}
.centro .traco{margin-inline:auto}
.centro{text-align:center}

.link-seta{
  display:inline-flex;align-items:center;gap:var(--e-2);text-decoration:none;
  color:var(--azul-600);font-weight:var(--peso-forte);font-size:var(--t-sm);
}
.link-seta svg{width:16px;height:16px;transition:transform var(--medio) var(--saida)}
.link-seta:hover svg{transform:translateX(4px)}

/* ---------- revelar ao rolar ---------- */
.revela{opacity:0;transform:translateY(22px);
  transition:opacity var(--lento) var(--entrada),transform var(--lento) var(--saida)}
.revela.visivel{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .institucional .container{grid-template-columns:1fr}
  .institucional .figura{order:-1}
}
@media (max-width:860px){
  .abre-menu{display:block;margin-left:auto}
  .menu{
    position:fixed;inset:84px 0 auto;background:var(--branco);flex-direction:column;
    align-items:stretch;gap:0;padding:var(--e-4) var(--gutter) var(--e-8);
    border-bottom:1px solid var(--cinza-100);box-shadow:var(--sombra-alta);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity var(--medio) var(--entrada),transform var(--medio) var(--saida),visibility var(--medio);
    max-height:calc(100vh - 84px);overflow:auto;
  }
  .menu:not(.aberto){pointer-events:none}
  .menu.aberto{opacity:1;visibility:visible;transform:none}
  .menu > ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .menu > ul > li{border-bottom:1px solid var(--cinza-100)}
  .menu a{display:block;padding:var(--e-4) 0;font-size:var(--t-base)}
  .menu a::after{display:none}
  /* visibility:inherit, e não visible: com visible o submenu continuava clicável com o
     menu fechado, invisível por cima da página, e o toque ia parar em outra página (22/09) */
  .submenu{position:static;opacity:1;visibility:inherit;transform:none;box-shadow:none;
    padding:0 0 var(--e-3) var(--e-4);margin:0}
  .menu .btn{margin-top:var(--e-5);width:100%}
  .menu .tem-sub > a::before{right:6px}
  .barra-topo .sociais{display:none}
}
@media (max-width:640px){
  /* O banner é arte larga (1600x500). No celular ele aparece inteiro, sem corte:
     o corte escondia parte do texto e do botão da arte (pedido do Lucas, 22/09). */
  .carrossel .seta{width:30px;height:30px;background:rgba(255,255,255,.7)}
  .carrossel .seta svg{width:14px;height:14px}
  .pontos{bottom:6px}
  .pontos button{width:8px;height:8px}
  .pontos button[aria-current="true"]{width:20px}
  .faixa-promessa{font-size:var(--t-sm)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .revela{opacity:1;transform:none}
  .trilho{transition:none}
}