/* =========================================================================
   Acadesc - Folha de estilo principal do site
   -------------------------------------------------------------------------
   O mockup foi desenhado em 1920px. Renderizar aquelas medidas ao pe da
   letra deixa tudo grande demais em tela cheia, entao o site adota 1440px
   como largura de referencia: os valores do mockup entram multiplicados por
   0,75 e sao FIXOS. Acima de 1440px nada cresce, so aumentam as margens
   laterais; abaixo, as medias queries reduzem.
   Os comentarios anotam a medida original do mockup entre parenteses.
   ========================================================================= */


/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {

  /* --- Cores da marca Acadesc (amostradas do mockup) --- */
  --azul:            #123A63;  /* primaria: titulos, header, rodape */
  --azul-claro:      #1B5390;
  --navy:            #191F3A;  /* faixa do topo, blocos de video */
  --amarelo:         #FFC72C;  /* botoes, destaques, logo */
  --amarelo-hover:   #F0B518;
  --azul-libweb:     #2E52BA;  /* faixa do Sistema de Bibliotecas */

  /* --- Cores da marca Fanny's (pagina Quem Somos) --- */
  --bronze:          #CE873B;
  --bege:            #EBCFB1;
  --azul-fannys:     #003E7B;

  /* --- Neutros --- */
  --branco:          #FFFFFF;
  --texto:           #333F4E;
  --texto-suave:     #5B6675;
  --linha:           #DFE3E8;
  --seccao-cinza:    #EBEDF1;
  --seccao-azul:     #EEF2FB;

  /* --- Larguras ---
     Todo o conteudo usa a MESMA largura, para os blocos alinharem entre si
     de ponta a ponta da pagina. So o cabecalho e um pouco mais folgado,
     como no mockup. */
  --container:            1335px;
  --container-largo:      1335px;
  --container-cabecalho:  1400px;  /* (1828) */
  --gutter:               40px;    /* (70)   */

  /* --- Tipografia --- */
  --fonte-titulo: "Poppins", "Segoe UI", sans-serif;
  --fonte-corpo:  "Roboto", "Segoe UI", sans-serif;

  --fs-h1:      38px;  /* (50) */
  --fs-h2:      30px;  /* (40) */
  --fs-h3:      21px;  /* (28) */
  --fs-h4:      17px;  /* (22) */
  --fs-corpo:   16px;  /* (21) */
  --fs-pequeno: 14px;  /* (18) */
  --fs-menu:    17px;  /* (23) */

  /* --- Ritmo vertical --- */
  --espaco-secao: 68px;  /* (90) */

  /* --- Cabecalho --- */
  --altura-faixa: 37px;  /* (49) */
  --altura-barra: 68px;  /* (90) */
  --altura-logo:  59px;  /* (79) */

  --raio:        10px;
  --sombra-card: 0 2px 14px rgba(18, 58, 99, .10);
  --transicao:   .25s ease;
}


/* =========================================================================
   2. Reset enxuto
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-barra) + 20px);
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  line-height: 1.55;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transicao); }

h1, h2, h3, h4, h5 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--azul);
  line-height: 1.2;
  margin: 0 0 .5em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; }


/* =========================================================================
   3. Estruturas reaproveitadas
   ========================================================================= */

/* O max-width soma a calha para que o CONTEUDO (e nao a caixa) meca o valor
   definido em --container. Acima disso so cresce a margem lateral. */
