/* =========================================================================
   Acadesc Web - estilos exclusivos da pagina
   Mockup: "02 Pagina Acadesc Web/Pagina Acadesc Web.png" (1920x5941)

   As medidas entre parenteses sao as do mockup em 1920px; os valores
   aplicados sao elas x 0,75 (referencia de 1440px), como no site.css.

   Nota sobre a largura: neste mockup os blocos medem ~1805px (1354 na
   escala do site), contra os 1780 (1335) do mockup da Home. Mantivemos
   --container: 1335px para esta pagina alinhar com o cabecalho, o rodape e
   a Home - 1,3% de diferenca, imperceptivel.

   Ordem das medias queries: sempre do MAIOR para o menor.
   ========================================================================= */


/* =========================================================================
   1. Banner de abertura
   Mockup: faixa y 139..569 (431 -> 323). A arte e o botao passam da borda
   de baixo da faixa de proposito.
   ========================================================================= */

/* overflow-x: clip (e nao hidden) corta a cunha na lateral sem criar um
   container de rolagem - assim a arte continua podendo vazar para baixo. */
.aw-hero {
  position: relative;
  overflow-x: clip;
}

.aw-hero__faixa {
  position: relative;
  min-height: 323px;  /* (431) */
  background: linear-gradient(180deg, #EFEEF3 0%, #ECECF0 62%, #E9EAEE 100%);
}

.aw-hero__interno {
  position: relative;
  min-height: 323px;  /* (431) */
  display: flex;
  align-items: center;
  padding-block: 38px 29px;  /* (50 / 39) */
}

/* Cunha azul do canto direito. No mockup ela e cortada pela borda da tela;
   aqui e cortada pela borda do container, como a forma amarela da Home. */
.aw-hero__cunha {
  position: absolute;
  right: -40px;
  bottom: 0;
  width: 210px;
  height: 184px;  /* (245) */
  background: #003580;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.aw-hero__texto {
  position: relative;
  z-index: 2;
  max-width: 700px;  /* a arte comeca a 707px do inicio do container */
}

.aw-hero__sobretitulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 34px;  /* acompanha o h1 abaixo */
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 4px;  /* (23 entre as caixas de texto) */
}

.aw-hero__titulo {
  font-size: 34px;  /* ver a nota acima: nao e --fs-h1 de proposito */
  line-height: 1.3;
  margin-bottom: 14px;
}

.aw-hero__resumo {
  max-width: 515px;  /* (686) */
  text-align: justify;
  margin: 0;
}

/* Arte das telas flutuantes: ancorada a direita DO CONTAINER e vazando um
   pouco para baixo da faixa, como no mockup. */
.aw-hero__arte {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: -22px;
  width: 759px;
  height: auto;
}

/* O botao fica pendurado na borda de baixo da faixa: no mockup ele ocupa
   y 547..611, ou seja, so 22px (16 na escala do site) dentro dela. */
.aw-hero__rodape {
  position: relative;
  z-index: 3;
  margin-top: -16px;
}

.aw-hero__cta {
  min-width: 274px;  /* (365) */
  min-height: 49px;  /* (65)  */
  font-size: var(--fs-h4);
}


/* =========================================================================
   2. Faixa dos selos
   Mockup: y 640..784, alinhados a esquerda (param em x=1249 porque a base
   do monitor ocupa o resto da linha).
   ========================================================================= */

.aw-selos { padding-block: 40px 30px; }  /* (53 / 40) */

.aw-selos__lista {
  flex-wrap: wrap;
  gap: 46px;  /* (61) */
}


/* =========================================================================
   3. "Por que as escolas escolhem o Acadesc"
   Mockup: 6 cartoes de 272x448 (204x336) com 34px (26) de intervalo.
   ========================================================================= */

.aw-porque { padding-top: 26px; }

.aw-porque__grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;  /* (34) */
}

.aw-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 336px;  /* (448) */
  padding: 30px 18px 26px;  /* (40 / 24 / 35) */
  background: var(--branco);
  border-radius: 4px;
  box-shadow: var(--sombra-card);
}

.aw-cartao__icone {
  height: 57px;  /* (76) */
  width: auto;
  margin-bottom: 18px;
}

.aw-cartao__titulo {
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin-bottom: .8em;
}

/* Filho de flex em coluna nao estica sozinho */
.aw-cartao__texto {
  width: 100%;
  font-size: var(--fs-pequeno);
  color: var(--texto-suave);
  margin: 0;
}


/* =========================================================================
   4. "Tudo conectado" + o fluxo de 8 etapas
   Mockup: faixa cinza y 1512..2019 (508 -> 381).
   ========================================================================= */

