/* ============================================================
   Mindfulness em Sessão · Brasil · página de vendas v2
   Montada com a Sales_Page_Ju_Engine v1.4.
   Mesma pele da v1 (paleta, tipografia e tokens preservados, regra §26 do briefing).
   O que muda na v2 é direção: menos imagens, maiores, e copy mais leve.
   Zero CDN, zero framework, webfont apenas local (regra G7 e L1).
   ============================================================ */

/* ---------- webfonts locais (variáveis, um arquivo por família) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500.woff2") format("woff2-variations"),
       url("../fonts/fraunces-500.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work_sans-400.woff2") format("woff2-variations"),
       url("../fonts/work_sans-400.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens do visual DNA ---------- */
:root {
  /* fundos: papel quente e sálvia profunda */
  --fundo-base: #FAF6EE;
  --fundo-base-2: #F2EADB;
  --fundo-card: #FFFDF9;
  --fundo-escuro: #333C2F;
  --fundo-escuro-2: #262E23;

  /* texto */
  --texto: #2C312A;
  --texto-suave: #5C6353;
  --texto-sobre-escuro: #EDE7D8;

  /* ação única: barro, retirado das ilustrações do próprio material */
  --acao: #A8523B;
  --acao-hover: #8C4230;
  --acao-texto: #FFF8F1;

  /* identidade: ocre dos rótulos das fichas */
  --destaque: #7E5D26;
  --destaque-suave: #EFE2C6;
  --apoio-1: #5E6B4A;
  --apoio-2: #3F6070;

  /* Declarado porque o schema da engine exige o papel, e mantido no vermelho
     que a definição pede: a única cor fora da harmonia da paleta.

     Esta página NÃO o usa, e a razão é medida, não estética. Com cinco preços
     riscados na tela, o vermelho fora de harmonia deixava de sinalizar e
     passava a disputar: competia com o R$ 67, que é o protagonista comercial,
     e com a terracota do botão, que é a única cor de ação. Um sinal que
     compete com o alvo da conversão não está fazendo o trabalho dele.

     O risco aqui usa --texto-suave, que é o mesmo mecanismo da referência:
     ela não colore o preço antigo, ela o DESBOTA, com line-through e opacidade
     entre 0,55 e 0,75. Desvio consciente da regra visual, registrado aqui. */
  --risco-desconto: #B3382B;

  /* tipografia */
  --fonte-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-texto: "Work Sans", "Segoe UI", Arial, sans-serif;
  --peso-display: 500;

  /* forma: raio suave, sombra difusa física */
  --raio-card: 12px;
  --raio-botao: 10px;
  --raio-pill: 999px;
  --sombra-fisica: 0 26px 54px rgba(44, 49, 42, 0.20);
  --sombra-card: 0 8px 22px rgba(44, 49, 42, 0.08);
  --linha: #E3D9C6;

  /* ritmo */
  --container-largo: 1120px;
  --container-medio: 840px;
  --container-estreito: 600px;
  --espaco-secao: 60px;
  --espaco-secao-desktop: 96px;

  --altura-toque: 48px;
}

/* ---------- base estrutural ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte-texto);
  color: var(--texto);
  background: var(--fundo-base);
  line-height: 1.68;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--fonte-display); font-weight: var(--peso-display); line-height: 1.14; }
h1 { font-size: clamp(1.95rem, 6.2vw, 3.15rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.1rem, 3vw, 1.32rem); }
p { max-width: 64ch; }

section { padding: var(--espaco-secao) 20px; }
.sec--claro { background: var(--fundo-base); }
.sec--claro2 { background: var(--fundo-base-2); }
.sec--card { background: var(--fundo-card); }
.sec--escuro { background: var(--fundo-escuro); color: var(--texto-sobre-escuro); }
.sec--escuro2 { background: var(--fundo-escuro-2); color: var(--texto-sobre-escuro); }
.sec--escuro h1, .sec--escuro h2, .sec--escuro h3,
.sec--escuro2 h1, .sec--escuro2 h2, .sec--escuro2 h3 { color: var(--texto-sobre-escuro); }

/* texto_suave tem contraste 1,84 sobre o escuro: proibido. No escuro o corpo
   secundário usa texto_sobre_escuro com opacidade. */
.sec--escuro .suave, .sec--escuro2 .suave { color: var(--texto-sobre-escuro); opacity: 0.78; }
.suave { color: var(--texto-suave); }

.cont-largo { max-width: var(--container-largo); margin: 0 auto; }
.cont-medio { max-width: var(--container-medio); margin: 0 auto; }
.cont-estreito { max-width: var(--container-estreito); margin: 0 auto; }

/* ---------- marca ---------- */
.marca { display: flex; align-items: center; justify-content: inherit; gap: 10px; margin-bottom: 22px; }
.centro .marca { justify-content: center; }
.marca--wordmark {
  font-family: var(--fonte-display); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--destaque);
}

/* ---------- linguagem decorativa: editorial_rule ---------- */
.deco-rule { border: none; border-top: 2px solid var(--destaque); width: 60px; margin: 0 0 20px; }
.sec--escuro .deco-rule, .sec--escuro2 .deco-rule { border-top-color: var(--destaque-suave); }
.centro .deco-rule { margin-left: auto; margin-right: auto; }
.centro { text-align: center; }
.centro p { margin-left: auto; margin-right: auto; }

/* ---------- rótulos ---------- */
.eyebrow {
  display: inline-block; font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--destaque); font-weight: 600;
  margin-bottom: 14px;
}
.sec--escuro .eyebrow, .sec--escuro2 .eyebrow { color: var(--destaque-suave); }
/* caixa alta so em rotulo curto (1 a 3 palavras). Qualificadores mais longos usam
   a variante frase: mesma cor e mesmo papel, sem caixa alta. */
.eyebrow--frase { text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem; font-weight: 600; }
.contagem-bloco { color: var(--destaque); font-weight: 600; font-family: var(--fonte-display); }
.sec--escuro .contagem-bloco, .sec--escuro2 .contagem-bloco { color: var(--destaque-suave); }

/* ---------- ponte entre seções ---------- */
.ponte { font-style: italic; color: var(--texto-suave); max-width: 54ch; margin: 0 0 18px; }
.centro .ponte { margin-left: auto; margin-right: auto; }
.sec--escuro .ponte, .sec--escuro2 .ponte { color: var(--texto-sobre-escuro); opacity: 0.76; font-style: italic; }

/* ---------- botões ---------- */
.btn {
  display: inline-block; background: var(--acao); color: var(--acao-texto);
  font-family: var(--fonte-texto); font-weight: 600; font-size: 1.04rem;
  padding: 17px 34px; border-radius: var(--raio-botao); text-decoration: none;
  min-height: var(--altura-toque); text-align: center; line-height: 1.3;
  transition: background 0.2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--acao-hover); }
.btn--largo { display: block; width: 100%; }
.btn-micro { display: block; font-size: 0.8rem; color: var(--texto-suave); margin-top: 12px; }
.sec--escuro .btn-micro, .sec--escuro2 .btn-micro { color: var(--texto-sobre-escuro); opacity: 0.72; }

/* ---------- prova embutida ---------- */
.prova-inline {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 20px; padding: 9px 17px; border-radius: var(--raio-pill);
  background: var(--destaque-suave); color: var(--texto);
  font-size: 0.85rem; font-weight: 600; max-width: none;
}
.prova-inline::before { content: "\2713"; color: var(--destaque); font-weight: 700; }

/* ---------- placeholder semântico (.ph) ---------- */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; border: 2px dashed var(--texto-suave);
  border-radius: var(--raio-card); background: var(--fundo-base-2);
  color: var(--texto-suave); text-align: center; padding: 16px; min-height: 180px;
}
.ph--1x1 { aspect-ratio: 1 / 1; min-height: 0; }
.ph--4x5 { aspect-ratio: 4 / 5; min-height: 0; }
.ph--9x16 { aspect-ratio: 9 / 16; max-width: 300px; min-height: 0; }
.ph-tag { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; }
.ph-desc { font-size: 0.8rem; max-width: 34ch; line-height: 1.45; }
.ph-id { font-size: 0.68rem; letter-spacing: 0.1em; opacity: 0.75; font-family: var(--fonte-texto); }
.ph.dark-ok {
  background: rgba(237, 231, 216, 0.06); border-color: rgba(237, 231, 216, 0.42);
  color: var(--texto-sobre-escuro);
}

