/* ==========================================================================
   PAGES / HOME — Introdução Alimentar sem Confusão
   Seções da landing, na ordem em que aparecem no HTML.
   ========================================================================== */

/* ==========================================================================
   Seção 01 — Hero
   ========================================================================== */
.hero-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6); /* 32px — "separação de blocos": selo, título,
    subtítulo e CTA formam um único bloco de abertura */
  text-align: center;
}

.hero-alimentar__badge {
  display: block;
  width: 100%;
  height: 40px;
  object-fit: contain; /* impede distorcer o wordmark — width:100%
    sozinho esticaria as letras/setas do SVG de forma desproporcional
    sempre que o container for mais largo que a proporção original */
}

.hero-alimentar__title {
  font-weight: var(--weight-black);
  color: var(--text-black);
}

/* "Pré-diabetes" riscado — o status que a pessoa está deixando pra trás.
   Degradê vermelho (não o vermelho→azul de marca — aqui é só tons de
   vermelho, pra reforçar "isso é o problema"). "Normal" (resto do título)
   fica na cor padrão do texto, sem destaque — é só .hero-alimentar__title
   mesmo, sem span/classe própria. */
.hero-alimentar__title-strike {
  background: linear-gradient(90deg, #D91425 0%, #E76B76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--brand-primary);
}

.hero-alimentar__subtitle,
.hero-alimentar__outcome {
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
}

.hero-alimentar__subtitle strong,
.hero-alimentar__outcome strong {
  color: var(--text-black);
}

.hero-alimentar__status-img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-default);
}

@media (min-width: 1024px) {
  .hero-alimentar__status-img {
    max-width: 504px; /* +20% sobre 420px, pra igualar visualmente ao CTA
      (que também cresce/vira width:auto só a partir de 1024px). */
  }
}

.hero-alimentar__cta {
  width: 100%;
}

@media (min-width: 1024px) {
  .hero-alimentar__cta {
    width: auto;
  }
}

/* ==========================================================================
   Seção 02 — Prova de autoridade
   Mesma estrutura visual da Seção 02 do Nutrevocê (foto full-bleed no
   mobile com selo flutuante + bloco de texto), sem prints de post/
   Instagram e sem número de alcance/salvamentos — troca por texto de
   autoridade real, a pedido.
   ========================================================================== */
.social-proof-alimentar__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 32px — "separação de blocos": foto e texto são
    blocos distintos */
}

@media (min-width: 1024px) {
  .social-proof-alimentar__content {
    flex-direction: row;
    align-items: center;
    gap: var(--space-7); /* 48px */
  }
}

/* Foto + etiqueta — mesmo componente exato do .sou-bruna__photo-wrap da
   Rótulo Simples (assets/css/pages/rotulo-simples.css): sem full-bleed,
   aspect-ratio fixo com moldura branca, tag "#FamíliadaBCR ♥" sobre a
   borda inferior. */
.social-proof-alimentar__photo-wrap {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .social-proof-alimentar__photo-wrap {
    flex: 1;
    min-width: 0;
  }
}

.social-proof-alimentar__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-default);
  border: 5px solid var(--text-white);
  object-fit: cover;
  object-position: bottom;
  display: block;
}

/* Selo "Nutricionista / CRN.../ Mãe & Esposa" — cópia exata do
   .hero__visual-badge da Rótulo Simples (glass sobre a foto). */
.social-proof-alimentar__badge {
  position: absolute;
  right: 5%;
  bottom: 10%;
  max-width: 150px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0 10px 10px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-black);
  text-align: left;
}

.social-proof-alimentar__badge strong {
  font-weight: 700;
}

@media (min-width: 768px) {
  .social-proof-alimentar__badge {
    right: 10%;
    max-width: 190px;
    padding: 12px 16px;
    font-size: 15px;
  }
}

@media (min-width: 1024px) {
  .social-proof-alimentar__badge {
    max-width: 220px;
    padding: 14px 18px;
    font-size: 18px;
  }
}

