/* =========================================================================
   Acadesc Apoio aos Pais - blocos da pagina inicial
   -------------------------------------------------------------------------
   Mockup 1920x6194. Toda medida entra multiplicada por 0,75 (referencia de
   1440px) e e fixa; o numero entre parenteses e o do mockup.

   Ordem dos blocos: hero -> login -> diferenca -> aproxima -> video ->
   aplicativo -> cta.

   -------------------------------------------------------------------------
   O RESPIRO ENTRE OS BLOCOS NAO E O --espaco-secao PADRAO.
   -------------------------------------------------------------------------
   No mockup os vaos entre um bloco e o seguinte sao diferentes entre si
   (61, 62, 86, 66 e 102 px, ja em 0,75). Deixar cada secao com o mesmo
   padding em cima e embaixo daria 136 px em todas - o dobro do desenho na
   maioria delas. Entao cada secao declara o SEU padding, e a soma de dois
   vizinhos e que reproduz o vao do mockup:

     faixa de login  ->  diferenca    0 + 61 =  61
     diferenca       ->  aproxima    31 + 31 =  62
     aproxima        ->  video       43 + 43 =  86
     video           ->  aplicativo  33 + 33 =  66
     aplicativo      ->  cta         51 + 51 = 102

   O --ritmo encolhe tudo isso junto nas telas menores.
   ========================================================================= */

:root { --ritmo: 1; }

.dif       { padding-block: calc(61px * var(--ritmo)) calc(31px * var(--ritmo)); }
.apx       { padding-block: calc(31px * var(--ritmo)) calc(43px * var(--ritmo)); }
.vid       { padding-block: calc(43px * var(--ritmo)) calc(33px * var(--ritmo)); }
.app       { padding-block: calc(33px * var(--ritmo)) calc(51px * var(--ritmo)); }
.cta-secao { padding-block: calc(51px * var(--ritmo)) calc(68px * var(--ritmo)); }


/* =========================================================================
   1. Hero
   -------------------------------------------------------------------------
   Mockup: texto x 59..831, arte x 891..1919 (sangra ate a borda), selos em
   y 780..872. Altura da secao 828 (139..966).
   ========================================================================= */

.hero {
  position: relative;
  /* clip, e nao hidden: hidden criaria um contexto de rolagem e mataria o
     position:sticky do cabecalho. */
  overflow-x: clip;
  background: var(--branco);
}

.hero__interno {
  position: relative;
  padding-top: 35px;     /* (47) */
  padding-bottom: 53px;  /* (71) */
}

.hero__texto {
  position: relative;
  z-index: 1;
  max-width: 580px;  /* (773) */
}

.hero__sobretitulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--azul);
  margin: 0 0 16px;  /* (22) */
}

/* A 34px a linha "Mais proximidade com a escola." fecha em ~600px, dentro
   dos 580 da coluna com a folga que o Poppins do Google pede (ele renderiza
   cerca de 8% mais largo que o do mockup). */
.hero__titulo {
  font-size: 34px;  /* (45) */
  line-height: 1.3;
  margin: 0 0 16px;
}

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

.hero__botao {
  min-width: 274px;   /* (366) */
  min-height: 49px;   /* (65)  */
  margin-top: 28px;   /* (37)  */
  font-size: var(--fs-h4);
}

/* A arte e ancorada ao CONTAINER, nao a borda da tela: em 1440 ela encosta
   na borda, e acima disso continua 52px alem do container - assim ela nao
   se descola do texto em tela larga (armadilha 13 do site). */
.hero__arte {
  position: absolute;
  top: 47px;     /* (63 a partir do inicio da secao) */
  right: calc(max(50% - (var(--container) / 2), var(--gutter)) - 52px);
  width: 772px;  /* (1029) */
  max-width: none;
}

.hero__selos {
  position: relative;
  z-index: 1;
  margin-top: 35px;  /* (46) */
}


/* =========================================================================
   2. Faixa de login
   -------------------------------------------------------------------------
   A imagem define a altura da faixa (width:100%; height:auto) e tudo por
   cima fica em position:absolute, em PORCENTAGEM dela - assim acompanha
   qualquer largura de tela. Mesma solucao das faixas de login do site do
   Acadesc.
   ========================================================================= */