.container-site {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-largo {
  width: 100%;
  max-width: calc(var(--container-largo) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--espaco-secao); }

.secao--cinza { background: var(--seccao-cinza); }
.secao--azul  { background: var(--seccao-azul); }
.secao--escura {
  background: var(--azul);
  color: var(--branco);
}
.secao--escura h1,
.secao--escura h2,
.secao--escura h3,
.secao--escura h4 { color: var(--branco); }

/* Titulo centralizado de secao, com a palavra em amarelo do mockup */
.titulo-secao {
  text-align: center;
  margin-bottom: 38px;  /* (50) */
}

.destaque       { color: var(--amarelo); }
.destaque-azul  { color: var(--azul); }

.texto-centro { text-align: center; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   4. Botoes
   ========================================================================= */

/* No mockup os botoes de conteudo usam a fonte do corpo em peso normal -
   Poppins Bold deixava tudo largo demais. O botao Contato do cabecalho e a
   excecao e volta para o titulo mais abaixo. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: var(--fs-pequeno);
  line-height: 1;
  padding: .85em 1.9em;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.botao--amarelo {
  background: var(--amarelo);
  color: var(--azul);
}
.botao--amarelo:hover { background: var(--amarelo-hover); color: var(--azul); }

.botao--azul {
  background: var(--azul);
  color: var(--branco);
}
.botao--azul:hover { background: var(--azul-claro); color: var(--branco); }

.botao--navy {
  background: var(--navy);
  color: var(--branco);
}
.botao--navy:hover { background: var(--azul); color: var(--branco); }

.botao--contorno-azul {
  background: transparent;
  border-color: var(--azul);
  color: var(--azul);
}
.botao--contorno-azul:hover { background: var(--azul); color: var(--branco); }

.botao--pilula { border-radius: 999px; }


/* =========================================================================
   5. Cabecalho
   -------------------------------------------------------------------------
   Mockup @1920: faixa navy 49px + barra azul 90px.
   Logo 360x?, itens do menu 24px Poppins Bold com 40px de intervalo,
   botao Contato 202x37 em pilula amarela.
   ========================================================================= */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.cabecalho__faixa {
  height: var(--altura-faixa);
  background: var(--navy);
}

/* A transicao so entra depois do primeiro quadro, senao a faixa "abre"
   sozinha no carregamento da pagina. */
.cabecalho.com-transicao .cabecalho__faixa { transition: height var(--transicao); }

.cabecalho__barra {
  background: var(--azul);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* O cabecalho usa um container proprio, mais largo que o do conteudo -
   a mesma relacao do mockup (1828 contra 1620). */
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(var(--container-cabecalho) + 2 * var(--gutter));
  min-height: var(--altura-barra);
}

.cabecalho__logo { flex-shrink: 0; }

.cabecalho__logo img {
  height: var(--altura-logo);
  width: auto;
}

/* Ao rolar a pagina a faixa navy recolhe e so a barra azul acompanha */
.cabecalho.esta-rolado .cabecalho__faixa { height: 0; }

/* --- Navegacao --- */
.menu {
  display: flex;
  align-items: center;
  gap: 28px;  /* (37) */
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 28px;  /* (38) */
}

.menu__link {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-menu);
  color: var(--branco);
  white-space: nowrap;
  padding-block: 6px;
  border-bottom: 3px solid transparent;
}
.menu__link:hover { color: var(--amarelo); }

.menu__item--ativo .menu__link {
  color: var(--amarelo);
  border-bottom-color: var(--amarelo);
}

/* Pilula amarela (202x37 no mockup). O padding vertical e um pouco maior
   que o desenhado para a area de toque no celular nao ficar minuscula. */
.menu__contato {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-menu);
  line-height: 1;
  padding: .45em 2.1em;
  flex-shrink: 0;
}

/* --- Botao hamburguer --- */
.cabecalho__hamburguer {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--branco);
}

.cabecalho__hamburguer span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}

.cabecalho.menu-aberto .cabecalho__hamburguer span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cabecalho.menu-aberto .cabecalho__hamburguer span:nth-child(2) { opacity: 0; }
.cabecalho.menu-aberto .cabecalho__hamburguer span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Variante da marca Fanny's (pagina Quem Somos) --- */
.cabecalho[data-marca="fannys"] .menu__contato {
  background: var(--amarelo);
  color: var(--azul);
}


/* =========================================================================
   6. Rodape
   -------------------------------------------------------------------------
   Mockup @1920: fundo #123A63, 521px de altura, 3 colunas
   (apoios / contato / endereco) + barra de copyright centralizada.
   ========================================================================= */

.rodape {
  background: var(--azul);
  color: var(--branco);
  padding-top: 52px;  /* (70) */
  font-size: var(--fs-pequeno);
}

.rodape a:hover { color: var(--amarelo); }

/* Proporcao das colunas medida no mockup: 628 / 350 / 522 px */
.rodape__colunas {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.5fr;
  gap: 45px;  /* (60) */
}

.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--branco);
  font-size: var(--fs-h4);
  margin-bottom: 1em;
}

.rodape__apoios-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--branco);
  font-size: var(--fs-h3);
  margin-bottom: .9em;
}

.rodape__apoios {
  display: flex;
  align-items: center;
  gap: 26px;  /* (34) */
  flex-wrap: wrap;
}

