/* Hero C · Três vozes — Jabour Teles e Xavier */
:root{
  --creme:#f3ede4;
  --areia:#e3d6c6;
  --nude:#c9a48e;
  --camelo:#a87b5a;
  --cafe:#3b2a22;
  --tinta:#241a15;
  --tinta-suave:#5a463b;
  --linha:color-mix(in oklab, var(--cafe) 18%, transparent);

  --f-serifa:"Shippori Mincho", "Times New Roman", serif;
  --f-texto:"Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margem:clamp(18px, 3.4vw, 56px);
  --vao:clamp(8px, 1vw, 16px);
  --t-titulo:clamp(34px, min(4.1vw, 7.6vh), 66px);
  --t-frase:clamp(18px, min(1.75vw, 3.2vh), 28px);
  --t-texto:clamp(15px, 1.05vw, 17px);
  --t-mini:clamp(13px, .82vw, 14px);
  --ciclo:9s;
  --facil:cubic-bezier(.22,.7,.18,1);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;overflow-x:clip;
  background:var(--creme);color:var(--tinta);
  font-family:var(--f-texto);font-size:var(--t-texto);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}

/* ---------- malha (manchas radiais) + granulado ---------- */
.malha{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  linear-gradient(180deg in oklab, #f6f1ea, var(--creme) 55%, #efe5d8);}
.malha i{position:absolute;display:block;border-radius:50%;will-change:transform}
.malha i:nth-child(1){width:70vmax;height:70vmax;left:-22vmax;top:-30vmax;
  background:radial-gradient(circle closest-side in oklch, color-mix(in oklch, var(--nude) 55%, transparent), color-mix(in oklch, var(--nude) 22%, transparent) 50%, transparent);
  animation:deriva-a 34s ease-in-out infinite alternate}
.malha i:nth-child(2){width:62vmax;height:62vmax;right:-24vmax;top:-12vmax;
  background:radial-gradient(circle closest-side in oklch, color-mix(in oklch, var(--areia) 90%, transparent), color-mix(in oklch, var(--areia) 40%, transparent) 50%, transparent);
  animation:deriva-b 28s ease-in-out infinite alternate}
.malha i:nth-child(3){width:58vmax;height:58vmax;left:30vw;bottom:-36vmax;
  background:radial-gradient(circle closest-side in oklch, color-mix(in oklch, var(--camelo) 30%, transparent), color-mix(in oklch, var(--camelo) 12%, transparent) 50%, transparent);
  animation:deriva-c 38s ease-in-out infinite alternate}
.malha i:nth-child(4){width:40vmax;height:40vmax;left:-10vmax;bottom:-18vmax;
  background:radial-gradient(circle closest-side in oklch, color-mix(in oklch, #d9b9a0 45%, transparent), transparent);
  animation:deriva-b 24s ease-in-out infinite alternate-reverse}
@keyframes deriva-a{to{transform:translate(8vw,6vh) scale(1.08)}}
@keyframes deriva-b{to{transform:translate(-7vw,8vh) scale(.94)}}
@keyframes deriva-c{to{transform:translate(-10vw,-6vh) scale(1.1)}}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .14 0 0 0 0 .1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;gap:24px;padding:18px var(--margem) 0;max-width:1680px;margin:0 auto}
.marca{display:flex;flex-direction:column;text-decoration:none;line-height:1.05}
.marca-nome{font-family:var(--f-serifa);font-weight:600;font-size:clamp(17px,1.35vw,21px);letter-spacing:.01em;color:var(--cafe)}
.marca-nome em{font-style:normal;color:var(--camelo);font-weight:400}
.marca-sub{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--tinta-suave);margin-top:5px}
.topo-info{margin:0 0 0 auto;font-size:var(--t-mini);color:var(--tinta-suave)}
.topo-zap{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--linha);border-radius:999px;
  text-decoration:none;font-size:var(--t-mini);font-weight:600;color:var(--cafe);transition:background .3s,border-color .3s}
.topo-zap svg{width:18px;height:18px;fill:currentColor}
.topo-zap:hover{background:color-mix(in oklab, var(--areia) 60%, transparent);border-color:color-mix(in oklab, var(--cafe) 35%, transparent)}

/* ---------- hero ---------- */
.hero{max-width:1680px;margin:0 auto;padding:clamp(14px,2.6vh,34px) var(--margem) clamp(14px,2.4vh,28px);
  min-height:calc(100svh - 62px);display:flex;flex-direction:column;gap:clamp(14px,2.4vh,28px)}
.cabeca{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end}
.titulo{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:var(--t-titulo);line-height:1.04;letter-spacing:-.018em;color:var(--tinta)}
.t-linha{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.t-linha>span{display:inline-block;text-wrap:balance;max-width:100%}
.so-cel{display:none}
.nb{white-space:nowrap}
.t-dois{color:var(--camelo)}
.apoio{max-width:560px;justify-self:end;padding-bottom:.35em}
.apoio-texto{margin:0 0 clamp(12px,1.8vh,18px);color:var(--tinta-suave);text-wrap:pretty}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--cafe);color:var(--creme);
  text-decoration:none;font-weight:600;font-size:16px;letter-spacing:.005em;box-shadow:0 10px 26px -14px rgba(59,42,34,.7);transition:background .3s, transform .3s var(--facil)}
