/* Mulher Inteira™ — v4 "Integração"
   Baseada na v2 (imersiva): fotografia a sangrar, tipo sobre imagem, bandas
   escuras. Estrutura de 7 blocos e copy fornecidas pelo cliente.
   Mobile-first. */

:root{
  --creme:#F9EFE3; --creme-claro:#FAF4E8; --blush:#FAE9DF; --cinza-azul:#E9EBE8;
  --bege:#F0D7AC; --preto:#000000; --tinta:#200505; --tinta-suave:#5B4A44;
  /* --escuro (castanho #1A0E0A) removido: a cliente achou-o estranho.
     Os fundos escuros passaram a bordeaux e os overlays a --sombra. */
  /* Laranja da marca. Fica declarado como referencia -- e cor oficial -- mas a
     pagina nao o usa: e a linha institucional B2B, e sobre creme da 3.02:1.
     Ver doc 04. */
  --laranja:#D3702D; --laranja-forte:#9E4E1C; --laranja-claro:#E8975C;
  /* acento aprovado 2026-09-02 (D7) -- amostrado dos retratos, contrastes medidos */
  --bordeaux:#631E28;        /* roupa da Monica numa das fotos · escolhido por ela
                                10.58:1 sobre creme · 12.02:1 com branco · AAA */
  --bordeaux-escuro:#4E171F; /* hover · derivado do acima, mesma matiz 351deg */
  /* Overlay das fotos: bordeaux quase preto (era castanho #1A0E0A).
     Usado como triplo --rgb-sombra, mais abaixo. */
  --creme-quente:#F0CBB6;    /* texto secundario sobre bordeaux · 7.11:1 */

  /* Triplos RGB para rgb(... / alpha). Evita cores literais espalhadas. */
  --rgb-sombra:20 4 9;
  --rgb-creme:249 239 227;
  --rgb-dourado:244 201 125;
  --rgb-bordeaux:99 30 40;
  --rgb-terracota:201 154 138;
  --rgb-tinta:32 5 5;

  /* Caixa de aviso temporario. Deliberadamente FORA da paleta da marca --
     tem de se ler como nota de trabalho, nao como parte do design. */
  --aviso-fundo:#FFF4D6; --aviso-linha:#C9A227; --aviso-texto:#6B5200;

  /* Acento sobre bordeaux. O --laranja da marca da so 3.13:1 sobre bordeaux
     (falha AA) e e vizinho na roda de cor, logo fica turvo. O --amarelo, que
     tambem e cor oficial, da 6.89:1 e le-se limpo. */
  --dourado:#F4C97D;         /* = --amarelo da marca */
  --medida:60ch;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Poppins',system-ui,sans-serif;
  --display:'Berlina','Poppins',sans-serif;
}

@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-var.woff2')format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-italic.woff2')format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2')format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2')format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Berlina';src:url('../fonts/Berlina.woff2')format('woff2');font-weight:400;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinta);
  font:400 1.0625rem/1.75 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:40rem;margin-inline:auto;padding-inline:1.375rem}
section{padding-block:3.25rem}
/* ===== TRES LAYOUTS DE SECCAO, e mais nenhum (D18) =====
   .layout-foto      fotografia a sangrar + overlay, texto claro
   .layout-claro     creme, texto escuro, acento bordeaux
   .layout-destaque  o layout de cor -- BORDEAUX ou LARANJA, ver abaixo
   Nenhuma seccao pode ter o mesmo layout que a anterior. */
.layout-claro{background:var(--creme);color:var(--tinta)}

/* ===== Layout de destaque: bordeaux (D22) =====
   Houve um selector de pre-visualizacao com duas variantes, bordeaux e laranja
   da marca. A cliente escolheu o bordeaux (2026-09-03) e o laranja saiu.
   Estes tokens vieram do bloco [data-acento="bordeaux"] para o :root -- sem
   isso o layout ficava sem fundo nem cor de texto. */
:root{
  --sec-fundo:var(--bordeaux);
  --sec-texto:var(--creme);          /* 10.58:1 */
  --sec-titulo:#fff;                 /* 12.02:1 */
  --sec-forte:#fff;
  --sec-suave:var(--creme-quente);   /*  7.97:1 */
  --sec-acento:var(--dourado);       /*  7.73:1 */
  --sec-linha:var(--rgb-creme);
  --sec-foco:var(--dourado);
}

