/* ============================================================
   NEE.IA — Componentes e Blocos
   Carrega DEPOIS de tokens.css e base.css.

   Organização:
   1. COMPONENTES reutilizáveis (botões, cards, selo...)
   2. Um bloco por seção, na ordem em que aparecem na página.
   Cada bloco mantém o seu CSS sob o próprio cabeçalho. Mobile-first:
   estilo base = mobile; @media (min-width: ...) adiciona o desktop.
   Breakpoints de referência: 768px (tablet) e 1024px (desktop).
   ============================================================ */

/* ============================================================
   0. OVERLAY GLOBAL — efeito de ruído
   Textura animada sutil sobre a página inteira.
   ============================================================ */
.noise {
  position: fixed;
  inset: 0;                 /* cobre a viewport toda (evita o scroll horizontal que 100vw causa) */
  z-index: 3;               /* acima do conteúdo e da barra-topo */
  opacity: 0.09;
  background-image: url("../img/ruido-animado.gif");
  background-repeat: repeat;
  pointer-events: none;     /* nunca bloqueia cliques */
  mix-blend-mode: plus-lighter;
}

/* ============================================================
   1. COMPONENTES
   ============================================================ */

/* --- Botão (pill) --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  padding: 1.25rem var(--espaco-6); /* 20px 32px */
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-regular);
  font-size: var(--fonte-body-lg); /* 16px */
  line-height: 1.5;
  text-align: center;
  border-radius: 8px;
  transition: background-color var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:hover { transform: scale(1.05); }
.botao:active { transform: translateY(1px); }

.botao--primario {
  background-color: var(--cor-terracota);
  color: var(--cor-linho);
  box-shadow: 0 0 20px -5px color-mix(in srgb, var(--cor-terracota) 50%, transparent);
  animation: pisca 1.5s infinite;
}
.botao--primario:hover {
  background-color: color-mix(in srgb, var(--cor-terracota) 88%, #000);
}
@keyframes pisca {
  70%  { box-shadow: 0 0 0 30px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.botao--secundario {
  background-color: transparent;
  color: var(--cor-texto);
  box-shadow: inset 0 0 0 1px currentColor;
}
.botao--secundario:hover {
  background-color: var(--cor-superficie);
}

/* altura cheia do botão no desktop */
@media (min-width: 1024px) {
  .botao { min-height: 70px; }
}

/* --- Divisor (estrela girando + linhas que cruzam a tela) --- */
.divisor {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;                  /* contém as linhas de 1000% (evita scroll horizontal) */
  padding-block: var(--espaco-7);    /* 48px de respiro */
}
.divisor--sem-respiro { padding-block: 0; }
.divisor__marca {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  padding-inline: 30px;              /* espaço entre o svg e o início das linhas */
}
.divisor__marca::before,
.divisor__marca::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1000%;
  height: 1px;
  background: var(--cor-terracota);
}
.divisor__marca::before { left: -1000%; }
.divisor__marca::after { right: -1000%; }
.divisor__marca svg {
  position: relative;                /* acima das linhas */
  display: block;
}

/* estrela girando lentamente */
.divisor #estrela {
  animation: girar 20s linear infinite;
  transform-origin: center center;
  transform-box: fill-box;           /* gira em torno do próprio centro */
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

/* --- Badge (pill pequeno de rótulo) --- */
.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 64px;
  border: 1px solid var(--cor-terracota);
  background: transparent;
  color: var(--cor-destaque);
  text-align: center;
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-sm);   /* 13px */
  font-weight: var(--peso-regular);
  line-height: 1.7;                  /* 170% -> 22.1px */
}

/* --- Frase de destaque (faixa com gradiente claro ao centro) ---
   Antes era .hero__frase; promovido a componente reutilizável.
   Largura flexível: por padrão ocupa 100% do pai. Cada bloco define
   max-width/alinhamento se precisar (ex.: o hero capa em 626px). */
.destaque-frase {
  width: 100%;
  text-align: center;
  padding: var(--espaco-2) var(--espaco-4); /* 8px 16px */
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--cor-branco) 50%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--cor-terracota), transparent) 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
/* quebra opcional (<br>) só vale no mobile */
@media (min-width: 767px) {
  .destaque-frase br { display: none; }
}

/* --- Scoop (recorte côncavo + seta animada; usado no topo de seções) --- */
.scoop {
  display: block;
  width: 307px;
  max-width: 100%;
  margin-inline: auto;        /* centraliza */
  line-height: 0;             /* remove o gap fantasma do inline */
}
.scoop svg {
  width: 100%;
  height: auto;
}
.scoop .scoop__seta {
  animation: mover-scoop 2s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mover-scoop {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(0); }
}

/* --- Marquee (faixa de texto rolando em loop contínuo) ---
   Duas cópias idênticas do grupo; o track anda de 0 a -50%, então
   quando uma cópia sai a outra já assumiu — loop sem buraco. */