.social-proof-alimentar__tag {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: var(--radius-default);
  background: var(--gradient-brand);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  color: var(--text-white);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 16px;
  white-space: nowrap;
}

.social-proof-alimentar__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 24px — os 2 parágrafos são um único bloco de texto coeso */
  text-align: left;
}

@media (min-width: 1024px) {
  .social-proof-alimentar__body {
    flex: 1;
    min-width: 0;
  }
}

.social-proof-alimentar__body p {
  color: var(--text-black);
}

/* Citação em destaque — card próprio (não só itálico correndo no texto),
   azul #7DACE0 do design system (mesmo tom do stop azul de --gradient-brand,
   que ainda não tinha virado token de fundo/borda sozinho). */
.social-proof-alimentar__memory {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-black);
  background: #EAF2FB;
  border: 1px solid #7DACE0;
  border-radius: var(--radius-default);
  padding: var(--space-5);
}

.social-proof-alimentar__memory strong {
  color: var(--text-black);
}

.social-proof-alimentar__lead {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(20px, 13px + 2.13vw, 22px);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .social-proof-alimentar__lead {
    font-size: 24px;
  }
}

/* ==========================================================================
   Seção 06 — Mapa do método / Roteiro de 21 Dias
   Fundo branco de propósito, pra contrastar com o --bg-primary (off-white)
   do resto da página — pedido explícito, não é token errado. Timeline de
   5 passos: empilhada no mobile, em linha com trilho conectando os ícones
   a partir de 768px.
   ========================================================================== */
.roteiro21-alimentar {
  background: var(--text-white);
}

.roteiro21-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  text-align: center;
}

.roteiro21-alimentar__eyebrow {
  width: 100%;
  color: var(--brand-secondary);
  font-weight: var(--weight-bold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.roteiro21-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.roteiro21-alimentar__subtitle {
  width: 100%;
  color: var(--neutral-500);
}

.roteiro21-alimentar__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-7); /* 48px — passos empilhados precisam de mais respiro
    que itens de lista comuns, cada um carrega ícone+rótulo+título+texto */
  width: 100%;
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .roteiro21-alimentar__steps {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  /* Trilho contínuo ligando o centro do 1º ao centro do último ícone — com
     5 itens de largura igual (flex:1), o centro de cada ícone cai em
     10%/30%/50%/70%/90% do container, então 10%/10% de inset alcança
     exatamente do 1º ao 5º centro, qualquer que seja a largura real. */
  .roteiro21-alimentar__steps::before {
    content: '';
    position: absolute;
    top: 32px; /* metade dos 64px do ícone — mesma altura do centro dele */
    left: 10%;
    right: 10%;
    height: 2px;
    background: #C7DBF2;
    z-index: 0;
  }
}

.roteiro21-alimentar__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2); /* 8px — ícone/rótulo/título/texto do mesmo passo */
}

@media (min-width: 768px) {
  .roteiro21-alimentar__step {
    flex: 1;
    padding-inline: var(--space-2);
  }
}

.roteiro21-alimentar__step-icon {
  position: relative; /* fica acima do trilho (z-index) */
  z-index: 1;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EAF2FB;
  border: 1px solid #7DACE0;
  font-size: 26px;
}

.roteiro21-alimentar__step-number {
  color: var(--brand-primary);
  font-weight: var(--weight-black);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.roteiro21-alimentar__step-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--text-black);
}

.roteiro21-alimentar__step-text {
  font-size: 14px;
  color: var(--neutral-500);
}

/* ==========================================================================
   Seção 02 — Espelho da dor
   Narrativa em texto corrido (mesmo ritmo de leitura de parágrafo dos
   depoimentos), com dois componentes de apoio: as 3 "perguntas de medo"
   (cards curtos ícone+citação) e o par de espelho (a pessoa que sentiu medo
   x a que escolheu ignorar). Estrutura nova, sem equivalente no Nutrevocê.
   ========================================================================== */
.pain-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  text-align: center;
}

.pain-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.pain-alimentar__content > p {
  width: 100%;
  color: var(--text-black);
  text-align: left;
}