.lg-login {
  position: relative;
  background: var(--navy-login);
}

.lg-login__fundo {
  display: block;
  width: 100%;
  height: auto;
}

.lg-login__interno {
  position: absolute;
  inset: 0;
}

/* As duas linhas ficam em posicao PROPORCIONAL a imagem, como o cartao - e
   nao centradas no bloco. No mockup elas nao estao centradas: o titulo comeca
   a 34,6% da altura da faixa e o "Esqueceu a senha?" a 66,2%. Centrar deixava
   a segunda linha 36px acima do lugar.

   O `left` e a calha porque o bloco que os contem e o proprio .container-site:
   para um filho absoluto, a origem e a borda da caixa, entao somar a calha
   cai exatamente na coluna do conteudo. */
.lg-login__titulo,
.lg-login__senha {
  position: absolute;
  left: var(--gutter);
  margin: 0;
  color: var(--branco);
}

.lg-login__titulo {
  top: 34.6%;       /* (243 de 702) */
  font-size: 36px;  /* (48) */
  line-height: 1.25;
}

.lg-login__senha {
  top: 66.2%;       /* (465 de 702) */
  font-size: var(--fs-h4);
}

.lg-login__senha a {
  color: var(--amarelo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg-login__senha a:hover { color: var(--branco); }


/* --- O cartao, remontado em HTML -----------------------------------------

   Ele COBRE o cartao impresso na imagem. As medidas sao porcentagens do
   ARQUIVO (1920x702), onde o impresso ocupa x 1434..1846 e y 83..640; o de
   HTML e um pouco maior e fica centrado no mesmo ponto, para nenhuma borda
   impressa escapar por fora.

   Por dentro, tudo em `cqw` (porcentagem da largura do proprio cartao), com
   as proporcoes do mockup: cartao 424 de largura, campos 277x62, botao
   192x45.

   ATENCAO: `cqw` se resolve pelo container mais proximo ACIMA do elemento,
   nunca por ele mesmo. Por isso o container fica no .lg-cartao e tudo que
   tem medida em cqw (inclusive a borda) mora na caixa de dentro. */

.lg-cartao {
  container-type: inline-size;

  position: absolute;
  left: 74.38%;   /* (1428 de 1920) */
  top: 10.97%;    /* (77 de 702)    */
  width: 22.08%;  /* (424 de 1920)  */
  height: 81.05%; /* (569 de 702)   */
}

.lg-cartao__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;

  background: var(--azul-cartao);
  border: 1.4cqw solid var(--amarelo);  /* (6 de 424) */
  color: var(--branco);
  transition: border-color var(--transicao);
}

.lg-cartao__caixa:hover,
.lg-cartao__caixa:focus-visible { border-color: var(--branco); }

/* Sem isto o flex encolhe tudo para caber e o cartao sai de proporcao. */
.lg-cartao__caixa > * { flex-shrink: 0; }

/* Altura fixa reservada para a marca: e o espaco que o logo empilhado do
   mockup ocupa (y 46..192 dos 569 do cartao). Assim, quando a arte
   definitiva chegar, so o arquivo muda - a geometria do cartao continua. */
.lg-cartao__marca {
  display: grid;
  place-items: center;
  width: 100%;
  height: 45cqw;      /* (191 de 424) */
  padding-inline: 8cqw;
  margin-top: 8.5cqw; /* (36 de 424)  */
}

.lg-cartao__marca img {
  width: auto;
  max-height: 100%;
}

.lg-cartao__campo {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 65.3cqw;   /* (277 de 424) */
  height: 14.6cqw;  /* (62  de 424) */
  margin-bottom: 1.9cqw;

  background: var(--branco);
  border: 1cqw solid var(--amarelo);

  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 5.9cqw;  /* (25 de 424) */
  line-height: 1;
  color: var(--azul);
  white-space: nowrap;
}

.lg-cartao__continuar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 45.3cqw;   /* (192 de 424) */
  height: 10.6cqw;  /* (45  de 424) */
  margin-top: 2.4cqw;

  background: var(--azul-continuar);
  color: var(--branco);
  font-size: 5.9cqw;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}