.marquee {
  overflow: hidden;
  background: #f1ebe6;
  border-top: 1px solid var(--cor-terracota);
  border-bottom: 1px solid var(--cor-terracota);
  padding-block: 16px;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee__grupo {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;        /* mantém o espaçamento na emenda entre as cópias */
  flex-shrink: 0;
}
.marquee__item {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1.25rem;         /* 20px */
  line-height: 1.3;
  color: var(--cor-texto);
  white-space: nowrap;
}
.marquee__ponto {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cor-terracota);
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ============================================================
   2. BLOCOS (na ordem da página)
   ============================================================ */

/* ===================== BARRA TOPO (Eyebrow) ===================== */
.barra-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: var(--cor-terracota);
  /* sombra suave projetada para baixo (camadas vindas do Figma) */
  box-shadow:
    0 121px 34px 0 rgba(0, 0, 0, 0),
    0 77px 31px 0 rgba(0, 0, 0, 0.01),
    0 43px 26px 0 rgba(0, 0, 0, 0.05),
    0 19px 19px 0 rgba(0, 0, 0, 0.09),
    0 5px 11px 0 rgba(0, 0, 0, 0.1);
  position: relative; /* mantém a sombra acima do conteúdo seguinte */
  z-index: 2;
}
.barra-topo__texto {
  text-align: center;
  color: var(--cor-linho);
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-regular);
  line-height: 1.8;
  /* texto se ajusta sozinho: 14px (mobile) -> 15px (desktop) */
  font-size: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
}
.barra-topo__texto strong {
  font-weight: var(--peso-semibold);
  /* destaque: 15px (mobile) -> 16px (desktop) */
  font-size: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
}

/* ===================== HERO ===================== */
.bloco-hero {
  background-color: var(--cor-fundo);
  background-repeat: no-repeat;
  background-size: auto;   /* tamanho natural, não escala com a página */
  /* mobile (< 768px): imagem ancorada embaixo */
  background-image: url("../img/hero-mobile.webp");
  background-position: center bottom;
  padding-top: clamp(2rem, 1rem + 5vw, 50px);
  padding-bottom: 540px;   /* reserva o espaço da imagem mobile (484x540) embaixo */
}
/* tablet (768px a 1024px): imagem tablet, embaixo */
@media (min-width: 768px) and (max-width: 1024px) {
  .bloco-hero {
    background-image: url("../img/hero-tablet.webp");
    background-position: center bottom;
    padding-top: 30px;
    padding-bottom: 620px;   /* altura da imagem tablet (766x600) + respiro */
  }
  .hero__conteudo { gap: 30px; } /* logo -> headline mais perto no tablet */
  .hero__cta { max-width: 450px; margin-inline: auto; } /* botão até 450px no tablet */
}
/* wide (>= 1025px): imagem larga, topo */
@media (min-width: 1025px) {
  .bloco-hero {
    background-image: url("../img/hero-wide.webp");
    background-position: center top;
  }
}
.hero__grid {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-7);
}

/* --- coluna de conteúdo --- */
.hero__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;   /* tablet/mobile: tudo centralizado */
  text-align: center;
  gap: var(--espaco-6);  /* 32px */
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

/* marca (lockup completo: workshop + NEE.IA + tagline) */
.hero__marca {
  width: clamp(240px, 50vw, 320px);
  height: auto;
  max-width: 100%;
}

/* título + textos */
.hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);  /* 16px */
  width: 100%;
}
.hero__subtitulo {
  max-width: 626px;
  margin-inline: auto;   /* centralizado no mobile */
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}
.hero__subtitulo strong { font-weight: var(--peso-semibold); }

/* a frase em faixa virou o componente .destaque-frase (seção COMPONENTES);
   o hero só capa a largura em 626px e centraliza (no desktop volta à esquerda) */
.hero__frase {
  max-width: 626px;
  margin-inline: auto;
}

/* ação: CTA + benefícios */
.hero__acao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  width: 100%;
  max-width: 626px;
  margin-inline: auto;
  align-self: center;
}
.hero__cta { width: 100%; }
.hero__beneficios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__beneficio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fonte-body-sm); /* 13px */
  line-height: var(--lh-corpo-sm);
  color: var(--cor-texto);
}
.hero__icone {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* (a imagem da hero agora é o background da seção .bloco-hero, definido acima) */

/* ---------- Wide (>= 1025px): conteúdo à esquerda sobre a imagem ---------- */
@media (min-width: 1025px) {
  .bloco-hero {
    margin-top: -50px;
    padding-block: 0;          /* sem padding vertical no desktop */
    min-height: 793px;         /* altura natural da imagem wide (1440x793) */
    display: flex;
    align-items: center;
  }
  .hero__grid {
    align-items: flex-start;
  }
  .hero__conteudo {
    width: 688px;
    max-width: 100%;
    margin-inline: 0;
    margin-top: -70px;
    align-items: flex-start;
    text-align: left;
  }
  .hero__marca { width: 414px; } /* tamanho natural no desktop */
  .hero__subtitulo,
  .hero__frase,
  .hero__acao { margin-inline: 0; }
  .hero__acao {
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
  }
  .hero__cta { flex: 1; width: auto; }
  .hero__beneficios { flex-shrink: 0; align-items: flex-start; gap: 2px; }
}

/* ---------- Mobile (< 768px): ajustes finos ---------- */
@media (max-width: 767px) {
  .hero__marca { width: 300px; }
  .bloco-hero {
    padding-top: 20px;
    padding-bottom: 560px;   /* imagem mobile (540) + respiro */
  }
  .hero__conteudo { gap: 20px; }            /* logo -> headline */
  .barra-topo__texto,
  .hero__frase { line-height: 1.4; }
}

/* ===================== DORES ("pequeno mas terrível") ===================== */
.bloco-dores {
  margin-top: -50px;
  padding-block: 0 100px;     /* sem padding-top; 100px embaixo */
  text-align: center;
  position: relative;         /* ancora a linha conectora */
}
/* linha vertical conectora na base do bloco */
.bloco-dores::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translateX(-50%);
  width: 2px;
  height: 120px;
  background: var(--cor-terracota);
  z-index: 5;
}
.bloco-dores__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-6);       /* 32px entre título, lista e fecho */
}

