/* ==========================================================================
   sections.css — estilos específicos de cada seção

   Estrutura base: segue a landing de referência principal
   (referencias/referencia-4.webp). Mapa, medidas e correspondência com as
   nossas seções em docs/reference-master.md.
   Arquitetura de conversão: 8 seções + footer, na ordem do index.html:
   hero · problema · competencias · como-funciona · publico · juliana-bley ·
   oferta · faq. As medidas citadas nos
   comentários são px nativos da referência a 1920px de largura (o container
   principal tem 1200px, igual ao do projeto).

   Regras:
   - Um bloco por seção, na ordem do index.html. Uma seção deve poder ser
     entendida lendo um único bloco: estilos base (mobile) primeiro e, logo
     abaixo, as @media (min-width) dela, em ordem crescente.
   - Breakpoints (espelham --bp-* de tokens.css, que não funcionam em @media):
       sm 40em (640px) · md 48em (768px) · lg 64em (1024px) · xl 80em (1280px)
   - Escopo pela classe da seção (.section--hero, .section--problema...) e por
     classes de elemento próprias (.hero__title). Sem seletores posicionais ou
     encadeados.
   - Valores vêm de tokens.css. Contexto escuro: .theme-dark / .section--dark /
     .section--gradient (components.css); não redefinir --color-* por seção.
   - Só regras responsivas GLOBAIS ficam em responsive.css.
   ========================================================================== */


/* ==========================================================================
   SITE HEADER  (ref. 01)
   Barra sólida e fixa de 96px a 1920 (5.2vw). Logo à esquerda; links logo ao lado
   do logo (não colados à direita); CTA à direita. Mobile: logo + botão de menu,
   links em painel.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
  color: var(--color-text);
  background-image: var(--gradient-dark);
  background-color: var(--brand-ink);
}

.site-header {
  box-shadow: 0 1px 0 transparent, 0 10px 24px -18px transparent;
  transition: box-shadow var(--motion-normal) var(--ease-soft);
}

.site-header[data-scrolled],
.site-header[data-menu-open] {
  box-shadow: 0 1px 0 var(--color-border), 0 10px 24px -18px rgb(0 0 0 / 0.45);
}

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

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--tap-target-min);
}

/* Logo oficial (branco, para fundo escuro): só altura definida, largura segue a proporção. */
.site-header__logo {
  width: auto;
  height: clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem);
  max-width: 100%;
  object-fit: contain;
}

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  margin-inline-end: calc(var(--space-2) * -1);
  border-radius: var(--radius-pill);
  color: inherit;
}

.site-header__toggle-icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transition-base);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar-top {
  transform: translateY(4px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar-bottom {
  transform: translateY(-4px) rotate(-45deg);
}

/* Mobile: os links ficam num painel sob o header, fechado por padrão e aberto
   pelo botão (data-open, via JS). */
.site-header__nav {
  position: absolute;
  inset: 100% 0 auto;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  padding: var(--space-3) var(--container-gutter) var(--space-6);
  background-color: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
}

.site-header__nav[data-open] {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header__nav[data-open] {
    animation: menu-in var(--motion-fast) var(--ease-out) both;
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

.site-header__list {
  display: grid;
}

.site-header__list li + li {
  border-top: var(--border-width) solid var(--color-border);
}

.site-header__link {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.4em;
  transition:
    color var(--motion-fast) var(--ease-soft),
    text-decoration-color var(--motion-fast) var(--ease-soft);
}

.site-header__link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

/* Painel do menu mobile em larguras médias (até 1199px): o CTA não estica pela largura toda */
@media (min-width: 40em) {
  .site-header__cta {
    align-self: flex-start;
  }
}

/* nav — links logo ao lado do logo; CTA compacto (.button--sm) empurrado para a direita.
   Em linha única só quando cabe: abaixo de 75em (--bp-nav) fica o menu mobile. Os valores
   fluidos têm TETO para a soma (logo + links + espaços + CTA) ficar < 1200px (o container)
   em qualquer largura; os rótulos não quebram, para nada colidir. */
@media (min-width: 75em) {
  .site-header__toggle {
    display: none;
  }

  .site-header__nav {
    position: static;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .site-header__list {
    display: flex;
    flex-direction: row;
    gap: 0 clamp(1.25rem, 0.5rem + 1.6vw, 1.75rem);
    margin-left: clamp(2rem, -0.5rem + 6.2vw, 4.5rem);
  }

  .site-header__list li + li {
    border-top: 0;
  }

  .site-header__link {
    min-height: var(--tap-target-min);
    white-space: nowrap;
  }

  .site-header__cta {
    flex: none;
    align-self: center;
    margin-left: auto;
    white-space: nowrap;
  }
}


/* ==========================================================================
   HERO  (ref. 02) — copy oficial
   Fundo claro. Texto à esquerda (≈ 593px, 31% da largura); fotografia de Juliana
   à direita, ancorada na base e cortada reta pela emenda com a seção seguinte (sem
   a cunha escura inclinada, removida a pedido do cliente); botão circular de
   rolagem a cavalo sobre a emenda (no lugar do emblema da referência).
   Mobile: texto → faixa de informações → foto (janela em fluxo).
   ========================================================================== */
.section--hero {
  position: relative;
  padding-top: var(--header-height);
  color: var(--color-text);
  background-color: var(--brand-rose-50);
  background-image: url("../assets/images/backgrounds/background-hero.webp");
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--space-6) var(--space-5);
}

.hero__content {
  display: grid;
  justify-items: start;
  max-width: 38rem;
}

/* H1 da Hero: no máximo 3 linhas (a frase de abertura + 2 da afirmação) a partir de 640px. O corpo é fluido e limitado pela
   largura entre o container e a foto: 34 px em ≈ 1060, 41 em 1280 e 44 de 1360 em diante (dentro da faixa do H1). */
.hero__title {
  margin-top: var(--space-5);
  font-size: clamp(2.125rem, 3.2vw, 2.75rem);
}

.hero__title-lead,
.hero__title-main {
  display: block;
}

.hero__title-lead {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.hero__title-main {
  margin-top: 0.14em;
  font-weight: var(--font-weight-semibold);
}

.hero__accent {
  color: var(--color-accent);
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-5);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

.hero__signature {
  margin-top: var(--space-4);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.hero__actions {
  display: grid;
  justify-items: stretch;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-6);
}

/* Informações rápidas: linha de 4 itens sob o CTA (sem equivalente na referência). */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  max-width: 37rem;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-base);
}

.hero__fact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  line-height: var(--line-height-snug);
}

.hero__fact strong {
  font-weight: var(--font-weight-semibold);
}

.hero__fact-icon {
  width: 1.4rem;
  height: auto;
  aspect-ratio: 1;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* Palco: no mobile é uma janela em fluxo abaixo do texto (a foto fica centrada nela);
   a partir de lg ele cobre a Hero inteira, atrás do texto. */
.hero__stage {
  position: relative;
  z-index: 1;
  height: clamp(21rem, 100vw, 34rem);
  margin-top: var(--space-4);
  overflow: hidden;
}

.hero__figure {
  position: absolute;
  inset: 0;
}

.hero__photo {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  translate: -50% 0;
  width: auto;
  height: 118%;
  max-width: none;
}

/* Botão circular de rolagem, a cavalo sobre a emenda (≈ 49px a 1440, 65px a 1920, 40px no mobile) */
.hero__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 3.4vw, 4rem);
  aspect-ratio: 1;
  translate: -50% 50%;
  border: clamp(0.125rem, 0.22vw, 0.25rem) solid var(--brand-rose-200);
  border-radius: 50%;
  color: var(--brand-white);
  background-color: var(--brand-ink);
  transition: background-color var(--transition-base);
}

.hero__scroll:hover {
  background-color: var(--brand-ink-2);
}

.hero__scroll svg {
  width: 42%;
  height: auto;
  aspect-ratio: 1;
}

/* mobile: sem o botão de rolagem (a seção seguinte já aparece logo abaixo) */
@media (max-width: 47.99em) {
  .hero__scroll {
    display: none;
  }
}

/* Coreografia da primeira carga (≈ 1,1 s no total, sem travar a leitura): tag → título → apoio → assinatura → CTA → fatos → foto.
   Passo de 80 ms; os deslocamentos são pequenos (--rise). Só opacity e translate. */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    animation: hero-rise var(--motion-enter) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 80ms);
  }

  .hero__content > :nth-child(2) { --i: 1; --rise: 18px; }   /* título */
  .hero__content > :nth-child(3) { --i: 2; }
  .hero__content > :nth-child(4) { --i: 3; }
  .hero__content > :nth-child(5) { --i: 4; --rise: 10px; }   /* CTA */

  .hero__content > .hero__facts {
    --i: 5;
    animation-name: hero-fade;
  }

  .hero__fact {
    --rise: 8px;

    animation: hero-rise var(--motion-slow) var(--ease-out) both;
    animation-delay: calc(400ms + var(--j, 0) * 60ms);
  }

  .hero__fact:nth-child(2) { --j: 1; }
  .hero__fact:nth-child(3) { --j: 2; }
  .hero__fact:nth-child(4) { --j: 3; }

  .hero__figure {
    animation: hero-slide-in 800ms var(--ease-out) 240ms both;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    translate: 0 var(--rise, 14px);
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
  }
}

