/* Mulher Inteira™ — v6 "Proposta V6"
   Baseada na v4 (imersiva): fotografia a sangrar, tipo sobre imagem, bandas
   escuras. A copy e agora a "Proposta V6 — Landing Page" entregue pela
   cliente: muito mais curta que a v5, blocos curtos e muito espaco em branco,
   e com a historia da Monica movida do inicio para depois da prova social.
   O hero e curto: titulo, subtitulo, linha de formato e botao (MI14).
   Os componentes que serviam a copy integral da v5 (.regra, .inclui,
   .paraquem, o cartao .jornada) sairam com o texto que serviam; estao no
   historico do git se for preciso voltar atras.
   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?v=ef05b30d)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?v=4450ccfb)format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url(../fonts/poppins-400.woff2?v=4284cfb0)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(../fonts/poppins-500.woff2?v=c45726e5)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url(../fonts/poppins-600.woff2?v=4da28156)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Berlina';src:url(../fonts/Berlina.woff2?v=9d0a09ae)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}
/* ⚠️ Sem esta regra o atributo hidden nao funciona em nada que tenha display
   no CSS: hidden vem da folha do agente e QUALQUER regra de autor lhe ganha,
   por menos especifica que seja. Foi o que aconteceu ao aviso .todo, que tem
   display:inline-block -- ficou visivel na raiz e na /v5/ apesar de estar
   hidden no markup e de o provisorio ser false. */
[hidden]{display:none!important}

.wrap{width:100%;max-width:40rem;margin-inline:auto;padding-inline:1.375rem}
section{padding-block:3.25rem}
/* Estas duas regras estavam no doc 04 (envelope 40rem -> 46rem) e no doc 06
   (ritmo 3.25rem -> 6rem) desde o inicio, mas nunca chegaram ao CSS: o 46rem
   so tinha sido aplicado ao .hero-inner, e por isso o hero era 736px e todo o
   corpo abaixo dele 640px -- a pagina dava um degrau de 96px depois da dobra.
   O .hero e as .banda tem padding:0 proprio, com especificidade de classe, e
   ficam de fora do padding-block. */
@media(min-width:900px){
  .wrap{max-width:46rem}
  section{padding-block:6rem}
}
/* ===== 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 (D22)
   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 > .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 .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: 10.72:1 de superficie sobre bordeaux; 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)}
/* componentes de prosa longa sobre bordeaux */
.layout-destaque .recuo{border-left-color:var(--sec-acento)}
.layout-destaque .marcas li::before{color:var(--sec-acento)}
.layout-destaque .movimentos>li::before{background:var(--sec-acento);color:var(--bordeaux)}
.layout-destaque .fecho{border-top-color:rgb(var(--sec-linha) / .24);color:var(--sec-titulo)}
.layout-destaque .oferta.resumo dt{color:var(--sec-suave)}

/* ---------- 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}
.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}

/* ============================================================
   .prosa — o corpo longo
   A copy integral da cliente traz secções de dezenas de parágrafos, com
   subtítulos e separadores lá dentro. Este é o único contentor de texto
   corrido da página; tudo o que é lista ou cartão sai dele.
   ============================================================ */
.prosa{margin-top:1.75rem}
.prosa>p{margin:0 0 1.15rem}
.prosa h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.375rem,4.8vw,1.75rem);line-height:1.25;
  margin:2.75rem 0 1.15rem;max-width:28ch;text-wrap:balance}
.prosa h3:first-child{margin-top:0}
.prosa h2+.lead{margin-bottom:1.75rem;color:var(--tinta-suave);
  font-family:var(--serif);font-style:italic}
.prosa .declara{margin:2.25rem 0 2.25rem}
.prosa>p:last-child{margin-bottom:0}

/* bloco recuado: as perguntas e as falas entre aspas do documento */
.recuo{margin-left:.25rem;padding-left:1.25rem;border-left:2px solid var(--bordeaux);
  font-family:var(--serif);font-style:italic;font-size:1.1875rem;line-height:1.55;
  max-width:44ch}
@media(min-width:760px){.recuo{margin-left:1.75rem}}

/* linhas soltas separadas por <br> — as enumerações em verso do documento */
.versos{line-height:1.85;max-width:46ch}

/* lista com marcador losango */
.marcas{list-style:none;margin:0 0 1.15rem;padding:0;display:grid;gap:.5rem}
.marcas li{position:relative;padding-left:1.6rem;max-width:var(--medida)}
.marcas li::before{content:"◆";position:absolute;left:0;top:.15rem;
  font-size:.55rem;color:var(--bordeaux)}