/* ---------- grades utilitárias ---------- */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 18px; grid-template-columns: 1fr; }

/* ---------- crop policy por função semântica de mídia ---------- */
[data-media="document_preview"] img, [data-media="product_preview"] img,
[data-media="composite_diagram"] img, [data-media="product_mockup"] img,
[data-media="screenshot"] img, [data-media="step_visual"] img,
[data-media="bonus_mockup"] img, [data-media="category_thumbnail"] img { object-fit: contain; }
[data-media="context_scene"] img, [data-media="proof_photo"] img { object-fit: cover; }

/* ============================================================
   1 · PROMESSA (hero, product_below_copy)
   ============================================================ */
.hero { padding-top: 40px; }
.hero h1 { margin-bottom: 18px; }
.hero-sub { font-size: 1.09rem; color: var(--texto-suave); max-width: 58ch; margin: 0 auto 6px; }
.hero-spread {
  position: relative; margin: 40px auto 0; max-width: 760px;
  display: flex; align-items: flex-end; justify-content: center;
}
.hero-spread figure { margin: 0; }
.hero-spread img {
  border-radius: 4px; box-shadow: var(--sombra-fisica);
  border: 1px solid var(--linha); background: var(--fundo-card);
}
.hs-a { width: 30%; transform: rotate(-5deg) translateY(6%); z-index: 1; }
.hs-b { width: 42%; margin: 0 -4%; z-index: 3; position: relative; }
.hs-c { width: 30%; transform: rotate(5deg) translateY(6%); z-index: 2; }
.hero-legenda {
  text-align: center; font-size: 0.8rem; color: var(--texto-suave);
  margin: 20px auto 0; max-width: 46ch;
}
/* v8: a legenda que ficava entre o leque e os benefícios foi removida na v6, e
   com ela foi embora o respiro que ela ocupava. Medido: a V5 tinha 60px de vão
   no celular e 71px no desktop; sem a legenda sobraram 24 e 30. O espaço volta
   como espaço, não como texto de enchimento. */
.hero-negacoes {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px;
  justify-content: center; margin-top: 66px;
}
@media (min-width: 760px) { .hero-negacoes { margin-top: 71px; } }
.hero-negacoes li { font-size: 0.94rem; font-weight: 600; color: var(--destaque); }
.hero-negacoes li::before { content: "\2713\00a0"; }

/* ============================================================
   2 · PROVA DE ENTRADA (numbers_plus_photos)
   ============================================================ */
.prova-barra {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; text-align: center;
}
.prova-num strong {
  display: block; font-family: var(--fonte-display); font-weight: 600;
  font-size: clamp(2.1rem, 7vw, 2.7rem); color: var(--destaque); line-height: 1;
}
.prova-num span { font-size: 0.85rem; color: var(--texto-suave); display: block; margin-top: 6px; }
.snap-x {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 6px 2px 14px; margin-top: 34px;
}
.snap-x > figure { flex: 0 0 min(72%, 300px); scroll-snap-align: center; margin: 0; }
.snap-x img {
  border-radius: 4px; border: 1px solid var(--linha);
  box-shadow: var(--sombra-card); background: var(--fundo-card); width: 100%;
}
.snap-dica { font-size: 0.76rem; color: var(--texto-suave); text-align: center; }

/* ============================================================
   3 · DOR (indice_sintomas)
   ============================================================ */
.dor-indice { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 22px; }
.dor-indice li {
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-pill); padding: 9px 17px; font-size: 0.92rem;
}

/* ============================================================
   4 · MECANISMO (figura_passos, palco escuro)
   ============================================================ */
.passos-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 30px; }
.passo-fig {
  background: rgba(237, 231, 216, 0.05); border: 1px solid rgba(237, 231, 216, 0.16);
  border-radius: var(--raio-card); overflow: hidden; margin: 0;
}
.passo-fig .moldura { background: var(--fundo-card); padding: 10px; }
.passo-fig img { width: 100%; max-height: 210px; object-fit: contain; object-position: top; }
.passo-fig figcaption { padding: 16px 18px 20px; }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--destaque-suave);
  color: var(--fundo-escuro); font-weight: 700; font-size: 0.9rem; margin-bottom: 10px;
}
.passo-fig h3 { font-size: 1.08rem; margin-bottom: 6px; }
.passo-fig p { font-size: 0.9rem; opacity: 0.82; max-width: none; }

/* ============================================================
   5 · MECANISMO (figura_categorias, os 7 eixos)
   ============================================================ */
.figcat-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
.figcat {
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-card); overflow: hidden; box-shadow: var(--sombra-card);
  display: flex; flex-direction: column; margin: 0;
}
.figcat .thumb { background: var(--fundo-base-2); padding: 8px 8px 0; }
.figcat img { width: 100%; height: 150px; object-fit: contain; object-position: top; }
.figcat figcaption { padding: 13px 14px 16px; }
.figcat h3 { font-size: 0.98rem; }
.figcat .qtd { font-size: 0.8rem; color: var(--destaque); font-weight: 600; display: block; margin-bottom: 3px; }
.figcat p { font-size: 0.82rem; color: var(--texto-suave); margin-top: 5px; max-width: none; }

/* ============================================================
   6 · DEMONSTRAÇÃO (guia de escolha, painel emoldurado)
   ============================================================ */
.painel {
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: calc(var(--raio-card) + 6px); padding: 22px 16px;
  box-shadow: var(--sombra-card); margin-top: 28px;
}
.guia-grid { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
.guia-figura img {
  width: 100%; border-radius: 4px; border: 1px solid var(--linha);
  box-shadow: var(--sombra-card); background: var(--fundo-card);
}
.guia-figura figcaption { font-size: 0.78rem; color: var(--texto-suave); margin-top: 10px; text-align: center; }
.guia-legenda { list-style: none; counter-reset: gps; }
.guia-legenda li {
  display: flex; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--linha);
}
.guia-legenda li:last-child { border-bottom: none; }
.guia-num {
  font-family: var(--fonte-display); font-size: 1.02rem; color: var(--destaque);
  min-width: 26px; font-weight: 600;
}
.guia-legenda h3 { font-size: 1rem; margin-bottom: 3px; }
.guia-legenda p { font-size: 0.9rem; color: var(--texto-suave); max-width: none; }
.guia-indice { margin-top: 22px; }
.guia-indice img {
  width: 100%; max-width: 260px; border: 1px solid var(--linha);
  border-radius: 4px; box-shadow: var(--sombra-card);
}
.guia-indice figcaption { font-size: 0.78rem; color: var(--texto-suave); margin-top: 8px; }

/* ============================================================
   7 · DEMONSTRAÇÃO (anatomia da unidade)
   ============================================================ */
.anatomia-grid { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }
.anatomia-figura img {
  width: 100%; border-radius: 4px; border: 1px solid var(--linha);
  box-shadow: var(--sombra-fisica); background: var(--fundo-card);
}
.anatomia-figura figcaption { font-size: 0.78rem; color: var(--texto-suave); margin-top: 10px; text-align: center; }
.contraste-lista {
  margin-top: 30px; background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 20px;
}
.contraste-lista h3 { font-size: 1.05rem; margin-bottom: 10px; }
.contraste-lista p { font-size: 0.94rem; color: var(--texto-suave); }

/* ============================================================
   8 · DEMONSTRAÇÃO (segurança, colunas tintadas)
   ============================================================ */
.seg-recorte { margin: 26px 0 30px; }
.seg-recorte img {
  width: 100%; border: 1px solid var(--linha); border-radius: var(--raio-card);
  background: var(--fundo-card); box-shadow: var(--sombra-card);
}
.seg-recorte figcaption { font-size: 0.78rem; color: var(--texto-suave); margin-top: 10px; }
.segvis-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.segvis {
  border-radius: var(--raio-card); overflow: hidden; background: var(--fundo-card);
  border: 1px solid var(--linha);
}
.segvis header {
  background: var(--tinta, var(--destaque-suave)); padding: 12px 17px;
  font-weight: 600; font-size: 0.95rem; color: var(--texto);
}
.segvis p { padding: 14px 17px 18px; font-size: 0.92rem; color: var(--texto-suave); max-width: none; }