@keyframes hero-slide-in {
  from {
    opacity: 0;
    translate: 20px 0;
  }
}

/* sm — a CTA deixa de ocupar a largura toda */
@media (min-width: 40em) {
  .hero__actions {
    justify-items: start;
    width: auto;
  }
}

/* md — tablet */
@media (min-width: 48em) {
  .hero__inner {
    padding-top: var(--space-7);
  }

  .hero__stage {
    height: clamp(30rem, 78vw, 40rem);
  }

  .hero__photo {
    height: 122%;
  }
}

/* lg — texto à esquerda; foto à direita sangrando até a borda.
   A foto é maior que a Hero e sai pela base (corte intencional). A posição
   horizontal acompanha a borda do container (--container-inset, medido em cqw:
   não depende da barra de rolagem). */
@media (min-width: 64em) {
  /* A altura da Hero vem do conteúdo: respiro superior (--hero-pad-top, abaixo do header) + copy + respiro inferior.
     --hero-pad-top também posiciona a foto (ver .hero__figure). */
  .section--hero {
    --hero-pad-top: clamp(3rem, 5vw, 5.5rem);
  }

  .hero__inner {
    padding-top: var(--hero-pad-top);
    padding-bottom: clamp(5rem, 8vw, 7.5rem);
  }

  .hero__content {
    max-width: 44rem;   /* o título ocupa 2 linhas largas; os demais itens têm limite próprio */
  }

  /* a faixa de fatos para antes da foto (1024–1200 px): quebra em duas linhas em vez de passar por cima do casaco */
  .hero__facts {
    max-width: min(37rem, 100cqw - 39.5rem);
  }

  /* o apoio também não encosta no cabelo perto de 1024 px (quebra em 3 linhas) */
  .hero__lead {
    max-width: min(34rem, 100cqw - 31.5rem);
  }

  .hero__stage {
    position: absolute;
    inset: 0;
    height: auto;
    margin-top: 0;
    pointer-events: none;
  }

  /* A foto sobe um pouco acima do topo da copy (--hero-fig-lift = 60 % do respiro superior; o cabelo fica entre o header e a
     tag) e o corpo continua ancorado na base da Hero, cortada reta pela emenda. Altura da figura = (altura da Hero − topo da
     copy + lift) / 0,631: mostra ≈ 65 % da imagem (cabeça até a cintura, com a camiseta inteira); o topo sobe mais 1,9 % da
     altura (margem vazia acima do cabelo). As porcentagens são da altura da Hero (o palco ocupa a seção inteira). */
  .hero__figure {
    --hero-fig-lift: calc(var(--hero-pad-top) * 0.6);
    --hero-fig-raw: calc((100% - var(--header-height) - var(--hero-pad-top) + var(--hero-fig-lift)) / 0.631);
    --hero-fig-h: min(var(--hero-fig-raw), 98cqw);   /* perto de 1024 px o cabelo não pode passar do título */

    inset: auto;
    top: calc(var(--header-height) + var(--hero-pad-top) - var(--hero-fig-lift) - var(--hero-fig-h) * 0.019);
    right: max(-1.5rem, calc(var(--container-inset) - var(--space-10)));
    height: var(--hero-fig-h);
    aspect-ratio: 1006 / 1564;
  }

  .hero__photo {
    top: 0;
    left: 0;
    translate: none;
    width: 100%;
    height: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .hero__photo {
        animation: hero-drift linear both;
        animation-timeline: scroll(root block);
        animation-range: 0px 70vh;
      }
    }
  }
}

@keyframes hero-drift {
  to {
    transform: translateY(5px);
  }
}


/* ==========================================================================
   PROBLEMA  (02 · "Por que eu precisaria disso?"; ref. 08a — painel com foto + chips) → #problema
   Copy oficial completa. Seção ESCURA (continua o bloco escuro do Hero) com o painel
   claro da referência: foto à esquerda e, à direita, a coluna de texto com os 3 chips (= as 3 afirmações) lado a
   lado logo abaixo da copy, preparando o contraste que vem na sequência. Abaixo do painel, o contraste e o fechamento
   (o argumento da seção).
   V1.1 — restaurada a composição anterior, SEM o selo circular da emenda (a Hero já tem o
   botão de rolagem: é o único círculo ali) e SEM texto na área visual: enquanto não houver
   a fotografia, ela é uma superfície neutra (rosa muito claro, gradiente sutil) integrada ao
   painel. Quando a foto chegar, ela entra nesta mesma área (.problema__photo).
   Os chips são informação, não botões: sem hover, sem sombra e com cursor padrão. Painel = .card--light (raio xl).
   Mobile: área visual → texto → chips (em fluxo) → contraste → fechamento.
   ========================================================================== */