/* ---------- 4 · os cinco movimentos ---------- */
.movimentos{list-style:none;margin:2.75rem 0 0;padding:0;counter-reset:m;
  display:grid;gap:2.75rem}
.movimentos>li{counter-increment:m;position:relative;padding-left:3.4rem}
.movimentos>li::before{
  content:counter(m);position:absolute;left:0;top:.15rem;
  width:2.15rem;height:2.15rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bordeaux);color:#fff;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;line-height:1;
}
.movimentos h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,4.4vw,1.5rem);line-height:1.25;margin:0 0 .95rem}
.movimentos p{margin:0 0 1rem}
.movimentos li>p:last-child{margin-bottom:0}
/* a única versão que a V6 usa: título + uma linha, sem corpo longo */
.movimentos.compacta{gap:1.75rem}
.movimentos.compacta h3{margin-bottom:.4rem}

/* ---------- 10 · o investimento ---------- */
.investimento{border:1px solid rgb(var(--rgb-dourado) / .45);
  border-radius:12px;padding:1.85rem 1.4rem;margin:1.75rem 0}
.formato{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .35rem}
.valor{font-family:var(--serif);font-size:clamp(2.25rem,9vw,3.25rem);
  line-height:1;letter-spacing:-.02em;margin:0 0 1.15rem;color:var(--bordeaux)}
.investimento .formato{margin:1.9rem 0 .6rem}
.investimento>p:not(.valor):not(.formato){max-width:48ch}

/* oferta -- valores vindos de data/oferta.json */
.oferta{margin:0;display:grid;gap:.85rem}
.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:1rem 2rem}}
/* a tira de resumo, já fora do cartão, logo a seguir ao botão */
.oferta.resumo{margin:2.5rem 0 0;padding-top:1.75rem;
  border-top:1px solid rgb(var(--rgb-dourado) / .35)}
@media(min-width:620px){.oferta.resumo{grid-template-columns:repeat(3,1fr)}}

.pos-cta{margin-top:1.5rem;max-width:48ch}
/* o botão é filho directo do .wrap, entre dois blocos de prosa */
.wrap>.cta{margin-top:.5rem}

/* o fecho da página */
.fecho{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:1.5;max-width:34ch;
  margin:3rem 0 0;padding-top:2.25rem;border-top:1px solid var(--bege)}

/* ============================================================
   .foto-legivel — tratamento das seccoes com fotografia de fundo
   Junta as duas metades do mesmo problema: tratar a FOTO (desfoque
   leve + tinta escura) e por o TEXTO todo a branco por cima dela.
   Serve o hero e qualquer seccao futura que sangre uma fotografia.

   Como se usa:
     <section class="... layout-foto foto-legivel">
       <img class="foto-fundo" ...>   <- a foto que leva o tratamento
       ...texto...
     </section>

   O marcador .foto-fundo e obrigatorio e nao e decorativo: o hero tem
   DOIS <img> filhos diretos -- o retrato e o logotipo -- e um seletor
   por > img desfocava tambem o logotipo.

   Afinar por seccao: basta redeclarar as variaveis no seletor dela.
   ============================================================ */
.foto-legivel{
  --foto-blur:0;        /* desfoque da fotografia -- 0 desde MI14 */
  --foto-tinta:.45;     /* opacidade da tinta escura por cima dela */
  --foto-escala:1;      /* ver nota da orla, abaixo */
  --foto-texto:#fff;    /* a cor de TODO o texto sobre a foto */
  color:var(--foto-texto);
  /* O scale faz a imagem transbordar a caixa da seccao de proposito, para
     esconder a orla do blur. Sem clip, quando a altura da seccao calha
     fraccionaria o arredondamento deixa a imagem pintar UMA linha para alem
     da borda do ::after -- e essa linha fica sem tinta e sem gradiente, a
     cor crua da fotografia. Apanhado a 500px de largura: a ultima linha do
     hero dava rgb(112,72,34) em vez de rgb(23,6,10). */
  overflow:hidden;
}

/* A orla: blur(6px) puxa transparencia de fora dos limites da imagem e
   deixa uma moldura esbatida de ~6px. O scale empurra esses limites para
   fora do enquadramento. Com --foto-blur:0 nao ha orla nenhuma, logo a
   escala fica em 1 e a foto volta ao enquadramento exacto do
   object-position -- que no hero nao e arbitrario (ver doc 04).
   Se voltares a subir o --foto-blur, sobe tambem o --foto-escala. */