/* ============================================================
   9 · AUTORIDADE (institucional, palco escuro)
   ============================================================ */
.ref-recorte { margin: 28px 0 22px; background: var(--fundo-card); padding: 12px; border-radius: var(--raio-card); }
.ref-recorte img { width: 100%; }
.aut-nota { font-size: 0.88rem; opacity: 0.8; margin-top: 18px; }
.aut-limites {
  margin-top: 22px; border-left: 3px solid var(--destaque-suave); padding-left: 18px;
  font-size: 0.93rem; opacity: 0.86;
}

/* ============================================================
   10 · QUALIFICAÇÃO
   ============================================================ */
.qual-perfis { list-style: none; margin-top: 24px; }
.qual-perfis li { padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 0.97rem; }
.qual-perfis li:last-child { border-bottom: none; }
.qual-perfis li::before { content: "\2713\00a0\00a0"; color: var(--destaque); font-weight: 700; }
.qual-nao {
  margin-top: 26px; background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 22px;
}
.qual-nao h3 { font-size: 1.05rem; margin-bottom: 12px; }
.qual-nao ul { list-style: none; }
.qual-nao li { padding: 6px 0; font-size: 0.94rem; color: var(--texto-suave); }
.qual-nao li::before { content: "\2717\00a0\00a0"; color: var(--texto-suave); }

/* ============================================================
   11 · STACK E BÔNUS (vitrine)
   ============================================================ */
.vitrine-lista { display: grid; gap: 22px; margin-top: 30px; }
.vitrine-item {
  display: grid; gap: 0; grid-template-columns: 1fr; position: relative;
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-card); overflow: hidden; box-shadow: var(--sombra-card);
}
.vitrine-item--estrela { border: 2px solid var(--destaque); }
.vitrine-midia {
  background: var(--fundo-base-2); padding: 26px 20px;
  display: flex; align-items: flex-end; justify-content: center; gap: 0;
}
.vitrine-midia img {
  border-radius: 3px; border: 1px solid var(--linha);
  box-shadow: 0 12px 26px rgba(44, 49, 42, 0.14); background: var(--fundo-card);
}
.vm-capa { width: 54%; max-width: 210px; position: relative; z-index: 2; }
.vm-miolo { width: 42%; max-width: 165px; transform: rotate(4deg) translate(-8%, -3%); z-index: 1; }
.vm-solo { width: 62%; max-width: 250px; }
.vitrine-texto { padding: 22px 20px 24px; }
.vitrine-rotulo {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--destaque); font-weight: 700; margin-bottom: 9px;
}
.vitrine-texto h3 { margin-bottom: 8px; }
.vitrine-texto p { font-size: 0.95rem; color: var(--texto-suave); }
.vitrine-meta {
  display: inline-block; margin-top: 14px; font-size: 0.82rem;
  color: var(--destaque); font-weight: 600;
}
.stack-itens { list-style: none; margin-top: 14px; }
.stack-itens li { padding: 6px 0; font-size: 0.94rem; }
.stack-itens li::before { content: "\2713\00a0\00a0"; color: var(--destaque); font-weight: 700; }
.bonus-fita {
  position: absolute; top: 0; right: 0; background: var(--destaque);
  color: var(--fundo-card); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 13px;
  border-bottom-left-radius: var(--raio-card); z-index: 4;
}

/* ============================================================
   12 · PROVA PESADA (placeholders)
   ============================================================ */
.prova-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
.prova-nota { font-size: 0.85rem; opacity: 0.75; margin-top: 20px; }

/* ============================================================
   13 · PREÇO
   ============================================================ */
.preco-caixa {
  background: var(--fundo-card); color: var(--texto);
  border-radius: calc(var(--raio-card) + 8px); padding: 32px 22px; text-align: center;
  box-shadow: var(--sombra-fisica);
}
.preco-caixa h2 { color: var(--texto); font-size: clamp(1.35rem, 4.4vw, 1.8rem); }
.preco-inclusos { list-style: none; margin: 22px 0; text-align: left; }
.preco-inclusos li {
  padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 0.94rem;
}
.preco-inclusos li:last-child { border-bottom: none; }
.preco-inclusos li::before { content: "\2713\00a0\00a0"; color: var(--destaque); font-weight: 700; }
.preco-valor {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: clamp(3.2rem, 11vw, 4.4rem); letter-spacing: -0.03em;
  color: var(--destaque); line-height: 1; margin: 14px 0 4px; white-space: nowrap;
}
.preco-nota { font-size: 0.86rem; color: var(--texto-suave); margin: 0 auto 22px; }

/* v10 ------------------------------------------------------------------
   A caixa de preço passa a fazer a conta em vez de listar seis itens sem
   valor nenhum. O núcleo NAO recebe preço riscado: ele custa R$ 67 e não
   está em promoção, então inventar um "de R$ X por R$ 67" seria o desconto
   encenado que o briefing proíbe. A âncora é só a soma dos quatro bônus,
   que é o único modelo que o schema da engine aceita.

   O flex com baseline resolve o mobile sem virar tabela: nome à esquerda com
   quebra livre, valor à direita preso na primeira linha e sem quebrar. */
.preco-rot {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700; margin: 24px 0 10px; text-align: left;
}
.preco-rot--fecha { text-align: center; margin-bottom: 2px; }
.preco-bonus { list-style: none; margin: 0; text-align: left; }
.preco-bonus li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 0.92rem;
}
.pb-nome { flex: 1 1 auto; min-width: 0; }
.pb-nome b {
  display: inline-block; font-weight: 700; color: var(--destaque);
  margin-right: 7px; white-space: nowrap;
}
/* O preco de cada bonus e preco, nao metadado: fonte display, maior que a
   copy, riscado. O que ele nao pode ser e mais chamativo que o R$ 67. */
.pb-valor {
  flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: var(--fonte-display); font-weight: 600; font-size: 1.24rem;
  line-height: 1; color: var(--texto-suave);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.preco-soma {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 14px 0 0; padding-top: 14px; border-top: 2px solid var(--linha); text-align: left;
}
.preco-soma > span { font-weight: 700; font-size: 0.96rem; }
.preco-soma > s {
  font-family: var(--fonte-display); font-weight: 600; font-size: 1.62rem; line-height: 1;
  color: var(--texto-suave); text-decoration: line-through;
  text-decoration-thickness: 1px; white-space: nowrap;
}
@media (max-width: 400px) {
  .preco-bonus li { font-size: 0.88rem; gap: 9px; }
  .pb-nome b { display: block; margin-right: 0; }
  .pb-valor { font-size: 1.14rem; }
  .preco-soma > s { font-size: 1.45rem; }
}

/* ============================================================
   14 · GARANTIA
   ============================================================ */
.garantia-grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; text-align: center; }
.garantia-selo {
  width: 108px; height: 108px; border-radius: 50%; margin: 0 auto;
  background: var(--destaque-suave); border: 3px solid var(--destaque);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.garantia-dias {
  font-family: var(--fonte-display); font-size: 2.1rem; font-weight: 600;
  color: var(--texto); line-height: 1;
}
.garantia-rotulo {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--destaque); font-weight: 600;
}

/* ============================================================
   15 · FAQ
   ============================================================ */
.faq details { border-bottom: 1px solid var(--linha); padding: 6px 0; }
.faq summary {
  font-weight: 600; cursor: pointer; min-height: var(--altura-toque);
  display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; font-family: var(--fonte-display); color: var(--destaque);
  font-size: 1.3rem; line-height: 1; flex: 0 0 auto;
}
.faq details[open] summary::before { content: "\2212"; }
.faq details p { padding: 0 0 16px 26px; color: var(--texto-suave); font-size: 0.95rem; }

/* ============================================================
   16 · FECHAMENTO
   ============================================================ */
.fecha-blocos { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 30px 0; }
.fecha-bloco {
  background: rgba(237, 231, 216, 0.06); border: 1px solid rgba(237, 231, 216, 0.16);
  border-radius: var(--raio-card); padding: 20px;
}
.fecha-bloco h3 { font-size: 1rem; margin-bottom: 6px; }
.fecha-bloco p { font-size: 0.9rem; opacity: 0.82; max-width: none; }

