/* ==========================================================================
   Seções
   Tudo posicionado por span no grid de 12 colunas (margem 56, gutter 24).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   Copy nas colunas 2–8 (x=168). Foto nas colunas 9–11.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--color-surface-strong);
  padding-top: var(--header-height);
  padding-bottom: var(--space-16);
}

.hero__inner {
  align-items: start;
  row-gap: var(--space-12);
}

.hero__copy {
  grid-column: 2 / 9;
  display: grid;
  justify-items: start;
  gap: var(--space-8);
  padding-top: 112px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  color: var(--color-brand-accent);
}

.hero__title strong {
  font-weight: var(--weight-bold);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hero__media {
  grid-column: 9 / 12;
  display: grid;
  justify-items: center;
  padding-top: 13px;
  --deck-front: rotate(-1deg);
  --deck-back: translateX(18px) rotate(2deg) scale(0.94);
}

.hero__card,
.hero__photo {
  grid-area: 1 / 1;
  width: min(277px, 100%);
  aspect-ratio: 277 / 349;
  border-radius: var(--radius-md);
  object-fit: cover;
  transition:
    transform var(--duration-mid) var(--ease-in-out),
    box-shadow var(--duration-mid) var(--ease-in-out),
    filter var(--duration-mid) var(--ease-in-out);
}

/* A carta de trás leva um véu preto de 50% no Figma. Sobre uma imagem opaca,
   brightness(0.5) dá o mesmo resultado sem precisar de um elemento a mais. */
.hero__card,
.hero__media:hover .hero__photo {
  z-index: var(--z-deck-back);
  box-shadow: none;
  filter: brightness(0.5);
  transform: var(--deck-back);
}

.hero__photo,
.hero__media:hover .hero__card {
  z-index: var(--z-deck-front);
  box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
  filter: none;
  transform: var(--deck-front);
}

.hero__caption {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  text-align: center;
}

.hero__caption strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-strong);
}

/* Pílula purple/100 em volta do @, não texto solto sobre o purple/200. */
.hero__instagram {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  color: var(--color-brand);
  text-decoration: none;
}