/* lista de "dores" — caixinhas brancas */
.bloco-dores__lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-4);       /* 16px entre cards */
  width: 100%;
}
.bloco-dores__item {
  display: flex;
  align-items: flex-start;    /* mobile: ícone alinhado ao topo do texto */
  gap: var(--espaco-5);       /* 24px */
  width: 100%;
  max-width: 680px;
  padding: var(--espaco-4) var(--espaco-5);  /* 16px 24px */
  background: var(--cor-branco);
  border-radius: 8px;
  text-align: left;
  box-shadow:
    79px 37px 24px 0 rgba(212, 212, 212, 0.00),
    51px 24px 22px 0 rgba(212, 212, 212, 0.01),
    29px 13px 19px 0 rgba(212, 212, 212, 0.05),
    13px 6px 14px 0 rgba(212, 212, 212, 0.09),
    3px 1px 8px 0 rgba(212, 212, 212, 0.10);
}
.bloco-dores__icone {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.bloco-dores__texto {
  font-size: var(--fonte-body);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* frase de fechamento (texto de baixo): 22px no mobile, token h2 no desktop */
.bloco-dores__fecho {
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;   /* 22px (mobile) */
  line-height: 1.2;
  color: var(--cor-texto);
}
@media (min-width: 1024px) {
  .bloco-dores__item { align-items: center; } /* desktop: ícone centralizado */
  .bloco-dores__fecho { font-size: var(--fonte-h2); } /* 28px (token h2 28/120) */
}

/* ===================== CARDS DE PROVA (grid) ===================== */
.bloco-cards-prova {
  padding-block: 0 50px;      /* sem padding-top; 50px embaixo */
}
@media (max-width: 767px) {
  .bloco-cards-prova { padding-bottom: 0; } /* mobile: sem respiro embaixo */
}
/* caixa bege que envolve o bloco (1280px / 90% da tela) */
.bloco-cards-prova__caixa {
  position: relative;
  width: 90%;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);   /* 24px -> 48px */
  padding-top: 64px;
  border-radius: 24px;
  border: 1px solid var(--cor-branco);
  background: var(--cor-superficie);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);       /* 32px entre título, grid e fecho */
}
/* tracinho conector na base da caixa */
.bloco-cards-prova__caixa::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 1px;
  height: 50px;
  background: var(--cor-terracota);
  z-index: 4;
}
.bloco-cards-prova__titulo {
  text-align: center;
}

/* grid: 1 coluna no mobile, 2 colunas (50/50) no tablet+ */
.bloco-cards-prova__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .bloco-cards-prova__grid { grid-template-columns: 1fr 1fr; }
}

/* card individual */
.card-prova {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  border-radius: 8px;
  background: var(--cor-branco);
  border: 1px solid transparent;   /* reserva o 1px do hover, evita "pulo" */
  transition: 0.5s;
}
.card-prova:hover {
  border-color: var(--cor-branco);
  background: linear-gradient(180deg, var(--cor-branco) 0%, var(--cor-superficie) 100%);
  box-shadow:
    0 32px 9px 0 rgba(0, 0, 0, 0.00),
    0 20px 8px 0 rgba(0, 0, 0, 0.01),
    0 11px 7px 0 rgba(0, 0, 0, 0.05),
    0 5px 5px 0 rgba(0, 0, 0, 0.09),
    0 1px 3px 0 rgba(0, 0, 0, 0.10);
}
.card-prova__icone {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.card-prova__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);       /* 8px entre título e texto */
}
.card-prova__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);
  font-weight: var(--peso-medio);
  line-height: var(--lh-h3);
  color: var(--cor-destaque);
}
.card-prova__texto {
  font-size: var(--fonte-body);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* a frase de fechamento usa o componente .destaque-frase */

/* ===================== MANIFESTO (texto centralizado) ===================== */
.bloco-manifesto {
  padding-top: 0;             /* sem respiro no topo; mantém o bottom do .secao */
}
.bloco-manifesto__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-5);       /* 24px */
}
.bloco-manifesto__titulo {
  text-align: center;
}
.bloco-manifesto__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);       /* 16px entre parágrafos */
  width: 100%;
}
.bloco-manifesto__texto p {
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}
.bloco-manifesto__texto strong { font-weight: var(--peso-semibold); }