.layout-destaque{background:var(--sec-fundo);color:var(--sec-texto)}
.layout-destaque h2,.layout-destaque h3{color:var(--sec-titulo)}
.layout-destaque .declara{color:var(--sec-texto)}
.layout-destaque .staccato p{color:var(--sec-texto)}
.layout-destaque > .wrap strong{color:var(--sec-forte)}
.layout-destaque .kicker{color:var(--sec-suave)}
.layout-destaque :focus-visible{outline-color:var(--sec-foco)}
.layout-destaque .declara::before{background:var(--sec-acento)}
.layout-destaque .paraquem li::before{color:var(--sec-suave)}
.layout-destaque .beneficios li::before{background:var(--sec-acento);opacity:1}
.layout-destaque .beneficios li{border-bottom-color:rgb(var(--sec-linha) / .22)}
.layout-destaque .depoimento-texto{border-left-color:var(--sec-acento)}
.layout-destaque .depoimento-texto blockquote{color:var(--sec-texto)}
.layout-destaque .depoimento-texto figcaption .kicker,
.layout-destaque .depoimento-video figcaption .kicker{color:var(--sec-suave)}
.layout-destaque .cartao{border-color:rgb(var(--sec-linha) / .35)}
/* botao branco em ambas: 3.43:1 de superficie sobre laranja e 10.72:1 sobre
   bordeaux -- passa o limite de 3:1 nos dois; rotulo bordeaux a 10.72:1 */
.layout-destaque .cta.light{background:#fff;color:var(--bordeaux)}
.layout-destaque .cta.light:hover,
.layout-destaque .cta.light:focus-visible{background:var(--creme)}
/* os filhos do bloco do problema seguem os mesmos tokens */
.layout-destaque .par{border-left-color:rgb(var(--sec-linha) / .30)}
.layout-destaque .par p:last-child{color:var(--sec-suave)}
.layout-destaque .consequencia{border-top-color:rgb(var(--sec-linha) / .22)}
.layout-destaque .caminho{border-top-color:rgb(var(--sec-linha) / .28)}
.layout-destaque .caminho-titulo{color:var(--sec-titulo)}
.layout-destaque .caminho .antes{border-left-color:rgb(var(--sec-linha) / .22)}
.layout-destaque .caminho .antes .col-label,
.layout-destaque .caminho .antes li{color:var(--sec-suave)}
.layout-destaque .caminho .depois{border-left-color:var(--sec-acento)}
.layout-destaque .caminho .depois .col-label{color:var(--sec-titulo)}
.layout-destaque .caminho .depois li{color:var(--sec-texto);font-weight:500}
.layout-destaque .caminho .depois::before{color:var(--sec-acento)}

/* ---------- tipografia ---------- */
/* .kicker: os eyebrows de secção foram removidos a pedido da cliente.
   Sobrevive nas atribuições dos testemunhos e nos rótulos de dados. */
.kicker{font-family:var(--display);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bordeaux);margin:0 0 1.15rem}
h1,h2{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(2rem,8.5vw,4rem);line-height:1.08}
h2{font-size:clamp(1.5rem,5.8vw,2.5rem);line-height:1.2;margin-bottom:1.25rem;text-wrap:balance}
h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:0}
p{margin:0 0 1.1rem;max-width:var(--medida)}
.lead{font-size:1.1875rem;line-height:1.7}
.lead-cta{margin-top:2rem}
.staccato p{margin:0 0 .5rem}
.staccato p:last-child{margin-bottom:0}
.gap{height:1.15rem}
.tm{font-size:.62em;vertical-align:.55em;letter-spacing:0}

/* declaração isolada */
.declara::before{content:"";display:block;width:2rem;height:2px;
  background:var(--bordeaux);margin-bottom:1rem}
.declara{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.375rem,5.6vw,2rem);line-height:1.34;max-width:28ch;margin:1.5rem 0 0}