/* A faixa cinza do mockup e mais justa que o --espaco-secao padrao:
   y 1512..2019, com o titulo comecando em 1566 e o fluxo terminando em
   1962 - ou seja, 40px em cima e 43 embaixo na escala do site. */
.aw-conectado { padding-block: 40px 43px; }

.aw-conectado__texto {
  max-width: 720px;  /* (960) */
  margin: -18px auto 34px;
  text-align: center;
}

.aw-fluxo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-fluxo__etapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 1 auto;
}

.aw-fluxo__icone {
  height: 68px;  /* (90) */
  width: auto;
  margin-bottom: 12px;
}

.aw-fluxo__rotulo {
  font-size: var(--fs-pequeno);
  line-height: 1.25;
  color: var(--texto);
}

.aw-fluxo__seta {
  flex: 0 0 auto;
  margin-top: 24px;
  font-size: 19px;
  color: var(--azul);
}


/* =========================================================================
   5. "Como o Acadesc ajuda cada area"
   Mockup: 4 cartoes, foto em cima e lista embaixo sobre fundo cinza.
   ========================================================================= */

.aw-areas__titulo { margin-bottom: 12px; }

.aw-areas__subtitulo {
  text-align: center;
  margin-bottom: 32px;  /* (43) */
}

.aw-areas__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;  /* (35) */
}

.aw-area {
  display: flex;
  flex-direction: column;
  background: var(--seccao-cinza);
  border-radius: 8px;
  overflow: hidden;
}

/* A foto ja vem do designer com o canto arredondado e o selo amarelo */
.aw-area__foto {
  width: 100%;
  height: auto;
}

.aw-area__corpo {
  width: 100%;
  flex-grow: 1;
  padding: 14px 20px 26px;  /* (19 / 27 / 35) */
}

.aw-area__titulo {
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin-bottom: .9em;
}

.aw-area__itens {
  font-size: var(--fs-pequeno);
  color: var(--texto);
}

.aw-area__itens li {
  position: relative;
  padding-left: 14px;
  margin-bottom: .6em;
  line-height: 1.35;
}

.aw-area__itens li::before {
  content: "•";
  position: absolute;
  left: 0;
}


/* =========================================================================
   6. "Tenha uma visao completa da escola em tempo real"
   Mockup: faixa cinza y 2977..3682; imagem do painel com 1134px (850).
   ========================================================================= */

/* A imagem do painel quase preenche a faixa: no mockup a banda vai de
   2977 a 3682 e a imagem de 2992 a 3663. */
.aw-painel { padding-block: 11px 14px; }

.aw-painel__interno {
  display: flex;
  align-items: center;
  gap: 40px;
}

.aw-painel__texto { flex: 1 1 auto; }

.aw-painel__titulo {
  font-size: var(--fs-h2);
  line-height: 1.35;
  margin-bottom: 22px;
}

.aw-painel__imagem {
  flex: 0 0 auto;
  width: 850px;  /* (1134) */
  height: auto;
  border-radius: 6px;
}


/* =========================================================================
   7. "Interface intuitiva e facil de usar"
   Mockup: mesa a esquerda, texto a direita e ALINHADO A DIREITA.
   ========================================================================= */

/* Mockup: a mesa ocupa y 3683..4126 e a faixa azul comeca em 4200. */
.aw-interface { padding-block: 34px 55px; }

.aw-interface__interno {
  display: flex;
  align-items: center;
  gap: 30px;
}

.aw-interface__mesa {
  flex: 0 0 auto;
  width: 560px;
  height: auto;
}

.aw-interface__texto {
  flex: 1 1 auto;
  text-align: right;
}

.aw-interface__titulo { margin-bottom: 20px; }

.aw-interface__resumo {
  margin-bottom: 34px;
  margin-left: auto;
  max-width: 560px;
}

.aw-destaques {
  display: flex;
  justify-content: flex-end;
  gap: 34px;  /* (45) */
}

.aw-destaque {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-pequeno);
  line-height: 1.25;
  color: var(--azul);
}

.aw-destaque img {
  flex-shrink: 0;
  height: 44px;  /* (58) */
  width: auto;
}


/* =========================================================================
   8. Faixa "Pronta para transformar a gestao da sua escola?"
   Mockup: bloco azul de 1807x253 (1355x190), da largura do container.
   ========================================================================= */

/* O respiro antes da faixa ja vem do padding de baixo do bloco anterior. */
.aw-cta { padding-block: 0; }

/* O fundo vai num elemento DENTRO do container: aplicado no proprio
   container ele cobriria tambem a calha e a faixa pareceria mais larga que
   os outros blocos. */
.aw-cta__faixa {
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 190px;  /* (253) */
  padding: 26px 40px;
  background: var(--azul);
  color: var(--branco);
}