/* ===================== TEXTO + IMAGEM ===================== */
.bloco-texto-imagem {
  padding-block: 0;           /* o respiro/imagem é controlado pelo inner */
}
.bloco-texto-imagem__inner {
  max-width: 1065px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  display: flex;
  justify-content: center;    /* mobile/tablet: conteúdo centralizado */
  /* imagem de fundo (foto da Jaque) */
  background-repeat: no-repeat;
  background-size: auto;       /* tamanho natural, não escala */
  /* mobile (< 768px): foto embaixo, ao centro */
  background-image: url("../img/texto-imagem-mobile.webp");
  background-position: center bottom;
  padding-top: 50px;
  padding-bottom: 406px;       /* altura da imagem mobile (368x406) */
}
.bloco-texto-imagem__conteudo {
  width: 522px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* intro: título + texto */
.bloco-texto-imagem__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bloco-texto-imagem__texto {
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* frase de destaque entre os cards */
.bloco-texto-imagem__destaque {
  max-width: 401px;
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);
  font-weight: var(--peso-medio);
  line-height: var(--lh-h3);
  color: var(--cor-texto);
}

/* card branco com ícone (seta) */
.ti-card {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-5);       /* 24px */
  padding: 24px;
  border-radius: 8px;
  background: var(--cor-branco);
}
.ti-card__icone {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.ti-card__conteudo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ti-card__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);
  font-weight: var(--peso-medio);
  line-height: var(--lh-h3);
  color: var(--cor-destaque);
}
.ti-card__texto {
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* mobile: título e destaque centralizados */
@media (max-width: 767px) {
  .bloco-texto-imagem__inner { padding-top: 20px; }
  .bloco-texto-imagem__titulo,
  .bloco-texto-imagem__destaque {
    text-align: center;
  }
  .bloco-texto-imagem__destaque { margin-inline: auto; }
}

/* tablet (768px a 1024px): foto tablet embaixo, ao centro */
@media (min-width: 768px) and (max-width: 1024px) {
  .bloco-texto-imagem__inner {
    background-image: url("../img/texto-imagem-tablet.webp");
    background-position: center bottom;
    padding-bottom: 526px;     /* altura da imagem tablet (768x526) */
  }
}

/* wide (>= 1025px): foto larga no topo/centro, conteúdo à direita */
@media (min-width: 1025px) {
  .bloco-texto-imagem__inner {
    background-image: url("../img/texto-imagem-wide.webp");
    background-position: center top;
    justify-content: flex-end;
    min-height: 814px;          /* altura da imagem wide (1440x814), aparece inteira */
    padding-top: 50px;
    padding-bottom: 100px;
  }
  .bloco-texto-imagem__titulo { text-align: center; }
}

/* ===================== GRID DE 3 COLUNAS (vídeos) ===================== */
.bloco-grid-3 {
  padding-top: 0;             /* scoop encosta no topo */
  background: var(--cor-superficie);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-7);       /* scoop -> conteúdo */
}
.bloco-grid-3__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-7);       /* intro -> grid -> fecho */
  width: 100%;
}

/* intro: badge + título + texto */
.bloco-grid-3__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-4);
  text-align: center;
  max-width: 720px;
}
.bloco-grid-3__titulo {
  max-width: 646px;           /* título não passa de 646px */
}
.bloco-grid-3__texto {
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}
/* a quebra do texto de intro só vale no mobile */
@media (min-width: 768px) {
  .bloco-grid-3__texto br { display: none; }
}

/* grid: 1 coluna no mobile, 3 colunas (33%) no desktop */
.bloco-grid-3__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-6);
  width: 100%;
}
@media (min-width: 1024px) {
  .bloco-grid-3__grid { grid-template-columns: repeat(3, 1fr); }
}