.rodape__apoios img { background: transparent; }
.rodape__apoios .apoio-graacc { width: 147px; }  /* (196) */
.rodape__apoios .apoio-abrinq { width: 106px; }  /* (142) */

.rodape__linha {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: .75em;
}

.rodape__linha i { font-size: 1.05em; opacity: .9; }

.rodape__espaco { margin-top: 1.6em; }

/* Redes sociais em circulos */
.rodape__sociais {
  display: flex;
  gap: 10px;
  margin-top: 33px;  /* (44) */
}

.rodape__sociais a {
  display: grid;
  place-items: center;
  width: 33px;  /* (44) */
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--branco);
  font-size: 15px;
  transition: background var(--transicao), color var(--transicao);
}
.rodape__sociais a:hover { background: var(--amarelo); color: var(--azul); }

/* Barra final */
.rodape__creditos {
  margin-top: 40px;     /* (54) */
  padding-block: 22px;  /* (30) */
  text-align: center;
  font-size: var(--fs-pequeno);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.rodape__creditos strong { font-weight: 700; }

.rodape__creditos-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;   /* em telas bem estreitas a logo desce sozinha */
  gap: 10px;
  margin-top: .45em;
  font-size: .88em;
  opacity: .85;
}

/* A logo da Fanny's e a unica marca do rodape alem dos selos de apoio.

   A URL "www.fannys.com.br" ocupa ~17% do quadro. A 48px ela saia com ~8px (o
   menor tamanho em que ainda se lia); a 40px sai com ~6,8px e ja funciona mais
   como textura do que como texto legivel. Foi o tamanho pedido pelo Dorival. */
.rodape__fannys {
  width: auto;
  height: 40px;
}


/* =========================================================================
   7. Elementos flutuantes
   ========================================================================= */

.whatsapp-flutuante {
  position: fixed;
  left: 25px;
  bottom: 32px;
  z-index: 900;
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: var(--branco);
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform var(--transicao);
}
.whatsapp-flutuante:hover { transform: scale(1.07); color: var(--branco); }

.voltar-ao-topo {
  position: fixed;
  right: 25px;
  bottom: 32px;
  z-index: 900;
  width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-size: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.voltar-ao-topo.visivel { opacity: 1; visibility: visible; }
.voltar-ao-topo:hover { background: var(--amarelo); color: var(--azul); }


/* =========================================================================
   8. Responsivo
   -------------------------------------------------------------------------
   Os tamanhos base sao os de desktop e nao crescem. Daqui para baixo, as
   medias queries reduzem a escala conforme a tela encolhe.
   ========================================================================= */

/* --- Telas de notebook (1366px e afins): o menu completo nao cabe mais
       com a tipografia cheia, entao a barra encolhe um degrau --- */
@media (max-width: 1399.98px) {
  :root {
    --fs-menu: 15px;
    --altura-logo: 52px;
    --gutter: 32px;
  }
}

/* --- Notebook / tablet deitado --- */
@media (max-width: 1199.98px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 27px;
    --fs-h3: 20px;
    --gutter: 32px;
    --espaco-secao: 56px;
    --altura-faixa: 30px;
    --altura-barra: 64px;
    --altura-logo: 52px;
  }
}

/* --- Celular / tablet em pe --- */
@media (max-width: 767.98px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 23px;
    --fs-h3: 19px;
    --fs-h4: 16px;
    --fs-corpo: 15px;
    --gutter: 20px;
    --espaco-secao: 44px;
    --altura-faixa: 0px;   /* a faixa decorativa sai no celular */
    --altura-barra: 60px;
    --altura-logo: 42px;
  }
}

/* --- Menu em painel lateral.
       Os cinco itens do mockup ocupam ~1150px; abaixo de 1280 nao cabem
       junto da logo e do botao, entao a barra passa para o hamburguer. --- */
@media (max-width: 1279.98px) {

  .cabecalho__hamburguer { display: block; }

  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 90px 28px 40px;
    background: var(--azul);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .28);
    transform: translateX(100%);
    transition: transform var(--transicao);
    overflow-y: auto;
  }

  .cabecalho.menu-aberto .menu { transform: translateX(0); }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .menu__link {
    display: block;
    font-size: 18px;
    padding-block: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }

  .menu__item--ativo .menu__link { border-bottom-color: var(--amarelo); }

  .menu__contato {
    margin-top: 26px;
    font-size: 17px;
    padding: .9em 1.6em;
  }

  .cabecalho.menu-aberto .cabecalho__hamburguer {
    position: relative;
    z-index: 1001;
  }
}