.cta svg{width:20px;height:20px;fill:currentColor}
.cta:hover{background:var(--tinta);transform:translateY(-1px)}
.cta-2{display:inline-flex;align-items:center;min-height:48px;font-weight:600;font-size:15px;color:var(--cafe);text-decoration:underline;text-decoration-color:color-mix(in oklab, var(--camelo) 60%, transparent);text-underline-offset:5px}
.prova{margin:clamp(8px,1.4vh,14px) 0 0;font-size:var(--t-mini);color:var(--tinta-suave);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.prova strong{color:var(--tinta)}
.estrelas{color:var(--camelo);letter-spacing:.12em;font-size:13px}
.prova-frase{display:none;flex-basis:100%;font-family:var(--f-serifa);font-size:15px;color:var(--cafe)}
.prova-frase cite{font-family:var(--f-texto);font-style:normal;font-size:var(--t-mini);color:var(--tinta-suave);margin-left:4px}

/* ---------- as três vozes ---------- */
.abas{display:none}
.vozes{flex:1;display:flex;gap:var(--vao);min-height:clamp(430px,62vh,760px)}
.voz{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;cursor:pointer;outline:none;
  transition:flex-grow 1.2s var(--facil)}
.voz.ativa{flex-grow:2.1}
.foto{position:relative;margin:0;flex:1;min-height:180px;overflow:hidden;background:var(--areia)}
.foto::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(36,26,21,.08)}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(.55) saturate(.62) brightness(1.04) contrast(.92);transition:filter 1.2s ease, transform 2.4s var(--facil);transform:scale(1.02)}
.voz.ativa .foto img{filter:none;transform:scale(1)}
.f-naila{object-position:46% 6%}
.f-ana{object-position:62% 38%}
.f-andressa{object-position:50% 20%}
.voz:focus-visible .foto{outline:2px solid var(--camelo);outline-offset:3px}