.pain-alimentar__intro strong {
  color: var(--brand-primary);
}

.pain-alimentar__quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px — "padrão entre elementos", itens do mesmo tipo */
  width: 100%;
}

@media (min-width: 768px) {
  .pain-alimentar__quotes {
    flex-direction: row;
  }
}

.pain-alimentar__quote {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* 12px — ícone/texto relacionados */
  width: 100%;
  padding: 16px 20px;
  background: var(--text-white);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 16px -2px rgba(23, 36, 46, 0.08);
  text-align: left;
}

.pain-alimentar__quote-icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}

.pain-alimentar__quote-text {
  font-style: italic;
  color: var(--neutral-500);
}

.pain-alimentar__mirror {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px — "padrão entre elementos", cards do mesmo tipo */
  width: 100%;
}

@media (min-width: 768px) {
  .pain-alimentar__mirror {
    flex-direction: row;
  }
}

.pain-alimentar__mirror-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px — ícone/texto relacionados */
  width: 100%;
  padding: 20px;
  background: var(--text-white);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 16px -2px rgba(23, 36, 46, 0.08);
  text-align: left;
}

.pain-alimentar__mirror-icon {
  font-size: 28px;
  line-height: 1;
  align-self: flex-start; /* sem isso, o flex-column estica o ícone pra
    100% da largura do card (default align-items:stretch) */
}

.pain-alimentar__mirror-text {
  color: var(--neutral-500);
}

.pain-alimentar__closing {
  width: 100%;
  text-align: center;
  color: var(--text-black);
}

/* ==========================================================================
   Seção 07 — O que você recebe
   2 cards (badge + título + texto), mesma estrutura de card do
   deliverables-nutrevoce, mas em grid simples — sem carrossel/scroll
   porque só há 2 itens, cabem lado a lado sem precisar rolar.
   ========================================================================== */
.deliverables-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  text-align: center;
}

.deliverables-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.deliverables-alimentar__intro {
  width: 100%;
  color: var(--neutral-500);
}

/* Lista de entregáveis — card horizontal (mockup quadrado + texto), mesmo
   card branco/sombra que o resto do site usa (ver padrão em
   science-alimentar/offer-alimentar). Substitui o carrossel + grade de
   cards anterior por uma lista única, mesma estrutura em qualquer tela —
   só o padding/gap cresce por breakpoint, layout não muda. */
.deliverables-alimentar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px — "padrão entre elementos", cards do mesmo tipo */
  width: 100%;
  text-align: left;
}

.deliverables-alimentar__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-3);
  background: var(--text-white);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 16px -2px rgba(23, 36, 46, 0.08);
}

@media (min-width: 768px) {
  .deliverables-alimentar__item {
    padding: var(--space-4);
    gap: var(--space-5);
  }
}

.deliverables-alimentar__item-image {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px -2px rgba(23, 36, 46, 0.12);
}

@media (min-width: 768px) {
  .deliverables-alimentar__item-image {
    width: 110px;
    height: 110px;
  }
}

.deliverables-alimentar__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* 4px — rótulo/título/texto do mesmo item */
}

.deliverables-alimentar__item-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--button-bg);
}

.deliverables-alimentar__item-title {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--text-black);
}

@media (min-width: 768px) {
  .deliverables-alimentar__item-title {
    font-size: 18px;
  }
}

.deliverables-alimentar__item-text {
  font-size: 14px;
  color: var(--neutral-500);
}

@media (min-width: 768px) {
  .deliverables-alimentar__item-text {
    font-size: 15px;
  }
}

.deliverables-alimentar__item-text strong {
  color: var(--text-black);
}

/* ==========================================================================
   Seção 08 — Oferta
   Mesma estrutura do offer-nutrevoce (preço em moeda/valor/centavos,
   parcelamento, CTA, 3 selos de confiança), card branco igual ao resto
   desta página (sem o fundo em gradiente exclusivo do Nutrevocê).
   ========================================================================== */
.offer-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  text-align: center;
}