.foto-legivel > .foto-fundo{
  filter:blur(var(--foto-blur));
  transform:scale(var(--foto-escala));
}

/* A tinta plana. Entra como background-color para ficar POR BAIXO do
   background-image de quem ja tenha gradiente proprio -- o hero tem, e
   o gradiente continua a fazer o seu trabalho no fundo da seccao. */
.foto-legivel::after{background-color:rgb(var(--rgb-sombra) / var(--foto-tinta))}

/* O texto que nao declara cor propria herda o branco do .foto-legivel.
   Quem declara -- no hero, .sub, .prosa>p e .meta -- consome a variavel
   com o valor antigo em fallback, por isso a classe liga-se e desliga-se
   sem guerra de especificidade e sem tocar nas regras originais. */

/* ---------- 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. */
/* background-IMAGE, nao o shorthand: o shorthand repunha o background-color
   a transparent e apagava a tinta que o .foto-legivel poe por baixo. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background-image: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%)}
/* O padding-top da folga ao logotipo. Na v5 o hero tinha 3 linhas e o
   align-items:end mantinha-as em baixo, longe do logotipo; com a copy da V6 o
   conteudo passou a encher a altura toda e o h1 subia contra ele. */
.hero-inner{padding:5.25rem 1.375rem 2.75rem;color:#fff;width:100%;max-width:40rem;
  margin-inline:auto}
.hero h1{color:#fff;text-wrap:balance}
/* A frase-ancora do workbook (MI15). O <br> separa as duas frases, como no
   original; a medida subiu de 32ch para 42rem e o corpo desceu de 1.5 para
   1.375rem, para a segunda frase caber numa linha em desktop -- a 32ch partia
   a meio e deixava um "tudo." orfao. O balance nao resolve isto sozinho:
   nao atravessa o <br>, trata cada segmento por si. */
.hero .sub{font-family:var(--serif);font-style:italic;color:var(--foto-texto,var(--creme));
  font-size:clamp(1.125rem,4.2vw,1.375rem);line-height:1.5;margin:.9rem 0 1.9rem;
  max-width:42rem;text-wrap:balance}
.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))}
/* O hero deixou de levar copy longa (MI14): fica so o h1, o subtitulo, a
   linha de formato e o botao. Os 4 paragrafos e a citacao desceram para a
   seccao 2, e com eles sairam .hero-inner .prosa, .hero-inner .prosa>p e
   .hero-cita -- estao no historico do git. A citacao la em baixo e agora
   um .recuo, porque .hero-cita era branca e sobre creme nao se via.
   A .meta fica, e passou a preceder o botao em vez de o seguir. */
.hero .meta{margin:1.35rem 0 .25rem;font-size:.9375rem;line-height:1.6;
  max-width:46ch;color:var(--foto-texto,rgb(var(--rgb-creme) / .82))}
.hero .meta strong{color:#fff;font-weight:500}
.hero-inner .cta{margin-top:1.75rem}
@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)}

/* ============================================================
   .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)}
/* `.layout-destaque > .wrap strong` (0,2,1) alcanca tambem os <strong> dentro do
   cartao e pinta-os de branco sobre creme -- invisivel. Estes selectores sobem
   a especificidade para 0,3,1 e devolvem o bordeaux a quem esta no cartao. */
.layout-destaque > .wrap .cartao strong,.layout-destaque > .wrap .cartao b,
.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{color:var(--tinta-suave)}

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

.depoimento-texto{margin:0 auto;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:0 auto;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}
/* A capa faz o que o atributo poster fazia, e faz melhor: poster nao aceita
   loading="lazy" e o browser ia buscar os quatro no arranque, 163 KB para uma
   seccao que esta muito abaixo da dobra. Como <img> fica diferida ate a
   vitrine se aproximar. Vem DEPOIS do <video> no markup para ficar por cima
   dele; o script remove-a quando o video arranca. */
.depoimento-video .capa{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)}
/* O video da Monica e 540x1262 (9:21 de telemovel), nao 480x848 como os
   testemunhos. Sem isto o object-fit:cover cortava-lhe ~24% da altura. Largura
   menor para o bloco nao ficar desproporcionado: 330 x 2.337 = 771px, a par
   dos 742 de um testemunho. */