.section--problema {
  padding-top: var(--section-space-lg);
  padding-bottom: var(--section-space-md);
  overflow-x: clip;
}

/* superfície, borda e sombra vêm de .card .card--light; o painel grande leva o raio xl */
.problema__panel {
  --card-radius: var(--radius-xl);

  display: grid;
  gap: var(--space-5);
  padding: var(--space-7) clamp(1.25rem, 0.5rem + 3vw, 2.5rem);   /* respiro vertical igual em cima e embaixo */
}

/* Área visual sem asset: superfície neutra, sem texto nem ícone (decorativa) */
.problema__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  background:
    radial-gradient(ellipse 72% 62% at 20% 86%, rgb(var(--brand-magenta-rgb) / 0.06) 0%, transparent 72%),
    linear-gradient(160deg, var(--brand-rose-100) 0%, var(--brand-rose-50) 100%);
}

/* Fotografia contextual (workshop.webp, 447 × 465): preenche a área, sem deformar. Tratamento sutil: um toque a menos de
   saturação e um véu claro/rosa muito suave no canto inferior esquerdo. */
.problema__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;   /* 16:9 (celular): mantém a cabeça, o microfone e parte da turma */
  filter: saturate(0.92) contrast(1.02);
}

.problema__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top right, rgb(255 249 252 / 0.5) 0%, rgb(255 240 247 / 0.18) 38%, transparent 62%);
}

.problema__text {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-4);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

.problema__title {
  font-size: var(--text-title);
  color: var(--color-text);
}

.problema__accent {
  color: var(--color-accent);
}

.problema__lead {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.problema__punch {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Chips: mobile em fluxo; a partir de lg saem do painel, empilhados à esquerda */
.problema__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.problema__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: clamp(2.5rem, 2.1rem + 1.2vw, 3.25rem);
  padding-inline: clamp(0.8rem, 0.5rem + 0.8vw, 1.25rem);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  background-color: var(--color-surface);
  box-shadow: none;
  cursor: default;
}

/* ícone direto, sem container: outline de 1.75 px (traço de 2.2 u no sprite), 19 px, magenta */
.problema__chip-icon {
  width: 1.2rem;
  height: auto;
  aspect-ratio: 1;
  flex-shrink: 0;
  color: var(--brand-magenta);
}

/* Contraste e fechamento, sobre o fundo escuro (papéis do .section--dark) */
.problema__statement {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  margin-top: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  text-align: center;
}

.problema__contrast {
  max-width: 34em;
  font-size: var(--text-statement);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-muted);
}

.problema__contrast strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.problema__closing {
  max-width: 30em;
  font-size: var(--text-statement);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.problema__closing strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}

/* md — tablet: área visual | texto; os chips ficam em fluxo, abaixo do texto, na coluna da direita */
@media (min-width: 48em) {
  .problema__panel {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    column-gap: var(--space-5);
    align-items: center;
  }

  .problema__photo {
    aspect-ratio: 4 / 5;
  }

  .problema__photo-img {
    object-position: 62% 50%;   /* 4:5 corta as laterais: Juliana (≈ 63 % da largura) fica no centro do quadro */
  }
}

/* lg — painel de duas colunas (área visual 480 | texto 620) */
@media (min-width: 64em) {
  .problema__panel {
    grid-template-columns: minmax(0, 480fr) minmax(0, 620fr);
    column-gap: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
    align-items: center;
    --problema-pad-y: clamp(3rem, 4.2vw, 5rem);   /* o MESMO respiro em cima e embaixo */

    padding: var(--problema-pad-y) clamp(1.5rem, 4vw, 5rem) var(--problema-pad-y) clamp(1.5rem, 2.8vw, 3.3rem);
  }

  .problema__photo {
    aspect-ratio: 480 / 500;   /* ≈ proporção da foto (447 × 465): sem corte */
  }

  .problema__photo-img {
    object-position: 50% 50%;
  }

  /* os 3 chips ficam abaixo do texto, lado a lado (preparam o "Mas isso, sozinho…" logo abaixo do painel) */
  .problema__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
    gap: var(--space-2);
  }

  .problema__chip {
    gap: 0.5rem;
    padding-inline: 0.75rem;
    font-size: var(--text-small);
  }
}


/* ==========================================================================
   COMPETÊNCIAS  (03 · "O que vou desenvolver?"; réplica de referencias/competencias.png) → #competencias
   V3 — fidelidade estrutural à referência (1437 px de largura; medidas dela entre parênteses):
   - WHITE MODE (V3.1): superfície branca → rosa muito claro; cards brancos com contorno magenta suave, sombra
     discreta e um véu rosa atrás do numeral (a referência é escura; só o tema muda, não a estrutura);
   - transição: o final escuro do Problema fica por baixo de uma folha clara de cantos arredondados (TRANS-05);
   - tag, título (≈ 40px) e apoio (2 linhas, ≈ 670px) centralizados;
   - abaixo, uma só composição de cards ALTOS (≈ 290 × 420, proporção 0,69; raio ≈ 24px), ESCALONADOS na
     vertical (topos oscilando em até ≈ 13 % da altura), GIRADOS (−3° a +5°) e SOBREPOSTOS (≈ 15 % da largura),
     cada um sobre o anterior (a ordem de empilhamento cresce para a direita);
   - em cada card: aba de acento no topo (≈ 124 × 7, a ≈ 14 % da borda esquerda), arte ocupando ≈ 62 % de cima com
     fade para o fundo do card, nome em caixa alta bold (primeira parte branca, final em acento) a ≈ 65 % da
     altura e texto de ≈ 4 linhas centralizado.
   A referência tem 4 cards; aqui são 5, na mesma largura de card e na mesma sobreposição (o conjunto fica mais
   largo, usando o container largo). A arte (ilustração) ainda não existe: no lugar fica um brilho neutro com o
   numeral do passo; quando a imagem chegar, ela ocupa a mesma área (.ccard__media) e o numeral vira rótulo.
   Como cada card cobre ≈ 15 % do anterior, o texto de cada card é centralizado na parte VISÍVEL (--cover).
   Mobile/tablet (< 64em): os mesmos cards (formato, aba, numeral, escalonamento e sobreposição) em uma faixa
   horizontal com snap; o próximo card aparece pela borda.
   Os 5 nomes e as descrições são copy confirmada.
   ========================================================================== */
