/* =========================================================================
   Home - estilos exclusivos da pagina inicial
   Mockup: "01 HOME/001 Proposta de Home do site 3.png" (1920x5646)

   As medidas comentadas entre parenteses sao as do mockup em 1920px; os
   valores aplicados sao elas x 0,75 (referencia de 1440px), conforme o
   criterio definido no site.css.
   ========================================================================= */


/* =========================================================================
   Banner de abertura
   Mockup: secao de 563px de altura; texto comecando em x=58/y=198;
   paragrafo justificado com 986px de largura; botao de 366x65.
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 422px;  /* (563) */
  background: linear-gradient(100deg,
              #FFFFFF 0%, #FFFFFF 42%, #FEFBF3 62%, #FCF5E4 85%, #FBF2DC 100%);
}

/* Arte amarela do canto superior direito. No mockup e uma forma organica
   desenhada no Photoshop; aqui esta aproximada por uma elipse.
   Ancorada ao container (nao a tela) para nao escapar em telas largas. */
.hero__forma {
  position: absolute;
  z-index: 0;
  top: -150px;
  right: -110px;
  width: 430px;
  height: 430px;
  border-radius: 54% 46% 42% 58% / 52% 56% 44% 48%;
  background: #FAB700;
}

/* Malha de pontos amarelos a esquerda da forma */
.hero__pontos {
  position: absolute;
  z-index: 0;
  top: 46px;
  right: 300px;
  width: 86px;
  height: 92px;
  background-image: radial-gradient(#FBC93F 2px, transparent 2.2px);
  background-size: 17px 17px;
}

.hero__interno {
  position: relative;
  padding-block: 44px 30px;  /* (59 / 40) */
}

/* O texto fica acima da arte de fundo */
.hero__texto { position: relative; z-index: 2; }

/* A foto ocupa uma faixa fixa a direita dentro do container, entao o texto
   fica com o resto. Como tudo mora no mesmo container, a distancia entre o
   texto e a foto e a mesma em qualquer largura de tela. */
.hero__texto { max-width: calc(100% - 335px); }

/* A arte nunca escapa do banner */
.hero { isolation: isolate; }

.hero__titulo {
  max-width: 760px;
  margin-bottom: 19px;  /* (25) */
}

.hero__resumo {
  max-width: 740px;  /* (986) */
  text-align: justify;
  margin-bottom: 21px;  /* (28) */
}

/* Linha do botao + selos. No mockup ficam lado a lado, com o botao
   ocupando 366x65 e os tres selos alinhados a direita dele. */
.hero__acoes {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__cta {
  flex-shrink: 0;
  min-width: 274px;      /* (366) */
  min-height: 49px;      /* (65)  */
  padding-inline: 1em;
  font-size: var(--fs-h4);
  font-weight: 600;
}

/* Foto da gestora: alinhada a direita DO CONTAINER (nao da tela), avancando
   apenas sobre a calha. Assim ela acompanha o conteudo em qualquer largura,
   em vez de ficar isolada no canto das telas maiores. */
.hero__foto {
  position: absolute;
  right: calc(-1 * var(--gutter));
  bottom: 0;
  z-index: 1;
  width: 400px;
  height: auto;
}


/* =========================================================================
   Blocos "O que ... ganha com o Acadesc"
   -------------------------------------------------------------------------
   Sao quatro no mockup (escola, professor, pais, alunos). A coluna de
   apresentacao e os cartoes de recurso sao os mesmos nos quatro; muda o
   fundo, o lado da foto e a ordem das colunas.
   ========================================================================= */

/* --- Coluna de apresentacao (titulo + texto + botao) --- */

.apresentacao__cabeca {
  display: flex;
  align-items: center;
  gap: 11px;  /* (15) */
  margin-bottom: 20px;
}

.apresentacao__selo {
  flex-shrink: 0;
  width: 80px;  /* (106) */
  height: auto;
}

.apresentacao__titulo {
  font-size: 23px;  /* (31) */
  line-height: 1.19;
  margin: 0;
}

.apresentacao__texto { margin-bottom: 24px; }

/* Mockup: 229x42 no cartao branco e ~243x39 nas faixas, com o texto em
   13px. Sem largura minima - quem manda e o texto, como no layout. */
.apresentacao__botao {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 0;
  font-size: 13px;
}

/* --- Cartao de recurso (icone + titulo + texto, centralizados) --- */

/* No mockup as colunas sao adjacentes (sem intervalo): o respiro vem do
   proprio texto centralizado, mais estreito que a coluna. */
.recurso {
  text-align: center;
  padding-inline: 7px;
}

.recurso__icone {
  height: 83px;  /* (111) */
  width: auto;
  margin: 0 auto 14px;
}

.recurso__titulo {
  font-size: 23px;  /* (31) */
  line-height: 1.19;
  color: #2D4D71;
  margin-bottom: 16px;
}

.recurso__texto {
  font-size: var(--fs-pequeno);
  line-height: 1.32;  /* mockup: 25px de entrelinha com fonte de 19px */
  margin: 0;
}


/* =========================================================================
   Bloco 1 - escola (cartao branco com borda)
   ========================================================================= */

.ganhos-escola { padding-block: 0; }

.cartao-ganhos {
  display: grid;
  /* Mockup: interior de 1641px repartido em 579 (apresentacao) + 3x354
     (recursos), colunas encostadas uma na outra. */
  grid-template-columns: 1.64fr 1fr 1fr 1fr;
  gap: 0;
  align-items: start;
  padding: 45px 52px 24px;  /* mockup: 60 no topo, 69 nas laterais */
  border: 1px solid #BEBEBE;
  border-radius: 12px;
  background: var(--branco);
}

/* A apresentacao do cartao branco alinha o texto a esquerda e reserva a
   margem interna que o mockup mostra. */
.cartao-ganhos .apresentacao { padding-right: 40px; }


/* =========================================================================
   Blocos 2, 3 e 4 - professor, pais e alunos
   -------------------------------------------------------------------------
   Faixas de 1780x424 no mockup (1335x318 na escala do site), com a arte de
   fundo pronta (as "barras" exportadas do layout) e a foto do personagem
   sangrando pela borda. No bloco dos pais a ordem se inverte.
   ========================================================================= */

.faixa-ganhos {
  margin-top: 32px;  /* (43) entre um bloco e o outro */
}

/* Mockup: 1781px repartidos em 719 (apresentacao + arte) + 3x354. */
.faixa-ganhos__interno {
  display: grid;
  grid-template-columns: 2.03fr 1fr 1fr 1fr;
  gap: 0;
  align-items: start;
  min-height: 318px;  /* (424) */
  padding-block: 45px 24px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.faixa-ganhos--professor .faixa-ganhos__interno { background-image: url("../../img/home/fundo-professor.webp"); }
.faixa-ganhos--pais      .faixa-ganhos__interno { background-image: url("../../img/home/fundo-pais.webp"); }
.faixa-ganhos--alunos    .faixa-ganhos__interno { background-image: url("../../img/home/fundo-alunos.webp"); }

/* No bloco dos pais os recursos vem primeiro e a apresentacao fica na
   ultima coluna, que e a mais larga. */
.faixa-ganhos__interno--invertido { grid-template-columns: 1fr 1fr 1fr 2.03fr; }

/* --- Apresentacao com a foto do personagem --- */

.apresentacao--com-foto {
  position: relative;
  align-self: stretch;
}

/* A foto encosta na base da faixa (o offset anula o padding inferior).
   No mockup ela aparece recortada nas laterais; aqui ela entra inteira,
   apenas reduzida - recortar deformava o personagem. */
.apresentacao__foto {
  position: absolute;
  bottom: -24px;  /* anula o padding inferior da faixa */
  height: auto;
  max-height: calc(100% + 69px);
  object-fit: contain;
  object-position: bottom;
}

/* Nada de :not() aqui: ele soma a especificidade do que esta dentro dele,
   e a regra acabava vencendo as dos media queries, que tem menos classes.
   O padrao vale para todos e o modificador --invertido so troca o lado. */
.apresentacao--com-foto .apresentacao__foto {
  left: 25px;  /* a arte de fundo aparece antes da foto */
  right: auto;
}

.faixa-ganhos__interno--invertido .apresentacao__foto {
  left: auto;
  right: 0;
}

/* Larguras esticadas ate onde o texto permite: como a foto entra inteira
   (sem recorte), quanto mais larga, mais alta ela fica dentro da faixa. */
.faixa-ganhos--professor .apresentacao__foto { width: 255px; }
.faixa-ganhos--pais      .apresentacao__foto { width: 300px; }
.faixa-ganhos--alunos    .apresentacao__foto { width: 255px; }

/* O texto comeca depois da faixa ocupada pela arte e pela foto. */
.apresentacao__conteudo { position: relative; z-index: 2; }

.apresentacao--com-foto .apresentacao__conteudo {
  margin-left: 286px;
  margin-right: 0;
}

.faixa-ganhos__interno--invertido .apresentacao__conteudo {
  margin-left: 0;
  margin-right: 286px;
}

.apresentacao__conteudo .apresentacao__titulo { margin-bottom: 18px; }

/* Nas faixas o titulo divide a coluna com a foto, por isso vai um degrau
   abaixo do titulo do cartao branco - assim mantem as duas linhas do mockup. */
.apresentacao--com-foto .apresentacao__titulo { font-size: var(--fs-h3); }


/* =========================================================================
   Blocos de video
   Mockup: dois retangulos navy de 828x509 com 94px de intervalo.
   ========================================================================= */

.videos__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;  /* (94) */
}

.video { margin: 0; }

.video-cartao {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 621 / 382;  /* (828x509) */
  background: var(--navy);
  color: var(--branco);
}

/* Capa do video (a propria capa do video no YouTube) */
.video-cartao__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transicao), filter var(--transicao);
}