.apresentacao-video{max-width:330px}
.apresentacao-video .moldura{aspect-ratio:540/1262}
.depoimento-video figcaption{margin-top:.9rem;text-align:center}
.depoimento-video figcaption .kicker{margin:0}

/* ---------- vitrine circular de testemunhos (MI10) ---------- */
/* === CONFIGURACAO -- e so este bloco. ===
   O script poe em cada item duas variaveis: --o, o deslocamento COM SINAL face
   ao centro (-2,-1,0,1,2...), e --a, o seu modulo. Nao ha abs() em CSS com
   suporte suficiente, dai o modulo vir ja calculado do script.
   Toda a geometria sai daqui por multiplicacao. As quedas de escala e de
   opacidade sao LINEARES de proposito: um so numero por eixo, afina-se a mao.
   Para o telemovel se comportar exactamente como o desktop: apagar a media
   query dos 900px, dez linhas abaixo. */
.vitrine{
  --viz:1;              /* quantos vizinhos por lado ficam visiveis */
  --passo-x:70%;        /* deslocamento lateral por nivel (% da largura do item) */
  --passo-z:-120px;     /* recuo em profundidade por nivel */
  --passo-rot:26deg;    /* inclinacao por nivel */
  --passo-esc:.12;      /* quanto encolhe por nivel */
  --passo-opac:.34;     /* quanto desvanece por nivel */
  --perspetiva:1200px;
  --item:min(272px,58vw);
  /* ⚠️ rem e NAO em. Em em, esta variavel valia 19px dentro da frase e 17px no
     .vitrine-item que a usa para o --frase-espaco: a mesma variavel dava duas
     alturas, e a folga ao topo caiu para 4px. Em rem vale o mesmo em todo o
     lado. Medido (corpo 19px): a frase da Ana, a mais longa, precisa de 147px
     a 380px de largura e 118px a partir dos 400px. Valores com folga real. */
  --frase-alt:10.5rem;  /* 168px -- abaixo de 470px a frase estreita e sobe a 147 */
  --frase-larg:min(30rem,92vw);  /* a frase e MAIS LARGA que o video, de proposito */
  /* + 2.6rem e nao 1.6: a 1.6 e a margem que separa a frase do video, e o 1rem
     restante e folga ao topo. Sem ela a frase encostava exactamente a borda da
     .vitrine, que tem overflow:hidden -- zero margem para erro de
     arredondamento ou para um corpo de letra diferente do previsto.
     Acompanha a margem da .depoimento-frase: mexer numa mexe na outra. */
  --frase-espaco:calc(var(--frase-alt) + 2.6rem);  /* faixa no topo do palco */
  --giro:.55s;
  position:relative;
  /* os itens de tras saem do envelope de 40rem; o corte e nas bordas da seccao */
  overflow:hidden;
}
@media(min-width:900px){
  .vitrine{--viz:2;--passo-x:82%;--passo-z:-150px;--passo-rot:24deg;--item:300px}
}

/* ---- frase de destaque, por cima do video (MI19) ----
   As quatro frases tem comprimentos muito diferentes -- 90 a 177 caracteres --
   e os itens da vitrine ficam lado a lado. Sem altura reservada, cada cartao
   comecaria o video a uma altura diferente e a roda ficava desalinhada.
   Por isso o palco reserva uma FAIXA de altura fixa no topo (--frase-espaco) e
   os cartoes comecam abaixo dela, todos na mesma linha. A frase flutua nessa
   faixa, ancorada por baixo: cresce para cima conforme o texto, e as curtas
   deixam o ar por cima, longe do video. A faixa e dimensionada pela frase mais
   longa, para o overflow:hidden da .vitrine nao a cortar. */
/* A frase NAO ocupa espaco dentro do cartao. Flutua por cima dele, na faixa
   que o --frase-espaco abre no topo do palco.
   Estava em fluxo e reservava altura em todos os itens para os videos ficarem
   alinhados -- so que nos vizinhos essa reserva lia-se como uma caixa vazia
   por cima do video. Fora do fluxo, os cartoes voltam ao tamanho de sempre e
   o alinhamento e automatico.
   O containing block e o proprio .vitrine-item, que tem transform. Para os
   vizinhos isso poe a frase torta -- mas eles estao a opacity:0, e so conta a
   do centro, que nao tem rotacao nenhuma. */