/* card de vídeo — a CAIXA leva a cor + o border-radius */
.grid-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;             /* o vídeo respeita o radius do topo */
  background: var(--cor-linho); /* #FAF6F4 */
}
.grid-card__video {
  width: 100%;
  aspect-ratio: 16 / 9;         /* altura proporcional à largura */
  background: var(--cor-branco);
}
.grid-card__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* conteúdo (título + texto) — o TEXTO leva o padding */
.grid-card__conteudo {
  display: flex;
  flex-direction: column;
  gap: 10px;                  /* título -> texto */
  padding: 16px;              /* mobile */
}
@media (min-width: 1024px) {
  .grid-card__conteudo { padding: 32px; } /* desktop */
}
.grid-card__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);
  font-weight: var(--peso-medio);
  line-height: var(--lh-h3);
  color: var(--cor-destaque);
  text-align: center;
}
.grid-card__texto {
  font-size: var(--fonte-body);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* fecho: texto + frase de destaque */
.bloco-grid-3__fecho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-5);
  width: 100%;
}
.bloco-grid-3__texto-final {
  text-align: center;
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* ===================== TIMELINE (6 blocos) ===================== */
.bloco-timeline {
  position: relative;         /* ancora o gradiente de rodapé */
}
/* fade areia no rodapé da seção (desvanece antes do marquee) */
.bloco-timeline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 415px;
  background: linear-gradient(180deg, rgba(243, 238, 234, 0.00) 0%, #f3eeea 100%);
  pointer-events: none;       /* nunca bloqueia cliques */
  z-index: -1;                /* atrás dos cards (fundo) */
}
.bloco-timeline__inner {
  max-width: 846px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;                  /* intro -> lista */
}
.bloco-timeline__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  text-align: center;
}
.bloco-timeline__titulo { max-width: 680px; }
.bloco-timeline__texto {
  max-width: 428px;
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* lista de cards (coluna conectada) */
.bloco-timeline__lista {
  display: flex;
  flex-direction: column;
  gap: 47px;                  /* espaço entre cards (onde vai o conector) */
  width: 100%;
  max-width: 639px;
}

/* card */
.timeline-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-2);       /* 8px */
  padding: 32px 24px 24px;    /* pt 32 / px 24 / pb 24 */
  border-radius: 8px;
  background: var(--cor-branco);
  text-align: center;
  box-shadow:
    79px 37px 12px rgba(212, 212, 212, 0.00),
    51px 24px 11px rgba(212, 212, 212, 0.01),
    29px 13px 9.5px rgba(212, 212, 212, 0.05),
    13px 6px 7px rgba(212, 212, 212, 0.09),
    3px 1px 4px rgba(212, 212, 212, 0.10);
}
/* linha terracota no rodapé (40% da largura, centralizada) */
.timeline-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 1px;
  background: var(--cor-destaque);
}
/* conector vertical entre os cards (do topo deste até o card anterior) */
.timeline-card:not(:first-child)::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 47px;
  background: var(--cor-destaque);
}
/* ícone circular (SVG completo) sobreposto no topo */
.timeline-card__icone {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
}
.timeline-card__eyebrow {
  font-size: var(--fonte-body-sm);   /* 13px */
  line-height: var(--lh-corpo-sm);
  color: var(--cor-destaque);
}
.timeline-card__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);
  font-weight: var(--peso-medio);
  line-height: var(--lh-h3);
  color: var(--cor-texto);
}
.timeline-card__texto {
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* ===================== MÉTRICAS / FAIXA DE NÚMEROS ===================== */
.bloco-metricas__inner {
  max-width: 1104px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}
.bloco-metricas__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  text-align: center;
}
.bloco-metricas__titulo { max-width: 680px; }
.bloco-metricas__texto {
  max-width: 628px;
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}
.bloco-metricas__texto strong { font-weight: var(--peso-semibold); }

/* caixa branca com as métricas */
.bloco-metricas__caixa {
  width: 100%;
  max-width: 1064px;
  display: flex;
  flex-direction: column;     /* mobile: métricas empilhadas */
  align-items: center;
  gap: 28px;
  padding: 33px;
  border-radius: 8px;
  border: 1px solid var(--cor-terracota);
  background: var(--cor-branco);
  box-shadow:
    79px 37px 24px 0 rgba(212, 212, 212, 0.00),
    51px 24px 22px 0 rgba(212, 212, 212, 0.01),
    29px 13px 19px 0 rgba(212, 212, 212, 0.05),
    13px 6px 14px 0 rgba(212, 212, 212, 0.09),
    3px 1px 8px 0 rgba(212, 212, 212, 0.10);
}
.metrica {
  width: 100%;               /* mobile: número à esquerda, texto (2 linhas) à direita */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.metrica__numero {
  font-family: var(--fonte-titulo);
  font-size: 36px;
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--cor-texto);
}
.metrica__label {
  font-size: var(--fonte-body-lg);  /* 16px */
  line-height: var(--lh-corpo-sm);
  color: var(--cor-texto);
  text-align: left;                 /* mobile: texto à direita do número */
}
/* divisor — mobile: linha HORIZONTAL 100% + tracinho terracota no centro */
.metrica__sep {
  position: relative;
  width: 100%;
  height: 1px;
  background: #e6e5e4;
}
.metrica__sep::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 3px;
  background: var(--cor-terracota);
}

/* textos de fechamento */
.bloco-metricas__fecho-texto {
  max-width: 628px;
  text-align: center;
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}
.bloco-metricas__destaque { max-width: 680px; }

/* desktop: 5 métricas em linha com divisores verticais */
@media (min-width: 1024px) {
  .bloco-metricas__caixa {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }
  .metrica {
    width: auto;
    flex: 1 1 0;
    flex-direction: column;   /* desktop: número em cima, texto embaixo */
    gap: var(--espaco-2);
  }
  .metrica__label { text-align: center; }
  /* divisor volta a ser vertical (linha linho + tracinho terracota vertical) */
  .metrica__sep {
    width: 1px;
    height: auto;
    align-self: stretch;
    background: var(--cor-linho);
  }
  .metrica__sep::before {
    width: 3px;
    height: 21px;
  }
}

/* ===================== BIO DA AUTORA ===================== */
/* TODO */

/* ===================== PRA QUEM É / NÃO É ===================== */
/* TODO */

/* ===================== OFERTA / PREÇO ===================== */
.bloco-oferta {
  position: relative;          /* contexto para a faixa de fundo */
  padding-block: 50px;
  padding-inline: var(--gutter);
}
/* faixa de fundo areia: 60% de altura x 100% de largura, centralizada, atrás de tudo */
.bloco-oferta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 60%;
  background: var(--cor-areia);
  z-index: -1;
}
.bloco-oferta__inner {
  position: relative;          /* garante o conteúdo acima da faixa */
}
/* card branco da oferta */
.bloco-oferta__card {
  width: 1064px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  background: var(--cor-branco);
  border-radius: 16px;         /* mobile */
  padding: 16px;               /* mobile */
}
@media (min-width: 768px) {
  .bloco-oferta__card {
    border-radius: 48px;
    padding: 48px;
  }
}
/* título "A oferta" */
.bloco-oferta__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h1);        /* 28 -> 38px */
  font-weight: var(--peso-regular);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  text-align: center;
}
/* botão da oferta */
.bloco-oferta__cta {
  width: 100%;
  max-width: 540px;
}
/* caixa do preço (superfície areia) */
.bloco-oferta__preco {
  align-self: stretch;
  display: flex;
  flex-direction: column;        /* mobile: tudo empilhado */
  align-items: stretch;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: var(--cor-superficie);
}
/* No mobile as duas colunas "somem" (display:contents) e os blocos são
   reordenados via order direto no container. */