.legenda{position:relative;padding:clamp(10px,1.4vh,14px) 2px clamp(10px,1.6vh,16px);border-bottom:1px solid var(--linha)}
.frente{margin:0;font-size:var(--t-mini);font-weight:600;letter-spacing:.04em;color:var(--camelo);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voz.ativa .frente{white-space:normal}
.num{font-family:var(--f-serifa);font-weight:600;color:var(--cafe);margin-right:6px}
.frase{margin:clamp(6px,1vh,10px) 0 clamp(8px,1.2vh,12px);font-family:var(--f-serifa);font-weight:500;font-size:var(--t-frase);line-height:1.28;color:var(--tinta);
  height:calc(var(--t-frase) * 1.28 * 3 + .25em);overflow:hidden;text-wrap:pretty;quotes:"“" "”"}
.frase .c{opacity:.2;transition:opacity .4s ease;transition-delay:0s}
.voz:not(.ativa) .frase{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.js .voz:not(.ativa) .frase .c{opacity:.32}
.js .vozes:not(.pronto) .frase .c{opacity:0}
.voz.ativa .frase .c{opacity:1;animation:letra .5s ease both;animation-delay:calc(.3s + var(--i) * 26ms)}
@keyframes letra{from{opacity:0}to{opacity:1}}
.frase .w{white-space:nowrap}
.frase .aspa{color:var(--camelo)}
.quem{margin:0;display:flex;flex-direction:column;gap:1px}
.quem strong{font-weight:650;font-size:clamp(15px,1.12vw,18px);color:var(--cafe)}
.oab{font-size:var(--t-mini);color:var(--tinta-suave);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tempo{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.tempo i{display:block;height:100%;background:var(--camelo);transform:scaleX(0);transform-origin:left}
.vozes.em-ciclo .voz.ativa .tempo i{animation:enche var(--ciclo) linear forwards}
.vozes.fixo .voz.ativa .tempo i{transform:scaleX(1);transition:transform .6s}
@keyframes enche{to{transform:scaleX(1)}}
.dica{display:none}

.selo{max-width:1680px;margin:0 auto;padding:8px var(--margem) 18px;font-size:12px;color:var(--tinta-suave);text-align:right}
.selo a{color:var(--cafe);font-weight:600}

/* ---------- entrada ---------- */
.js .t-linha>span{transform:translateY(105%);animation:sobe 1.1s var(--facil) forwards}
.js .t-dois>span{animation-delay:.18s}
.js .apoio,.js .topo{opacity:0;animation:aparece 1s ease .5s forwards}
.js .voz{opacity:0;animation:aparece-voz 1.2s var(--facil) forwards}
.js .voz[data-i="0"]{animation-delay:.55s}
.js .voz[data-i="1"]{animation-delay:.75s}
.js .voz[data-i="2"]{animation-delay:.95s}
.js .abas{opacity:0;animation:aparece .9s ease .5s forwards}
@keyframes sobe{to{transform:none}}
@keyframes aparece{to{opacity:1}}
@keyframes aparece-voz{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (min-height:940px) and (min-width:1101px){.prova-frase{display:block}}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .cabeca{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .prova-frase{display:none}
  .quem{min-height:calc(1.4em + 2 * 1.5 * var(--t-mini))}
}
@media (max-width:1100px) and (min-width:901px){
  .topo-info{display:none}
  .topo-zap{margin-left:auto}
}

/* ---------- celular: carrossel ---------- */
@media (max-width:900px){
  :root{--t-titulo:clamp(31px,9.2vw,42px);--t-frase:clamp(19px,5.4vw,23px);--t-mini:14px}
  .topo{padding-top:14px;gap:12px}
  .topo-info{display:none}
  .topo-zap{margin-left:auto;width:48px;height:48px;padding:0;justify-content:center}
  .topo-zap span{display:none}
  .topo-zap svg{width:22px;height:22px}
  .hero{min-height:0;padding-top:20px;gap:18px}
  .cabeca{grid-template-columns:minmax(0,1fr);gap:14px}
  .apoio{justify-self:start;padding:0}
  .apoio-texto{margin-bottom:14px;font-size:15.5px}
  .so-pc{display:none}.so-cel{display:inline}
  .acoes{gap:4px 18px}
  .cta{min-height:50px;padding:0 20px;font-size:15.5px}
  .prova{margin-top:6px}

  .abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:2px 0 -4px}
  .aba{appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;padding:8px 2px 10px;cursor:pointer;
    border-top:2px solid var(--linha);min-height:48px;display:flex;flex-direction:column;gap:2px;transition:border-color .4s}
  .aba b{font-family:var(--f-serifa);font-weight:600;font-size:14.5px;line-height:1.15;color:var(--tinta-suave);transition:color .4s}
  .aba span{font-size:12px;line-height:1.3;color:var(--tinta-suave);letter-spacing:.01em}
  .aba[aria-selected="true"]{border-top-color:var(--camelo)}
  .aba[aria-selected="true"] b{color:var(--cafe)}

  .vozes{min-height:0;gap:12px;margin:0 calc(-1 * var(--margem));padding:0 var(--margem);
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--margem);
    overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vozes::-webkit-scrollbar{display:none}
  .voz,.voz.ativa{flex:0 0 min(84%, 440px);scroll-snap-align:start;scroll-snap-stop:always;transition:none}
  .voz:last-child{margin-right:0}
  .vozes::after{content:"";flex:0 0 1px}
  .foto{flex:none;aspect-ratio:4/5;min-height:0}
  .f-naila{object-position:50% 0%}
  .f-ana{object-position:61% 50%}
  .f-andressa{object-position:50% 40%}
  .frente{white-space:normal}
  .frase{height:auto;overflow:visible;min-height:calc(var(--t-frase) * 1.28 * 2)}
  .tempo{display:none}
  .legenda{flex:1}
  .dica{display:block;margin:-6px 0 0;font-size:13px;color:var(--tinta-suave);letter-spacing:.02em}
  .dica span::after{content:" →";color:var(--camelo)}
  .vozes.mexeu ~ .dica{opacity:0;transition:opacity .6s}
  .selo{text-align:center}
}
@media (max-width:380px){
  .aba b{font-size:13.5px}
  .aba span{font-size:11.5px}
}

/* ---------- movimento reduzido: reset geral (fica por último) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;
    transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
}