.hero__instagram:hover {
  background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   2. Modalidades
   -------------------------------------------------------------------------- */

.needs {
  padding-block: var(--space-24) 0;
}

/* --------------------------------------------------------------------------
   3. Sobre a teacher
   Foto central 423×558. Chips em volta, um canto quadrado (rabo de balão).
   -------------------------------------------------------------------------- */

.about {
  background: var(--color-surface-strong);
  padding-block: 0;
}

.about__inner {
  position: relative;
  min-height: 686px;
}

/* Os offsets abaixo são a coordenada do Figma menos a margem de 56: o bloco
   posicionado é o container inteiro, então a margem entra via --gutter. */
.about__title {
  position: absolute;
  top: 92px;
  left: calc(var(--gutter) + 225px);
  z-index: var(--z-raised);
  padding: var(--space-3);
  background: var(--color-surface);
}

.about__media {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  width: 423px;
  margin-inline: auto;
  aspect-ratio: 423 / 558;
  overflow: hidden;
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__facts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about__facts li {
  position: absolute;
  pointer-events: auto;
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.about__facts .about__fact--left {
  left: calc(var(--gutter) + 112px);
  top: 316px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
}

.about__facts .about__fact--icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  left: calc(var(--gutter) + 201px);
  top: 399px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
}

.about__facts .about__fact--icons img {
  width: 24px;
  height: 24px;
}

.about__facts .about__fact--right {
  left: calc(var(--gutter) + 839px);
  width: 377px;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0;
}

.about__fact--passion {
  top: 251px;
}

.about__facts .about__fact--degree {
  top: 361px;
  width: auto;
}

.about__facts .about__fact--biz {
  top: 444px;
  width: auto;
}

/* --------------------------------------------------------------------------
   4. Encontros presenciais
   -------------------------------------------------------------------------- */

.meetups__inner {
  align-items: center;
  row-gap: var(--space-12);
}

.meetups__content {
  grid-column: 7 / -1;
  display: grid;
  justify-items: start;
}

.meetups__subtitle {
  margin: var(--space-10) 0 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
}

.meetups__content .prose {
  margin-top: var(--space-5);
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   5. Depoimento dos alunos
   -------------------------------------------------------------------------- */

/* Quem corta é a seção, na largura da janela: o card seguinte segue até a
   borda da tela em vez de parar na margem de 56, como no artboard do Figma. */
.testimonials {
  overflow: hidden;
  background: var(--color-surface-soft);
}

.testimonials__inner {
  row-gap: var(--space-16);
}

.testimonials .section-title {
  grid-column: 3 / -1;
}

/* --------------------------------------------------------------------------
   6. Vamos conversar?
   -------------------------------------------------------------------------- */

/* A seção inteira tem 584 no Figma: a altura vem do min-height, não de
   padding por cima do conteúdo posicionado. */
.closing {
  padding-block: 0;
  background: var(--color-surface-strong);
}

.closing__inner {
  align-items: center;
  min-height: 584px;
}

.closing__bubbles {
  grid-column: 1 / 6;
  align-self: start;
  display: grid;
  justify-items: start;
  gap: 18px; /* Figma: 174 − (64 + 92). Não há token para 18. */
  margin-top: var(--space-16);
}

.closing__bubble {
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: var(--text-bubble);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.closing__bubble:nth-child(1),
.closing__bubble:nth-child(3) {
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 0;
}

.closing__bubble:nth-child(2) {
  margin-left: 116px; /* Figma: 172 − 56 da margem. Recuo à mão, sem token. */
  border-radius: var(--radius-bubble) var(--radius-bubble) 0 var(--radius-bubble);
}

/* Não é centralizado: os balões descem 64 do topo e o bloco sobe 64 da base,
   e é isso que joga o roxo abaixo do meio da seção. */
.closing__cta {
  grid-column: 6 / -1;
  justify-self: end;
  align-self: end;
  margin-bottom: var(--space-16);
  width: 100%;
  max-width: 704px;
  display: grid;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-cta) var(--radius-cta) 0 var(--radius-cta);
  background: var(--color-brand);
}

.closing__title {
  font-family: var(--font-display);
  font-size: var(--text-cta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-brand);
}

.closing__text {
  margin-top: var(--space-2);
  color: var(--color-text-on-brand-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-block: var(--space-12);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
}

.footer__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  text-decoration: none;
}

.footer__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .hero__copy,
  .hero__media,
  .meetups__content,
  .closing__bubbles,
  .closing__cta,
  .testimonials .section-title {
    grid-column: 1 / -1;
  }

  .hero__inner,
  .meetups__inner {
    justify-items: center;
  }

  .hero__copy {
    justify-items: center;
    text-align: center;
    padding-top: 0;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__media {
    max-width: 320px;
  }

  .closing__bubbles {
    align-self: auto;
    margin-top: 0;
  }

  .closing__cta {
    justify-self: stretch;
    align-self: auto;
    margin-bottom: 0;
    max-width: none;
  }

  .closing__bubble:nth-child(2) {
    margin-left: var(--space-12);
  }
}

/* Só no intervalo tablet: a composição do Sobre é larga demais para 12
   colunas estreitas, então vira empilhamento. Abaixo de 768 ela volta a ser
   posicionada, com as coordenadas do artboard de 390. */
@media (min-width: 768px) and (max-width: 1199px) {
  .about {
    padding-block: var(--section-py);
  }

  .about__inner {
    min-height: 0;
    display: grid;
    justify-items: start;
    row-gap: var(--space-6);
  }

  .about__title,
  .about__media,
  .about__facts {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
  }

  .about__media {
    max-width: 423px;
    width: 100%;
  }

  .about__facts {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
  }

  .about__facts li {
    position: static;
    width: auto;
    max-width: 100%;
  }

  .about__facts .about__fact--right {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Mobile — artboard de 390 (Figma 1262:6987)
   As coordenadas absolutas do Sobre são as do artboard, contadas da borda da
   tela: o container está travado em 390, então batem direto.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .prose {
    font-size: var(--text-sm);
  }

  /* ---------- Hero ------------------------------------------------------ */
  /* A foto vem primeiro, depois o título e os dois botões empilhados. O topo
     de 104 é onde o baralho começa no artboard, logo abaixo do logo. */
  .hero {
    /* Onde a carta da frente começa no artboard: 104 do baralho + 6 do
       recuo dela dentro do baralho. */
    padding-top: 110px;
    padding-bottom: var(--space-10);
  }

  .hero__inner {
    row-gap: var(--space-6);
  }

  .hero__media {
    order: -1;
    max-width: 186px;
    padding-top: 0;
    --deck-back: translateX(6px) rotate(2deg) scale(0.94);
  }

  .hero__card,
  .hero__photo {
    width: min(186px, 100%);
    aspect-ratio: 186 / 234;
    border-radius: 11px; /* 10.724 no Figma */
  }

  .hero__copy {
    gap: var(--space-6);
  }

  .hero__actions {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  /* O nome e o @ saem: o Instagram virou ícone no header. */
  .hero__caption {
    display: none;
  }

  /* ---------- Modalidades ----------------------------------------------- */
  .needs {
    padding-block: var(--space-12) 0;
    overflow-x: clip;
  }

  .notebook__head {
    padding-bottom: var(--space-6);
  }

  /* ---------- Sobre a teacher ------------------------------------------- */
  .about {
    overflow-x: clip;
  }

  .about__inner {
    min-height: 730px;
  }

  /* Centralizado com left:50%, a caixa herdaria só metade da largura e o
     título quebraria em duas linhas — daí o max-content. */
  .about__title {
    top: var(--space-12);
    left: 50%;
    width: max-content;
    max-width: calc(100% - var(--gutter) * 2);
    translate: -50% 0;
  }

  .about__media {
    top: 0;
    width: min(341px, calc(100% - var(--gutter) * 2));
    aspect-ratio: 341 / 389;
  }

  .about__facts li {
    font-size: var(--text-sm);
  }

  /* Os dois chips que terminam na margem direita ancoram por ela: assim
     acompanham a coluna em vez de ficarem presos a um left fixo. */
  .about__facts .about__fact--left {
    left: auto;
    right: var(--gutter);
    top: 437px;
  }

  /* Aqui a pílula fecha os quatro cantos, diferente do desktop. */
  .about__facts .about__fact--icons {
    left: 50%;
    top: 365px;
    width: max-content;
    translate: -50% 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .about__facts .about__fact--right {
    left: var(--gutter);
    width: auto;
  }

  .about__facts .about__fact--passion {
    top: 494px;
    width: min(311px, calc(100% - var(--gutter) * 2));
  }

  .about__facts .about__fact--degree {
    top: 572px;
  }

  .about__facts .about__fact--biz {
    left: auto;
    right: var(--gutter);
    top: 629px;
    /* Único chip que troca o canto quadrado de lugar no mobile. */
    border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
  }

  /* ---------- Encontros presenciais ------------------------------------- */
  /* Texto em cima, carrossel embaixo — invertido em relação ao desktop. */
  .meetups {
    overflow-x: clip;
  }

  /* stretch, não start: o bloco 1199 centraliza os itens e o carrossel
     encolhia para a largura do conteúdo em vez de ocupar a coluna. */
  .meetups__inner {
    justify-items: stretch;
    row-gap: var(--space-14);
  }

  .meetups__content {
    order: -1;
  }

  /* É um h3, então herdava o 1.1 da regra global de título. */
  .meetups__subtitle {
    margin-top: var(--space-12);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
  }

  .meetups__content .prose {
    margin-top: var(--space-4);
  }

  /* ---------- Depoimento ------------------------------------------------ */
  .testimonials__inner {
    row-gap: var(--space-10);
  }

  /* ---------- Vamos conversar? ------------------------------------------ */
  .closing {
    padding-block: var(--section-py);
  }

  .closing__inner {
    min-height: 0;
    row-gap: var(--space-12);
  }

  .closing__bubbles {
    margin-top: 0;
    margin-left: var(--space-4);
    gap: var(--space-3);
  }

  .closing__bubble {
    padding: var(--space-5) var(--space-6);
    font-weight: var(--weight-semibold);
  }

  .closing__bubble:nth-child(1),
  .closing__bubble:nth-child(3) {
    border-radius: var(--space-8) var(--radius-bubble) var(--radius-bubble) 0;
  }

  .closing__bubble:nth-child(2) {
    margin-left: var(--space-20);
    border-radius: var(--radius-bubble) var(--space-8) 0 var(--radius-bubble);
  }

  .closing__cta {
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--space-14) var(--space-14) 0 var(--space-14);
  }

  /* O bloco de texto recua 4 a mais que os botões, como no artboard. */
  .closing__cta > div:first-child {
    padding-left: var(--space-1);
  }

  .closing__text {
    font-size: var(--text-md);
  }

  /* Só o WhatsApp: a lista de espera não existe no artboard de 390. */
  .closing__actions [data-waitlist] {
    display: none;
  }

  .closing__actions .button {
    width: 100%;
  }

  /* ---------- Footer ---------------------------------------------------- */
  /* Não está no artboard; fica empilhado e centralizado. */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .footer__link {
    font-size: var(--text-md);
  }
}