.oferta-esq,
.oferta-dir { display: contents; }
.oferta-divisor { display: none; }

.oferta-logo        { order: 1; align-self: center; }
.oferta-titulo      { order: 2; }
.oferta-lista       { order: 3; }
.oferta-preco       { order: 4; }
.oferta-beneficios  { order: 5; }
.oferta-bonus       { order: 6; }

/* --- Logo da oferta (WORKSHOP + NEE.IA) --- */
.oferta-logo {
  width: 177px;
  max-width: 100%;
  height: auto;
}

/* --- Faixa do preço (usa .destaque-frase) --- */
.oferta-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.oferta-preco__valor {
  font-family: var(--fonte-corpo);
  font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);   /* 44 -> 60px */
  line-height: 1.1;
  letter-spacing: -0.016em;
}
.oferta-preco__parcelas {
  font-size: var(--fonte-body-lg);   /* 16px */
  line-height: 1.8;
}

/* --- Benefícios --- */
.oferta-beneficios {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oferta-beneficio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-sm);   /* 13px */
  line-height: 1.7;
  color: var(--cor-texto);
}
.oferta-beneficio img { width: 20px; height: 20px; flex-shrink: 0; }

/* --- Bônus --- */
.oferta-bonus {
  padding: 8px 16px;
  background: #fafafa;
  text-align: center;
}
.oferta-bonus p {
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);   /* 16px */
  line-height: 1.8;
  color: var(--cor-texto);
}
.oferta-bonus strong { font-weight: var(--peso-semibold); }

/* --- Entregáveis (direita) --- */
.oferta-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);        /* 20px */
  font-weight: var(--peso-medio);
  line-height: 1.3;
  color: var(--cor-terracota);
  text-align: center;                /* mobile centralizado */
}
.oferta-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oferta-item {
  display: flex;
  align-items: flex-start;           /* seta alinhada com a 1ª linha (marcador da lista) */
  gap: 20px;
  padding-inline: 8px;
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);   /* 16px */
  line-height: 1.8;
  color: var(--cor-texto);
}
.oferta-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.4em;                 /* centra a seta na 1ª linha do texto */
}
.oferta-item__texto { flex: 1; min-width: 0; }
.oferta-item b { font-weight: var(--peso-semibold); }

/* desktop: duas colunas (oferta | linha | entregáveis) */
@media (min-width: 1024px) {
  .bloco-oferta__preco {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px;
  }
  .oferta-esq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
    width: 413px;
    flex-shrink: 0;
  }
  .oferta-dir {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .oferta-divisor {
    display: block;
    align-self: stretch;
    width: 1px;
    background: var(--cor-terracota);
  }
  .oferta-titulo { text-align: left; }
}
/* caixa final (linho) — "Por que tão barato?" */
.bloco-oferta__final {
  align-self: stretch;
  display: flex;
  flex-direction: column;      /* mobile: título e texto empilhados */
  align-items: stretch;
  gap: 32px;
  padding: 24px;
  border-radius: 16px;
  background: var(--cor-linho);
}
.bloco-oferta__final-titulo {
  width: 100%;                 /* mobile: largura cheia */
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h3);  /* 20px */
  font-weight: var(--peso-medio);
  line-height: 1.3;
  color: var(--cor-terracota);
}
.bloco-oferta__final-texto {
  width: 100%;                 /* mobile: largura cheia */
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);  /* 16px */
  line-height: 1.8;
  color: var(--cor-texto);
}
/* tablet+: título estreito à esquerda, texto preenchendo o resto */
@media (min-width: 768px) {
  .bloco-oferta__final {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .bloco-oferta__final-titulo {
    width: 102px;
    flex-shrink: 0;
  }
  .bloco-oferta__final-texto {
    flex: 1;
  }
}

/* ===================== GARANTIA (selo) ===================== */
.bloco-garantia {
  padding-block: 50px;
  padding-inline: var(--gutter);
}
.bloco-garantia__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;     /* mobile: selo em cima */
  align-items: center;
  gap: 24px;
}
.bloco-garantia__selo {
  width: min(296px, 80%);     /* mobile: até 80% da largura da tela */
  height: auto;
  flex-shrink: 0;
}
.bloco-garantia__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;         /* mobile: centralizado sob o selo */
}
.bloco-garantia__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h1);        /* 28 -> 38px */
  font-weight: var(--peso-regular);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
}
.bloco-garantia__corpo {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;                /* "linha em branco" entre os parágrafos */
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);   /* 16px */
  line-height: 1.8;
  color: var(--cor-texto);
}
.bloco-garantia__corpo strong { font-weight: var(--peso-semibold); }

