/* ==========================================================================
   Componentes reutilizáveis
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botão
   Primary: fundo branco (sobre purple/200). Outline: borda purple/600.
   Filled: fundo purple/600, texto purple/100 — "Quero esse".
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 288px;
  min-height: 56px;
  padding-inline: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button--primary {
  background: var(--color-surface);
  color: var(--color-brand-accent);
  box-shadow: var(--shadow-sm);
}

.button--primary:hover {
  box-shadow: var(--shadow-md);
}

.button--outline {
  background: transparent;
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
}

.button--outline:hover {
  background: rgb(255 255 255 / 0.55);
  border-color: var(--color-brand-strong);
}

.button--outline-on-brand {
  background: transparent;
  border-color: var(--color-text-on-brand);
  color: var(--color-text-on-brand);
}

.button--outline-on-brand:hover {
  background: rgb(255 255 255 / 0.12);
}

.button--filled {
  min-width: 0;
  gap: var(--space-3);
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: var(--color-text-on-brand);
  font-weight: var(--weight-semibold);
}

.button--filled:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.button--icon {
  min-width: 68px;
  width: 68px;
  padding-inline: var(--space-6);
}

.button--sm {
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--space-4);
  gap: var(--space-3);
  font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   Header
   Overlay no hero. Logo à esquerda, WhatsApp à direita — Nav 1248:917.
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  transition:
    height var(--duration-mid) var(--ease-in-out),
    background-color var(--duration-mid) var(--ease-in-out);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

.header__brand {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
}

.header__logo {
  display: block;
  height: var(--header-logo);
  width: auto;
  transition: height var(--duration-mid) var(--ease-in-out);
}

/* Sobre o hero a nav é só o logo, como no Figma. O botão entra junto com a
   barra branca — visibility para ele também sair da ordem de tabulação. */
.header .button {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-mid) var(--ease-in-out),
    visibility var(--duration-mid) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.header[data-scrolled] {
  height: var(--header-height-compact);
  background: var(--color-surface);
}

.header[data-scrolled] .header__logo {
  height: var(--header-logo-compact);
}

.header[data-scrolled] .button {
  opacity: 1;
  visibility: visible;
}

/* Ícone do Instagram: só existe no artboard de 390, e lá fica sempre visível
   (é o WhatsApp que entra no scroll, como botão flutuante). */
.header__instagram {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
  color: var(--color-brand);
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.header__instagram:hover {
  transform: translateY(-2px);
  background: rgb(255 255 255 / 0.55);
}

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   Contrapartida mobile do botão que entra no header: mesma regra de scroll,
   posição diferente. Não está no Figma — a barra de 390 só cabe logo + ícone.
   -------------------------------------------------------------------------- */

.whatsapp-fab {
  display: none;
}

/* --------------------------------------------------------------------------
   Caderno + acordeão
   Só réguas horizontais. Título à esquerda, texto + CTA à direita.
   -------------------------------------------------------------------------- */

.notebook {
  position: relative;
}

.notebook__head {
  display: grid;
  justify-items: center;
  padding-bottom: var(--space-12);
}

/* A primeira coluna cabe o título mais longo ("Consultoria para Teachers",
   471 no Figma). O respiro encolhe na mesma medida para o texto continuar
   começando em 564, como em todos os itens. */
.accordion__item {
  display: grid;
  grid-template-columns: minmax(200px, 471px) minmax(0, 93px) minmax(0, 652px) minmax(0, 1fr) 40px;
  min-height: var(--notebook-row);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-rule);
}

.accordion__item:last-of-type {
  border-bottom: 1px solid var(--color-rule);
}

.accordion__trigger {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  text-align: left;
}

.accordion__title {
  grid-column: 1;
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-brand);
  transition:
    font-weight var(--duration-mid) var(--ease-in-out),
    color var(--duration-mid) var(--ease-in-out);
}

/* A palavra, e nada além dela. O traço se posiciona por este bloco, então ele
   tem que medir o texto, e não a coluna inteira do grid. */
.accordion__mark {
  position: relative;
  display: inline-block;
}

/* As sobras vêm do Figma, medidas no primeiro título: o traço passa 18 à
   esquerda, 14 à direita, 17 acima e 29 abaixo de um texto de 36. Ficam em em
   porque no mobile a fonte cai para 20 e a sobra tem que cair junto. */
.accordion__circle {
  position: absolute;
  inset: -0.46em -0.38em -0.81em -0.5em;
  rotate: 179.07deg;
  pointer-events: none;
}