/* ---------- rodapé ---------- */
/* v6: rodapé centralizado, desktop e mobile. Só alinhamento, nada de estrutura.
   Os links ganham separador em CSS para lerem como uma linha só, e o disclaimer
   ganha largura confortável em vez de correr a largura toda. */
/* A regra `section { padding: ... 20px }` não alcança o <footer>: o rodapé nunca
   teve margem lateral e o disclaimer encostava nas bordas no celular. */
.rodape { padding: 44px 20px; font-size: 0.86rem; text-align: center; }
.rodape .cont-medio { display: flex; flex-direction: column; align-items: center; }
.rodape-marca {
  font-family: var(--fonte-display); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 0.82rem; margin-bottom: 14px; opacity: 0.9;
}
.rodape-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 0; margin-bottom: 24px;
}
/* O separador vai no ::after do próprio link, não no ::before do seguinte.
   Assim ele viaja junto com o link a que pertence e nunca abre uma linha
   sozinho, que foi o que aconteceu quando os links quebraram em duas linhas. */
.rodape-links a:not(:last-child)::after {
  content: "·"; margin: 0 16px; opacity: 0.4;
  display: inline-block; text-decoration: none;
}
.rodape-links a { white-space: nowrap; }
/* Quando os links quebram em mais de uma linha, o separador do último item da
   linha fica pendurado no fim dela. Abaixo do ponto em que eles cabem numa
   linha só, o separador some e o espaçamento vertical faz o trabalho. */
@media (max-width: 619px) {
  /* linha, nao coluna: empilhar os tres custava 100px de rodape a toa. Eles
     quebram sozinhos em duas linhas e o separador some para nao ficar pendurado. */
  .rodape-links { gap: 10px 22px; }
  .rodape-links a:not(:last-child)::after { display: none; }
}
.rodape-links a {
  color: var(--texto-sobre-escuro); opacity: 0.85; text-decoration: underline;
  min-height: 44px; display: inline-flex; align-items: center;
}
.rodape-disclaimer {
  opacity: 0.66; font-size: 0.8rem; max-width: 62ch; margin-inline: auto;
  line-height: 1.6;
}
.rodape-copy { opacity: 0.5; margin-top: 20px; font-size: 0.78rem; margin-inline: auto; }

/* ============================================================
   BREAKPOINTS (mobile first: o base acima é o mobile)
   ============================================================ */
