/* =========================================================
   0) FONTS (um único import)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Tomorrow:wght@400;700;800;900&family=Ubuntu:wght@300;400;500;700&display=swap');

/* =========================================================
   1) TOKENS / BASE
   ========================================================= */
:root{
  /* Brand */
  --brand-1:#005c99;      /* subcabeçalho */
  --brand-2:#042B3D;      /* cabeçalho */
  --ink:#0f172a;

  /* Layout */
  --radius:12px;
  --header-h:160px;
  --subheader-h:46px;

  /* Footer / FAB (sincroniza reserva e altura real) */
  --footer-h:100px; /* desktop */
  --wa-size:56px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  background:#f6f8fb;
  font-family:"Chakra Petch",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  /* reserva apenas cabeçalhos fixos */
  padding-top: calc(var(--header-h) + var(--subheader-h));
  overflow-x:hidden;
}

/* =========================================================
   2) LAYOUT PRINCIPAL (Header/Subheader/Main/Footer)
   ========================================================= */
/* Cabeçalhos fixos */
.cabecalho, .subCabecalho{
  position:fixed; left:0; right:0; z-index:1000;
}

.cabecalho{
  top:0; height:var(--header-h);
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:8px 16px;
  background:var(--brand-2); color:#fff;
}

.logoMarinha{ height:calc(var(--header-h) - 8px); width:auto; }

.titulo{
  margin:0; line-height:1;
  font-family:"Tomorrow",Arial,Helvetica,sans-serif;
  font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  text-shadow:1px 1px 1px rgba(0,0,0,.3);
  font-size:clamp(1.5rem,2.8vw,2.9rem);
}