/* O span acima é que estica até as sobras; o svg só preenche o que sobrou dele.
   Esticar o svg direto pelo inset não funciona: ele é elemento substituído e
   cai no tamanho padrão de 300x150 em vez de acompanhar a palavra. */
.accordion__circle svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-surface-postit);
  stroke-width: 0.167em;
  /* Com pathLength="1" no símbolo a curva inteira mede 1. O tracejado é um
     risco de 1,02 seguido de um vazio do mesmo tamanho; deslocá-lo em 1,03 põe
     a curva inteira dentro do vazio, e some. Levar o deslocamento a 0,01
     desenha a volta do começo ao fim, como uma caneta.

     Os centésimos a mais são folga: com o risco em 1 exato, as pontas caem bem
     na virada entre risco e vazio e sobra um resto de traço no título fechado.
     A folga é pequena de propósito — quanto maior ela for, mais tempo a
     animação passa parada nas duas pontas em vez de desenhando. */
  stroke-dasharray: 1.02;
  stroke-dashoffset: 1.03;
  /* Apagar leva metade do tempo de desenhar. O painel fecha em 400ms, e o
     traço no tempo cheio ficava riscando depois que a modalidade já tinha
     fechado; pela metade, o mais longo termina em 380 e os dois somem juntos.
     A transição de cada estado é declarada no próprio estado — é assim que
     ida e volta ganham tempos diferentes. */
  --apagar: calc(var(--duracao-risco, var(--duration-risco)) / 2);
  transition: stroke-dashoffset var(--apagar) var(--ease-in-out);
}

/* --duracao-risco é medida por título no main.js; o token entra como reserva
   enquanto ela não chega, e se o script não rodar. */
.accordion__item[data-open] .accordion__circle svg {
  stroke-dashoffset: 0.01;
  transition: stroke-dashoffset var(--duracao-risco, var(--duration-risco))
    var(--ease-in-out);
}

.accordion__chevron {
  grid-column: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--color-surface-strong);
  transition:
    transform var(--duration-mid) var(--ease-in-out),
    background-color var(--duration-fast) var(--ease-out);
}

.accordion__chevron img {
  width: 40px;
  height: 40px;
}

.accordion__trigger:hover .accordion__title {
  color: var(--color-brand-strong);
}

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

.accordion__item[data-open] .accordion__title {
  font-weight: var(--weight-bold);
}

.accordion__item[data-open] .accordion__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__chevron {
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  /* O traço continua aparecendo, só não é mais desenhado. */
  .accordion__circle svg {
    transition: none;
  }
}

.accordion__panel {
  grid-column: 3;
  grid-row: 1;
  z-index: 1;
  align-self: start;
  display: grid;
  /* minmax(0, …) e não 0fr puro: o mínimo automático de um item de grid conta
     o padding, então o painel fechado media 24 em vez de 0 e empurrava a
     linha do caderno no mobile, onde ele fica embaixo do título. */
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  pointer-events: none;
  transition: grid-template-rows var(--duration-mid) var(--ease-in-out);
}

.accordion__item[data-open] .accordion__panel {
  grid-template-rows: minmax(0, 1fr);
}

/* O padding fica fixo, não só no [data-open]: como a linha fecha em 0fr, ele
   não muda a altura fechada. Movê-lo para o [data-open] faz a altura pular no
   primeiro quadro do collapse. */
.accordion__panel-inner {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding-bottom: var(--space-12);
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  /* Sai mais rápido do que a linha encolhe, para o texto sumir antes de ser
     guilhotinado pelo overflow. */
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-in-out);
}

.accordion__item[data-open] .accordion__panel-inner {
  opacity: 1;
  transition: opacity var(--duration-mid) var(--ease-in-out);
}

/* Item de grid estica por padrão, e o botão ia dos 188 do Figma para os 652
   da coluna. O parágrafo e o card continuam esticando, que é o certo. */
.accordion__panel-inner .button {
  justify-self: start;
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   Prova social — Entrevista de Emprego
   -------------------------------------------------------------------------- */

/* Vem antes do "Quero esse", com 32 de folga: 16 do gap do painel + 16 aqui. */
.proof {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
}

.proof__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* Marca-texto sobre os dois trechos que o Figma destaca. */
.proof__mark {
  background: var(--color-surface-soft);
}

/* --------------------------------------------------------------------------
   Post-it
   Posição absoluta no artboard do Figma, com inclinação por item.
   -------------------------------------------------------------------------- */

.postits {
  position: relative;
  height: 481px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--notebook-row) - 1px),
    var(--color-rule) calc(var(--notebook-row) - 1px) var(--notebook-row)
  );
}