@media (min-width: 700px) {
  section { padding-left: 32px; padding-right: 32px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .prova-barra { grid-template-columns: repeat(4, 1fr); }
  .segvis-grid { grid-template-columns: repeat(3, 1fr); }
  .passos-grid { grid-template-columns: 1fr 1fr; }
  .prova-grid { grid-template-columns: repeat(3, 1fr); }
  .garantia-grid { grid-template-columns: 128px 1fr; text-align: left; }
  .painel { padding: 30px 26px; }
  .preco-caixa { padding: 40px 32px; }
  .fecha-blocos { grid-template-columns: repeat(3, 1fr); }
  .snap-x > figure { flex: 0 0 min(42%, 260px); }
}

@media (min-width: 960px) {
  section { padding-top: var(--espaco-secao-desktop); padding-bottom: var(--espaco-secao-desktop); }
  .hero { padding-top: 56px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .figcat-grid { grid-template-columns: repeat(4, 1fr); }
  .passos-grid { grid-template-columns: repeat(4, 1fr); }
  .guia-grid { grid-template-columns: 0.95fr 1.05fr; gap: 46px; }
  .anatomia-grid { grid-template-columns: 0.85fr 1.15fr; gap: 52px; }
  .vitrine-item { grid-template-columns: 360px 1fr; align-items: center; }
  .vitrine-item--inv { grid-template-columns: 1fr 360px; }
  .vitrine-item--inv .vitrine-midia { order: 2; }
  .vitrine-texto { padding: 30px 34px; }
  .vitrine-midia { padding: 32px 24px; }
  .snap-x { display: grid; grid-template-columns: repeat(8, 1fr); overflow: visible; gap: 12px; }
  .snap-x > figure { flex: none; }
  .snap-dica { display: none; }
  .figcat img { height: 190px; }
  .passo-fig img { max-height: 190px; }
}

@media (min-width: 1100px) {
  .figcat-grid { grid-template-columns: repeat(7, 1fr); }
  .figcat img { height: 168px; }
  .figcat h3 { font-size: 0.92rem; }
}

/* telas muito estreitas */
@media (max-width: 359.98px) {
  body { font-size: 16px; }
  .preco-valor { font-size: 2.7rem; }
  .prova-barra { gap: 20px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   COMPACTAÇÃO MOBILE (rodada de QA 1, régua I4)
   A primeira montagem entregou 25.336px a 390px, acima do teto de 21.000.
   Os ajustes abaixo reduzem altura sem tirar conteúdo: apertam respiro,
   limitam alturas de figura e aumentam as peças que estavam pequenas demais.
   ============================================================ */
@media (max-width: 699.98px) {
  :root { --espaco-secao: 42px; }
  body { line-height: 1.6; }

  .hero { padding-top: 30px; }
  .hero h1 { margin-bottom: 14px; }
  .hero-spread { margin-top: 32px; }
  .hs-a { width: 32%; transform: rotate(-5deg) translateY(6%); }
  .hs-b { width: 56%; margin: 0 -10%; }
  .hs-c { width: 32%; transform: rotate(5deg) translateY(6%); }
  /* 60px era o vão da V5 no celular, com a legenda dentro dele. Ela saiu, o
     vão volta como espaço. */
  .hero-negacoes { margin-top: 60px; gap: 8px 18px; }

  .dor-indice { gap: 8px; margin: 20px 0 18px; }
  .dor-indice li { font-size: 0.88rem; padding: 8px 14px; }

  .passos-grid { gap: 16px; margin-top: 24px; }
  .passo-fig img { max-height: 150px; }
  .passo-fig figcaption { padding: 14px 16px 16px; }

  .figcat-grid { gap: 14px; margin-top: 24px; }
  .figcat img { height: 132px; }
  .figcat figcaption { padding: 11px 13px 14px; }
  /* o sétimo eixo ocupa a linha inteira: sem item órfão na grade de 2 colunas */
  .figcat:last-child { grid-column: 1 / -1; }
  .figcat:last-child img { height: 168px; }

  .painel { padding: 18px 14px; margin-top: 22px; }
  .guia-grid { gap: 22px; }
  .guia-figura img { max-width: 330px; margin: 0 auto; }
  .guia-legenda li { padding: 11px 0; }
  .guia-indice { margin-top: 18px; }
  .guia-indice img { max-width: 200px; }

  .anatomia-grid { gap: 24px; }
  .anatomia-figura img { max-width: 320px; margin: 0 auto; }
    .contraste-lista { margin-top: 24px; padding: 17px; }

  .seg-recorte { margin: 20px 0 24px; }
  .segvis p { padding: 12px 15px 15px; }

  .ref-recorte { margin: 22px 0 18px; }

  .qual-perfis li { padding: 10px 0; }
  .qual-nao { margin-top: 22px; padding: 18px; }

  .vitrine-lista { gap: 18px; margin-top: 24px; }
  .vitrine-midia { padding: 18px 14px; }
  .vm-capa { width: 62%; max-width: 230px; }
  .vm-miolo { width: 46%; max-width: 175px; transform: rotate(4deg) translate(-6%, -2%); }
  .vm-solo { width: 70%; max-width: 250px; }
  .vitrine-texto { padding: 18px 17px 20px; }
  .stack-itens { margin-top: 11px; }

  /* prova social: slots ainda vazios em snap horizontal de 300px (piso 280 do QA),
     para não gastar 1.100px de altura com placeholders. Desvio registrado no spec. */
  .prova-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 10px; margin-top: 24px;
  }
  .prova-grid > .ph { flex: 0 0 300px; scroll-snap-align: center; }
  .ph--9x16 { max-width: 250px; }
  .prova-nota { margin-top: 16px; }

  .preco-caixa { padding: 28px 20px; }
  .preco-inclusos { margin: 18px 0; }
  .preco-inclusos li { padding: 8px 0; }

  .fecha-blocos { gap: 14px; margin: 24px 0; }
  .fecha-bloco { padding: 17px; }

  .faq summary { padding: 11px 0; }
  .faq details p { padding-bottom: 14px; }
}

/* ---- rodada de QA 2: ainda 21.991px a 390px, teto 21.000 ---- */
@media (max-width: 699.98px) {
  :root { --espaco-secao: 34px; }
  body { line-height: 1.56; }

  .ponte { margin-bottom: 14px; }
  .prova-inline { margin-top: 14px; }

  .passo-fig img { max-height: 126px; }
  .passo-fig figcaption { padding: 12px 14px 14px; }

  .figcat img { height: 118px; }
  .figcat:last-child img { height: 150px; }

  .guia-figura img { max-width: 300px; }
  .guia-legenda li { padding: 10px 0; }
  .guia-indice img { max-width: 170px; }

  /* O teto de 290px saiu: o A/B do vídeo mostrou que ele era o único motivo
     de a ficha parecer menor que a alternativa. Sem ele são 350px, 21% maior,
     ao custo de 85px de altura no bloco. */
  .anatomia-figura img { max-width: none; }
    .contraste-lista { padding: 16px; margin-top: 20px; }

  .qual-nao { padding: 16px; }
  .segvis p { padding: 11px 14px 14px; }

  .vitrine-midia { padding: 14px 12px; }
  .vm-capa { width: 58%; max-width: 195px; }
  .vm-miolo { width: 44%; max-width: 150px; }
  .vitrine-texto { padding: 16px 16px 18px; }
  .vitrine-texto p { font-size: 0.92rem; }
  .vitrine-meta { margin-top: 10px; }
  .vitrine-lista { gap: 14px; }

  .preco-inclusos li { padding: 7px 0; }
  .fecha-bloco { padding: 15px; }
  .faq summary { padding: 10px 0; }
}

/* ---- rodada de QA 3: folga sobre o teto de altura mobile ---- */
@media (max-width: 699.98px) {
  :root { --espaco-secao: 30px; }
  h2 { font-size: clamp(1.45rem, 4.3vw, 2.2rem); }
  .vitrine-midia { padding: 12px 10px; }
  .vitrine-texto { padding: 14px 15px 16px; }
  .guia-legenda h3 { font-size: 0.96rem; }
  .guia-legenda p { font-size: 0.88rem; }
  .passo-fig p { font-size: 0.88rem; }
    .fecha-blocos { margin: 20px 0; }
  .hero-legenda { margin-top: 16px; }
}

/* ============================================================
   AJUSTES DA LEITURA COMERCIAL DAS CAPTURAS (Gate 4)
   ============================================================ */

/* 1 · os quatro passos do mecanismo alinham as legendas: a moldura tem altura
   fixa e centraliza a peça, porque as figuras misturam página A4 e recorte largo */
.passo-fig .moldura {
  display: flex; align-items: center; justify-content: center;
  height: 168px; padding: 10px;
}
.passo-fig img { max-height: 100%; width: auto; margin: 0 auto; }
@media (min-width: 960px) { .passo-fig .moldura { height: 210px; } }
@media (max-width: 699.98px) { .passo-fig .moldura { height: 140px; } }

/* 2 · na anatomia, a ficha acompanha a leitura dos 11 campos no desktop */
@media (min-width: 960px) {
  .anatomia-figura { position: sticky; top: 32px; }
}

/* 3 · a caixa de preço é um cartão CLARO dentro de uma seção escura: as regras de
   texto sobre escuro não valem lá dentro. Sem isto, a sobrancelha e o microtexto
   ficavam em creme sobre branco (contraste reprovado). */
.sec--escuro2 .preco-caixa .eyebrow,
.sec--escuro .preco-caixa .eyebrow { color: var(--destaque); }
.sec--escuro2 .preco-caixa .btn-micro,
.sec--escuro .preco-caixa .btn-micro { color: var(--texto-suave); opacity: 1; }
.preco-caixa .suave { color: var(--texto-suave); opacity: 1; }

/* ============================================================
   V2 · BLOCOS REDIRIGIDOS
   A pele é a mesma da v1. O que muda aqui é curadoria: menos imagens,
   maiores, e composições que funcionam primeiro a 390px.
   ============================================================ */

/* ---- 1 · HERO ----------------------------------------------------------
   A v1 punha a capa do antigo guia na frente do leque. Era a peça visualmente
   mais fraca do conjunto e derrubava a percepção logo na primeira dobra.
   A v2 usa três fichas reais; o guia ganha seção própria, com espaço. */
.hero-spread .hs-b { width: 46%; margin: 0 -6%; }
.hero-spread .hs-a, .hero-spread .hs-c { width: 33%; }
@media (max-width: 699.98px) {
  .hero-spread .hs-b { width: 58%; margin: 0 -9%; }
  .hero-spread .hs-a, .hero-spread .hs-c { width: 34%; }
}

/* ---- 2 · PROVA DE ENTRADA: uma ficha grande e três de apoio -------------
   Substitui a faixa de oito miniaturas da v1, reprovada por ilegibilidade
   (129px de largura a 390px). Aqui a peça principal é lida de verdade. */
.destaque-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 30px; }
.destaque-principal img {
  width: 100%; border-radius: 4px; border: 1px solid var(--linha);
  box-shadow: var(--sombra-fisica); background: var(--fundo-card);
}
.destaque-principal figcaption,
.destaque-apoio figcaption { font-size: 0.8rem; color: var(--texto-suave); margin-top: 10px; }
.destaque-apoio { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-content: start; }
.destaque-apoio figure { margin: 0; }
.destaque-apoio img {
  width: 100%; border-radius: 4px; border: 1px solid var(--linha);
  box-shadow: var(--sombra-card); background: var(--fundo-card);
}
.destaque-apoio .rot {
  display: block; font-size: 0.78rem; font-weight: 600; color: var(--destaque); margin-top: 7px;
}
.destaque-nota { grid-column: 1 / -1; font-size: 0.88rem; color: var(--texto-suave); }
@media (min-width: 960px) {
  .destaque-grid { grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: start; }
  .destaque-apoio { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ---- 4 · SOLTO CONTRA ORGANIZADO ---------------------------------------
   A v1 ilustrava o reenquadramento com quatro recortes pequenos. A ideia é
   boa e a execução não era: aqui vira comparação de duas colunas, desenhada
   em CSS, que é o que o argumento realmente pede. */
.comp-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
.comp-col { border-radius: var(--raio-card); padding: 22px 20px; }
.comp-col--antes {
  background: rgba(237, 231, 216, 0.06);
  border: 1px dashed rgba(237, 231, 216, 0.34);
}
.comp-col--depois {
  background: var(--fundo-card); color: var(--texto);
  border: 1px solid var(--destaque);
}
.comp-col h3 { font-size: 1.06rem; margin-bottom: 4px; }
.comp-col--depois h3 { color: var(--texto); }
.comp-rot {
  display: block; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 10px;
}
.comp-col--antes .comp-rot { color: var(--destaque-suave); opacity: 0.85; }
.comp-col--depois .comp-rot { color: var(--destaque); }
.comp-lista { list-style: none; margin-top: 14px; }
.comp-lista li { padding: 8px 0; font-size: 0.95rem; display: flex; gap: 11px; align-items: flex-start; }
.comp-col--antes .comp-lista li { border-bottom: 1px dashed rgba(237, 231, 216, 0.22); opacity: 0.9; }
.comp-col--depois .comp-lista li { border-bottom: 1px solid var(--linha); color: var(--texto); }
.comp-lista li:last-child { border-bottom: none; }
.comp-marca { flex: 0 0 auto; font-weight: 700; line-height: 1.5; }
.comp-col--antes .comp-marca { color: var(--destaque-suave); opacity: 0.7; }
.comp-col--depois .comp-marca {
  color: var(--fundo-card); background: var(--destaque); border-radius: 50%;
  width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.76rem; margin-top: 2px;
}
@media (min-width: 820px) { .comp-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }

/* ---- 5 · O GUIA: situação, direção, ficha, condução ---------------------
   O componente renomeado deixa de ser mais um PDF e ganha o fluxo vertical
   do que ele realmente faz, ao lado da página real de onde o exemplo saiu. */
.guiafluxo { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
.guia-passo {
  position: relative; padding: 15px 18px 15px 52px; border-radius: var(--raio-card);
  background: var(--fundo-card); border: 1px solid var(--linha); margin-bottom: 10px;
}
.guia-passo:last-child { margin-bottom: 0; }
.guia-passo::before {
  content: attr(data-n); position: absolute; left: 15px; top: 15px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--destaque);
  color: var(--fundo-card); font-family: var(--fonte-display); font-weight: 600;
  font-size: 0.82rem; display: flex; align-items: center; justify-content: center;
}
.guia-passo .et {
  display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--destaque); font-weight: 700; margin-bottom: 4px;
}
.guia-passo strong { display: block; font-family: var(--fonte-display); font-size: 1.04rem; font-weight: 600; }
.guia-passo p { font-size: 0.9rem; color: var(--texto-suave); margin-top: 4px; max-width: none; }
.guia-seta { display: block; width: 2px; height: 14px; background: var(--destaque); opacity: 0.4; margin: 0 0 10px 26px; }
.guia-img img {
  width: 100%; border-radius: 4px; border: 1px solid var(--linha);
  box-shadow: var(--sombra-card); background: var(--fundo-card);
}
.guia-img figcaption { font-size: 0.8rem; color: var(--texto-suave); margin-top: 10px; }
.guia-indice-mini { margin-top: 18px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.guia-indice-mini img { width: 100%; border: 1px solid var(--linha); border-radius: 4px; box-shadow: var(--sombra-card); }
.guia-indice-mini p { font-size: 0.88rem; color: var(--texto-suave); max-width: none; }
@media (min-width: 960px) { .guiafluxo { grid-template-columns: 1fr 1.05fr; gap: 44px; } }

/* ---- 6 · SETE EIXOS: rótulos claros e três fichas maiores ---------------
   A v1 mostrava sete miniaturas de 150px. Aqui os sete eixos aparecem como
   rótulos legíveis com a contagem real, e só três fichas entram, grandes. */
.eixo-chips { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.eixo-chip {
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 13px 15px;
}
.eixo-chip .n {
  display: block; font-family: var(--fonte-display); font-size: 1.3rem;
  font-weight: 600; color: var(--destaque); line-height: 1;
}
.eixo-chip .nome { display: block; font-weight: 600; font-size: 0.97rem; margin-top: 4px; }
.eixo-chip .desc { display: block; font-size: 0.84rem; color: var(--texto-suave); margin-top: 3px; }
@media (min-width: 960px) { .eixo-chips { grid-template-columns: repeat(4, 1fr); } }

/* ---- 11 · STACK COM HIERARQUIA -----------------------------------------
   Na v1 os quatro complementos tinham o mesmo peso visual. Aqui o núcleo é
   uma vitrine larga e os complementos ficam menores, em duas colunas. */

/* v11 ------------------------------------------------------------------
   A grade 2x2 espremia quatro produtos em quatro cartoes de 225 px e o valor
   individual acabava como microtexto no rodape do cartao: lia como metadado,
   nao como preco. Agora e um bonus por linha, com tres zonas de largura
   propria: a capa, a copy e o VALOR.

   A coluna de valor fica sempre no mesmo lado, sem alternancia. Alternar
   ajudaria o ritmo de uma galeria, mas aqui quebraria o alinhamento vertical
   dos quatro precos, e e justamente essa coluna de precos descendo a pagina
   que produz a ancoragem. Ritmo perde para funcao comercial. */
.bonus-lista { display: grid; gap: 16px; margin-top: 20px; }
.bonus-item {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start;
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: var(--raio-card); padding: 16px; box-shadow: var(--sombra-card);
}
.bonus-item--estrela { border: 2px solid var(--destaque); }
.bonus-capa img { width: 100%; display: block; }

.bonus-etiqueta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 7px; }
.bonus-num {
  font-family: var(--fonte-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.02em; color: var(--destaque); line-height: 1;
}
.bonus-desc {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700;
}
.bonus-corpo h3 { font-size: 1.04rem; line-height: 1.22; }
.bonus-benef { font-size: 0.9rem; color: var(--texto-suave); margin-top: 6px; max-width: none; }

/* O bloco de valor. Na coluna estreita do celular ele atravessa as duas
   colunas e ganha um fio em cima, para nao virar apendice da copy. */
.bonus-valor {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--linha);
}
.bv-rot {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700; flex: 0 0 100%;
}
.bv-preco {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: clamp(1.5rem, 5.6vw, 1.85rem); line-height: 1;
  color: var(--texto-suave); text-decoration: line-through;
  text-decoration-thickness: 1px; text-underline-offset: 0; white-space: nowrap;
}
.bv-selo {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--destaque); background: var(--destaque-suave);
  border-radius: var(--raio-pill); padding: 5px 10px; white-space: nowrap;
}

@media (min-width: 700px) {
  /* tres zonas: a capa cresce, a copy respira e o valor ganha coluna propria,
     alinhada de cima a baixo nos quatro */
  .bonus-item { grid-template-columns: 132px 1fr 186px; gap: 22px; padding: 20px; align-items: center; }
  .bonus-valor {
    grid-column: auto; flex-direction: column; align-items: flex-start;
    margin-top: 0; padding-top: 0; padding-left: 22px;
    border-top: none; border-left: 1px solid var(--linha); gap: 8px;
  }
  .bv-rot { flex: 0 0 auto; }
}
@media (min-width: 1000px) {
  .bonus-item { grid-template-columns: 152px 1fr 200px; gap: 26px; }
  .bonus-corpo h3 { font-size: 1.12rem; }
}

/* v10: o valor individual vira unidade propria. Escrito como texto corrido, a
   linha quebrava entre "individual:" e "R$ 27" e deixava o valor orfao numa
   segunda linha, que e a poluicao que o briefing manda evitar. Assim ele cabe
   na mesma linha quando ha espaco e desce inteiro quando nao ha. */

/* ---- prova pesada e fundamentação em fundo claro ------------------------
   A v2 reduz de seis para quatro as faixas escuras: escuro passa a marcar
   só as viradas reais (mecanismo, decisão, fechamento e rodapé). */
.painel-ref {
  background: var(--fundo-card); border: 1px solid var(--linha);
  border-radius: calc(var(--raio-card) + 4px); padding: 18px 16px; margin: 24px 0 20px;
}
.painel-ref img { width: 100%; }
@media (min-width: 700px) { .painel-ref { padding: 22px; } }
.aut-limites-claro {
  margin-top: 20px; border-left: 3px solid var(--destaque); padding-left: 18px;
  font-size: 0.93rem; color: var(--texto-suave);
}

/* ---- rodada de QA da v2 -------------------------------------------------
   1. As tres fichas de amostra dos eixos empilhadas custavam 1.500px a 390px e
      faziam do bloco de mecanismo a maior secao da pagina, no lugar do stack.
      Viram snap horizontal com peca de 300px, acima do piso de 280 da regua.
   2. A capa do complemento a 92px era pequena demais para ser identificada. */

/* ---- IMAGE_SELECTION_QA: peças que estavam pequenas demais -------------
   O índice do guia, as capas dos complementos e as peças do núcleo no stack
   renderizavam abaixo de 200px, e no desktop chegavam a ficar menores do que
   no mobile por causa de colunas fixas. Corrigido nas duas pontas. */
.guia-indice-mini { grid-template-columns: 150px 1fr; }
@media (min-width: 960px) {
  .guia-indice-mini { grid-template-columns: 190px 1fr; gap: 20px; }

  .vitrine-item { grid-template-columns: 430px 1fr; }
  .vm-capa { width: 56%; max-width: 240px; }
  .vm-miolo { width: 45%; max-width: 190px; }
}

/* ======================================================================
   v4 · o que muda em relação à V2
   Cada regra abaixo vive dentro de um bloco que já existia. Nada aqui
   redesenha a página: a V2 continua sendo a pele.
   ====================================================================== */

/* ---- marca -------------------------------------------------------------
   Símbolo em SVG mais o nome em texto vivo, com as fontes do logo aprovado.
   Texto vivo e não curvas: a tradução futura passa a ser troca de texto.

   Uma nota de proporção, porque ela foi decidida e não herdada. No arquivo
   aprovado o símbolo tem 161px e a palavra Mindfulness tem 37px de tinta, uma
   razão de 4,35 para 1. Com o logo a 24px de altura, o nome sairia com 5px e
   ninguém leria. A hierarquia do original fica: símbolo à esquerda, Mindfulness
   dominante em SemiBold, em Sessão menor e em azul. O que mudou foi a razão
   entre eles, que é o refinamento técnico que o briefing autoriza. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/montserrat-600.woff2") format("woff2");
}

.marca-logo {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 auto 44px; text-align: left;
}
.marca-simbolo { display: block; width: auto; height: 26px; flex: 0 0 auto; }
.marca-nome {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: "Montserrat", "Work Sans", system-ui, sans-serif;
  line-height: 1.06; letter-spacing: -0.005em;
}
/* v5: as duas linhas migram para os tokens da página. O turquesa do arquivo
   de origem dava 4,13 de contraste sobre o creme, abaixo do mínimo AA para
   texto pequeno. Agora são 12,33 e 5,30. */
.mn-1 { font-weight: 600; font-size: 12.5px; color: var(--texto); }
.mn-2 { font-weight: 500; font-size: 10px; color: var(--apoio-1); margin-top: 1px; }

/* v9: o rodapé tinha métrica própria, menor que a do topo em toda dimensão:
   símbolo 21/23px contra 26/32px, nome 10,5/11,5px contra 12,5/15px, vão 7px
   contra 9/11px. A marca fechava a página mais fraca do que abria, e a leitura
   sobre o fundo escuro, onde o contraste já é menor, ficava pior ainda.

   A equivalência com o topo se faz apagando os overrides de tamanho, não
   escolhendo um número novo: assim o rodapé HERDA a métrica do hero e os dois
   continuam iguais mesmo se o hero mudar. Do bloco sobra só o que é próprio do
   rodapé, que é a inversão de cor sobre o escuro. */
.marca-logo--rodape { margin: 0 auto 30px; }
.marca-logo--rodape .mn-1 { color: var(--texto-sobre-escuro); }
.marca-logo--rodape .mn-2 { color: var(--texto-sobre-escuro); opacity: 0.72; }

@media (min-width: 760px) {
  .marca-logo { gap: 11px; margin-bottom: 52px; }
  .marca-simbolo { height: 32px; }
  .mn-1 { font-size: 15px; }
  .mn-2 { font-size: 12px; }
  /* O vão abaixo do logo do rodapé nunca foi escolhido para o rodapé no
     desktop: como o bloco --rodape não redeclarava margin, ele herdava os 52px
     do hero pela cascata, atrás de um símbolo de 23px. Agora é declarado. */
  .marca-logo--rodape { margin-bottom: 44px; }
}

/* ---- faixa de números no fim do hero ------------------------------------
   Os quatro numerais ocupavam uma seção inteira depois do hero. No corpus a
   prova de entrada é uma faixa rasa dentro da primeira dobra, não um bloco. */
/* v5: com a contagem de fontes fora, sobraram tres numeros, e tres cabem
   numa linha so. Em duas colunas o terceiro ficava sozinho embaixo. */
.trust-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 30px auto 0; max-width: none; padding-top: 22px;
  border-top: 1px solid var(--linha);
}
.trust-row span {
  font-size: 0.8rem; flex-direction: column; gap: 2px; color: var(--texto-suave); display: flex;
  align-items: baseline; justify-content: center; gap: 6px;
}
.trust-row strong {
  font-family: var(--fonte-display); font-size: 1.24rem; font-weight: 600;
  color: var(--destaque); line-height: 1;
}
@media (min-width: 620px) { .trust-row { grid-template-columns: repeat(3, auto); justify-content: center; gap: 10px 44px; } }

/* ---- abertura visual: seis fichas em tamanho de reconhecimento ----------
   Não é para ler, é para reconhecer que existe material rico e variado. Duas
   colunas no celular dão 165px por peça, dentro da faixa de reconhecimento;
   três colunas no desktop dão bem mais, nunca menos que no celular. */
.galeria-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px;
}
.galeria-item { margin: 0; }
.galeria-item img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  border: 1px solid var(--linha); box-shadow: var(--sombra-card);
  background: var(--fundo-card);
}
.galeria-item figcaption {
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--destaque); font-weight: 600; margin-top: 8px; text-align: center;
}
.galeria-nota {
  font-size: 0.86rem; color: var(--texto-suave); margin: 22px auto 0;
  max-width: var(--container-medio); text-align: center;
}
@media (min-width: 760px) {
  .galeria-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ---- o único vídeo da página -------------------------------------------
   Vertical 9:16, com teto de largura em toda largura de tela. Ele é textura:
   mostra volume e materialidade, não conteúdo. O teto não é opcional: 9:16 na
   largura cheia do celular viraria um paredão de 622px. */
.v-fig { margin: 0 auto; width: 100%; max-width: 250px; }
.v-fig video,
.v-fig .v-fallback {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  object-fit: cover; border-radius: var(--raio-card);
}
/* A reserva fica fora do caminho por padrão. Esta regra vem ANTES da media
   query de propósito: depois dela, a cascata devolveria o display:none e o
   modo sem movimento ficaria sem nada na tela. */
.v-fig .v-fallback { display: none; }
.v-fig figcaption {
  font-size: 0.8rem; margin-top: 12px; text-align: center; line-height: 1.45;
}
.sec--escuro .v-fig figcaption { color: var(--texto-sobre-escuro); opacity: 0.72; }
@media (prefers-reduced-motion: reduce) {
  .v-fig video { display: none; }
  .v-fig .v-fallback { display: block; }
}

/* split do mecanismo: a mídia à esquerda, a comparação à direita */
.mec-split { display: grid; gap: 28px; grid-template-columns: 1fr; }
.mec-nota { margin-top: 22px; }
.mec-coluna { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) {
  /* A coluna da direita leva a comparação MAIS a nota de fechamento: sem isso
     a nota caía sob o vídeo e sobrava um buraco na metade direita do bloco. */
  .mec-split { grid-template-columns: 260px 1fr; gap: 46px; align-items: center; }
  .v-fig { max-width: 260px; }
  .mec-nota { max-width: 62ch; }
}

/* ---- o código da ficha é o que o leitor anota --------------------------- */
.guia-cod {
  display: inline-block; font-family: var(--fonte-texto); font-size: 0.82rem;
  font-weight: 600; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px;
  background: var(--destaque-suave); color: var(--destaque); vertical-align: 2px;
  margin-right: 6px;
}
.guia-pag {
  display: block; font-family: var(--fonte-texto); font-size: 0.8rem;
  font-weight: 500; color: var(--texto-suave); margin-top: 3px;
}

/* ---- recorte: precisa ficar claro que é um pedaço real de uma ficha -----
   Sem isto, a faixa lê como mais uma imagem bege desenhada pela página. A
   borda picotada de cima e a etiqueta dizem que aquilo foi cortado de algo. */
.recorte { position: relative; }
.recorte img {
  border: 1px solid var(--linha); border-top: 2px dashed var(--linha);
  background: var(--fundo-card);
}
.recorte-etiqueta {
  position: absolute; top: -10px; left: 14px; z-index: 2;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; padding: 3px 10px; border-radius: 3px;
  background: var(--destaque); color: var(--fundo-card);
}
.sec--escuro .recorte-etiqueta { background: var(--destaque-suave); color: var(--fundo-escuro); }
.sec--escuro .recorte img { border-color: rgba(237, 231, 216, 0.28); border-top-color: rgba(237, 231, 216, 0.4); }

/* ---- fundamentação em fundo escuro (recuperado da V1) ------------------
   O recorte claro sobre o escuro é o que faz a evidência saltar. Na V2 a
   seção era clara e o recorte sumia no bege. */
/* position:relative aqui nao e enfeite: a etiqueta do recorte e absoluta, e sem
   ancestral posicionado ela ancorava no topo da PAGINA, aparecendo sobre o hero. */
.painel-ref { position: relative; }
.sec--escuro .painel-ref { background: var(--fundo-card); border-color: rgba(237, 231, 216, 0.22); }
.sec--escuro .aut-limites-claro {
  border-left-color: var(--destaque-suave);
  color: var(--texto-sobre-escuro); opacity: 0.8;
}
.sec--escuro .aut-limites-claro strong { color: var(--texto-sobre-escuro); opacity: 1; }

/* selo de evidência, desenhado em CSS, sem imagem e sem biblioteca de ícone.
   Sem número enquanto a divergência entre 28 e 32 fontes não for decidida. */
.selo-evidencia {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  padding: 14px 18px; border-radius: var(--raio-card);
  border: 1px solid rgba(237, 231, 216, 0.28); background: rgba(237, 231, 216, 0.06);
}
.selo-marca {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--destaque-suave); position: relative;
}
.selo-marca::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 16px; margin: -10px 0 0 -5px;
  border: solid var(--destaque-suave); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.selo-texto { font-size: 0.86rem; line-height: 1.45; color: var(--texto-sobre-escuro); opacity: 0.86; }