.depoimento-frase{
  position:absolute;
  bottom:100%;                 /* imediatamente acima do cartao */
  left:50%;
  width:var(--frase-larg);
  /* 1.6rem e a distancia ao video. Esteve em .9rem: com o min-height fora, a
     frase encostava de mais -- 17px, lia-se colada a moldura. */
  margin:0 0 1.6rem calc(var(--frase-larg) / -2);
  /* ⚠️ NADA de min-height aqui (MI20). Esteve com min-height:var(--frase-alt),
     de quando a frase ainda ocupava espaco no fluxo e a altura reservada
     alinhava os videos. Fora do fluxo deixou de servir para isso -- quem
     alinha os cartoes e o top:var(--frase-espaco) do .vitrine-item -- e
     passou a ser so um buraco: o texto assentava no TOPO da caixa de 138px e
     o vazio sobrava EM BAIXO, entre a frase e o video. Medido: 96px de folga
     na frase mais curta contra 37px na mais longa. Sem ela a caixa vale o
     texto, e o bottom:100% encosta qualquer frase ao video pela mesma
     margem. O ar passa a sobrar por cima, que e onde nao se nota. */
  /* ⚠️ NADA de display:flex aqui. Estava, para encostar o texto em baixo, e
     transformava o ::before e o ::after em ITENS FLEX: a aspa de abertura
     caia para o inicio da segunda linha e a de fecho ficava a pairar com uma
     folga. Ancorada por bottom:100%, a frase ja cresce para cima sozinha e o
     flex nao faz falta -- as aspas voltam a ser texto inline. */
  font-family:var(--serif);font-style:italic;
  /* 1.1875rem e nao 1.0625: o corpo das outras seccoes e 17px em SANS, e a
     mesma medida em serif italico le-se mais pequena. O .recuo -- a outra
     citacao serif italica da pagina -- ja resolvia isto com 19px, e esta
     segue-o. */
  font-size:1.1875rem;line-height:1.55;
  color:var(--tinta);
  text-wrap:pretty;
}
.depoimento-frase::before{content:"\201C"}
.depoimento-frase::after{content:"\201D"}
/* So o testemunho ao centro mostra a frase (MI19). O espaco fica reservado em
   todos -- e opacity, nao display -- senao os videos dos vizinhos subiam e a
   roda desalinhava a cada passo. Mesmo padrao do botao de play, que ja usava
   .vitrine-item:not([data-centro]) .moldura button{opacity:0}. */
/* Dos 470px para cima a frase chega aos 432-480px e estabiliza em 118px. */
@media(min-width:470px){.vitrine{--frase-alt:8.6rem}}  /* 138px: 20 de folga */
.depoimento-frase{opacity:0;transition:opacity var(--giro) ease}
.vitrine-item[data-centro] .depoimento-frase{opacity:1}
/* Nos layouts escuros o texto do cartao nao pode ficar a tinta. */
.layout-destaque .depoimento-frase{color:var(--sec-suave)}

/* A altura e a da moldura (480x848) mais a folga da legenda. Fixa-la aqui
   evita layout shift: os itens sao todos absolutos e nao esticam o palco. */
.vitrine-palco{
  position:relative;list-style:none;margin:0;padding:0;
  /* A frase de destaque tambem ocupa altura. --frase-alt esta em em do corpo
     da frase (.9375rem), por isso converte-se aqui; + .9rem da margem dela. */
  height:calc(var(--item) * 848 / 480 + 3.4rem + var(--frase-espaco));
  perspective:var(--perspetiva);
  /* ⚠️ NADA de transform-style:preserve-3d aqui. Estava, e o Chrome deixava de
     acertar nos vizinhos: o hit-testing dos filhos rodados passava ao lado e o
     clique caia no palco -- os vizinhos pareciam mortos. Quem cria o espaco 3D
     e a perspective; o preserve-3d so faria falta se os itens tivessem eles
     proprios filhos em 3D, e nao tem. */
  touch-action:pan-y;              /* deixa o scroll vertical passar; o horizontal e nosso */
}

.vitrine-item{
  --o:0; --a:0;                    /* fallback: sem JS fica tudo empilhado ao centro */
  position:absolute;top:var(--frase-espaco);left:50%;width:var(--item);
  margin-left:calc(var(--item) / -2);
  transform:
    translateX(calc(var(--o) * var(--passo-x)))
    translateZ(calc(var(--a) * var(--passo-z)))
    rotateY(calc(var(--o) * var(--passo-rot)))
    scale(calc(1 - var(--a) * var(--passo-esc)));
  opacity:calc(1 - var(--a) * var(--passo-opac));
  z-index:calc(100 - var(--a));
  transition:transform var(--giro) cubic-bezier(.22,.61,.36,1),
             opacity var(--giro) ease;
}
/* alem do ultimo nivel visivel o item desaparece, para nao apanhar cliques
   nem ficar a piscar a atravessar o centro quando a roda da a volta */