.offer-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.offer-alimentar__anchor {
  width: 100%;
  color: var(--neutral-500);
}

.offer-alimentar__anchor strong {
  color: var(--text-black);
}

.offer-alimentar__closing {
  width: 100%;
  color: var(--neutral-500);
  font-weight: var(--weight-semibold);
}

/* Duas versões lado a lado — empilhadas no mobile, em linha a partir de
   768px. max-width do wrapper (2x480 + gap) mantém a largura de cada card
   igual à do card único antigo, só reflui a partir de 768px. */
.offer-alimentar__plans {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  max-width: 984px;
}

@media (min-width: 768px) {
  .offer-alimentar__plans {
    flex-direction: row;
    align-items: stretch;
  }
}

.offer-alimentar__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4); /* 16px — "padrão entre elementos" */
  width: 100%;
  max-width: 480px;
  padding: 20px;
  background: var(--text-white);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-default);
  box-shadow: 0 4px 16px -2px rgba(23, 36, 46, 0.08);
}

@media (min-width: 768px) {
  .offer-alimentar__card {
    flex: 1;
    padding: 24px;
  }
}

@media (min-width: 1024px) {
  .offer-alimentar__card {
    padding: 32px;
  }
}

/* Premium se destaca com borda na cor de marca — ajuda a pessoa a bater o
   olho e perceber que essa é a versão "tudo incluído", sem exagerar (mesmo
   card branco, só a borda muda). */
/* Borda em degradê — técnica padding-box/border-box: o fundo branco do
   card ocupa até o padding-box, o degradê preenche só a faixa da borda
   (border-box), então a borda em si parece ter o gradiente, sem afetar
   o fundo branco do resto do card. */
.offer-alimentar__card--premium {
  position: relative;
  padding-top: 36px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--text-white), var(--text-white)) padding-box,
    linear-gradient(284deg, #7DACE0 19.64%, #D91425 80.12%) border-box;
}

.offer-alimentar__plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 18px;
  border-radius: 999px;
  background: linear-gradient(284deg, #7DACE0 19.64%, #D91425 80.12%);
  box-shadow: 0 4px 10px -2px rgba(217, 20, 37, 0.35);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.offer-alimentar__plan-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

/* Básica usa degradê cinza no CTA — só a Premium (destaque) leva o verde
   padrão do resto da página, reforçando visualmente a diferença de plano. */
.offer-alimentar__cta--basica {
  background: linear-gradient(270deg, #b0bac6 0%, #5c6d81 100%);
  box-shadow: 0 4px 12px rgba(92, 109, 129, 0.35);
}

.offer-alimentar__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px — cada item agora tem 2 linhas (título +
    subtítulo), precisa de mais respiro entre itens que uma lista de 1
    linha só */
  width: 100%;
  text-align: left;
}

.offer-alimentar__includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.offer-alimentar__include-title {
  font-size: 14px;
  font-weight: var(--weight-semibold); /* não o 700 padrão de <strong> —
    fica pesado demais numa lista compacta */
  color: var(--text-black);
}

.offer-alimentar__include-subtitle {
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--neutral-500);
}

.offer-alimentar__check {
  flex-shrink: 0;
  color: var(--semantic-success);
  font-weight: var(--weight-black);
}

.offer-alimentar__price {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-body);
  color: var(--text-black);
}

.offer-alimentar__price-currency {
  font-size: 20px;
  font-weight: var(--weight-bold);
  padding-bottom: 8px;
}