.section--competencias {
  position: relative;
  z-index: 1;
  margin-top: -2rem;   /* a folha clara sobe sobre o final escuro do Problema (que tem ≥ 56px livres embaixo) */
  padding-top: calc(var(--section-space-md) + 1rem);
  padding-bottom: var(--section-space-md);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(180deg, var(--brand-white) 0%, var(--brand-rose-50) 100%);
  overflow-x: clip;
}

.competencias__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.competencias__head .tag {
  text-align: left;
}

.competencias__title {
  margin-top: var(--space-5);
  font-size: var(--text-title);
}

.competencias__accent {
  color: var(--color-accent);
}

.competencias__lead {
  max-width: 36rem;
  margin-top: var(--space-4);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

/* Palco dos cards. Base (mobile/tablet): faixa horizontal com snap, sangrando até as bordas da tela */
.competencias__stage {
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.competencias__cards {
  --lap-1: 1rem;       /* sobreposições entre cards vizinhos (base: faixa) */
  --lap-2: 1.75rem;
  --lap-3: 1.375rem;
  --cover-1: var(--lap-1);
  --cover-2: var(--lap-2);
  --cover-3: var(--lap-3);

  display: flex;
  align-items: flex-start;
  padding: 2.25rem var(--container-gutter) 3.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--container-gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--brand-ink-2-rgb) / 0.24) transparent;
}

.ccard {
  --dy: 0%;
  --rot: 0deg;
  --cover: 0px;   /* quanto do card fica sob o seguinte: o texto é centralizado na parte visível */
  --card-shadow: var(--shadow-md);   /* os cards se sobrepõem: precisam de um pouco mais de profundidade */

  position: relative;
  display: flex;
  flex: 0 0 clamp(15.5rem, 68vw, 17.5rem);
  flex-direction: column;
  aspect-ratio: 290 / 420;
  margin-left: calc(var(--lap, 0px) * -1);
  transform: translateY(var(--dy)) rotate(var(--rot));
  scroll-snap-align: start;
}

/* Escalonamento (topos em % da altura do card) e giro: os 4 primeiros seguem a referência (+4 / 0 / +11 / +5 % e
   −2,4° / +4,2° / −3° / +4,8°); o 5.º continua a alternância. A ordem de empilhamento cresce para a direita.
   --lap = quanto ESTE card entra sob o anterior (a referência mede 34 / 59 / 60 px; o 5.º repete a média) */
.ccard--1 { --dy: 4%;  --rot: -2.4deg; z-index: 1; }
.ccard--2 { --dy: 0%;  --rot: 4.2deg;  z-index: 2; --lap: var(--lap-1); }
.ccard--3 { --dy: 11%; --rot: -3deg;   z-index: 3; --lap: var(--lap-2); }
.ccard--4 { --dy: 5%;  --rot: 4.8deg;  z-index: 4; --lap: var(--lap-2); }
.ccard--5 { --dy: 9%;  --rot: -2deg;   z-index: 5; --lap: var(--lap-3); }

@media (prefers-reduced-motion: no-preference) {
  .js .ccard.reveal:not(.is-visible) {
    rotate: calc(var(--rot) * -0.55);   /* soma ao giro do transform: o card começa a ≈ 45 % da rotação final */
  }
}

.ccard--1 { --cover: var(--cover-1); }
.ccard--2 { --cover: var(--cover-2); }
.ccard--3 { --cover: var(--cover-2); }
.ccard--4 { --cover: var(--cover-3); }

/* Arte: ocupa o que sobra acima do texto (≈ 62 % do card) e se dissolve no fundo do card */
.ccard__media {
  position: relative;
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-height: 0;
  padding-right: var(--cover);
  border-radius: calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0;
  background:
    radial-gradient(ellipse 70% 56% at 50% 44%, rgb(var(--brand-magenta-rgb) / 0.1) 0%, transparent 78%),
    linear-gradient(180deg, var(--brand-rose-100) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.ccard__num {
  font-size: var(--text-numeral);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-accent);
  user-select: none;
}

.ccard__body {
  position: relative;
  flex: none;
  padding: 0 calc(1.375rem + var(--cover)) clamp(1.5rem, 2.9vw, 2.75rem) 1.375rem;
  text-align: center;
}

/* Nome do passo: título de componente (h3), em caixa normal e tinta sólida */
.ccard__title {
  font-size: var(--text-h3);
  line-height: var(--line-height-snug);
}

.ccard__text {
  margin-top: 0.9rem;
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.competencias__takeaway {
  max-width: 28em;
  margin-top: clamp(0.5rem, 0.25rem + 1vw, 1.25rem);
  text-align: center;
  font-size: var(--text-statement);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-muted);
}

.competencias__takeaway strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* lg — a composição da referência: cards no container largo, 22 % de largura cada (290 de 1320 px) e 3,25 % de
   sobreposição (43 px); o conjunto de 5 ocupa 97 % do container, centralizado */
@media (min-width: 64em) {
  .competencias__stage {
    width: min(100% - (var(--container-gutter) * 2), var(--container-wide));
    margin-top: clamp(2rem, 4.2vw, 4.25rem);
    margin-inline: auto;
  }

  .competencias__cards {
    --lap-1: 2.6%;     /* 34 px de 1320 */
    --lap-2: 4.5%;     /* 59–60 px */
    --lap-3: 3.4%;     /* 45 px */
    --cover-1: 11.8%;  /* em % da largura do card (22 % do palco): 2,6 ÷ 22 */
    --cover-2: 20.5%;
    --cover-3: 15.5%;

    justify-content: center;
    padding: 1rem 0 clamp(3rem, 5vw, 4.5rem);
    overflow: visible;
    scroll-snap-type: none;
  }

  .ccard {
    flex-basis: 22%;
  }

  /* o card acompanha a largura do palco (22 %): corpo do texto e respiros proporcionais, para o nome mais
     longo (Diagnosticar) caber em uma linha em 1024px (card de ≈ 207px) */
  .ccard__body {
    padding-inline: clamp(0.9375rem, 0.15rem + 1.3vw, 1.375rem);
    padding-right: calc(clamp(0.9375rem, 0.15rem + 1.3vw, 1.375rem) + var(--cover));
    padding-bottom: clamp(1.25rem, 2.9vw, 2.75rem);
  }

  .ccard__title {
    font-size: clamp(1.0625rem, 1.55vw, var(--text-h3));
  }

  .ccard__text {
    margin-top: clamp(0.5rem, 0.15rem + 0.8vw, 0.9rem);
    font-size: var(--text-small);
  }
}


/* ==========================================================================
   COMO A FORMAÇÃO FUNCIONA  (04 · "Como essa formação ensina?"; réplica de referencias/como funciona.png) → #como-funciona
   V2 — fidelidade estrutural à referência (1671 px de largura; medidas dela entre parênteses):
   - painel ESCURO de cantos arredondados (raio xl); sem entalhe/cápsula na borda superior (era ornamento da
     referência: a Hero já tem o botão de rolagem) e sem fio de luz;
   - ÂNCORA à esquerda (418 px): tag, título, abertura de 3 linhas e, onde a
     referência tem o CTA (418 × 82), a TESE da seção ("Qualidade não depende da modalidade. Depende do método.")
     em um bloco de destaque: a ancoragem é o elemento mais pesado da coluna;
   - TRILHO à direita, a 44 px da âncora e sangrando pela borda da tela: cards claros e iguais de 378 × 424
     (proporção 0,89; gap 24px), 2 e meio por tela; em cada card (.card--light .card--tab): aba de acento no topo,
     ícone em tile de 44px, nome (h3), frase de apoio e numeral gigante cortado na base (≈ 65 %
     visível, à direita); abaixo do trilho, pontos de progresso e anterior/próximo.
   A referência tem 3 itens por card; aqui há 1 frase (copy aprovada). São 5 cards (a referência mostra 2 e meio).
   A tese ocupa o lugar do CTA (esta seção não tem CTA) e é um .card--accent. Tema: LIGHT — painel rosa claro
   (--color-bg-alt) com hairline, cards brancos, tese com tinta magenta e texto escuro, magenta nos pontos e na tese.
   (A referência original era um painel escuro; esta versão é o "white mode" pedido.)
   Mobile/tablet (< 64em): âncora → trilho (cards de ≈ 78 % da largura, o próximo aparece pela borda) → tese.
   Os 5 nomes e as frases são copy confirmada.
   ========================================================================== */
.section--como {
  position: relative;
  padding-bottom: 0;   /* o painel encosta na seção escura seguinte (#publico) */
}

.como__panel {
  position: relative;
  padding-block: var(--section-space-md);
  border: var(--border-width) solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--color-bg-alt);
}

