/* OS 4 SEGUNDOS — landing V2.
   As seções passaram a ser identificadas por classe (.s-*), e não mais por
   :nth-of-type(). Assim a ordem da página pode mudar sem quebrar o estilo. */

:root {
  --paper: #f4eee3;
  --paper-light: #fbf8f1;
  --ink: #231d18;
  --charcoal: #2d302b;
  --earth: #6d392b;
  --terracotta: #ae6045;
  --olive: #74795e;
  --terrain: #e5d5bd;
  --line: rgba(59, 43, 31, .2);
  --line-light: rgba(255, 250, 240, .25);
  --max: 76rem;
  --reading: 45rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.68; overflow-x: hidden; }
/* A reserva permite revelar integralmente inclusive o ultimo CTA. O aviso
   publica sua altura real tambem quando as preferencias estao abertas. */
html.cst-aberto { scroll-padding-bottom: calc(var(--cst-altura, 0px) + 16px); }
html.cst-aberto body.landing { padding-bottom: calc(var(--cst-altura, 0px) + 16px); }
/* Preserva uma faixa legivel para o conteudo; o painel rola por dentro. */
.landing .cst__caixa { max-height: 70vh; max-height: 70svh; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.container { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }
.reading { max-width: var(--reading); }
.center { text-align: center; }
.section { position: relative; padding: clamp(4.5rem, 8vw, 8rem) 0; border-top: 1px solid var(--line); isolation: isolate; }
.section--tint { background: var(--terrain); }
.section--callout { background: var(--charcoal); color: var(--paper-light); border-color: transparent; }
.section--callout a { color: #e8c4a8; }

h1, h2, h3 { margin: 0; color: inherit; font-weight: 400; line-height: 1.02; letter-spacing: -.03em; }
h1 { max-width: 19ch; font-size: clamp(1.85rem, 3.3vw, 3.1rem); line-height: 1.05; }
h2 { max-width: 22ch; margin-bottom: 1.6rem; font-size: clamp(1.9rem, 3.4vw, 3.4rem); }
h3 { margin: 2.2rem 0 .8rem; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; }
p { margin: 0 0 1.35rem; }
strong { font-weight: 700; }
ul { padding-left: 1.25rem; }
li { margin: .6rem 0; }
.lead { max-width: 48ch; margin: .85rem 0; font-size: clamp(1.02rem, 1rem + .3vw, 1.15rem); line-height: 1.48; }

/* rótulo pequeno, reaproveitado em vários blocos */
.kicker { margin: 0 0 .8rem; color: var(--earth); font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }

/* ---------- botões ---------- */
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: .9rem 1.4rem; border: 1px solid transparent; border-radius: 0; font-family: Arial, Helvetica, sans-serif; font-size: .84rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; }
.button--primary { background: var(--earth); color: var(--paper-light); }
.button--secondary { background: transparent; color: var(--earth); border-color: var(--earth); }
.button:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 4px; }

.price-cta { margin: 2.4rem 0 0; }
.button--price { position: relative; width: min(100%, 26rem); }
.button--price::before { position: absolute; inset: -.45rem; z-index: -1; border: 1px solid var(--terracotta); opacity: .55; pointer-events: none; content: ''; }
@keyframes respiro-moldura { from { transform: scale(1); opacity: .5; } to { transform: scale(1.03); opacity: .95; } }