.selo-texto strong {
  display: block; font-family: var(--fonte-display); font-size: 0.98rem;
  font-weight: 600; opacity: 1; margin-bottom: 2px;
}

/* ---- espaço reservado ---------------------------------------------------
   Isto não é wireframe. Preenchimento sólido, borda fina e rótulo legível:
   o bloco lê como área reservada de uma página diagramada, não como imagem
   que falhou ao carregar. Cada um declara o que precisa receber. */
.reservado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 22px 18px; margin: 0;
  border-radius: var(--raio-card); background: var(--fundo-base-2);
  border: 1px solid var(--linha);
}
.res-rotulo {
  font-family: var(--fonte-display); font-size: 0.92rem; font-weight: 600;
  color: var(--texto); line-height: 1.25;
}
.res-desc { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.45; max-width: 30ch; }
.sec--escuro .reservado {
  background: rgba(237, 231, 216, 0.05); border-color: rgba(237, 231, 216, 0.22);
}
.sec--escuro .res-rotulo { color: var(--texto-sobre-escuro); }
.sec--escuro .res-desc { color: var(--texto-sobre-escuro); opacity: 0.66; }
.reservado-inline {
  display: inline-block; border-radius: 4px; padding: 2px 10px;
  background: var(--destaque-suave); color: var(--destaque);
}