.video-cartao:hover .video-cartao__capa {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* Botao de play, unico elemento sobre a capa */
.video-cartao__play {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 74px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(25, 31, 58, .62);
  border: 2px solid rgba(255, 255, 255, .85);
  color: var(--branco);
  font-size: 38px;
  line-height: 1;
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}

.video-cartao:hover .video-cartao__play {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--azul);
}

/* Titulo abaixo da capa, fora da imagem */
.video__titulo {
  margin-top: 16px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--azul);
  text-align: center;
}


/* =========================================================================
   Depoimentos
   ========================================================================= */

.depoimentos__carrossel { padding-bottom: 44px; }

.depoimento {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 24px 22px 20px;
  background: var(--branco);
  border-radius: 10px;
  box-shadow: var(--sombra-card);
}

.depoimento__pessoa {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sem isto o nome e o cargo ficam presos a largura do texto mais curto */
.depoimento__pessoa > div {
  flex: 1;
  min-width: 0;
}

.depoimento__foto {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.depoimento__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--azul);
  margin: 0;
}

.depoimento__cargo {
  font-size: var(--fs-pequeno);
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.35;
}

.depoimento__estrelas {
  display: flex;
  gap: 3px;
  color: var(--amarelo);
  font-size: 15px;
  margin: 0;
}