/* tablet+: selo do lado, texto adapta a largura (sem trocar de lugar) */
@media (min-width: 768px) {
  .bloco-garantia__inner {
    flex-direction: row;
    justify-content: center;
  }
  .bloco-garantia__selo { width: 296px; }
  .bloco-garantia__texto {
    flex: 1 1 0;
    max-width: 521px;
    text-align: left;
  }
}

/* ===================== FAQ (accordion) ===================== */
.bloco-faq {
  padding-top: 50px;
  padding-bottom: 100px;
  padding-inline: var(--gutter);
}
.bloco-faq__inner {
  max-width: 740px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.bloco-faq__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h1);        /* 28 -> 38px */
  font-weight: var(--peso-regular);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
  text-align: center;
}
.bloco-faq__lista {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Item (card branco que abre/fecha) --- */
.faq-item {
  background: var(--cor-branco);
  border-radius: 16px;
  overflow: hidden;                  /* clipa os cantos arredondados */
}
.faq-item__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 32px;
  text-align: left;
  cursor: pointer;
}
.faq-item__texto {
  flex: 1;
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);   /* 16px */
  font-weight: var(--peso-semibold);
  line-height: 1.8;
  color: var(--cor-texto);
}
.faq-item__icone {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item__chevron { width: 22px; height: auto; }
.faq-item__chevron--aberto { display: none; }
.faq-item.aberto .faq-item__chevron--fechado { display: none; }
.faq-item.aberto .faq-item__chevron--aberto { display: block; }

/* resposta: anima a altura via grid-template-rows (0fr -> 1fr) */
.faq-item__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item.aberto .faq-item__resposta {
  grid-template-rows: 1fr;
}
.faq-item__resposta-inner {
  overflow: hidden;
}
.faq-item__resposta p {
  padding: 0 32px 32px;              /* o respiro de cima vem do padding do header */
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body);      /* 15px */
  font-weight: var(--peso-regular);
  line-height: 1.8;
  color: var(--cor-texto);
}

/* ===================== CTA FINAL ===================== */
.bloco-cta-final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;                 /* diviser -> badge (mobile/tablet) */
  padding-top: 0;            /* o diviser encosta no topo */
  padding-bottom: 50px;      /* mobile/tablet */
  background: var(--cor-superficie);
}

/* Diviser: scoop branco + seta animada, centralizado no topo */
.bloco-cta-final__diviser {
  display: block;
  width: 307px;
  max-width: 100%;
  line-height: 0;            /* remove gap fantasma do inline */
}
.bloco-cta-final__diviser svg {
  width: 100%;
  height: unset;
}
.bloco-cta-final__diviser #seta {
  animation: mover 2s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mover {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(0px); }
}

.bloco-cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

/* Texto */
.bloco-cta-final__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  max-width: 846px;
  text-align: center;
}
.bloco-cta-final__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bloco-cta-final__titulo {
  max-width: 646px;
  font-family: var(--fonte-titulo);
  font-size: var(--fonte-h1);        /* 28 -> 38px */
  font-weight: var(--peso-regular);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cor-texto);
}
.bloco-cta-final__sub {
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);   /* 16px */
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}

/* Ação: botão + benefícios */
.bloco-cta-final__acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: 100%;
}
.bloco-cta-final__cta {
  width: 100%;
  max-width: 532px;
}
.bloco-cta-final__beneficios {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bloco-cta-final__beneficio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fonte-body-sm);   /* 13px */
  line-height: var(--lh-corpo-sm);
  color: var(--cor-texto);
  white-space: nowrap;               /* cada benefício em uma linha só */
}
.bloco-cta-final__icone {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* tablet+: benefícios em linha (paddings seguem os do mobile) */
@media (min-width: 768px) {
  .bloco-cta-final__beneficios {
    flex-direction: row;
    gap: 26px;
  }
}
/* desktop: mais respiro (diviser -> badge e embaixo) */
@media (min-width: 1024px) {
  .bloco-cta-final {
    gap: 50px;
    padding-bottom: 100px;
  }
}

/* ===================== RODAPÉ ===================== */
.rodape {
  padding-block: 50px;
}
.rodape__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.rodape__logo {
  width: 108px;
  height: auto;
}

/* Ícones sociais (caixas terracota, ícone branco) */
.rodape__sociais {
  display: flex;
  gap: 7px;
}
.rodape__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 7px;
  background: var(--cor-branco);
  transition: background-color var(--transicao);
}
.rodape__social:hover {
  background: var(--cor-superficie);
}
.rodape__social img {
  width: 22px;
  height: 22px;
}

/* Linha legal / créditos */
.rodape__legal {
  color: var(--cor-carvao);
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-sm);
  font-weight: var(--peso-regular);
  line-height: 1.7;
}
.rodape__legal a {
  text-decoration: none;
  transition: color var(--transicao);
}
.rodape__legal a:hover {
  color: var(--cor-terracota);
}