/* ---------- hero a sangrar ---------- */
.hero{position:relative;padding:0;min-height:92svh;display:grid;align-items:end;isolation:isolate}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;z-index:-2}
/* 30% NAO e arbitrario: e onde os olhos dela estao na imagem (2400px de altura).
   Com object-position Y% == posicao real da feature, essa feature fica sempre a
   Y% da altura do hero, em qualquer proporcao de ecra. A 18% os olhos caiam a
   56% num monitor 1920x900 e a 80% num ultrawide -- debaixo do gradiente, e
   sobrava a testa. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(var(--rgb-sombra) / .30) 0%,rgb(var(--rgb-sombra) / .18) 35%,rgb(var(--rgb-sombra) / .86) 82%,rgb(var(--rgb-sombra) / .95) 100%)}
.hero-inner{padding:0 1.375rem 2.75rem;color:#fff;width:100%;max-width:40rem;margin-inline:auto}
.hero h1{color:#fff;text-wrap:balance}
.hero .sub{font-family:var(--serif);font-style:italic;color:var(--creme);
  font-size:clamp(1.125rem,4.4vw,1.5rem);line-height:1.45;margin:.9rem 0 1.9rem;max-width:32ch}
.hero-logo{position:absolute;top:1.5rem;left:1.375rem;height:32px;width:auto;z-index:2;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.55))}
@media(min-width:900px){.hero{min-height:88svh}.hero-inner{padding-bottom:4.5rem;max-width:46rem}}

/* ---------- botões ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;width:100%;
  padding:.9rem 1.85rem;background:var(--bordeaux);color:#fff;text-decoration:none;
  font-weight:600;font-size:1.0625rem;border-radius:2px;transition:background .18s ease}
.cta:hover,.cta:focus-visible{background:var(--bordeaux-escuro)}
.cta.light{background:#fff;color:var(--bordeaux)}
.cta.light:hover,.cta.light:focus-visible{background:var(--creme)}
@media(min-width:600px){.cta{width:auto}}

.cta-fixed{position:fixed;inset:auto 0 0 0;z-index:40;padding:.75rem 1.375rem;
  background:rgb(var(--rgb-creme) / .94);backdrop-filter:blur(8px);border-top:1px solid var(--bege);
  transform:translateY(110%);transition:transform .28s ease}
.cta-fixed.on{transform:translateY(0)}
@media(min-width:900px){.cta-fixed{display:none}}

/* ---------- banda a sangrar com citação ---------- */
.banda{position:relative;padding:0;isolation:isolate;display:grid;align-items:center;min-height:58svh}
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.banda::after{content:"";position:absolute;inset:0;z-index:-1;background:rgb(var(--rgb-sombra) / .68)}
.banda .wrap{padding-block:3.5rem}
.banda blockquote{margin:0;color:#fff;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.375rem,5.4vw,2.125rem);line-height:1.34;max-width:32ch;text-wrap:balance}
.banda cite{display:block;margin-top:1.25rem;font-family:var(--sans);font-style:normal;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado)}

/* ---------- secção escura ---------- */

/* ============================================================
   .cartao — ilha clara, usada em qualquer layout
   Um cartao claro dentro de uma seccao de cor NAO pode herdar a cor do
   texto da seccao: na variante bordeaux isso e creme, e desaparece.
   Por isso o .cartao declara a sua propria cor, sempre a mesma,
   independentemente do fundo que tem atras.
   Texto em preto, destaques em bordeaux.
   ============================================================ */
.cartao{background:var(--creme-claro);color:var(--preto)}
.cartao strong,.cartao b{color:var(--bordeaux)}
.cartao em,.cartao i{color:var(--preto)}
/* h2/h3 dentro do cartao: a regra .layout-destaque h3 poe --sec-titulo, que na
   variante bordeaux e branco e desaparece no cartao claro. Isto ganha-lhe. */
.layout-destaque .cartao h2,.layout-destaque .cartao h3,
.cartao h2,.cartao h3{color:var(--preto)}
/* rotulos, marcadores e numeros: bordeaux em qualquer fundo */
.cartao .kicker,.cartao dt,.cartao .formato{color:var(--bordeaux)}
.cartao li::before,.cartao li::marker{color:var(--bordeaux)}
/* texto secundario dentro do cartao */
.cartao .nota-dl,.cartao .espaco{color:var(--tinta-suave)}