/* O texto aparece cortado em cinco linhas; "Leia mais" solta o resto. */
.depoimento__texto {
  position: relative;
  margin: 0;
  font-size: var(--fs-pequeno);
  font-style: italic;
  line-height: 1.45;
  color: var(--texto);
}

.depoimento__conteudo {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.depoimento.esta-aberto .depoimento__conteudo {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.depoimento__aspas {
  color: var(--azul-claro);
  font-size: 17px;
  font-style: normal;
  opacity: .55;
}
.depoimento__aspas--fim { transform: rotate(180deg); }

.depoimento__mais {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--azul-claro);
  font-size: var(--fs-pequeno);
  text-decoration: underline;
}
.depoimento__mais:hover { color: var(--azul); }

/* Bolinhas da paginacao */
.depoimentos__paginacao { bottom: 0 !important; }

.depoimentos__paginacao .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #C7CFD9;
  opacity: 1;
}

.depoimentos__paginacao .swiper-pagination-bullet-active { background: var(--azul-claro); }


/* =========================================================================
   Responsivo
   -------------------------------------------------------------------------
   Um bloco unico por ponto de corte, sempre do maior para o menor, para a
   cascata ficar previsivel (regra de baixo vence a de cima).
   ========================================================================= */


/* --- Notebook: a foto do banner estreita para sobrar espaco ao texto ----- */
@media (max-width: 1399.98px) {
  .hero__foto { width: 400px; }
}