@media (max-width: 991.98px) {
  .rodape__colunas { grid-template-columns: 1fr 1fr; }
  .rodape__apoios-bloco { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .rodape__colunas { grid-template-columns: 1fr; }

  /* No celular os botoes flutuantes encolhem para atrapalhar menos a leitura */
  .whatsapp-flutuante {
    left: 14px;
    bottom: 16px;
    width: 48px;
    font-size: 25px;
  }

  .voltar-ao-topo {
    right: 14px;
    bottom: 16px;
    width: 40px;
    font-size: 21px;
  }
}


/* =========================================================================
   9. Blocos usados por mais de uma pagina
   -------------------------------------------------------------------------
   Vieram do home.css quando a pagina do Acadesc Web passou a usar os mesmos
   blocos. Nao sao "estilo da Home": sao do site.

   - Selos       (30 anos / 660 escolas / atendimento): banner da Home e
                 faixa logo abaixo do banner da Acadesc Web.
   - Fale Conosco: identico nas duas paginas, ate o texto. O partial mora em
                 views/pages/comum/fale-conosco.php e o comportamento do
                 formulario esta no site.js.
   ========================================================================= */


/* --- Selos --------------------------------------------------------------- */

.selos {
  display: flex;
  align-items: center;
  gap: 18px;
}

.selo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 17px;  /* (22) */
  line-height: 1.22;
  color: var(--azul);
}

.selo img {
  flex-shrink: 0;
  height: 42px;  /* (56) */
  width: auto;
}

/* --- Fale Conosco -------------------------------------------------------- */


.fale-conosco__cabeca {
  text-align: center;
  margin-bottom: 34px;
}

/* Filete azul abaixo do titulo, como no mockup */
.fale-conosco__titulo { margin-bottom: 20px; }

.fale-conosco__titulo::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin: 14px auto 0;
  background: var(--azul-claro);
}

.fale-conosco__subtitulo {
  font-size: var(--fs-pequeno);
  color: var(--texto);
  margin: 0;
}

.fale-conosco__cartao {
  display: grid;
  grid-template-columns: 380px 1fr;
  background: var(--branco);
  box-shadow: 0 6px 26px rgba(18, 58, 99, .10);
  overflow: hidden;
}

/* --- Painel escuro de contatos --- */

.contatos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 40px 34px;
  background: var(--azul);
  color: var(--branco);
}

.contatos__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contatos__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  font-size: 17px;
}

.contatos__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h4);
  margin: 0 0 4px;
}

.contatos__linha {
  font-size: var(--fs-pequeno);
  line-height: 1.4;
  margin: 0;
}

.contatos__linha a:hover { color: var(--amarelo); }

/* --- Formulario --- */

.formulario { padding: 40px 44px; }

.formulario__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 34px;
}

.campo--largo { grid-column: 1 / -1; }

.campo__rotulo {
  display: block;
  font-size: var(--fs-pequeno);
  color: var(--texto);
  margin-bottom: 7px;
}

.campo__entrada {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-pequeno);
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 4px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo__entrada::placeholder { color: #A7AFBA; }

.campo__entrada:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(27, 83, 144, .12);
}

select.campo__entrada {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23333F4E' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.formulario__aceite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
  font-size: var(--fs-pequeno);
}

.formulario__aceite input {
  width: 16px;
  height: 16px;
  accent-color: var(--azul);
}

.formulario__aceite a {
  color: var(--azul-claro);
  text-decoration: underline;
}

.formulario__captcha {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.formulario__acao {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.formulario__enviar {
  min-width: 268px;
  min-height: 48px;
  font-size: var(--fs-h4);
}

.formulario__enviar:disabled {
  background: #F6DFA2;
  color: #8C7B4E;
  cursor: not-allowed;
}


/* --- Responsivo dos blocos comuns ---------------------------------------
   Bloco proprio, no fim do arquivo e sempre do maior para o menor, para
   estas regras nao dependerem da ordem dos media queries de cima. -------- */

@media (max-width: 991.98px) {
  .fale-conosco__cartao { grid-template-columns: 1fr; }
  .contatos { gap: 24px; }
  .formulario { padding: 32px 28px; }
}

@media (max-width: 767.98px) {
  .selos {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .formulario__grade { grid-template-columns: 1fr; }
  .formulario__enviar { width: 100%; min-width: 0; }
}