/* ---------- 1 · hero ---------- */
.s-hero { border-top: 0; background: var(--paper-light); padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(3rem, 6vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.descritor { max-width: 50ch; margin: .75rem 0 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); line-height: 1.38; color: var(--earth); }
.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; max-width: 38rem; margin: 1rem 0; padding: 0; list-style: none; }
.fatos li { margin: 0; padding: .42rem 0 .42rem 1.4rem; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.4; }
.fatos li { position: relative; }
.fatos li::before { position: absolute; left: 0; top: .42rem; color: var(--terracotta); content: '—'; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.hero-image { position: relative; margin: 0; }
.hero-image::after { position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; z-index: -1; border: 1px solid var(--terracotta); content: ''; }
.hero-image img { width: 100%; height: auto; aspect-ratio: 928 / 1152; object-fit: contain; }

/* ---------- 2 · situação futura ---------- */
.sequencia { counter-reset: passo; margin: 2rem 0; padding: 0; list-style: none; }
.sequencia li { counter-increment: passo; position: relative; margin: 0; padding: .95rem 0 .95rem 3rem; border-top: 1px solid var(--line); }
.sequencia li::before { position: absolute; left: 0; top: .95rem; width: 2rem; color: var(--terracotta); font-family: Arial, Helvetica, sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .06em; content: counter(passo, decimal-leading-zero); }
.limite { max-width: 46rem; margin-top: 2.2rem; padding: 1.2rem 1.4rem; background: var(--paper-light); border-left: 4px solid var(--olive); font-size: .98rem; }

/* ---------- 3 · antes e depois ---------- */
.comparativo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); margin: 2.5rem 0 1.5rem; }
.perfil { padding: 1.4rem 1.5rem 1.6rem; background: var(--paper-light); border-top: 4px solid var(--line); }
.perfil--depois { border-top-color: var(--earth); }
.perfil__selo { margin: 0 0 1.2rem; color: var(--meta, #6f675d); font-family: Arial, Helvetica, sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.perfil__selo--ok { color: var(--earth); }
.perfil__campos { margin: 0; }
.perfil__campos dt { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--earth); }
.perfil__campos dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.perfil__campos dd { margin: .5rem 0 0; }
.perfil__campos em { display: block; margin-top: .35rem; color: #5b544b; font-size: .88rem; font-style: normal; line-height: 1.45; }
.amostra-nome { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.amostra-bio { display: block; font-size: .95rem; line-height: 1.45; }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: min(100%, 11rem); }
.grade i { display: block; aspect-ratio: 1; background: #d9cfc0; }
.grade--antes i:nth-child(2) { background: #cfc4b2; }
.grade--antes i:nth-child(4) { background: #e6ded2; }
.grade--antes i:nth-child(5) { background: #c6bba8; }
.grade--antes i:nth-child(8) { background: #efe9df; }
.grade--depois i { background: var(--terracotta); opacity: .34; }
.grade--depois i:nth-child(3n+1) { opacity: .5; }
.grade--depois i:nth-child(3n+2) { opacity: .68; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tags span { padding: .22rem .6rem; background: #e6ded2; font-family: Arial, Helvetica, sans-serif; font-size: .72rem; letter-spacing: .04em; }
.tags--ok span { background: var(--earth); color: var(--paper-light); }
.aviso-demo { max-width: 46rem; margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--terracotta); color: #4d453c; font-size: .88rem; font-style: italic; }
.section--tint .aviso-demo { color: #4a4238; }

/* ---------- 4 · mecanismo ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.figura-lateral { margin: 0; position: sticky; top: 2rem; }
.editorial-image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85); }
.perguntas { max-width: 40rem; margin: 1.2rem 0 1.6rem; padding: 0; list-style: none; }
.perguntas li { position: relative; margin: 0; padding: .55rem 0 .55rem 2rem; border-bottom: 1px solid var(--line); }
.perguntas li::before { position: absolute; left: 0; color: var(--terracotta); font-weight: 700; content: '?'; }

/* ---------- 5 · produto ---------- */
.produto-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.produto-texto { max-width: var(--reading); }
.produto-mockup { margin: 0; }
.produto-mockup img { width: 100%; height: auto; aspect-ratio: 928 / 1152; object-fit: contain; }
.produto-mockup figcaption { margin-top: .8rem; color: #cfc3b2; font-family: Arial, Helvetica, sans-serif; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }

.definicao { max-width: 40ch; font-size: clamp(1.2rem, 1.1rem + .6vw, 1.55rem); line-height: 1.42; }
.section--callout .definicao { color: #f0e7d9; }
.dois-arquivos { margin: 1.8rem 0 0; padding: 0; list-style: none; }
.dois-arquivos li { padding: .9rem 0; border-top: 1px solid var(--line-light); }

/* ---------- 6 · caminho de aplicação ---------- */
.mapa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: etapa; }
.mapa__etapa { position: relative; margin: 0; padding: 1.4rem 1.2rem 1.4rem 0; border-top: 4px solid var(--earth); }
.mapa__etapa + .mapa__etapa { padding-left: 1.2rem; }
.mapa__num { display: inline-flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; margin-bottom: .7rem; background: var(--earth); color: var(--paper-light); font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 700; }
.mapa__etapa h3 { margin: 0 0 .5rem; font-size: 1.08rem; line-height: 1.22; }
.mapa__etapa p { margin: 0; font-size: .92rem; line-height: 1.5; }

/* ---------- 7 · veja por dentro ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.2rem); max-width: 62rem; margin: 2.5rem 0 0; }
.amostra { margin: 0; }
.amostra__link { display: block; border: 1px solid var(--line); background: var(--paper-light); }
.amostra__link:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 4px; }
.amostra img { width: 100%; height: auto; aspect-ratio: 1240 / 1754; object-fit: cover; object-position: top center; }
.amostra figcaption { margin-top: .6rem; color: #4d453c; font-size: .88rem; line-height: 1.4; }

.peca-zoom { display: none; }
.peca-zoom:target { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: clamp(1rem, 4vw, 3rem); background: rgba(24, 20, 16, .93); overflow: auto; }
.peca-zoom:target img { width: auto; max-width: min(100%, 46rem); max-height: 82vh; object-fit: contain; }
.peca-zoom__fechar { align-self: flex-end; padding: .7rem 1.1rem; background: var(--paper-light); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.peca-zoom__fechar:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }

/* ---------- 8 · o que poderá ficar pronto ---------- */
.checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); margin: 2.2rem 0; padding: 0; list-style: none; }
.checklist li { position: relative; margin: 0; padding: .85rem 0 .85rem 2.2rem; border-top: 1px solid var(--line); }
.checklist li::before { position: absolute; left: 0; top: .78rem; display: block; width: 1.15rem; height: 1.15rem; border: 1px solid var(--earth); background: var(--paper-light); content: ''; }
.checklist li::after { position: absolute; left: .3rem; top: .86rem; width: .5rem; height: .28rem; border-left: 2px solid var(--earth); border-bottom: 2px solid var(--earth); transform: rotate(-45deg); content: ''; }

/* ---------- 9 · conteúdo ---------- */
.conteudo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin: 2rem 0 0; }
.conteudo-grid h3 { margin: 0 0 .7rem; padding-top: 1.1rem; border-top: 4px solid var(--terracotta); }
.lista-conteudo { padding: 0; list-style: none; }
.lista-conteudo li { padding: .8rem 0; border-top: 1px solid var(--line); }
.subtitulo-lista { margin: 3rem 0 1rem; font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--earth); }
.itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); margin: 0 0 2rem; padding: 0; list-style: none; }
.itens li { position: relative; margin: 0; padding: .7rem 0 .7rem 1.4rem; border-top: 1px solid var(--line); font-size: .96rem; }
.itens li::before { position: absolute; left: 0; color: var(--terracotta); content: '•'; }

/* ---------- 10 · para quem é ---------- */
.qualifica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 2rem; }
.qualifica__col h3 { margin: 0 0 .6rem; padding-left: 1rem; border-left: 4px solid var(--olive); font-size: 1.15rem; }
.qualifica__col--nao h3 { border-left-color: var(--terracotta); }
.qualifica__col ul { padding-left: 1.15rem; }
.qualifica__col li { font-size: .97rem; }

/* ---------- 13 · faq ---------- */
.faq { margin: 0; }
.faq dt { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.faq dd { max-width: 42rem; margin: .8rem 0 0; }

/* ---------- 14 · oferta ---------- */
.offer-shell { overflow: hidden; padding-block: clamp(5rem, 10vw, 9rem); background: var(--earth); color: var(--paper-light); border-color: transparent; }
.offer-shell .reading { max-width: 52rem; margin-inline: auto; }
.offer-shell h2 { max-width: 16ch; margin-inline: auto; }
.offer-shell h3 { margin-top: 2.4rem; font-family: Arial, Helvetica, sans-serif; font-size: .77rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.offer-shell a { color: var(--paper-light); }
.offer-list { padding: 0; list-style: none; text-align: left; }
.offer-list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--line-light); }
.offer-list li::before { color: #e5b08a; content: '✦'; }
.price { margin: 2.4rem 0 1.6rem; font-size: 1.15rem; line-height: 1.55; }
.price strong:first-child { display: block; margin-bottom: .5rem; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; }
.offer-shell .button--primary { width: auto; background: var(--paper-light); color: var(--earth); }
.offer-shell .button--primary:hover { background: #fff; }

.site-footer { padding: 2.5rem 1.5rem; background: var(--charcoal); color: var(--paper-light); font-family: Arial, Helvetica, sans-serif; font-size: .8rem; letter-spacing: .04em; text-align: center; }
.site-footer p { margin: 0 auto; }
/* alvo de toque confortável: o link do rodapé fica com 44px de altura */
.site-footer a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 .6rem; color: #e8c4a8; }
.site-footer a:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* ---------- aviso de medição: só ajuste visual ----------
   O tracking.css é cópia byte a byte do publicado e NÃO é editado. Como ele
   carrega depois do styles.css, estas regras usam `.landing` para vencer por
   especificidade (0,2,0 contra 0,1,0). Nada aqui esconde o aviso, remove texto,
   remove botão ou reduz alvo de toque: os botões seguem com 44px de altura. */
.landing .medicao { gap: .55rem 1.5rem; padding: .7rem clamp(1rem, 3vw, 2rem); padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px)); }
.landing .medicao__texto { flex: 1 1 20rem; min-width: 0; max-width: 82ch; font-size: .85rem; line-height: 1.4; }
.landing .medicao__acoes { flex: 0 0 auto; }
.landing .medicao__acoes { gap: .5rem; }
.landing .medicao__botao { min-height: 44px; padding: .5rem 1.1rem; font-size: .74rem; }

/* telas baixas: o aviso encolhe e a dobra aperta, para não cobrir os CTAs */
@media (max-height: 820px) {
  .landing .medicao { gap: .4rem 1.2rem; padding: .5rem clamp(.9rem, 2.5vw, 1.5rem); padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .landing .medicao__texto { max-width: none; font-size: .8rem; line-height: 1.34; }
  .landing .medicao__botao { padding: .45rem .95rem; font-size: .72rem; }
}
@media (max-height: 745px) and (min-width: 44.01rem) {
  .s-hero { padding-top: 1.1rem; padding-bottom: 2rem; }
  .s-hero h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); }
  .s-hero .descritor { margin-top: .6rem; font-size: 1rem; }
  .s-hero .lead { margin: .6rem 0; font-size: .97rem; }
  .fatos { margin: .7rem 0; }
  .fatos li { padding-top: .35rem; padding-bottom: .35rem; font-size: .88rem; }
  .fatos li::before { top: .35rem; }
  .hero-ctas { margin-top: .9rem; }
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .button { transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease; }
  .button:hover { transform: translateY(-2px); opacity: .94; }
  .amostra img, .editorial-image { transition: transform 400ms ease; }
  .amostra__link:hover img { transform: scale(1.015); }
  .button--price::before { animation: respiro-moldura 3.6s ease-in-out infinite alternate; }
}

/* ---------- tablet ---------- */
@media (max-width: 62rem) {
  .mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
  .mapa__etapa, .mapa__etapa + .mapa__etapa { padding-left: 0; padding-right: 0; }
  .conteudo-grid { grid-template-columns: 1fr; }
  .produto-grid { grid-template-columns: 1fr; }
  .produto-mockup { max-width: 26rem; }
  .split { grid-template-columns: 1fr; }
  .figura-lateral { position: static; max-width: 26rem; }
}

/* telas de pouca altura: a primeira dobra precisa caber com o aviso aberto */
@media (max-height: 800px) and (min-width: 44.01rem) {
  .s-hero { padding-top: 1.5rem; }
  .s-hero h1 { font-size: clamp(1.8rem, 2.9vw, 2.6rem); }
  .s-hero .lead { margin: .7rem 0; }
  .fatos { margin: .8rem 0; }
}

/* ---------- celular ---------- */
@media (max-width: 44rem) {
  body { font-size: 16px; }
  .container { width: min(calc(100% - 2rem), var(--max)); }
  .section { padding: 3.5rem 0; }
  .s-hero { padding-top: 1.4rem; }
  .s-hero h1 { font-size: 1.78rem; }
  .s-hero .lead { margin: .7rem 0; font-size: .98rem; }
  .s-hero .descritor { font-size: 1rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .fatos { grid-template-columns: 1fr; margin: 1rem 0; }
  .hero-image { max-width: min(100%, 22rem); margin-inline: auto; }
  .hero-texto { order: -1; }
  .hero-image::after { inset: .8rem -.8rem -.8rem .8rem; }
  .hero-ctas .button { width: 100%; }
  .comparativo { grid-template-columns: 1fr; }
  .mapa { grid-template-columns: 1fr; }
  .qualifica { grid-template-columns: 1fr; }
  .produto-grid { grid-template-columns: 1fr; }
  .produto-mockup { max-width: min(100%, 24rem); margin-inline: auto; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checklist, .itens { grid-template-columns: 1fr; }
  .button, .offer-shell .button--primary { width: 100%; }
  .peca-zoom:target img { max-height: 74vh; }
  .landing .medicao { gap: .5rem; padding: .55rem .9rem; padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); }
  .landing .medicao__texto { font-size: .79rem; line-height: 1.36; }
}