.subCabecalho{
  top:var(--header-h); height:var(--subheader-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 16px;
  background:var(--brand-1); color:#fff;
}

.slogan{ margin:0; font-size:clamp(.9rem,2.6vw,1.05rem); line-height:1; }
.subCabecalho h2{ margin:0; font-weight:700; font-size:clamp(.75rem,2.2vw,1.95rem); line-height:1; opacity:.95; }

.acesso{
  background:#fff; color:#003087; border:1px solid transparent; border-radius:var(--radius);
  padding:.45rem .85rem; min-height:36px; font-weight:700; font-size:.9rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none;
  transition:.2s;
}
.acesso:hover{ background:#000; color:#fff; border-color:#fff; }
.acesso:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.acesso:active{ transform:translateY(1px); }
.acesso--block{ width:100%; }

/* Main – reserva exatamente a altura do footer + safe-area */
main{
  width:100%;
  max-width:1800px;
  margin:2px auto 0;
  min-height: calc(100dvh - var(--header-h) - var(--subheader-h));
  padding:0 15px;
  padding-bottom: calc(var(--footer-h) + clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  border:1px solid #000; border-radius:5px;
  background-color:#83c7f235;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}

/* Footer fixo – usa a mesma variável que o main reserva */
footer{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  height: calc(var(--footer-h) + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to bottom,var(--brand-1),var(--brand-2));
  color:#fff; display:flex; align-items:center; justify-content:center;
  padding:0 clamp(8px,1.2vw,12px);
  box-shadow:0 -10px 30px rgba(0,0,0,.15);
}

.container-footer{
  max-width:min(1200px,96%);
  display:flex; align-items:center; flex-wrap:wrap;
  gap: clamp(6px,1.6vw,14px);
  padding: clamp(6px,1.2vw,10px);
  padding-right: calc(var(--wa-size) + clamp(8px,1.6vw,14px));
}

.texto-01{
  width:100%; max-width:720px; margin:0;
  font-weight:700; line-height:1.15; font-size:clamp(.85rem,1.9vw,1.2rem);
}

/* FAB do WhatsApp */
.wa-fab{
  position:absolute; right:clamp(8px,2vw,18px); top:50%; transform:translateY(-50%);
  width:var(--wa-size); height:var(--wa-size); z-index:1101;
}
.wa-fab__img{ width:100%; height:100%; object-fit:contain; animation:wa-pulse 1.9s ease-in-out infinite; }

@keyframes wa-pulse{ 0%,100%{transform:scale(.92)} 50%{transform:scale(1.06)} }

/* =========================================================
   3) SEÇÕES / LINHAS / TÍTULOS-FAIXA
   ========================================================= */
.linha{ border:0; border-top:1px solid #000; margin-block:clamp(6px,1.6vw,10px); }

.conteudo-azul{
  background:#042B3D; color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding-block:clamp(6px,1.6vw,10px); border-radius:6px;
}

#h2_texto_barra-azul, #h2_conteudo_ultimas_noticias{
  margin:0; display:inline-block;
  background:#fafafa; color:#042B3D;
  padding:.25rem .6rem; border-radius:10px;
  font-size:clamp(14px,2.6vw,20px); line-height:1.1;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}

/* =========================================================
   4) GALERIA (carrossel)
   ========================================================= */
.gallery-wrapper{
  width:100%; max-width:1300px;
  margin: clamp(8px,2vw,16px) auto; padding: clamp(6px,1.6vw,12px) 0;
  border-radius:5px; position:relative;
}

.gallery-container{
  position:relative; width:100%; overflow:hidden; border-radius:5px;
  /* Altura responsiva */
  height: clamp(320px, 42vw, 700px);
  border: clamp(2px,.6vw,4px) solid var(--brand-2);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.gallery{
  position:absolute; inset:0; display:flex;
  transition:transform .5s ease-in-out; will-change:transform;
}

.gallery img{
  flex:0 0 100%; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  padding:clamp(6px,1.6vw,12px); font-size:clamp(1rem,2.6vw,1.5rem);
  background:rgba(0,0,0,.5); color:#fff; border:none; border-radius:50%; cursor:pointer; z-index:10;
}
.nav-btn:hover{ background:rgba(0,0,0,.8); }
.nav-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.prev-btn{ left:10px; } .next-btn{ right:10px; }

.dots-container{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(6px,1.4vw,10px); padding:8px 0; margin-top:6px;
}
.dot{
  width:clamp(6px,.9vw,10px); height:clamp(6px,.9vw,10px);
  background:#bbb; border:none; border-radius:50%; cursor:pointer; transition:background-color .3s;
}
.dot.active{ background:#003087; }

.play-btn,.pause-btn{
  background:#005C99; color:#fff; border:none; cursor:pointer;
  padding:clamp(4px,1.2vw,8px) clamp(6px,1.6vw,12px);
  font-size:clamp(.8rem,2.2vw,1rem); border-radius:6px; margin:0;
}
.play-btn:hover,.pause-btn:hover{ background:#005c99; }

/* =========================================================
   5) “NOSSO LEMA” — FLIP CARDS
   ========================================================= */
.container-cards{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:clamp(8px,2.2vw,15px); padding-block:clamp(10px,2.5vw,20px);
}

.card{ width:clamp(100px,24vw,250px); height:clamp(120px,30vw,300px); perspective:1000px; flex:0 0 auto; cursor:pointer; }
.card:hover .card-inner, .card.flipped .card-inner{ transform:rotateY(180deg); }

.card-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s ease; }

.card-front, .card-back{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
  border-radius:12px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

.card-front{ background:#000; }
.card-front img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:translateY(clamp(6px,1.4vw,15px)); }

.card-front .Disc_Foco_Exec{
  position:relative; z-index:1; color:#fff; font-weight:700; font-size:clamp(12px,2.2vw,22px);
  background:rgba(0,0,0,.6); padding:.25rem .5rem; border-radius:10px;
}

.card-back{
  background:#1e1e1e; color:#fff; transform:rotateY(180deg);
  text-align:center; padding:8px;
}
.card-back .Disc_Foco_Exec{ font-size:clamp(10px,2vw,20px); margin:0 0 6px; }
.card-back .Text_Disciplina{ font-size:clamp(9px,1.9vw,19px); line-height:1.25; }

/* =========================================================
   6) CARDS — MATÉRIAS (Apostilas)
   ========================================================= */
.cards_container{ width:100%; max-width:1200px; margin:0 auto; padding-block:clamp(10px,2vw,20px); }

.card_wrapper{
  display:grid; gap:clamp(8px,2vw,15px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin:0 auto; padding:clamp(6px,1.6vw,10px);
}

.card_apostilha{
  width:100%; min-height:200px; padding:10px 8px; border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:#f5f5f5; box-shadow:0 4px 8px rgba(0,0,0,.1);
  transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease; will-change:transform;
}
.card_apostilha:hover{ transform:translateY(-4px); box-shadow:0 8px 16px rgba(0,0,0,.2); background-color:rgba(4,43,61,.06); }

.card_apostilha img{
  width:100%; aspect-ratio:12/12; object-fit:cover; border-radius:10px; margin-top:6px; background:#e9f0f7; display:block;
}

.card_apostilha p{
  margin:10px 0 0; padding:0 10px; text-align:center; line-height:1.2;
  color:#042B3D; font-size:1rem; font-weight:700;
}

/* =========================================================
   7) CARDS — INFORMATIVOS (centralizado e responsivo)
   ========================================================= */
.cards_container-informativo{ width:100%; }

.card_wrapper-informativo{
  display:grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:10px;
  justify-items:stretch;
  align-items:stretch;
}

.card-informativo{
  /* centralização perfeita do conteúdo */
  display:grid;
  place-items:center;
  align-content:center;
  row-gap:10px;
  text-align:center;

  background:#042b3dd7; color:#fff;
  border-radius:16px;
  padding:18px 14px;
  width:100%; min-height:240px;

  box-shadow:0 4px 8px rgba(0,0,0,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-informativo:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,.2); }
.card-informativo > *{ margin:0; }

.icons_informativo{
  width:72px; height:72px; object-fit:contain;
  display:block; margin:0 auto;
}
.p_informativo{
  margin:6px 0; color:#fff; font-size:1.05rem; font-weight:700; letter-spacing:.3px;
}
.card-informativo p:not(.p_informativo){
  font-size:.9rem; line-height:1.35; max-width:28ch; padding:0;
}

/* =========================================================
   8) MÍDIAS SOCIAIS (círculos responsivos)
   ========================================================= */
.midiaSociais-II{ padding-block:8px; }

.conteinerMidiaSociais-II{
  max-width:min(1600px,96%); margin:0 auto;
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:8px 10px;
}
.midiaSociais-II a{ display:inline-flex; }

.midiaSociais-II img{
  inline-size:clamp(42px,6vw,80px); aspect-ratio:1/1; object-fit:cover;
  border-radius:50%; margin:0; border:2px solid transparent; box-shadow:2px 2px 5px rgba(0,0,0,.4);
  transition:transform .3s, box-shadow .3s, border-color .2s;
}
.midiaSociais-II img:hover,
.midiaSociais-II a:focus-visible img{
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 10px rgba(0,0,0,.62);
  border-color:rgba(135,31,31,.64);
  outline:0;
}

/* evita sobra no final do main quando for a última seção */
main#conteudo{ padding-bottom:8px; }
main#conteudo > *:last-child{ margin-bottom:0; }

/* =========================================================
   9) RESPONSIVO
   ========================================================= */
/* <=1024px: informativos 2 colunas */
@media (max-width:1024px){
  .card_wrapper-informativo{
    grid-template-columns:repeat(2, minmax(220px, 1fr));
    gap:12px;
  }
  .card-informativo{ min-height:220px; padding:14px; }
  .icons_informativo{ width:56px; height:56px; }
  .p_informativo{ font-size:.95rem; }
  .card-informativo p:not(.p_informativo){ font-size:.85rem; }
}

/* <=768px: ajustes gerais */
@media (max-width:768px){
  :root{ --header-h:64px; --subheader-h:40px; }
  .cabecalho{ gap:8px; padding:6px 12px; }
  .logoMarinha{ height:calc(var(--header-h) - 8px); }
  .subCabecalho{ padding:4px 12px; }
  main{ max-width:95%; box-shadow:0 4px 8px rgba(0,0,0,.15); }

  /* cards matérias: 2 colunas */
  .card_wrapper{ grid-template-columns:repeat(2,1fr); gap:10px; padding:8px; }
  .card_apostilha{ min-height:180px; }
  .card_apostilha p{ font-size:.85rem; padding:0 8px; }
}

/* <=600px: grid matérias compacto (3 colunas) e informativos 2 colunas */
@media (max-width:600px){
  .card_wrapper{ grid-template-columns:repeat(3, minmax(110px,1fr)); gap:6px; padding:6px; }
  .card_apostilha{ min-height:140px; padding:6px; border-radius:8px; }
  .card_apostilha img{ border-radius:8px; }
  .card_apostilha p{ font-size:.75rem; margin-top:6px; padding:0 4px; line-height:1.15; }

  .card_wrapper-informativo{ grid-template-columns:repeat(2, minmax(150px, 1fr)); gap:10px; padding:8px; }
  .card-informativo{ min-height:200px; border-radius:12px; }
  .icons_informativo{ width:48px; height:48px; }
  .p_informativo{ font-size:.9rem; }
  .card-informativo p:not(.p_informativo){ font-size:.8rem; }
}

/* <=480px: ajustes finos + harmonização do footer */
@media (max-width:480px){
  /* sincroniza a reserva do main com a altura real do footer */
  :root{
    --footer-h: 50px;
    --wa-size: 36px;
  }

  .cabecalho{ gap:6px; padding:4px 10px; }
  .logoMarinha{ height:calc(var(--header-h) - 10px); }
  .titulo{ font-size:1rem; letter-spacing:.3px; }

  .subCabecalho{ gap:6px; padding:4px 10px; }
  .subCabecalho h2{ display:none; }
  .slogan{ margin:0; font-size:clamp(.9rem,2.6vw,1.05rem); line-height:1; }

  .acesso{ font-size:.80rem; padding:.35rem .6rem; min-height:30px; border-radius:10px; letter-spacing:.2px; }

  /* informativos: mantém 2 colunas; mais legível que 4 apertadas */
  .card_wrapper-informativo{ grid-template-columns:repeat(2, minmax(140px,1fr)); gap:8px; padding:6px; }
  .card-informativo{ min-height:180px; padding:10px; }
  .icons_informativo{ width:42px; height:42px; }
  .p_informativo{ font-size:.82rem; }
  .card-informativo p:not(.p_informativo){ font-size:.72rem; line-height:1.2; }

  .midiaSociais-II img:hover,
  .midiaSociais-II a:focus-visible img{ transform:translate(-1.5px,-1.5px); box-shadow:3px 3px 6px rgba(0,0,0,.62); }

  /* altura da galeria específica para mobile */
  .gallery-container{ height: clamp(200px, 35vh, 390px); }

  /*ALT temporárias para ajuste feitas pelo programador */
    .gallery-container img { height: 50%vh;border-radius: 0px; }/*ACRESCENTEI O BORDER-RADIUS PARA 0*/
    .gallery-container { height: clamp(200px, 35vw, 390px); }

  /* FAB sem margem “mágica” */
  .wa-fab__img{ width:100%; height:100%; margin-top:0; }

  /* matérias: versão 4 colunas compactas */
  .cards_container{ padding-block:8px; }
  .card_wrapper{ grid-template-columns:repeat(4,1fr); gap:6px; padding:6px; }
  .card_apostilha{ min-height:110px; padding:6px; }
  .card_apostilha img{ aspect-ratio:12/12; border-radius:6px; }
  .card_apostilha p{ font-size:.62rem; margin-top:4px; padding:0 2px; line-height:1.1; }

  /* texto do footer menor */
  .texto-01{ line-height:1.2; font-size:.6rem; }

  /* (Removido) NADA de definir footer{height:50px} aqui. Variável já cuida. */
}

/* <=380px: informativos 1 coluna e matérias 2 colunas pequenas */
@media (max-width:380px){
  .card_wrapper-informativo{ grid-template-columns:1fr; }
  .card_wrapper{ grid-template-columns:repeat(2, minmax(110px,1fr)); }
  .card_apostilha{ min-height:130px; }
  .card_apostilha p{ font-size:.7rem; }
}

/* Viewport estável em navegadores modernos */
@supports (height: 100svh){
  main{ min-height: calc(100svh - var(--header-h) - var(--subheader-h)); }
}

/* =========================================================
   10) ACESSIBILIDADE – Reduzir movimento
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}