.como__inner {
  display: grid;
  gap: clamp(2rem, 1.2rem + 2.4vw, 3rem);
}

/* Âncora */
.como__head {
  display: grid;
  justify-items: start;
}

.como__title {
  margin-top: var(--space-5);
  font-size: var(--text-title);
}

.como__intro {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-4);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

.como__intro strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Tese: no lugar do CTA da referência (418 × 82), o único .card--accent da página (superfície, borda e raio vêm de .card) */
.como__thesis {
  /* painel claro: a tese segue o tema claro (.card--accent traz as variáveis escuras); só a tinta e a borda de acento ficam */
  --section-text: var(--brand-ink-2);
  --section-muted: var(--brand-ink-muted);
  --section-border: var(--hairline-light);
  --section-surface: var(--brand-white);
  --color-text: var(--section-text);
  --color-text-muted: var(--section-muted);
  --color-border: var(--section-border);
  --color-surface: var(--section-surface);
  --color-focus: var(--brand-magenta);
  --card-radius: var(--radius-md);

  max-width: 26.125rem;
  padding: var(--space-5);
  font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem);   /* 17 → 20 px: um degrau abaixo da frase de conclusão */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.como__thesis strong {
  display: block;
  margin-top: 0.15em;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

/* Trilho: faixa horizontal com snap que sangra pela borda direita da tela */
.como__stage {
  min-width: 0;
  margin-right: calc(var(--container-inset) * -1);
}

.como__rail {
  --princ-w: clamp(15.5rem, 78vw, 20rem);
  --princ-gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem);

  position: relative;
  display: flex;
  gap: var(--princ-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.como__rail::-webkit-scrollbar {
  display: none;
}

/* sobra à direita para o último card poder chegar ao início do trilho (os pontos levam cada card até lá) */
.como__rail::after {
  content: "";
  flex: 0 0 max(0px, calc(100% - var(--princ-w) - var(--princ-gap)));
}

.como__rail:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Card de princípio: superfície, borda, raio e aba vêm de .card .card--light .card--tab */
.princ {
  flex: 0 0 var(--princ-w);
  aspect-ratio: 378 / 424;
  padding: clamp(2.5rem, 2rem + 1.6vw, 3rem) clamp(1.25rem, 0.9rem + 1.1vw, 2rem) 0;
  scroll-snap-align: start;
}

/* ícone: tile de 44px, hairline, mesmo traço de todos os ícones */
.princ__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--brand-magenta);   /* acento de marca; o container segue claro */
  background-color: var(--brand-rose-50);
}

.princ__icon svg {
  width: 50%;
  height: auto;
  aspect-ratio: 1;
}

.princ__title {
  margin-top: 1.35rem;
  font-size: var(--text-h3);
  line-height: var(--line-height-snug);
}

/* Frase de apoio (sem marcador) */
.princ__text {
  margin-top: 1.25rem;
  font-size: var(--text-body);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

/* Numeral gigante cortado pela base do card (≈ 65 % superior visível), à direita */
.princ__num {
  position: absolute;
  right: 11%;
  bottom: 0;
  display: block;
  height: 0.62em;
  overflow: hidden;
  font-size: clamp(4.25rem, 20.19vw - 8.67rem, 9.5rem);   /* ≈ 68px em 1024 → 152px a partir de 1440 */
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: rgb(var(--brand-magenta-rgb) / 0.1);   /* fallback sem background-clip:text */
  user-select: none;
}

/* marca d'água: magenta em baixa opacidade, mais presente no topo do numeral e dissolvendo na base (só o numeral, não o card) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .princ__num {
    background-image: linear-gradient(180deg, rgb(var(--brand-magenta-rgb) / 0.16) 0%, rgb(var(--brand-magenta-rgb) / 0.06) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Controles do trilho: pontos de progresso à esquerda (12px, alinhados ao primeiro card) e, à direita, anterior/próximo
   (discretos, alinhados ao container). Ambos são gerados/liberados por JS (initRail); sem JS o trilho continua rolável. */
.como__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.625rem;
  padding-right: var(--container-inset);
}

.como__dots {
  display: flex;
  margin: 0 0 0 -0.375rem;
}

.como__dots[hidden] {
  display: none;
}

.como__dots .rail__dot {
  position: relative;
  width: 1.25rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ponto de 8px (a área de toque continua 20 × 24px) */
.como__dots .rail__dot::before {
  content: "";
  position: absolute;
  inset: 0.5rem 0.375rem;
  border-radius: 50%;
  background-color: rgb(var(--brand-ink-2-rgb) / 0.24);
}

.como__dots .rail__dot[aria-current="true"]::before {
  background-color: var(--color-accent);
  animation: dot-pop var(--motion-fast) var(--ease-out);
}

@keyframes dot-pop {
  50% {
    scale: 1.15;
  }
}

.como__dots .rail__dot:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  border-radius: 50%;
}

