/* =========================================================
   RESPONSIVIDADE
   Mobile-first: ajustes progressivos para telas maiores.
   ========================================================= */

/* -----------------------------------------
   Tablet (≥ 768px)
------------------------------------------ */
@media (min-width: 768px) {

  :root {
    --side-padding: 2rem;
  }

  /* Hero: a partir do tablet, headline mais discreta e menos vazio na base da seção */
  .hero {
    padding-top: clamp(7rem, 14vw, 9rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }

  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
  }

  .hero__eyebrow {
    display: inline-flex;
    margin-bottom: 0.9rem;
    letter-spacing: 0.14em;
  }

  .hero__title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    line-height: 1.26;
    max-width: 15ch;
    margin-bottom: 1.35rem;
  }

  /* Hero desktop simplificada: mantém só eyebrow + headline + CTA + foto */
  .hero__subtitle {
    display: none;
  }

  .hero__actions {
    margin-bottom: 0;
  }

  .hero__cta {
    padding: 1.05rem 2.1rem;
    font-size: 1rem;
    line-height: normal;
    gap: 0.6rem;
    white-space: nowrap;
    max-width: none;
    text-align: left;
  }

  .hero__trust--inline {
    display: none;
  }

  .hero__trust--mobile {
    display: none;
  }

  .hero__photo {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* Identificação: grade editorial 2 colunas com divisórias finas compartilhadas */
  .pain__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .pain-item {
    padding: 2rem 1.75rem;
  }

  .pain-item:nth-child(-n+2) {
    border-top: none;
    padding-top: 0;
  }

  .pain-item:nth-child(odd) {
    padding-left: 0;
  }

  .pain-item:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--color-border);
  }

  /* Transformação: foto ~42% da largura, conteúdo ocupa o restante */
  .transformation__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .testimonial-shot {
    width: 300px;
  }

}

/* -----------------------------------------
   Notebook (≥ 1024px)
------------------------------------------ */
@media (min-width: 1024px) {

  :root {
    --side-padding: 2.5rem;
  }

  /* Header: mostra navegação e CTA completos */
  .site-header__nav {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .site-header__toggle {
    display: none;
  }

  .mobile-nav {
    display: none;
  }

  .hero__grid {
    grid-template-columns: 1fr 0.85fr;
    gap: 4rem;
  }

  /* Identificação: grade editorial 3x2, divisórias finas compartilhadas, sem cards.
     Neutraliza primeiro os seletores nth-child(odd/even) do tablet (mesma
     especificidade, min-width não é exclusivo) antes de aplicar o padrão 3x2. */
  .pain__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .pain-item {
    padding: 2.5rem 2rem;
  }

  .pain-item:nth-child(odd),
  .pain-item:nth-child(even) {
    padding-left: 2rem;
    padding-right: 2rem;
    border-left: none;
  }

  .pain-item:nth-child(-n+3) {
    border-top: none;
    padding-top: 0;
  }

  .pain-item:nth-child(3n+1) {
    padding-left: 0;
  }

  .pain-item:nth-child(3n) {
    padding-right: 0;
  }

  .pain-item:nth-child(3n+2),
  .pain-item:nth-child(3n) {
    border-left: 1px solid var(--color-border);
  }

  /* TRG: texto mais estreito à esquerda, fluxo com bastante largura à direita */
  .trg__grid {
    grid-template-columns: 0.85fr 1.6fr;
    gap: 4rem;
    align-items: start;
  }

  .trg-flow__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding-left: 0;
  }

  .trg-flow__number {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1.1rem;
  }

  .trg-flow__line {
    top: 44px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
  }

  .trg-flow__line-fill[data-reveal] {
    transform: scaleX(0);
    transform-origin: left;
  }

  .trg-flow__line-fill[data-reveal].is-visible {
    transform: scaleX(1);
  }

  .transformation__grid {
    gap: 3.5rem;
  }

  /* Pequena assimetria editorial: a foto entra levemente acima do conteúdo */
  .transformation__media {
    margin-top: -1.75rem;
  }

  /* Sobre mim: foto ocupa a coluna esquerda por inteiro, texto empilha à direita
     na mesma ordem de leitura do mobile. Apenas 2 linhas de grid (intro/details)
     em vez de uma por elemento — evita o algoritmo do Grid distribuir espaço
     extra de forma desigual entre linhas quando um item (a foto) ocupa várias. */
  .about__grid {
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas:
      "photo intro"
      "photo details";
    column-gap: 4.5rem;
    row-gap: 1.75rem;
    align-items: start;
  }

  .about__intro {
    grid-area: intro;
  }

  .about__eyebrow {
    margin-bottom: 0.75rem;
  }

  .about__name {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .about__tagline {
    margin-bottom: 0;
  }

  .about__media {
    grid-area: photo;
    margin-top: -1.75rem;
  }

  .about__details {
    grid-area: details;
  }

  .about__bio {
    margin-bottom: 1.75rem;
  }

  .about__meta {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1.75rem;
  }

  /* Desktop: volta ao layout original em colunas, número acima do texto */
  .process__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .process-step {
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .process-step:hover {
    transform: translateY(-3px);
  }

  .process-step__number {
    width: 60px;
    height: 60px;
    font-size: 1.3rem;
    margin-bottom: 1.1rem;
  }

  .process-step__body {
    padding-top: 0;
  }

  .process-step h3 {
    font-size: 1.1rem;
  }

  .process-step p {
    margin-inline: auto;
  }

  .process__line {
    top: 30px;
    bottom: auto;
    left: 12.5%;
    right: 12.5%;
    width: auto;
    height: 2px;
    transform: none;
  }

  .process__line-fill {
    transform: scaleX(var(--process-progress, 0));
    transform-origin: left;
  }

  .testimonial-shot {
    width: 340px;
  }

  .testimonials-marquee__track {
    gap: 28px;
  }

  /* FAQ: container um pouco mais largo no desktop, ainda central e contido */
  .faq .container--narrow {
    max-width: calc(880px + var(--side-padding) * 2);
  }

  /* Rodapé: duas colunas equilibradas em vez de tudo empilhado à esquerda */
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
  }

  .site-footer__brand {
    max-width: 38ch;
  }

  .site-footer__links {
    align-items: flex-end;
    text-align: right;
  }

  .site-footer__nav {
    justify-content: flex-end;
  }
}

/* -----------------------------------------
   Desktop (≥ 1440px)
------------------------------------------ */
@media (min-width: 1440px) {

  :root {
    --section-spacing: clamp(6rem, 9vw, 9rem);
  }
}