.lg-cartao__caixa:hover .lg-cartao__continuar,
.lg-cartao__caixa:focus-visible .lg-cartao__continuar {
  background: var(--amarelo);
  color: var(--azul);
}

.lg-cartao__privacidade {
  margin-top: 4.7cqw;
  font-style: italic;
  font-size: 3.3cqw;  /* (14 de 424) */
  line-height: 1;
}


/* =========================================================================
   3. O Acadesc Apoio aos Pais faz a diferenca
   -------------------------------------------------------------------------
   Seis cartoes de 204x326 (272x435) com vao de 25 (34). Os cartoes tem a
   MESMA cor do fundo: quem os separa e a sombra, exatamente como no mockup.
   ========================================================================= */

.dif .titulo-secao { margin-bottom: 28px; }  /* (38) */

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

.dif__cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  min-height: 326px;              /* (435) */
  padding: 18px 14px 24px;        /* (24 / 19 / 32) */

  background: var(--branco);
  box-shadow: 0 3px 24px rgba(18, 58, 99, .13);
}

.dif__icone {
  height: 81px;       /* (108) */
  width: auto;
  margin-bottom: 14px;  /* (19) */
}

.dif__titulo {
  font-size: 18px;  /* (24) */
  line-height: 1.25;
  margin: 0 0 24px;  /* (32) */
}

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


/* =========================================================================
   4. Aproxima escola e familia
   -------------------------------------------------------------------------
   Quatro cartoes de 302 de largura (403), com foto 299x239 no topo e corpo
   cinza embaixo. O selo redondo fica no canto inferior direito da foto.
   ========================================================================= */

.apx .apx__titulo { margin-bottom: 13px; }  /* (18) */

.apx__subtitulo {
  text-align: center;
  max-width: 655px;  /* (870) */
  margin: 0 auto 39px;  /* (52) */
}

.apx__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 37px;  /* (49) */
}

.apx__cartao {
  display: flex;
  flex-direction: column;
  background: var(--seccao-cinza);
}

.apx__moldura { position: relative; }

.apx__foto {
  width: 100%;
  height: auto;
}

/* O disco amarelo e CSS; o arquivo e so o desenho, em azul e transparente. */
.apx__selo {
  position: absolute;
  right: 44px;    /* (59 da direita da foto) */
  bottom: -3px;   /* (4 abaixo da foto)      */

  display: grid;
  place-items: center;
  width: 68px;    /* (91) */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amarelo);
}

.apx__selo img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* O mockup reserva 270px de corpo (360 no desenho) - bem mais do que o texto
   ocupa. Nao e sobra: e o que deixa os quatro cartoes com a mesma altura, com
   o mais cheio deles ainda folgado. */
.apx__corpo {
  flex: 1;
  min-height: 270px;  /* (360) */
  padding: 14px 25px 26px;  /* (19 / 33 / 35) */
}

.apx__nome {
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0 0 14px;
}

.apx__topicos {
  font-size: var(--fs-pequeno);
  line-height: 1.5;
}

.apx__topicos li {
  position: relative;
  padding-left: 12px;
  margin-bottom: .55em;
}

.apx__topicos li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.apx__topicos li:last-child { margin-bottom: 0; }


/* =========================================================================
   5. Video
   -------------------------------------------------------------------------
   Texto a esquerda, video a direita. No mockup o quadro do video nao chega
   na margem direita do container - ele para em x 1729 de 1850. A grade
   reproduz isso: as duas colunas somam 1245 e ficam alinhadas a esquerda.
   ========================================================================= */

/* start, e nao center: no mockup o texto comeca na mesma altura do quadro
   do video (3288 contra 3281), nao centrado nele. */
.vid__interno {
  display: grid;
  grid-template-columns: 561px 632px;  /* (748 / 843) */
  gap: 52px;
  align-items: start;
}

.vid__titulo {
  font-size: 34px;  /* (45) */
  line-height: 1.3;
  margin: 0 0 24px;
}

.vid__paragrafo {
  max-width: 400px;  /* (534) */
  margin: 0;
}

/* --- Fachada do video ---------------------------------------------------
   Ate o clique existe so a capa. O site.js troca este botao pelo iframe. */

.video-facade {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
}