.aw-cta__icone {
  flex: 0 0 auto;
  width: 98px;  /* (130) */
  height: auto;
}

.aw-cta__texto { flex: 1 1 auto; }

.aw-cta__titulo {
  color: var(--branco);
  font-size: var(--fs-h2);
  margin-bottom: .5em;
}

.aw-cta__resumo {
  font-size: var(--fs-corpo);
  margin: 0;
}

.aw-cta__botao {
  flex: 0 0 auto;
  min-width: 220px;  /* (293) */
  min-height: 44px;
}


/* =========================================================================
   9. Responsivo - do maior para o menor
   ========================================================================= */

/* --- Notebook -----------------------------------------------------------
   O banner encolhe em conjunto: titulo, largura do texto e arte. Se so a
   arte encolhesse, o titulo passaria a quebrar em tres linhas e o banner
   cresceria em vez de diminuir. ---------------------------------------- */
@media (max-width: 1399.98px) {

  .aw-hero__sobretitulo,
  .aw-hero__titulo { font-size: 30px; }

  .aw-hero__texto { max-width: 620px; }

  .aw-hero__arte { width: 660px; }

  .aw-painel__imagem { width: 700px; }
}


/* --- Abaixo de 1200px seis cartoes numa linha nao cabem mais ------------ */
@media (max-width: 1199.98px) {

  .aw-porque__grade { grid-template-columns: repeat(3, 1fr); }

  .aw-hero__faixa,
  .aw-hero__interno { min-height: 290px; }

  /* 25px mantem "conectados em uma unica plataforma." em UMA linha
     dentro dos 520px que sobram ao lado da arte. */
  .aw-hero__sobretitulo,
  .aw-hero__titulo { font-size: 25px; }

  .aw-hero__texto { max-width: 520px; }

  .aw-hero__arte { width: 540px; top: 26px; }

  .aw-hero__resumo { max-width: 100%; }

  .aw-painel__imagem { width: 560px; }

  .aw-interface__mesa { width: 440px; }

  .aw-destaques { gap: 22px; }
}


/* --- Tablet: os blocos de duas colunas empilham ------------------------- */
@media (max-width: 991.98px) {

  /* Banner: a arte sai de cima do texto e vai para baixo dele */
  .aw-hero__faixa,
  .aw-hero__interno { min-height: 0; }

  .aw-hero__interno {
    flex-direction: column;
    align-items: stretch;
    padding-block: 34px 0;
  }

  .aw-hero__texto { max-width: 100%; }

  .aw-hero__arte {
    position: static;
    width: min(620px, 100%);
    margin: 24px auto -60px;
  }

  .aw-hero__cunha { display: none; }

  .aw-hero__rodape { margin-top: 70px; }

  .aw-areas__grade { grid-template-columns: repeat(2, 1fr); }

  /* Fluxo: vira grade e as setas saem. A ordem de leitura ja conta a
     sequencia; seta apontando para a direita no fim da linha mentiria. */
  .aw-fluxo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 16px;
  }

  .aw-fluxo__seta { display: none; }

  .aw-painel__interno,
  .aw-interface__interno {
    flex-direction: column;
    align-items: stretch;
  }

  .aw-painel__imagem,
  .aw-interface__mesa {
    width: 100%;
    max-width: 700px;
    align-self: center;
  }

  .aw-interface__texto { text-align: left; }

  .aw-interface__resumo { margin-left: 0; }

  .aw-destaques { justify-content: flex-start; }

  .aw-cta__faixa {
    flex-wrap: wrap;
    gap: 22px;
    padding: 30px 28px;
  }

  .aw-cta__texto { flex-basis: 100%; order: 2; }
  .aw-cta__icone { order: 1; }
  .aw-cta__botao { order: 3; margin-left: auto; }
}


/* --- Celular ------------------------------------------------------------ */
@media (max-width: 767.98px) {

  .aw-porque__grade { grid-template-columns: repeat(2, 1fr); }

  .aw-areas__grade { grid-template-columns: 1fr; }

  .aw-area { max-width: 420px; margin-inline: auto; width: 100%; }

  .aw-fluxo { grid-template-columns: repeat(2, 1fr); }

  .aw-selos__lista { gap: 22px; }

  .aw-hero__resumo { text-align: left; }

  .aw-hero__cta,
  .aw-cta__botao { width: 100%; }

  .aw-destaques {
    flex-direction: column;
    gap: 16px;
  }

  .aw-cta__faixa { padding: 26px 20px; }
}


@media (max-width: 575.98px) {

  .aw-porque__grade { grid-template-columns: 1fr; }

  .aw-cartao { max-width: 340px; margin-inline: auto; width: 100%; }
}