/* --- Abaixo de 1200px o layout de quatro colunas nao cabe mais.
       A apresentacao passa a ocupar a linha inteira, com a foto ao lado do
       texto, e os tres recursos ficam embaixo. ------------------------------ */
@media (max-width: 1199.98px) {

  /* Banner: a foto sai da borda e vai para baixo do texto */
  .hero { min-height: 0; }

  .hero__texto { max-width: 100%; }

  .hero__foto {
    position: static;
    width: min(460px, 92%);
    height: auto;
    margin: 10px auto 0;
  }

  .hero__forma  { top: -210px; right: -230px; }
  .hero__pontos { display: none; }

  /* Blocos de ganhos */
  .cartao-ganhos,
  .faixa-ganhos__interno,
  .faixa-ganhos__interno--invertido {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
  }

  .cartao-ganhos .apresentacao,
  .faixa-ganhos__interno .apresentacao {
    grid-column: 1 / -1;
    order: -1;
  }

  .cartao-ganhos .apresentacao { padding-right: 0; }

  .apresentacao--com-foto {
    display: flex;
    align-items: center;
    gap: 26px;
  }

  /* A foto entra no fluxo, ao lado do texto */
  .faixa-ganhos--professor .apresentacao__foto,
  .faixa-ganhos--pais .apresentacao__foto,
  .faixa-ganhos--alunos .apresentacao__foto {
    position: static;
    width: 210px;
    height: auto;
    max-height: none;
    flex-shrink: 0;
  }

  .faixa-ganhos__interno--invertido .apresentacao--com-foto { flex-direction: row-reverse; }

  .apresentacao--com-foto .apresentacao__conteudo,
  .faixa-ganhos__interno--invertido .apresentacao__conteudo {
    margin: 0;
  }
}


/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* A arte de fundo foi desenhada para 1920x524. Esticada por "cover" numa
     faixa estreita e alta ela vira um borrao gigante atras do texto; aqui
     ela volta ao tamanho natural, apenas no topo do bloco, sobre a cor
     de fundo correspondente. */
  .faixa-ganhos__interno {
    background-size: auto 110px;
    background-position: top left;
    background-repeat: no-repeat;
    padding-top: 128px;  /* o conteudo comeca abaixo da arte, nunca sobre ela */
  }

  .faixa-ganhos--professor .faixa-ganhos__interno { background-color: #EDF1F0; }
  .faixa-ganhos--pais      .faixa-ganhos__interno { background-color: #EDEFF5; }
  .faixa-ganhos--alunos    .faixa-ganhos__interno { background-color: #FDFBF2; }

  /* No banner a forma amarela atrapalharia a leitura do titulo */
  .hero__forma { display: none; }

  .videos__grade { gap: 30px; }
}


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

  /* Banner */
  .hero__resumo { text-align: left; }

  .hero__acoes { gap: 20px; }

  .hero__cta {
    width: 100%;
    min-width: 0;
  }

  /* Blocos de ganhos: tudo em uma coluna */
  .cartao-ganhos,
  .faixa-ganhos__interno,
  .faixa-ganhos__interno--invertido {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .cartao-ganhos { padding: 30px 24px; }

  .faixa-ganhos__interno {
    background-size: auto 80px;
    padding-top: 98px;
  }

  /* Texto acima, foto abaixo - inclusive no bloco invertido. O titulo vem
     primeiro para dar o contexto antes da foto ilustrativa. */
  .apresentacao--com-foto,
  .faixa-ganhos__interno--invertido .apresentacao--com-foto {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  /* Empilhado, o texto precisa ocupar a coluna inteira - sem isso ele fica
     com a largura do proprio conteudo e aperta numa faixa estreita. */
  .apresentacao--com-foto .apresentacao__conteudo {
    order: -1;
    width: 100%;
  }

  .faixa-ganhos--professor .apresentacao__foto,
  .faixa-ganhos--pais .apresentacao__foto,
  .faixa-ganhos--alunos .apresentacao__foto {
    width: min(240px, 62%);
    align-self: center;
  }

  .apresentacao__botao { width: 100%; }

  /* Videos */
  .videos__grade { grid-template-columns: 1fr; }
  .video-cartao__play { width: 58px; font-size: 30px; }
}