/* ---- autoridade humana --------------------------------------------------
   Nome, titulação e biografia são dados reais. Só o retrato segue reservado,
   e a caixa dele já está no formato final: 4:5, para receber a fotografia
   vertical sem que a seção precise ser refeita. */
.autor-painel { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 26px; }
/* A fotografia chegou. O recorte para 4:5 foi feito no arquivo, então o
   object-fit aqui não corta mais nada: ele só garante o preenchimento se um
   dia a imagem for trocada por outra de proporção diferente. */
.autor-retrato {
  aspect-ratio: 4 / 5; max-width: 220px; margin-inline: auto; width: 100%;
  border-radius: var(--raio-card); overflow: hidden; box-shadow: var(--sombra-card);
}
.autor-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.autor-nome {
  font-family: var(--fonte-display); font-size: 1.3rem; font-weight: 600;
  margin: 0 0 4px; max-width: none;
}
/* a titulação perdeu a pílula de reservado, então a cor passa a ser dela */
.autor-cred {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--destaque); margin: 0 0 14px; max-width: none;
}
.autor-bio p { max-width: none; }
.autor-bio p + p { margin-top: 12px; }
@media (min-width: 760px) {
  .autor-painel { grid-template-columns: 260px 1fr; gap: 34px; align-items: start; }
  .autor-retrato { margin-inline: 0; }
}