.postit {
  position: absolute;
  left: var(--postit-x);
  top: var(--postit-y);
  display: grid;
  /* Centralizado na maioria. "Emissão de nota fiscal" é a exceção do Figma:
     o texto sobe para não cair embaixo do post-it que vem por cima. */
  align-content: var(--postit-align, center);
  width: 160px;
  min-height: 160px;
  padding: var(--space-3);
  background: var(--color-surface-postit);
  box-shadow: var(--shadow-postit);
  color: var(--color-text-long);
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  text-align: center;
  transform: rotate(var(--postit-tilt, 0deg));
  transition: transform var(--duration-base) var(--ease-out);
}

.postit--purple {
  background: var(--color-surface-strong);
}

.postit:hover {
  transform: rotate(0deg) scale(1.04);
}

/* --------------------------------------------------------------------------
   Toggle de idioma
   Depoimentos: PT / EN em 16px, sem caixa alta.
   -------------------------------------------------------------------------- */

.lang-toggle {
  display: flex;
  gap: var(--space-3);
  padding-inline: var(--space-1);
}

.lang-toggle__option {
  padding-block: var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-brand-accent);
  transition: font-weight var(--duration-fast) var(--ease-out);
}

.lang-toggle__option[aria-pressed="true"] {
  font-weight: var(--weight-bold);
}

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

/* --------------------------------------------------------------------------
   Carrossel de encontros
   -------------------------------------------------------------------------- */

/* Medidas fixas: no Figma a foto tem 316 e a miniatura 204, e a miniatura
   ainda sangra 20px para fora da margem esquerda. Um subgrid fluido não
   reproduz esse desencontro. */
.carousel {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: var(--carousel-peek-w) var(--carousel-photo-w);
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: var(--space-5);
}

/* As duas fotos avançam o carrossel no clique, daí o cursor de mão. */
.carousel__peek {
  grid-area: 1 / 1 / 2 / 2;
  cursor: pointer;
  aspect-ratio: 204 / 276;
  margin-left: calc(var(--space-5) * -1);
  overflow: hidden;
  transform: rotate(var(--carousel-peek-tilt));
}

.carousel__peek-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.carousel__peek-img[hidden] {
  display: none;
}