/* Títulos de seção: semântica h2, visual de h1 */
.bloco-dores__titulo,
.bloco-cards-prova__titulo,
.bloco-manifesto__titulo,
.bloco-grid-3__titulo,
.bloco-timeline__titulo,
.bloco-metricas__titulo {
  font-size: var(--fonte-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}




/* ===================== BIO ===================== */
.bloco-bio {
  background-color: var(--cor-fundo);
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url("../img/bio-tablet.webp");
  background-position: center bottom;
  padding-top: 50px;
  padding-bottom: 518px;            /* usa a imagem do tablet também no mobile */
}
@media (min-width: 768px) and (max-width: 1024px) {
  .bloco-bio {
    background-image: url("../img/bio-tablet.webp");
    background-position: center bottom;
    padding-bottom: 518px;          /* altura da imagem tablet */
  }
}
@media (min-width: 1025px) {
  .bloco-bio {
    background-image: url("../img/bio-wide.webp");
    background-position: center top;
    min-height: 1136px;             /* altura da imagem wide */
    padding-block: 0;               /* sem o padding-bottom do mobile */
    display: flex;
    align-items: center;            /* caixa centralizada na vertical */
  }
}
.bio__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bio__caixa {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;              /* mobile/tablet: centralizada */
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: 16px;
  background-color: var(--cor-linho);
}
@media (min-width: 1025px) {
  .bio__caixa { margin-inline: 0; }  /* desktop: à esquerda */
}
.bio__texto {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bio__titulo {                       /* visual de h1 */
  font-size: var(--fonte-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.bio__paragrafos {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: var(--cor-texto);
}
.bio__paragrafos strong { font-weight: var(--peso-semibold); }
.bio__destaque {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-medio);
  font-size: var(--fonte-h3);
  line-height: var(--lh-h3);
  color: var(--cor-destaque);
}
.bio__verticais {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bio__vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: var(--cor-superficie);
}
.bio__vertical-logo { height: 28px; width: auto; flex-shrink: 0; }
.bio__vertical-sep { width: 1px; height: 28px; background-color: #171717; flex-shrink: 0; }
.bio__vertical-texto {
  font-family: var(--fonte-corpo);
  font-size: var(--fonte-body-lg);
  line-height: 1.3;
  color: var(--cor-texto);
}


/* ===================== PRA QUEM É ===================== */
.bloco-pra-quem { padding-block: 50px; }
.pra-quem__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.pra-quem__titulo {                  /* visual de h1 */
  font-size: var(--fonte-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  text-align: center;
}
.pra-quem__colunas {
  display: flex;
  flex-direction: column;            /* mobile/tablet: empilhado */
  gap: 20px;
  width: 100%;
}
.pra-quem__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 8px;
  box-shadow:
    27.73px 12.43px 9.08px rgba(212, 212, 212, 0.05),
    12.43px 5.74px 6.69px rgba(212, 212, 212, 0.09),
    2.87px 0.96px 3.83px rgba(212, 212, 212, 0.10);
}
.pra-quem__card--sim {
  background: var(--cor-branco);
  border: 1px solid var(--cor-terracota);
}
.pra-quem__card--nao {
  background: #f4f3f2;
}
.pra-quem__card-titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-medio);
  font-size: var(--fonte-h3);
  line-height: var(--lh-h3);
  color: #4b4a48;
  text-align: center;
}
.pra-quem__lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pra-quem__item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pra-quem__icone { width: 24px; height: 24px; flex-shrink: 0; }
.pra-quem__item p {
  font-size: var(--fonte-body-lg);
  line-height: var(--lh-corpo);
  color: #4b4a48;
}
/* desktop: 2 colunas lado a lado, mesma altura */
@media (min-width: 1024px) {
  .pra-quem__colunas { flex-direction: row; align-items: stretch; }
  .pra-quem__titulo { max-width: 680px; }
}


/* mobile: bio sem padding-top */
@media (max-width: 767px) {
  .bloco-bio { padding-top: 0; }
}


/* mobile: pra-quem sem padding-top */
@media (max-width: 767px) {
  .bloco-pra-quem { padding-top: 0; }
}


/* mobile: garantia com fundo areia, selo menor e abaixo do texto */
@media (max-width: 767px) {
  .bloco-garantia {
    background-color: var(--cor-superficie);
    padding-bottom: 0;
    margin-bottom: 100px;
  }
  .bloco-garantia__inner { flex-direction: column-reverse; }  /* texto em cima, selo embaixo */
  .bloco-garantia__selo {
    width: 70%;                       /* ~70% da largura no mobile */
    margin-bottom: -100px;            /* selo desce, vazando para baixo */
  }
}


/* mobile: faq com 50px em cima e embaixo */
@media (max-width: 767px) {
  .bloco-faq { padding-block: 50px; }
}


/* mobile: oferta sem padding-top */
@media (max-width: 767px) {
  .bloco-oferta { padding-top: 0; }
}


/* mobile: respiro no topo do conteúdo da pra-quem */
@media (max-width: 767px) {
  .pra-quem__inner { padding-top: 30px; }
}


/* desktop: ícones das listas voltam a 30px (24px no mobile/tablet) */
@media (min-width: 1024px) {
  .card-prova__icone,
  .ti-card__icone {
    width: 30px;
    height: 30px;
  }
}


/* métricas: sem padding embaixo */
.bloco-metricas { padding-bottom: 0; }

/* tablet e mobile: todos os títulos h2/h3 centralizados */
@media (max-width: 1024px) {
  h2, h3 { text-align: center; }
}