/* ---- prova social em fundo escuro (recuperado da V1) --------------------
   Tarde, colada no preço, com peso visual. É a rampa de contraste que entrega
   o leitor no bloco de decisão, e ela não existia na V2. */
.ps-videos { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
.ps-video { aspect-ratio: 9 / 16; padding: 16px 12px; }
.ps-video .res-rotulo { font-size: 0.82rem; }
.ps-video .res-desc { font-size: 0.72rem; }
/* Os prints sao conversa de celular: proporcao retrato. Empilhados no mobile
   custariam 786px, entao vao em faixa com encaixe lateral, como a V1 fazia. */
.ps-prints {
  display: flex; gap: 14px; margin-top: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 6px;
  margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px);
}
.ps-print { flex: 0 0 250px; aspect-ratio: 4 / 5; scroll-snap-align: center; }
@media (min-width: 560px) {
  .ps-prints {
    display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible;
    margin-inline: 0; padding-inline: 0;
  }
  .ps-print { flex: initial; }
}
@media (min-width: 900px) {
  .ps-videos { grid-template-columns: repeat(2, 260px); justify-content: center; gap: 26px; }
  .ps-prints { gap: 20px; margin-top: 22px; }
  .ps-video .res-rotulo, .ps-print .res-rotulo { font-size: 0.9rem; }
  .ps-video .res-desc, .ps-print .res-desc { font-size: 0.76rem; }
}

/* ======================================================================
   v5 · imagem-fonte no lugar de mais uma folha A4
   ====================================================================== */

/* ---- ponte de contexto no bloco de dor --------------------------------- */
.ponte-contexto {
  font-size: 0.95rem; color: var(--texto-suave); line-height: 1.6;
  margin: 12px 0 18px; max-width: 58ch;
}

/* ---- imagem conceitual da dor ------------------------------------------
   O bloco mais longo da página sem mídia nenhuma passa a ter uma peça, e ela
   é conceitual de propósito: o bloco fala de um impasse, não de uma pessoa. */
.dor-fig { margin: 0 0 22px; float: none; }
.dor-fig img {
  display: block; width: 100%; max-width: 190px; height: auto; margin: 0 auto;
  border-radius: var(--raio-card); border: 1px solid var(--linha);
  box-shadow: var(--sombra-card);
}
@media (min-width: 760px) {
  /* no desktop ela acompanha a leitura em vez de empurrar o texto para baixo */
  .dor-fig { float: right; margin: 0 0 18px 30px; max-width: 250px; }
  .dor-fig img { max-width: 250px; }
}

/* ---- imagem-fonte de cada eixo -----------------------------------------
   Faixa no topo do cartão, com recorte 3:2. O arquivo de origem é retrato 4:5:
   a faixa favorece o terço superior, que é onde o assunto costuma estar. O
   recorte é deliberado, não descuido: aqui a imagem é território do eixo, não
   peça de leitura. */
.eixo-fig { display: block; margin: -13px -15px 11px; }
.eixo-fig img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  object-position: center 35%;
  border-radius: var(--raio-card) var(--raio-card) 0 0;
  background: var(--fundo-base-2);
}
/* a pagina ja punha 4 colunas a partir de 960: a faixa acompanha o mesmo ponto */
@media (min-width: 960px) { .eixo-fig img { aspect-ratio: 4 / 3; } }

/* ---- planta da ficha ---------------------------------------------------
   A lista de onze campos em texto saiu. A regra H9 diz que conteúdo
   sequencial pede figura, e onze campos numa ordem fixa são exatamente isso.
   O diagrama mostra a estrutura; a ficha real ao lado prova a materialidade.
   São duas peças com funções diferentes, não duas vezes a mesma coisa. */
.anatomia-planta { margin-top: 4px; }
.anatomia-diagrama {
  display: block; width: 100%; height: auto; max-width: 340px; margin: 0 auto;
}
.planta-legenda {
  font-size: 0.82rem; color: var(--texto-suave); text-align: center;
  margin: 12px auto 0; max-width: 36ch; line-height: 1.45;
}
@media (min-width: 960px) {
  .anatomia-diagrama { max-width: 430px; }
  .planta-legenda { text-align: left; margin-inline: 0; }
}

}

/* ---- v7 · composição do núcleo ----------------------------------------
   As duas peças soltas (capa do Guia e uma ficha) viraram uma composição só,
   com cinco fichas de eixos distintos. A caixa era um palco com dois filhos
   posicionados; agora é um contêiner com uma imagem só. */
.vitrine-midia:has(.vm-composicao) { display: block; padding: 0; }
.vm-composicao {
  display: block; width: 100%; height: auto; margin-inline: auto;
  border: 0; box-shadow: none; background: transparent;
  /* Teto de largura: a 768px a caixa do núcleo tem 702px de largura, e sem teto
     a composição inflava para 662px e crescia a seção em 247px. As peças que ela
     substituiu tinham teto próprio; a composição precisa do dela. */
  max-width: 430px;
}