.offer-alimentar__price-value {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.offer-alimentar__price-cents {
  font-size: 20px;
  font-weight: var(--weight-bold);
  padding-bottom: 4px;
}

@media (min-width: 768px) {
  .offer-alimentar__price-currency,
  .offer-alimentar__price-cents {
    font-size: 22px;
  }

  .offer-alimentar__price-value {
    font-size: 56px;
  }
}

@media (min-width: 1024px) {
  .offer-alimentar__price-currency,
  .offer-alimentar__price-cents {
    font-size: 24px;
  }

  .offer-alimentar__price-value {
    font-size: 64px;
  }
}

.offer-alimentar__payment {
  color: var(--neutral-500);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
}

@media (min-width: 768px) {
  .offer-alimentar__payment {
    font-size: 15px;
  }
}

/* "de crédito" some abaixo de 375px — a linha fica apertada demais nessas
   telas, e "Cartão 11x de R$5,22" já deixa claro que é parcelamento no
   cartão. */
@media (max-width: 374px) {
  .offer-alimentar__payment-credit {
    display: none;
  }
}

.offer-alimentar__cta {
  width: 100%;
}

@media (min-width: 1024px) {
  .offer-alimentar__cta {
    width: auto;
  }
}

.offer-alimentar__trust {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5); /* 24px */
  width: 100%;
}

.offer-alimentar__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2); /* 8px — ícone/texto relacionados */
  flex: 1;
  min-width: 0;
}

.offer-alimentar__trust-icon {
  width: 24px;
  height: 24px;
}

.offer-alimentar__trust-label {
  color: var(--neutral-500);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  text-align: center;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .offer-alimentar__trust-label {
    font-size: 13px;
  }
}

/* ==========================================================================
   Seção 09 — Garantia
   Badge numérico + título + texto, mesma estrutura do guarantee-nutrevoce.
   ========================================================================== */
.guarantee-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.guarantee-alimentar__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-default);
  background: linear-gradient(284deg, #7dace0 19.64%, #d91425 80.12%); /* gradiente
    exclusivo deste badge — não bate com nenhum token existente */
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: var(--weight-bold);
}

.guarantee-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.guarantee-alimentar__desc {
  color: var(--neutral-500);
}

.guarantee-alimentar__desc strong {
  color: var(--text-black);
}

/* ==========================================================================
   Seção 10 — Urgência
   Linha do tempo Reversão ←→ Diabetes tipo 2 com "Hoje" no centro (mesmo
   layout do protótipo em docs/screenshots-referencia/linha_tempo_urgencia.png),
   construída só com flexbox + bordas — sem imagem, sem lib de gráfico.
   Seção "darklight" (fundo escuro), a pedido — mais contraste pra reforçar
   o peso emocional da urgência, com as linhas nos degradês de verde/
   vermelho da marca em vez das cores sólidas usadas no resto da página.
   ========================================================================== */
.urgencia-alimentar {
  background: var(--text-black);
}

.urgencia-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6); /* 32px — timeline e texto são blocos distintos */
  text-align: center;
}

.urgencia-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-white);
}

.urgencia-alimentar__image {
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius-default);
}

.urgencia-alimentar__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px — legendas coladas na linha que descrevem */
  width: 100%;
  max-width: 720px;
}

.urgencia-alimentar__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
}

.urgencia-alimentar__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
}

.urgencia-alimentar__label--hoje {
  align-items: center;
}

.urgencia-alimentar__label--diabetes {
  align-items: flex-end;
}

.urgencia-alimentar__label strong {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--text-white);
}

@media (min-width: 768px) {
  .urgencia-alimentar__label strong {
    font-size: 18px;
  }
}

/* Mesmo degradê das setas/linha da timeline logo abaixo, aplicado como
   texto (background-clip:text) — mesma técnica do hero-alimentar__title-
   highlight. */