.como__arrows {
  display: flex;
  gap: 0.5rem;
}

.como__arrows[hidden] {
  display: none;
}

.rail__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-width) solid rgb(var(--brand-magenta-rgb) / 0.4);
  border-radius: 50%;
  color: var(--brand-magenta);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    opacity var(--transition-base);
}

.rail__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: translate var(--motion-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .rail__arrow[data-rail-next]:hover svg {
    translate: 2px 0;
  }

  .rail__arrow[data-rail-prev]:hover svg {
    translate: -2px 0;
  }
}

.rail__arrow:hover {
  border-color: rgb(var(--brand-magenta-rgb) / 0.7);
  background-color: rgb(var(--brand-magenta-rgb) / 0.06);
}

.rail__arrow:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* início/fim do trilho: continua focável (aria-disabled), mas apagado e sem ação */
.rail__arrow[aria-disabled="true"] {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* no celular o swipe é o gesto principal: só os pontos ficam */
@media (max-width: 39.99em) {
  .como__arrows {
    display: none;
  }
}

/* md — cards um pouco maiores na faixa */
@media (min-width: 48em) {
  .como__rail {
    --princ-w: 20rem;
  }
}

/* lg — a composição da referência: âncora de 418 px + trilho que sangra pela direita (2 e meio por tela) */
@media (min-width: 64em) {
  .como__inner {
    grid-template-columns: clamp(17.5rem, 29vw, 26.125rem) minmax(0, 1fr);
    grid-template-areas:
      "head stage"
      "thesis stage";
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    row-gap: 1.5rem;
    align-items: start;
  }

  .como__head {
    grid-area: head;
    margin-top: 1.45rem;
  }

  .como__stage {
    grid-area: stage;
    position: relative;
  }

  /* os controles saem do fluxo (ficam logo abaixo dos cards, sobre o respiro do painel): a altura do palco é a dos cards,
     então a base da tese alinha com a base dos cards */
  .como__controls {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  .como__thesis {
    grid-area: thesis;
    align-self: end;
  }

  .como__rail {
    --princ-w: clamp(16.5rem, 26vw, 23.625rem);
  }
}


/* ==========================================================================
   PARA QUEM É  (05 · "Isso é para mim?") → #publico
   V2 — comparação / identificação, sem imagens nem placeholders. Dois blocos editoriais ABERTOS (sem cartão: fio
   superior hairline com um trecho magenta, número pequeno, ícone funcional, título e texto), lado a lado, para o
   leitor se reconhecer de relance (01 profissional · 02 empresa). O número é contido (não repete os numerais de
   #competencias). O pré-requisito tem tratamento próprio (ícone + rótulo + frase) e o CTA fica na mesma linha, com a
   anatomia padrão. Título em branco; o magenta está só no trecho do fio e nos números.
   Mobile: perfil 01 → perfil 02 → pré-requisito → CTA.
   ========================================================================== */
.section--publico {
  padding-block: var(--section-space-md);
}

.publico__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.publico__title {
  max-width: 21em;
  margin-top: var(--space-5);
  font-size: var(--text-title);
  text-wrap: balance;
}

.publico__profiles {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
}

.perfil {
  position: relative;
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: var(--border-width) solid var(--color-border);
}

.perfil::before {
  content: "";
  position: absolute;
  top: calc(var(--border-width) * -1);
  left: 0;
  width: 4rem;
  height: 2px;
  background-color: var(--color-accent);
}

.perfil__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.perfil__num {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-accent);
}

.perfil__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-muted);
}

.perfil__title {
  margin-top: var(--space-4);
  font-size: var(--text-h3);
  line-height: var(--line-height-snug);
}

.perfil__text {
  max-width: 34em;
  margin-top: var(--space-3);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

/* Pré-requisito + CTA, sob um fio de largura total */
.publico__foot {
  display: grid;
  gap: var(--space-5);
  margin-top: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: var(--border-width) solid var(--color-border);
}

.publico__req {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.15rem;
  align-items: start;
}

.publico__req-icon {
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  color: var(--color-text-muted);
}

.publico__req-label {
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.publico__req-text {
  font-size: var(--text-body-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

@media (min-width: 48em) {
  .publico__profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 5.5rem);
  }

  .publico__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-6);
    align-items: center;
  }
}


/* ==========================================================================
   JULIANA BLEY + ESCUDO  (06 · "Quem está por trás?"; ref. 09 — "sobre") → #juliana-bley
   Une #juliana-bley e #autoridade. Seção CLARA e RETA (sem nome fantasma, sem ombro angular, sem faixas escuras):
   o retrato real (sem cartão flutuante) e a coluna de texto com a bio e os dois papéis.
   O conjunto segue o eixo do container de 1200px (.container). Emendas retas: escuro (Para quem é) → claro → escuro (Oferta).
   Bio fornecida pelo cliente. Só papéis confirmados.
   ========================================================================== */
.section--sobre {
  padding-block: var(--section-space-md);
  overflow-x: clip;
}

.sobre__grid {
  display: grid;
  gap: var(--space-6);
}

.sobre__photos {
  position: relative;
}

/* Foto de Juliana (juliana.webp, 479 × 629) em moldura que preenche a coluna; cover, ancorada perto do topo (rosto e microfone) */
.sobre__photo-main {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-rose-100) 0%, var(--brand-rose-50) 65%, var(--brand-white) 100%);
  border: var(--border-width) solid var(--color-border);
}

/* A imagem preenche a moldura sem ditar a altura dela (a altura vem do aspecto ou da coluna de texto) */
.sobre__photo-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.sobre__text {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-4);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text);
}

.sobre__title {
  font-size: var(--text-title);
}

.sobre__role {
  display: grid;
  justify-self: stretch;   /* o fio ocupa a largura da coluna, como os demais */
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.sobre__name {
  font-size: var(--text-h3);
  line-height: var(--line-height-snug);
}

.sobre__bio {
  color: var(--color-text-muted);
}

.sobre__role-line {
  font-weight: var(--font-weight-semibold);
}

.sobre__role-label {
  display: block;
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* md — tablet: retrato | texto */
@media (min-width: 48em) {
  .sobre__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-6);
    align-items: start;
  }

  .sobre__photos {
    align-self: stretch;
  }

  .sobre__photo-main {
    aspect-ratio: auto;
    height: 100%;
    min-height: 20rem;
  }
}

/* lg — duas colunas (foto 10 | texto 11) num bloco mais estreito que o container (68rem), centralizado: a foto fica
   mais alta e mais estreita (≈ retrato), a altura vem da coluna de texto */