.vitrine-item[data-fora]{opacity:0;pointer-events:none}

/* O vizinho inteiro e um botao: clicar nele gira a vitrine. Fica por cima do
   <video> e do play, que so ficam ao alcance quando o item esta ao centro. */
.vitrine-ir{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  border:0;padding:0;cursor:pointer;border-radius:12px;
  background:rgb(var(--rgb-sombra) / .28);
  /* o rotulo fica para o leitor de ecra, nao para os olhos -- por isso
     transparente e nao display:none, que o tiraria da arvore de acessibilidade */
  color:transparent;font:inherit;
  transition:background .25s ease}
.vitrine-ir:hover,.vitrine-ir:focus-visible{background:rgb(var(--rgb-sombra) / .12)}
.vitrine-item[data-centro] .vitrine-ir{display:none}
/* so o do centro e que se toca: o play dos vizinhos era ruido visual */
.vitrine-item:not([data-centro]) .moldura button{opacity:0}

/* dentro da vitrine quem manda na largura e o item, nao a moldura */
.vitrine .depoimento-video{max-width:none}
/* no telemovel os vizinhos estao quase colados: tres legendas a essa distancia
   liam-se como uma so linha confusa. Acima dos 900px ha espaco e ficam. */
@media(max-width:899px){
  .vitrine-item:not([data-centro]) figcaption{opacity:0}
}

/* Slot por preencher: superficie neutra, sem poster e sem nome. Nao ha aqui
   nenhum testemunho a fingir -- ver D35 na spec de MI10. */
.depoimento-video.por-chegar .moldura{background:var(--cinza-azul);
  box-shadow:inset 0 0 0 1px rgb(var(--rgb-bordeaux) / .18)}
.depoimento-video.por-chegar .moldura::after{
  content:'';position:absolute;inset:1rem;border:1px dashed rgb(var(--rgb-bordeaux) / .35);
  border-radius:8px}
.depoimento-video.por-chegar .rotulo{position:absolute;inset:auto 1rem 1.6rem;
  text-align:center;color:var(--tinta-suave);z-index:1}

.vitrine-nav{display:flex;align-items:center;justify-content:center;
  gap:1.15rem;margin-top:1.5rem}
.vitrine-seta{width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid rgb(var(--rgb-bordeaux) / .3);background:#fff;color:var(--bordeaux);
  display:grid;place-items:center;cursor:pointer;font:inherit;font-size:1.05rem;
  transition:transform .18s ease,background .18s ease}
.vitrine-seta:hover,.vitrine-seta:focus-visible{background:var(--creme-claro);transform:scale(1.06)}
.vitrine-conta{font-family:var(--display);font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-suave);min-width:4.5ch;text-align:center}
.layout-destaque .vitrine-conta{color:var(--sec-suave)}

/* ---------- bio ---------- */
/* A foto abre a secção 1 ao lado do título e dos primeiros parágrafos; o resto
   da história corre em .prosa por baixo, à largura toda do envelope. */
.bio{display:grid;gap:1.5rem}
/* Em coluna unica a foto ocupa a largura toda. Sem o width:100% a <img> fica
   na largura intrinseca (400px) e sobrava espaco a direita entre os 600 e os
   759px de viewport. */
.bio img{width:100%;height:auto;border-radius:12px}
.bio .prosa{margin-top:0}
@media(min-width:760px){
  /* Nao ha align-items:start: quem manda na altura da linha e a coluna de
     texto, e a foto estica para a acompanhar (D25). Sem object-position -- o
     enquadramento fica centrado, como vem da foto. */
  .bio{grid-template-columns:.85fr 1.15fr;gap:2.75rem}
  .bio img{height:100%;object-fit:cover}
}

.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}
/* Contactos do rodape: telefone, instagram e email, cada um com o seu icone.
   Os SVG sao inline e herdam a cor -- nenhum pedido extra e nenhuma fonte de
   icones. aria-hidden porque o texto ao lado ja diz o que e. */
.contactos{list-style:none;margin:.9rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.35rem}
.contactos li{display:flex;align-items:center;gap:.45rem}
.contactos .ico{width:1em;height:1em;flex:none;fill:currentColor;opacity:.7}
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}
}