.carousel__stage {
  grid-area: 1 / 2 / 2 / -1;
  position: relative;
  cursor: pointer;
  aspect-ratio: 316 / 424;
  overflow: hidden;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.carousel__stage > img.carousel__slide {
  object-fit: cover;
}

.carousel__slide.is-active {
  opacity: 1;
}

.carousel__peek[data-empty] {
  background: var(--color-surface-strong);
}

.carousel__peek[data-empty] .carousel__peek-img {
  opacity: 0;
}

.carousel__dots {
  grid-area: 2 / 2 / 3 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.carousel__dot {
  position: relative;
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-target);
  transition: width var(--duration-base) var(--ease-soft);
}

.carousel__dot[aria-selected="true"] {
  width: var(--carousel-dot-active-size);
}

.carousel__dot::before,
.carousel__dot-fill {
  position: absolute;
  top: calc((var(--carousel-dot-target) - var(--carousel-dot-size)) / 2);
  bottom: calc((var(--carousel-dot-target) - var(--carousel-dot-size)) / 2);
  left: 0;
  border-radius: var(--radius-full);
}

.carousel__dot::before {
  content: "";
  right: 0;
  background: var(--color-track);
  transition: background-color var(--duration-fast) var(--ease-out);
}

/* Largura, não scaleX: scale achata o raio e a barra parece um PNG esticado. */
.carousel__dot-fill {
  width: 0;
  background: var(--color-brand-accent);
}

.carousel__dot:not([aria-selected="true"]):hover::before {
  background: var(--color-brand-accent);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__dot[aria-selected="true"] .carousel__dot-fill {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Depoimento
   -------------------------------------------------------------------------- */

/* Sem corte próprio: os cards vazam para os dois lados e quem recorta é a
   seção, na largura da janela. */
.testimonials__stage {
  grid-column: 2 / -1;
  display: grid;
  justify-items: center;
  gap: var(--space-8);
}

.testimonials__viewport {
  width: 100%;
  /* Item de grid não encolhe abaixo do próprio conteúdo, e a trilha mede os
     dois cards somados. Sem isso a janela do carrossel ficava mais larga que
     a coluna e o card vazava para fora da tela no mobile. */
  min-width: 0;
}

/* Uma coluna por card, todas do tamanho da janela do carrossel: é o grid que
   define a largura do card, em vez de um width em cascata. O teto de 991 é a
   medida do Figma, quando sobra espaço para o card vazar pelos lados. */
.testimonials__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(991px, 100%);
  gap: var(--space-5);
  transition: transform var(--duration-slow) var(--ease-out);
}

.testimonial {
  display: flex;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.testimonial__person {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  flex: none;
  width: 168px;
}

/* Figma abre 24 entre o toggle e a foto, e 16 entre a foto e o nome. */
.testimonial__avatar {
  margin-top: var(--space-2);
  display: block;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-avatar);
  background: var(--color-border);
}

.testimonial__id {
  display: grid;
  padding-inline: var(--space-2);
}

.testimonial__id strong {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-long);
}

.testimonial__id span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.testimonial__quote {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  margin: 0;
  min-width: 0;
}

.testimonial__quote .prose strong {
  font-weight: var(--weight-semibold);
  color: var(--color-brand-strong);
}

/* Chegou no último depoimento: a seta gira para avisar que o próximo clique
   volta ao primeiro. Quem pede menos movimento tem a transição zerada pela
   regra global de prefers-reduced-motion em base.css. */
.testimonials__next .icon {
  transition: rotate var(--duration-mid) var(--ease-in-out);
}

.testimonials__next[data-rewind] .icon {
  rotate: 180deg;
}

/* --------------------------------------------------------------------------
   Responsivo
   Abaixo de 768 o código segue o artboard de 390 do Figma. A faixa do meio,
   de 768 a 1199, não tem desenho por trás: ali é reflow, e o critério é só
   não quebrar.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .accordion__item,
  .accordion__trigger {
    grid-template-columns: 1fr 40px;
  }

  .accordion__title {
    grid-column: 1;
  }

  .accordion__chevron {
    grid-column: 2;
  }

  .accordion__panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .carousel {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .carousel__peek {
    margin-left: 0;
  }

  .testimonials__stage {
    grid-column: 1 / -1;
  }

  .testimonials__track {
    grid-auto-columns: min(991px, calc(100% - var(--space-16)));
  }
}

/* Só no intervalo tablet: o mural de post-its não cabe em 12 colunas mas ainda
   é largo demais para o arranjo de 390, então vira uma fita rolável. Abaixo de
   768 volta a ser mural, com as coordenadas do artboard mobile. */
@media (min-width: 768px) and (max-width: 1199px) {
  .postits {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-block: var(--space-12);
  }

  .postit {
    position: static;
    flex: none;
    scroll-snap-align: center;
  }
}

/* --------------------------------------------------------------------------
   Mobile — artboard de 390 (Figma 1262:6987 e 1262:7139)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Botão: 16/48 em vez de 20/56, e largura cheia dentro da coluna. */
  .button {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    font-size: var(--text-md);
  }

  /* "Quero esse" continua abraçando o texto: 166×44 no Figma. */
  .button--filled {
    width: auto;
    min-height: 44px;
  }

  .button--icon {
    width: 68px;
    min-height: 56px;
  }

  /* Troca de papéis no topo: sobre o hero a barra é logo + Instagram; ao
     rolar ela sai inteira e quem fica é só o botão flutuante. */
  .header {
    transition:
      opacity var(--duration-mid) var(--ease-in-out),
      visibility var(--duration-mid) var(--ease-in-out),
      translate var(--duration-mid) var(--ease-in-out);
  }

  .header[data-scrolled] {
    height: var(--header-height);
    background: none;
    opacity: 0;
    visibility: hidden;
    translate: 0 -100%;
  }

  .header .button {
    display: none;
  }

  .header__instagram {
    display: inline-flex;
  }

  .whatsapp-fab {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: var(--z-header);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-brand-accent);
    color: var(--color-text-on-brand);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    translate: 0 var(--space-4);
    transition:
      opacity var(--duration-mid) var(--ease-in-out),
      visibility var(--duration-mid) var(--ease-in-out),
      translate var(--duration-mid) var(--ease-in-out);
  }

  .header[data-scrolled] ~ .whatsapp-fab {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }

  /* ---------- Acordeão ------------------------------------------------- */
  /* Linha fechada de 72: 24 de topo + 24 da linha do título + 24 de folga,
     que o --notebook-row garante. Aberto, os mesmos 24 de topo e 16 até o
     texto batem com o artboard. */
  .accordion__item,
  .accordion__trigger {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .accordion__item {
    padding-top: var(--space-6);
  }

  .accordion__trigger {
    padding-bottom: var(--space-4);
  }

  .accordion__title {
    font-size: var(--text-xl);
  }

  .accordion__chevron,
  .accordion__chevron img {
    width: 24px;
    height: 24px;
  }

  .accordion__panel-inner {
    gap: var(--space-5);
    padding-bottom: var(--space-6);
    font-size: var(--text-sm);
  }

  /* O card foge do gap de 20 do painel: 16 acima e 24 abaixo. As margens são a
     diferença para o gap, por isso a de cima é negativa. */
  .proof {
    margin-top: calc(var(--space-4) - var(--space-5));
    margin-bottom: calc(var(--space-6) - var(--space-5));
  }

  /* ---------- Post-its -------------------------------------------------- */
  /* Mural de 11 réguas de 72. Menos 1px: 11×72 cai numa régua na borda de
     baixo, e essa linha aparecia colada no topo da foto do Sobre. */
  .postits {
    height: calc(11 * var(--notebook-row) - 1px);
    /* Largura do arranjo no artboard. Os post-its se encaixam entre si, então
       o grupo anda inteiro e centralizado — ancorar um a um nas margens
       abriria os vãos e desfaria a colagem. As réguas continuam de margem a
       margem, que é a largura do .postits. */
    --postit-stage: 342px;
  }

  .postit {
    left: calc(50% - var(--postit-stage) / 2 + var(--postit-x-sm));
    top: var(--postit-y-sm);
    width: 144px;
    min-height: 144px;
    /* No arranjo de 390 nenhum post-it cobre o outro: todos centralizados. */
    align-content: center;
    font-size: var(--text-sm);
    transform: rotate(var(--postit-tilt-sm, 0deg));
  }

  /* ---------- Carrossel ------------------------------------------------- */
  /* A foto encosta 28 antes da margem direita e a miniatura sai pela esquerda
     da janela. Uma coluna só, com a miniatura fora do fluxo. */
  .carousel {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  /* O recuo de 28 mora na foto, não na carousel: assim a miniatura e as
     bolinhas continuam medindo a partir da margem da coluna. */
  .carousel__stage {
    grid-area: 1 / 1;
    justify-self: end;
    width: min(var(--carousel-photo-w), 100%);
    margin-right: 28px;
  }

  /* Não é centralizada na foto: o artboard desce a miniatura 50 em relação ao
     topo da foto. Medida estável, já que a foto tem largura fixa. */
  .carousel__peek {
    display: block;
    position: absolute;
    top: 58px;
    /* 28 da folga + 247 da foto + 44 do vão = borda direita da miniatura. */
    right: 319px;
    width: var(--carousel-peek-w);
    margin-left: 0;
    translate: 0;
  }

  /* A margem negativa desconta a metade de baixo do alvo de toque, que é área
     invisível e não deveria entrar no ritmo vertical da seção. */
  .carousel__dots {
    grid-area: 2 / 1;
    margin-top: var(--space-3);
    margin-bottom: calc(
      (var(--carousel-dot-target) - var(--carousel-dot-size)) / -2
    );
  }

  /* ---------- Depoimento ------------------------------------------------ */
  /* O card ocupa a coluna inteira do grid mobile, sem o recuo que o tablet dá
     para ele vazar pelos lados. */
  .testimonials__track {
    grid-auto-columns: 100%;
    gap: var(--space-2);
  }

  .testimonial {
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  /* Foto à esquerda ocupando as duas linhas; nome no alto da folga e o
     PT/EN colado na base, como no artboard. */
  .testimonial__person {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    /* 16 e não os 24 do artboard: o alvo de toque do PT/EN é 8 mais alto que
       o texto, e come a diferença. */
    row-gap: var(--space-4);
    width: auto;
    height: 128px;
  }

  .testimonial__avatar {
    grid-area: 1 / 1 / 3 / 2;
    width: 128px;
    margin-top: 0;
  }

  .testimonial__id {
    grid-area: 1 / 2;
    align-self: end;
  }

  .testimonial__id strong {
    line-height: 1;
  }

  /* Acompanha o recuo de 8 do nome, que vem do padding do bloco ao lado. */
  .lang-toggle {
    grid-area: 2 / 2;
    justify-self: start;
    margin-left: var(--space-2);
    padding-inline: var(--space-1);
  }

  .testimonials__stage {
    gap: var(--space-5);
  }
}

/* subgrid não existe no Safari antigo: o gatilho deixa de alinhar
   título/chevron nas colunas. Fallback em flex. */
@supports not (grid-template-columns: subgrid) {
  .accordion__trigger {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-4);
  }

  .accordion__title,
  .accordion__chevron {
    grid-column: auto;
  }
}