@media (min-width: 64em) {
  .sobre__grid {
    width: min(100% - (var(--container-gutter) * 2), 68rem);
    grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
    column-gap: clamp(2rem, 0.8rem + 3.2vw, 4.5rem);
    align-items: start;
  }

  .sobre__photo-main {
    min-height: 38rem;   /* foto mais alta que a coluna de texto: ≈ retrato (a foto tem proporção 0,76) */
  }

  .sobre__text {
    align-self: center;
  }
}


/* ==========================================================================
   OFERTA + GARANTIA  (07 · "Quanto custa e qual é o risco?"; réplica de referencias/oferta.png) → #oferta
   V2 — fidelidade estrutural à referência (composição de 763 px de largura; medidas dela entre parênteses, todas
   convertidas em % da largura do palco, em cqw, para a composição escalar inteira):
   - seção ESCURA (.section--dark) com um único brilho magenta suave atrás do card (Hero e Oferta são as únicas
     seções com glow); o momento de decisão da página;
   - ÂNCORA à esquerda (190 px, texto alinhado à direita): tag, título em 3 linhas e, onde a referência tem a linha
     "última chance" com a seta curva, a condição de lançamento (FISP) com a seta apontando para o card;
   - CARD DE PREÇO no centro (265 × 390; proporção 0,68), um .card--dark com uma CAMADA DESLOCADA de acento atrás
     (a única diferença de contexto; o botão é o mesmo de todas as seções): logo, linha do preço regular, preço
     gigante, forma de pagamento, CTA e uma linha de garantia no lugar da nota de segurança;
   - PAINEL DO QUE ESTÁ INCLUÍDO à direita (248 × 339), .card--dark atrás do card e parcialmente coberto por ele,
     com título e itens com check de acento (sem sublinhado, sem barra, sem glow);
   - GARANTIA em painel largo abaixo (728 × 185, 95 % da composição, a 95px do card), .card--dark: selo escalopado
     de 130px com o numeral 7, título de 2 linhas (o "7 dias" em acento) e o texto à direita.
   A referência mostra preço, itens e garantia de um infoproduto; aqui só entram os dados confirmados (R$ 497, R$ 297,
   até 12x, 20 horas, 100% EaD, 1 ano, certificação, 7 dias). Sem urgência, sem logos de pagamento, sem bônus.
   Mobile/tablet (< 64em): título → incluídos → card de preço (preço e CTA no mesmo bloco) → garantia.
   ========================================================================== */
.section--oferta {
  position: relative;
  padding-block: var(--section-space-lg);
  background-image:
    radial-gradient(ellipse 80% 38% at 50% 30%, rgb(var(--brand-magenta-rgb) / 0.12) 0%, transparent 72%),
    var(--gradient-dark);
}

.oferta__stage {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  width: min(100% - (var(--container-gutter) * 2), 40rem);
  margin-inline: auto;
}

.oferta__accent {
  color: var(--color-accent);
}

/* Âncora */
.oferta__head {
  display: grid;
  justify-items: start;
}

.oferta__title {
  margin-top: var(--space-5);
  font-size: var(--text-title);
}

.oferta__note {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 22rem;
  margin-top: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}

.oferta__note-arrow {
  flex: none;
  width: 2.75rem;
  height: auto;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Painel do que está incluído: superfície, borda e raio vêm de .card .card--dark */
.oferta__included {
  padding: 1.5rem 1.5rem 2rem;
}

.oferta__included-title {
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
}

.oferta__list {
  display: grid;
  gap: 1.125rem;
  margin-top: 1.375rem;
}

.oferta__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: var(--text-body-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

.oferta__check {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-accent);
}

/* Card de preço: container de consulta (cqw = % da largura do card). É um .card--dark SEM a classe .card: a camada
   deslocada (::before) e a face (::after) são pseudo-elementos e usam as variáveis do card (--card-bg/-border/-radius). */
.oferta__card {
  --card-radius: var(--radius-lg);

  position: relative;
  z-index: 2;
  container-type: inline-size;
  margin: 0 0 0.75rem 0.75rem;
}

.oferta__card::before,
.oferta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
}

.oferta__card::before {
  z-index: 0;
  background-color: var(--color-accent);
  transform: translate(-0.75rem, 0.75rem);
}

.oferta__card::after {
  z-index: 1;
  border: var(--border-width) solid var(--card-border);
  background-color: var(--card-bg);
}

.oferta__card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 9cqw;
  height: 100%;
  padding: 8cqw 9cqw;
  text-align: center;
}

.oferta__logo {
  width: 68cqw;
  height: auto;
}

.oferta__pricing {
  position: relative;
  top: -3.5cqw;   /* equilibra o respiro ÓTICO: entre o logo e o preço sobra mais ar (margem do logo + entrelinha do "De") do que entre o numeral e o CTA */
  display: grid;
  justify-items: center;
  gap: 2.4cqw;
}