.video-facade__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 58, 99, .30);
  transition: background var(--transicao);
}

.video-facade:hover::after { background: rgba(18, 58, 99, .48); }

.video-facade__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--azul);
  font-size: 34px;
  transition: transform var(--transicao);
}

.video-facade:hover .video-facade__play { transform: scale(1.08); }

/* O iframe que entra no lugar da fachada */
.video-embutido {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}


/* =========================================================================
   6. Tudo o que voce precisa, em um so aplicativo
   -------------------------------------------------------------------------
   Celular a esquerda; a direita o titulo e a grade 4x2, separada por
   filetes verticais. No mockup a grade comeca em x 474 - o titulo se alinha
   com ela, nao com a margem do container.
   ========================================================================= */

.app__interno {
  display: grid;
  grid-template-columns: 303px minmax(0, 1fr);  /* (404) */
  align-items: start;
}

.app__celular {
  width: 205px;      /* (274) */
  margin-left: 37px; /* (49)  */
  align-self: center;
}

.app__titulo {
  font-size: 34px;  /* (45) */
  line-height: 1.3;
  margin: 0 0 31px;  /* (41) */
}

.app__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 54px;  /* (72) */
}

.app__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;      /* (24) */
  padding-inline: 22px;
}

/* Os filetes do mockup: so entre colunas, nunca na primeira de cada linha. */
.app__item:not(:nth-child(4n + 1)) {
  border-left: 1px solid var(--linha);
}

.app__item:nth-child(4n + 1) { padding-left: 0; }

.app__icone {
  flex-shrink: 0;
  width: auto;
  height: 62px;  /* (83) */
}

.app__nome {
  font-size: var(--fs-h4);
  line-height: 1.2;
  margin: 0 0 4px;
}

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


/* =========================================================================
   7. Faixa amarela de fechamento
   -------------------------------------------------------------------------
   Mockup: faixa 1355x190 (1807x253) ocupando o container inteiro. O titulo
   atravessa por cima do paragrafo e dos selos, por isso e uma celula
   propria da grade.
   ========================================================================= */

.cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 34px;  /* (45) */
  align-items: center;

  min-height: 190px;  /* (253) */
  padding: 24px 40px;
  background: var(--amarelo-faixa);
}

.cta__ilustracao {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 130px;  /* (173) */
  margin-inline: 66px 30px;  /* (141 da borda da faixa) */
}

.cta__titulo {
  grid-column: 2 / 4;
  grid-row: 1;
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin: 0 0 8px;
}

.cta__paragrafo {
  grid-column: 2;
  grid-row: 2;
  max-width: 440px;  /* (585) */
  margin: 0;
}

.cta__lojas {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 19px;  /* (25) */
}

/* Os dois selos oficiais tem proporcoes diferentes (o do Google e mais
   largo). O que iguala os dois e a ALTURA, como pedem as duas marcas. */
.cta__loja-google,
.cta__loja-apple {
  width: auto;
  height: 55px;  /* (73) */
}



/* =========================================================================
   8. Responsivo - do maior para o menor
   -------------------------------------------------------------------------
   Nao existe mockup mobile: os pontos de corte saem do momento em que cada
   bloco deixa de caber.

   O corte que manda aqui e o de 992px. E nele que a arte do hero passaria a
   invadir a coluna de texto e que a coluna do video ficaria com menos de
   200px - por isso hero, video e aplicativo empilham TODOS em 992, e nao em
   768. Foi medido: em 768, com a arte ainda em absoluto, ela cobria de
   x 233 a 462, e o texto ia so ate 462.
   ========================================================================= */

@media (max-width: 1399.98px) {

  .hero__arte { width: 660px; }
  .hero__texto { max-width: 520px; }

  .vid__interno {
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 40px;
  }

  .app__interno { grid-template-columns: 265px minmax(0, 1fr); }
  .app__celular { margin-left: 20px; }
}