.urgencia-alimentar__label--reversao strong {
  background: linear-gradient(65deg, #7DACE0 2.85%, #C7DBF2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.urgencia-alimentar__label--diabetes strong {
  background: linear-gradient(90deg, #d91425 0%, #e76b76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.urgencia-alimentar__label span {
  font-size: 11px;
  color: var(--neutral-200);
}

@media (min-width: 768px) {
  .urgencia-alimentar__label span {
    font-size: 13px;
  }
}

.urgencia-alimentar__track {
  display: flex;
  align-items: center;
  width: 100%;
}

.urgencia-alimentar__line {
  flex: 1;
  height: 3px;
}

.urgencia-alimentar__line--reversao {
  background: linear-gradient(65deg, #7DACE0 2.85%, #C7DBF2 100%);
}

.urgencia-alimentar__line--diabetes {
  background: linear-gradient(90deg, #d91425 0%, #e76b76 100%);
}

.urgencia-alimentar__dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-white);
}

.urgencia-alimentar__arrow {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
}

.urgencia-alimentar__arrow--left {
  background: linear-gradient(65deg, #7DACE0 2.85%, #C7DBF2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.urgencia-alimentar__arrow--right {
  color: var(--semantic-danger);
}

.urgencia-alimentar__text {
  width: 100%;
  max-width: 720px;
  color: var(--neutral-200);
}

.urgencia-alimentar__text strong {
  color: var(--text-white);
}

/* ==========================================================================
   Seção 10 — FAQ
   Accordion nativo (<details>/<summary>), mesma estrutura do faq-nutrevoce.
   Seta desenhada em CSS puro (dois traços rotacionados, mesma técnica do
   checkmark do how-nutrevoce) em vez de um SVG novo — não existe ícone de
   seta nos assets desta landing ainda.
   ========================================================================== */
.faq-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  text-align: center;
}

.faq-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.faq-alimentar__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px — "padrão entre elementos" */
  width: 100%;
  text-align: left;
}

.faq-alimentar__item {
  padding: 20px;
  background: var(--text-white);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-default);
}

@media (min-width: 768px) {
  .faq-alimentar__item {
    padding: 24px;
  }
}

.faq-alimentar__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3); /* 12px */
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  list-style: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--text-black);
}

.faq-alimentar__question::-webkit-details-marker {
  display: none;
}

@media (min-width: 768px) {
  .faq-alimentar__question {
    font-size: 18px;
  }
}

.faq-alimentar__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-alimentar__icon::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--neutral-500);
  border-bottom: 2px solid var(--neutral-500);
  transform: rotate(45deg); /* aponta pra baixo, fechado */
  transition: transform 0.2s ease;
}

.faq-alimentar__item[open] .faq-alimentar__icon::before {
  transform: rotate(225deg); /* aponta pra cima, aberto */
}

.faq-alimentar__answer {
  margin-top: var(--space-3); /* 12px */
  color: var(--neutral-500);
  font-size: 15px;
}

@media (min-width: 768px) {
  .faq-alimentar__answer {
    font-size: 16px;
  }
}

/* ==========================================================================
   Seção 11 — CTA final
   Mesma estrutura do cta-final-nutrevoce (título + CTA), sem o span de
   destaque colorido — negrito simples, igual ao resto desta página.
   ========================================================================== */
.cta-final-alimentar__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
  text-align: center;
}

.cta-final-alimentar__title {
  width: 100%;
  font-weight: var(--weight-black);
  color: var(--text-black);
}

.cta-final-alimentar__cta {
  width: 100%;
}

@media (min-width: 1024px) {
  .cta-final-alimentar__cta {
    width: auto;
  }
}

/* ==========================================================================
   Rodapé
   Simples: copyright + 2 links de texto, sem logo e sem redes sociais.
   Fundo escuro sólido, mesmo padrão do site-footer-nutrevoce.
   ========================================================================== */
.site-footer-alimentar {
  background: var(--text-black);
  padding-block: 40px; /* fixo — sobrescreve a escala responsiva do .section */
}

.site-footer-alimentar__content {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5); /* 24px — "grupos de elementos" */
}

.site-footer-alimentar__logo {
  width: 100%;
  height: 30px;
}

.site-footer-alimentar__copyright {
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 12px; /* letra miúda intencional, mesmo padrão da Rótulo Simples/Nutrevocê */
  text-align: center;
}

@media (min-width: 1024px) {
  .site-footer-alimentar__copyright {
    font-size: 14px;
  }
}

.site-footer-alimentar__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1); /* 4px */
}

.site-footer-alimentar__links a {
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 16px;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .site-footer-alimentar__links a {
    font-size: 18px;
  }
}

.site-footer-alimentar__links a:hover {
  text-decoration: underline;
}