.oferta__regular {
  display: flex;
  align-items: baseline;
  gap: 2.4cqw;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.oferta__regular-label {
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.oferta__regular s {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.1em;
}

.oferta__now {
  display: grid;
  justify-items: center;
  gap: 1cqw;
}

.oferta__now-label {
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* numeral do preço: o único destaque grande da seção (em escala do card), em tinta sólida; só o "R$" leva o acento */
.oferta__now-value {
  display: flex;
  align-items: flex-start;
  font-size: max(3.5rem, 24cqw);
  font-weight: var(--font-weight-bold);
  line-height: 0.95;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

/* "12x de": prefixo do valor da parcela, em escala de frase (não compete com o numeral) */
.oferta__times {
  margin-top: 1.2cqw;
  font-size: var(--text-statement);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-text);
}

.oferta__currency {
  margin: 0.14em 0.06em 0 0;
  font-size: 0.4em;
  color: var(--color-accent);
}

.oferta__action {
  display: grid;
  justify-items: center;
  gap: 5cqw;
  width: 100%;
}

/* CTA ligado ao preço: o MESMO botão de todas as seções (altura, corpo e seta de --cta-*), em largura total do card */
.oferta__cta {
  width: 100%;
}

.oferta__micro {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.oferta__micro svg {
  width: 1.25em;
  height: 1.25em;
  color: var(--color-accent);
}

/* Link do termo de adesão, discreto, logo abaixo da garantia */
.oferta__terms {
  margin-top: -3.2cqw;   /* encosta na linha da garantia (o gap do .oferta__action é 5cqw) */
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgb(var(--brand-magenta-rgb) / 0.45);
  text-underline-offset: 0.2em;
  transition:
    color var(--motion-fast) var(--ease-soft),
    text-decoration-color var(--motion-fast) var(--ease-soft);
}

.oferta__terms:hover {
  color: var(--brand-rose-200);
  text-decoration-color: currentColor;
}

.oferta__terms:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Garantia em painel largo, com selo numerado: superfície, borda e raio vêm de .card .card--dark */
.oferta__guarantee {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.875rem;
  padding: 1.5rem;
}

.oferta__seal {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.oferta__guarantee-title {
  font-size: var(--text-statement);
  line-height: var(--line-height-snug);
}

.oferta__guarantee-title .oferta__accent {
  display: block;
}

.oferta__guarantee-text {
  grid-column: 1 / -1;
  font-size: var(--text-body);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}

/* md — tablet: card de preço e incluídos lado a lado (como na referência), título e garantia em largura total */
@media (min-width: 48em) {
  .oferta__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "card included"
      "guarantee guarantee";
    column-gap: 2.25rem;
    align-items: stretch;
    width: min(100% - (var(--container-gutter) * 2), 46rem);
  }

  .oferta__head {
    grid-area: head;
  }

  .oferta__card {
    grid-area: card;
  }

  .oferta__included {
    grid-area: included;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
  }

  .oferta__list {
    margin-top: 1.75rem;
  }

  .oferta__guarantee {
    grid-area: guarantee;
    grid-template-columns: 7rem minmax(0, 1fr);
    padding: 1.75rem 2rem;
  }
}

/* lg — a composição da referência: tudo posicionado em % da largura do palco (763 px na referência → 100 cqw);
   o palco tem ≈ 954px (1440) e escala até 944px (1024) */
@media (min-width: 64em) {
  .oferta__stage {
    position: relative;
    display: block;
    container-type: inline-size;
    width: min(100% - (var(--container-gutter) * 2), 59.625rem);
    aspect-ratio: 763 / 670;
  }

  .oferta__head {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 24.9cqw;
    height: 51.1cqw;
    text-align: right;
  }

  .oferta__title {
    margin-top: 2.4cqw;
    font-size: min(var(--text-title), max(1.75rem, 3.55cqw));   /* escala do palco, sempre dentro da faixa do H2 */
  }

  .oferta__head .tag {
    white-space: nowrap;   /* a tag cresce para a esquerda, para fora da coluna de 190px */
  }

  .oferta__note {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35cqw;
    max-width: 21cqw;
    margin-top: 3.6cqw;
  }

  .oferta__note-arrow {
    width: 5cqw;
  }

  .oferta__card {
    position: absolute;
    top: 0;
    left: 33cqw;
    width: 34.7cqw;
    height: 51.1cqw;
    margin: 0;
  }

  .oferta__card::before {
    transform: translate(-1.57cqw, 1.31cqw);
  }

  .oferta__included {
    position: absolute;
    top: 3.4cqw;
    left: 63.7cqw;
    display: flex;
    flex-direction: column;
    width: 36.3cqw;
    height: 44.4cqw;
    padding: 4cqw 3cqw 4.5cqw 7.6cqw;
  }

  .oferta__list {
    flex: 1;
    align-content: space-evenly;
    gap: 0;
    margin-top: 0;
  }

  .oferta__item {
    gap: 1.4cqw;
  }

  .oferta__check {
    width: 2.2cqw;
    height: 2.2cqw;
    min-width: 1rem;
    min-height: 1rem;
  }

  .oferta__guarantee {
    --card-radius: var(--radius-xl);

    position: absolute;
    top: 63.6cqw;
    left: 4.6cqw;
    grid-template-columns: 17.3cqw minmax(0, 1fr) 31cqw;
    column-gap: 5.5cqw;
    width: 95.4cqw;
    height: 24.2cqw;
    padding: 0 5cqw 0 3.9cqw;
  }

  .oferta__guarantee-text {
    grid-column: auto;
  }
}


/* ==========================================================================
   FAQ  (08 · "Ainda tenho alguma dúvida?"; ref. 10 — branca) → #faq
   Tag e título centralizados; 7 cartões no container de 1200px, numerados ("01 |")
   com botão circular de "+"; um aberto por vez (<details name>), o primeiro aberto.
   Sem CTA (o fechamento vem a seguir).
   ========================================================================== */
.section--faq {
  padding-block: var(--section-space-md);
}

.faq__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.faq__title {
  margin-top: var(--space-5);
  font-size: var(--text-title);
}

.faq__list {
  display: grid;
  gap: clamp(0.625rem, 0.4rem + 0.6vw, 1.1rem);
  width: 100%;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2.2rem);
  text-align: left;
}

/* linha de FAQ = .card--light pequeno (raio md); superfície e borda vêm de .card */
.faq__item {
  --card-radius: var(--radius-md);

  padding: clamp(0.9rem, 0.6rem + 0.9vw, 1.5rem) clamp(1.1rem, 0.6rem + 1.8vw, 3rem);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__number {
  margin-right: 0.1em;
}

/* Indicador circular de 40px, contorno hairline, com "+" (vira "−" quando aberto): mesmo tratamento dos demais ícones */
.faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  aspect-ratio: 1;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 2px;
  translate: -50% -50%;
  background-color: var(--color-text);
  transition: rotate var(--transition-base);
}

.faq__toggle::after {
  rotate: 90deg;
}

.faq__item[open] .faq__toggle::after {
  rotate: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .faq__item {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--motion-normal) var(--ease-out),
        content-visibility var(--motion-normal) allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }

    .faq__answer {
      opacity: 0;
      transition: opacity var(--motion-normal) var(--ease-soft);
    }

    .faq__item[open] .faq__answer {
      opacity: 1;
    }
  }
}

.faq__answer {
  max-width: 34em;
  margin-top: clamp(0.5rem, 0.3rem + 0.7vw, 1.1rem);
  font-size: var(--text-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-muted);
}


/* ==========================================================================
   SITE FOOTER
   Degradê escuro no container de 1200px: logo à esquerda; à direita o copyright (o ano vem do JS) e os links de Política de
   privacidade e Termo de adesão. Navegação, contatos, redes e endereço ficam de fora até haver dados reais (não inventar).
   ========================================================================== */
.site-footer {
  padding-block: var(--space-7);
  color: var(--color-text);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer__logo {
  width: clamp(10.5rem, 8rem + 6vw, 18rem);
  height: auto;
}

.site-footer__legal {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-align: right;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-5);
}

.site-footer__link {
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 0.2em;
  transition:
    color var(--motion-fast) var(--ease-soft),
    text-decoration-color var(--motion-fast) var(--ease-soft);
}

.site-footer__link:hover {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* celular: logo e textos empilhados, alinhados à esquerda */
@media (max-width: 47.99em) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .site-footer__legal {
    justify-items: start;
    text-align: left;
  }

  .site-footer__links {
    justify-content: flex-start;
  }
}

/* Sem JS o ano não aparece: o © fica só com o nome */
[data-year]:empty {
  display: none;
}