@media (max-width: 1199.98px) {

  :root { --ritmo: .82; }

  .hero__arte { width: 540px; }
  .hero__texto { max-width: 430px; }
  .hero__titulo { font-size: 30px; }

  .lg-login__titulo { font-size: 28px; }
  .lg-login__senha { font-size: var(--fs-corpo); }

  /* Seis cartoes numa linha ficariam estreitos demais para o titulo de duas
     palavras: passam a tres por linha. */
  .dif__grade { grid-template-columns: repeat(3, 1fr); }
  .dif__cartao { min-height: 300px; }

  .apx__grade { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .vid__interno {
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 32px;
  }
  .vid__titulo { font-size: 28px; }

  .app__interno { grid-template-columns: 230px minmax(0, 1fr); }
  .app__celular { width: 180px; margin-left: 0; }
  .app__titulo { font-size: 28px; }
  .app__grade { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .app__item:not(:nth-child(4n + 1)) { border-left: 0; }
  .app__item:not(:nth-child(2n + 1)) { border-left: 1px solid var(--linha); }
  .app__item:nth-child(2n + 1) { padding-left: 0; }

  .cta { column-gap: 24px; }
  .cta__ilustracao { margin-inline: 10px 20px; }
}

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

  /* Hero: a arte sai do absoluto e desce para baixo do texto, ainda
     encostando na borda direita como no mockup. */
  .hero__interno { padding-bottom: 34px; }

  .hero__arte {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + var(--gutter));
    max-width: calc(100% + var(--gutter));
    margin: 26px calc(var(--gutter) * -1) 0 auto;
  }

  .hero__texto { max-width: none; }
  .hero__paragrafo { max-width: 640px; }

  /* Faixa de login: a imagem vira fundo e o cartao desce para o fluxo.
     O cartao impresso fica na direita da arte; deslocando o enquadramento
     para a esquerda, ele sai de cena. */
  .lg-login {
    padding-block: 44px;
    overflow: hidden;
  }

  .lg-login__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 18% center;
  }

  /* Sem a arte por tras, o texto volta ao fluxo normal. */
  .lg-login__interno {
    position: relative;
    inset: auto;
  }

  .lg-login__titulo,
  .lg-login__senha {
    position: relative;
    top: auto;
    left: auto;
  }

  .lg-login__senha { margin-top: 22px; }

  /* Fora do absoluto o cartao nao esta mais dentro de container nenhum:
     a calha entra na mao. */
  .lg-cartao {
    position: relative;
    left: auto;
    top: auto;
    width: min(340px, calc(100% - 2 * var(--gutter)));
    height: auto;
    aspect-ratio: 424 / 569;
    margin: 34px var(--gutter) 0;
  }

  .vid__interno { grid-template-columns: 1fr; gap: 26px; }
  .vid__paragrafo { max-width: 640px; }

  .app__interno { grid-template-columns: 1fr; row-gap: 26px; }
  .app__celular { margin-inline: auto; }
  .app__grade { grid-template-columns: repeat(2, 1fr); }

  .cta {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 18px;
  }
  .cta__titulo    { grid-column: 2; }
  .cta__paragrafo { grid-column: 2; max-width: none; }
  .cta__lojas     { grid-column: 2; grid-row: 3; }
}

@media (max-width: 767.98px) {

  :root { --ritmo: .62; }

  .hero__titulo { font-size: 26px; }
  .hero__paragrafo { text-align: left; }
  .hero__botao { width: 100%; min-width: 0; }

  .lg-login__titulo { font-size: 24px; }

  .dif__grade { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .dif__cartao { min-height: 0; padding-bottom: 20px; }
  .dif__titulo { margin-bottom: 14px; }

  .apx__grade { grid-template-columns: 1fr; gap: 24px; }
  .apx__selo { right: 24px; }
  .apx__corpo { min-height: 0; }

  .vid__titulo { font-size: 24px; }

  .app__titulo { font-size: 24px; text-align: center; }
  .app__grade { grid-template-columns: 1fr; row-gap: 24px; }
  .app__item { padding-inline: 0; }
  .app__item:not(:nth-child(2n + 1)) { border-left: 0; }

  .cta { padding: 24px; row-gap: 14px; }
  .cta__ilustracao { display: none; }
  .cta__titulo,
  .cta__paragrafo,
  .cta__lojas { grid-column: 1 / -1; }
  .cta__lojas { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
  .dif__grade { grid-template-columns: 1fr; }
  .cta__loja-google,
  .cta__loja-apple { height: 46px; }
}