/* ---------- 2 · pares do problema ---------- */
.pares{margin:0 0 1.75rem;display:grid;gap:1.1rem}
.par{border-left:2px solid;padding-left:1.1rem}
.par p:last-child{font-family:var(--serif);font-style:italic;font-size:1.125rem}
.par p{margin:0;max-width:40ch}
.par p:first-child{font-size:1.125rem}
@media(min-width:760px){.pares{grid-template-columns:1fr 1fr;gap:1.4rem}}

/* ---------- 2b · o caminho de integração (antes → depois) ---------- */
.caminho{margin:2.25rem 0 1.75rem;padding-top:1.75rem;border-top:1px solid}
.caminho-titulo{font-family:var(--serif);font-size:clamp(1.25rem,4.6vw,1.5rem);
  font-weight:400;margin:0 0 1.5rem}
.caminho-cols{display:grid;gap:1.5rem}
.caminho .col{position:relative;padding-left:1.1rem}
.caminho .col-label{font-family:var(--display);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 .8rem}
.caminho ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.caminho .antes,.caminho .depois{border-left:2px solid}
.caminho li{max-width:34ch;line-height:1.5}
@media(min-width:760px){
  .caminho-cols{grid-template-columns:1fr 1fr;gap:2.75rem}
  .caminho .depois::before{content:"→";position:absolute;left:-1.75rem;top:1.9rem;
    font-size:1.1rem;line-height:1}
}

.consequencia{border-top:1px solid;padding-top:1.5rem;margin-top:.5rem}

/* ---------- 3 · os 5 pilares ---------- */
.pilares{list-style:none;margin:2rem 0 0;padding:0;counter-reset:p;display:grid;gap:.85rem}
.pilares li{counter-increment:p;position:relative;padding:1.15rem 1.25rem 1.15rem 3.6rem;
  border:1px solid var(--bege);border-radius:10px}
.pilares li::before{
  content:counter(p);position:absolute;left:1.25rem;top:1.1rem;
  width:1.65rem;height:1.65rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bordeaux);color:#fff;
  font-family:var(--sans);font-size:.8125rem;font-weight:600;line-height:1;
}
.pilares h3{font-size:1.1875rem}
@media(min-width:760px){.pilares{grid-template-columns:1fr 1fr}.pilares li:first-child{grid-column:1/-1}}

/* ---------- 4 · o processo ---------- */
.processo{border:1px solid rgb(var(--rgb-dourado) / .45);border-radius:12px;
  padding:1.85rem 1.4rem;margin-top:1.5rem}
.formato{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .35rem}
.duracao{font-family:var(--serif);font-size:clamp(1.75rem,6.5vw,2.25rem);line-height:1.1;margin:0 0 1.35rem}
.inclui{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.inclui li{position:relative;padding-left:1.6rem;max-width:44ch}
.inclui li::before{content:"◆";position:absolute;left:0;top:.15rem;font-size:.55rem}
/* oferta -- valores vindos de data/oferta.json */
.oferta{margin:1.75rem 0 0;padding-top:1.5rem;
  border-top:1px solid rgb(var(--rgb-dourado) / .35);display:grid;gap:1rem}
.oferta>div{display:grid;gap:.15rem}
.oferta dt{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase}
.oferta dd{margin:0;font-size:1.0625rem;line-height:1.5;
  min-height:1.6em}                      /* reserva espaco: sem salto ao hidratar */
.oferta dd strong{font-family:var(--serif);font-weight:400;
  font-size:1.375rem;letter-spacing:-.01em}
.oferta .nota-dl{font-size:.9375rem}
.oferta[data-erro] dd::after{content:"—";color:var(--tinta-suave)}
@media(min-width:620px){.oferta{grid-template-columns:1fr 1fr;gap:1.25rem 2rem}}

.espaco{font-family:var(--serif);font-style:italic;font-size:1.125rem;line-height:1.6;
  margin:1.5rem 0 0;max-width:42ch}

/* ---------- 5 · benefícios ---------- */
.beneficios{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.05rem}
.beneficios li{padding:.85rem 0 .85rem 1.75rem;position:relative;
  border-bottom:1px solid var(--bege);max-width:46ch}
.beneficios li:last-child{border-bottom:0}
.beneficios li::before{content:"";position:absolute;left:.1rem;top:1.35rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--bordeaux);opacity:.85}
@media(min-width:820px){
  .beneficios{grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .beneficios li{max-width:none}
}

/* ---------- 6 · para quem é ---------- */
.paraquem{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.7rem}
.paraquem li{position:relative;padding-left:1.9rem;max-width:46ch}
.paraquem li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--bordeaux);font-weight:600;font-size:.9375rem}
.nao-e{margin-top:2rem;padding:1.25rem 1.375rem;
  border-radius:10px;border:1px solid rgb(var(--rgb-terracota) / .45)}
