/* ==========================================================================
ÉRICA MOURA — Nutrição Integrativa · página v6.1 (11/10/2026: protocolo em fases com o símbolo)
Estrutura herdada da página da Dra. Carolina Orlandi:
1 hero · 2 sintomas · 3 quem sou · 4 números · 5 protocolo
6 o que muda · 7 chamada · 8 contato
Assinatura: o símbolo desperta. Na seção de sintomas, a cada frase um par de
raios do símbolo acende; na última, a estrela. É o "despertar" da promessa
dela.
Movimento (v4): um sistema só, repetido — títulos que sobem por máscara linha
a linha, fotos que assentam com escala lenta, curvas expo de desaceleração.
A hero abre pronta, sem animação. Rolagem nativa (sem Lenis) e só transform
e opacity animados: nada de blur, sombra ou recorte redesenhado por quadro.
Tudo dirigido pelo cena.js (GSAP); o CSS só define os estados de partida.
Fontes: Gilda Display substitui a CS Hasten (paga, não instalada): é a mais
próxima em contraste e proporção. Se o arquivo da CS Hasten for salvo em
assets/fonts/CSHasten.woff2, basta acrescentar o url() no @font-face abaixo. Texto em Raleway, como no
brandbook, com algarismos alinhados (os padrão da Raleway são de texto antigo).
========================================================================== */
@font-face{
font-family:'CS Hasten';
src:local('CS Hasten'); /* com o arquivo: acrescentar , url('assets/fonts/CSHasten.woff2') format('woff2') */
font-display:swap;
}
/* ---------- 00 · tokens ---------- */
:root{
--raiz:#24170F; /* marrom mais fundo: sintomas e rodapé */
--marrom:#3B2518; /* Marrom Enraizado */
--oliva:#3C3B27; /* cor do Método Despertar: só no protocolo */
--ambar:#CBA165; /* Âmbar Desperto: o único acento */
--ambar-claro:#E1BB79;
--areia:#E3D3BC; /* creme da paleta: o claro da página */
--areia-clara:#EEE4D5;
--tinta:#2A1A10;
--tinta-suave:#5E4A3B;
--linha:rgba(59,37,24,.16);
--linha-clara:rgba(227,211,188,.18);
--titulo:'CS Hasten','Gilda Display',Georgia,serif;
--texto:'Raleway',system-ui,sans-serif;
/* grão de filme para as superfícies escuras lisas: um ladrilho SVG de ruído,
rasterizado uma vez e que rola junto com a seção (não é camada fixa, não
anima, não usa mix-blend — custo zero por quadro) */
--grao: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .82 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
--wrap:1240px;
--gutter:clamp(20px,5vw,64px);
--secao:clamp(96px,12vw,168px);
--secao-base:clamp(108px,13.5vw,192px);
}
/* ---------- 01 · base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
::selection{background:var(--ambar);color:var(--raiz)}
body{
font-family:var(--texto);font-weight:400;font-size:17px;line-height:1.7;
font-variant-numeric:lining-nums;
color:var(--tinta);background:var(--areia-clara);
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@supports (overflow:clip){ body{overflow-x:clip} }
img{display:block;max-width:100%;height:auto} /* height:auto: o atributo height do não pode esticar a foto */
a{color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
h1,h2{letter-spacing:-.022em}
p{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--ambar);outline-offset:4px}
.pular{position:absolute;left:-9999px;top:12px;z-index:200;background:var(--ambar);color:var(--raiz);padding:10px 16px;text-decoration:none}
.pular:focus{left:12px}
/* rótulo: aparece só onde nomeia algo (onde ela atende, o nome do protocolo) */
/* ---------- 02 · botões ---------- */
.btn{
display:inline-flex;align-items:center;gap:.6em;
font:600 .95rem/1 var(--texto);letter-spacing:.01em;text-decoration:none;
padding:17px 28px;border-radius:2px;border:1px solid transparent;
transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1);
-webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px) scale(.98);transition-duration:.08s}
.btn-cheio{background:var(--ambar);color:var(--raiz)}
.btn-cheio:hover{background:var(--ambar-claro)}
.btn-linha{border-color:rgba(203,161,101,.6);color:var(--areia);padding:12px 20px;font-size:.88rem}
.btn-linha:hover{background:var(--ambar);border-color:var(--ambar);color:var(--raiz)}
/* ---------- 03 · topo ---------- */
.topo{position:fixed;inset:0 0 auto;z-index:100;padding:20px 0;transition:background-color .45s ease,padding .45s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.topo.escondido{transform:translateY(-100%)}
.topo.rolou{background:rgba(36,23,15,.97);padding:12px 0}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:32px}
.marca img{height:52px;width:auto;transition:height .35s ease}
.topo.rolou .marca img{height:42px}
.menu{display:flex;align-items:center;gap:34px}
.menu a:not(.btn){color:rgba(227,211,188,.82);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .2s}
.menu a:not(.btn){position:relative;padding:6px 0}
.menu a:not(.btn)::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ambar);
transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.menu a:not(.btn):hover{color:var(--ambar-claro)}
.menu a:not(.btn):hover::after,.menu a[aria-current="true"]::after{transform:scaleX(1)}
.menu a[aria-current="true"]{color:var(--areia)}
.menu-botao{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.menu-botao span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--areia);transition:transform .3s ease,top .3s ease}
.menu-botao span:first-child{top:17px}
.menu-botao span:last-child{top:26px}
.menu-botao[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menu-botao[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
/* ---------- 1 · hero ---------- */
/* tela cheia, como a da Carol. hero-largo.webp é o banner gerado no GPT a partir
da foto do ensaio (12/10/2026; prompt em ../prompt-banner-erica-moura.md):
ela à direita, o arco de luz na parede entre ela e o texto. O vaso da borda
esquerda só aparece em tela larga. Abre pronta: nada aqui é animado. */
.hero{
position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;
padding:140px 0 110px;color:var(--areia);background:var(--raiz);
}
.hero-midia{position:absolute;inset:0;overflow:hidden}
.hero-midia img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero-midia::after{
content:'';position:absolute;inset:0;
background:
linear-gradient(90deg, rgba(36,23,15,.94) 0%, rgba(59,37,24,.78) 34%, rgba(59,37,24,.18) 62%, rgba(36,23,15,.1) 100%),
linear-gradient(0deg, rgba(36,23,15,.6) 0%, rgba(36,23,15,0) 30%),
linear-gradient(180deg, rgba(36,23,15,.5) 0%, rgba(36,23,15,0) 16%); /* o menu passa sobre a cortina clara */
}
.hero .wrap{position:relative;width:100%;max-width:1480px} /* mais larga que o --wrap: em tela grande o texto encosta mais na esquerda */
.hero-texto{max-width:620px}
.hero h1{font-size:clamp(54px,6.2vw,100px);line-height:1;color:var(--areia);margin-bottom:34px}
.hero-lead{font-size:1.12rem;max-width:30em;color:rgba(227,211,188,.8);margin-bottom:44px}
/* entre 901 e 1200px o corte da foto traz o rosto dela para perto do texto:
o bloco estreita para o título não passar por cima do rosto */
@media (min-width:901px) and (max-width:1200px){
.hero-texto{max-width:min(460px,44vw)}
}
/* botão da hero: mesmo tamanho e seta do botão da chamada, sem o halo (a hero é parada) */
.btn-grande{padding:24px 46px;font-size:1.05rem;letter-spacing:.02em;box-shadow:0 18px 40px -16px rgba(203,161,101,.5);transition:background-color .25s ease,transform .25s ease}
.btn-grande::after{content:'→';font-size:1.15em;transition:transform .25s ease}
.btn-grande:hover{transform:translateY(-2px)}
.btn-grande:active,.btn-destaque:active{transform:translateY(1px) scale(.98)}
.btn-grande:hover::after{transform:translateX(4px)}
/* ---------- 2 · sintomas (assinatura) ---------- */
/* A janela do símbolo dela, em foto. Enquanto as cinco frases passam, a sala
clareia (uma camada escura que perde opacidade a cada frase) e a câmera
entra devagar na janela. Na última frase, a janela está acesa.
No computador a janela fica no centro e as frases à esquerda, sobre a
parede escura; no celular a janela fica em cima e as frases embaixo.
Sem a cena (sem JS ou com movimento reduzido) é uma lista legível. */
.sintomas{position:relative;background:var(--raiz);color:var(--areia)}
.sintomas-palco{position:relative;overflow:hidden;display:grid;place-items:center;padding:var(--secao) 0}
.cena .sintomas{height:430vh}
.cena .sintomas-palco{position:sticky;top:0;height:100vh;height:100svh;padding:0}
.sintomas-luz{position:absolute;inset:0;transform-origin:57% 48.7%;will-change:transform} /* origem = centro da janela */
/* no computador a foto é 18% mais larga que a tela e presa à esquerda: a janela
(a 48% da largura da foto) cai a 57% da tela e deixa a parede livre para as frases */
.sintomas-foto{position:absolute;top:0;left:0;width:118%;max-width:none;height:100%;object-fit:cover;object-position:center}
/* a escuridão da sala: some aos poucos, frase a frase */
.sintomas-luz::after{
content:'';position:absolute;inset:0;background:var(--raiz);opacity:.64;
transition:opacity 1.8s cubic-bezier(.16,1,.3,1);
}
.sintomas-luz[data-passo="1"]::after{opacity:.5}
.sintomas-luz[data-passo="2"]::after{opacity:.37}
.sintomas-luz[data-passo="3"]::after{opacity:.22}
.sintomas-luz[data-passo="4"]::after{opacity:.06}
/* o brilho da janela na última frase: um degradê que só muda de opacidade */
.sintomas-luz::before{
content:'';position:absolute;z-index:1;left:57%;top:48.7%;translate:-50% -50%;
width:min(90vh,820px);aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle, rgba(249,215,144,.28) 0%, rgba(249,215,144,0) 60%);
opacity:0;transition:opacity 1.8s cubic-bezier(.16,1,.3,1);
}
.sintomas-luz[data-passo="3"]::before{opacity:.4}
.sintomas-luz[data-passo="4"]::before{opacity:1}
/* sombra fixa onde ficam as frases (não entra no zoom) */
.sintomas-palco::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg, rgba(36,23,15,.9) 0%, rgba(36,23,15,.72) 26%, rgba(36,23,15,.2) 44%, rgba(36,23,15,0) 56%);
}
html:not(.cena) .sintomas-luz::after{opacity:.78}
.sintomas-frases{position:relative;z-index:2;width:min(88%,820px);display:grid;gap:56px}
.frase{
text-align:center;
font-family:var(--titulo);font-size:clamp(30px,4.2vw,56px);line-height:1.16;letter-spacing:-.005em;
text-shadow:0 0 14px var(--raiz);
}
.cena .sintomas-frases{
gap:0;justify-self:start;width:min(30vw,460px);
margin-left:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));
}
.cena .frase{grid-area:1/1;align-self:center;visibility:hidden;text-align:left;font-size:clamp(30px,3.1vw,48px)}
.frase-final em{display:block;font-style:normal;color:var(--ambar-claro);margin-top:.5em}
/* ---------- 3 · quem sou ---------- */
.sobre{background:var(--areia-clara);padding:var(--secao) 0 var(--secao-base)}
.sobre-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,120px);align-items:end}
.sobre-foto{overflow:hidden}
.sobre-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 15%;transform-origin:50% 30%}
.sobre-texto h2{font-size:clamp(48px,6vw,84px);color:var(--marrom);margin-bottom:26px}
.sobre-lead{font-size:1.15rem;color:var(--tinta-suave);max-width:28em;margin-bottom:44px}
.credenciais{border-top:1px solid var(--linha)}
.credenciais li{padding:15px 0;border-bottom:1px solid var(--linha);font-size:1rem}
/* ---------- 4 · números: faixa fina em loop ---------- */
.faixa{background:var(--grao),var(--oliva);color:var(--areia);overflow:hidden;padding:22px 0;border-block:1px solid rgba(203,161,101,.22)}
.faixa-trilho{display:flex;width:max-content}
.faixa-grupo{display:flex;align-items:center;flex-shrink:0}
.faixa-grupo li{
display:flex;align-items:center;gap:.5em;white-space:nowrap;
font-size:.92rem;font-weight:500;letter-spacing:.02em;color:rgba(227,211,188,.85);
}
.faixa-grupo li b{font-family:var(--titulo);font-weight:400;font-size:1.75rem;line-height:1;color:var(--ambar-claro);letter-spacing:0}
/* separador: a estrela de quatro pontas do símbolo */
.faixa-grupo li::after{
content:'';width:9px;height:9px;margin:0 clamp(32px,4vw,56px);flex-shrink:0;
background:var(--ambar);opacity:.8;
clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
.faixa-trilho{will-change:transform}
/* ---------- símbolo: níveis de raios acesos ----------
Cada