.nao-e p{margin:0;max-width:44ch}
.nao-e p:first-child{font-weight:500;margin-bottom:.35rem}
.nao-e p:last-child{font-family:var(--serif);font-style:italic;color:var(--tinta-suave)}

/* ---------- 7 · convite ---------- */

/* ---------- testemunhos ---------- */
/* Atribuicao: "Nome · participante", sem nomear programa (D23).
   Citacoes verbatim, nunca traduzidas (D11). */

.depoimento-texto{margin:2.5rem auto 0;max-width:38rem;padding-left:1.25rem;
  border-left:2px solid var(--bordeaux)}
.depoimento-texto blockquote{margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.1875rem,4.6vw,1.5rem);line-height:1.45;max-width:32ch;text-wrap:pretty}
.depoimento-texto figcaption{margin-top:1.1rem}
.depoimento-texto figcaption .kicker{margin:0}
.depoimento-texto.em-creme blockquote{color:var(--tinta)}

.depoimento-video{margin:2rem auto 0;max-width:420px;padding:0}
.depoimento-video .moldura{position:relative;aspect-ratio:480/848;
  border-radius:12px;overflow:hidden;background:#000;isolation:isolate;
  box-shadow:0 0 0 1px rgb(var(--rgb-bordeaux) / .25),0 12px 34px rgb(var(--rgb-sombra) / .22)}
.depoimento-video video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:12px}
.depoimento-video button{position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;border:0;cursor:pointer;padding:0;
  background:linear-gradient(180deg,rgb(var(--rgb-sombra) / .15),rgb(var(--rgb-sombra) / .45));
  color:#fff;font:inherit}
.depoimento-video button span{width:64px;height:64px;border-radius:50%;
  background:#fff;color:var(--bordeaux);
  display:grid;place-items:center;font-size:1.5rem;line-height:1;padding-left:.2rem;
  box-shadow:0 4px 18px rgb(var(--rgb-sombra) / .40);transition:transform .18s ease}
.depoimento-video button:hover span,.depoimento-video button:focus-visible span{transform:scale(1.07)}
.depoimento-video figcaption{margin-top:.9rem;text-align:center}
.depoimento-video figcaption .kicker{margin:0}

/* ---------- bio ---------- */
.bio{display:grid;gap:1.5rem}
@media(min-width:760px){.bio{grid-template-columns:.85fr 1.15fr;gap:2.75rem;align-items:start}}
.bio img{border-radius:12px}
.assinatura{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--tinta-suave)}

.todo{display:inline-block;margin-top:1.25rem;padding:.4rem .7rem;background:var(--aviso-fundo);
  border:1px dashed var(--aviso-linha);border-radius:4px;font-size:.875rem;color:var(--aviso-texto)}

footer{padding:2.5rem 0 6rem;font-size:.9375rem;color:var(--tinta-suave);background:var(--creme)}
footer img{height:28px;margin-bottom:1rem;opacity:.75}
footer a{color:var(--bordeaux);text-decoration:none}
footer a:hover{text-decoration:underline}
@media(min-width:900px){footer{padding-bottom:3rem}}

:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
/* em fundo escuro ou bordeaux o bordeaux nao se ve -- o foco passa a amarelo */
.banda :focus-visible,.hero :focus-visible{outline-color:var(--dourado)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}