/* =====================================================================
   PROTO.CSS — Dra. Raquel Lourenço · protótipo WebGL (hero + transição)
   Paleta CLARA "luxo botânico" (correção 2026-07-24 — o carvão escuro da
   v1 era erro, cópia da linguagem da Maria; a marca da Raquel é NEW
   NATURE: natural/botânica/luz). Fundo creme quente luminoso + acentos
   dourado / verde-sálvia / terracota, texto mocha escuro. Contrastes
   validados WCAG AA (texto ≥10:1, acentos ≥4:1 nos usos de texto grande/UI).
   Mobile-first (390px) → desktop.
   ===================================================================== */

:root{
  /* fundo — creme quente luminoso (nunca carvão) */
  --cor-fundo-1:  #FAF4E8;
  --cor-fundo-2:  #F2E7D3;
  --cor-fundo-3:  #E8DAB9;

  /* acentos — as 3 cores da marca NEW NATURE, aprofundadas pra contraste
     de texto/UI sobre fundo claro (checado: destaque 4.05-5.12:1, sálvia
     5.81-7.34:1, terracota 4.28-5.41:1 — ver auditoria da entrega) */
  --cor-destaque:   #8A5F26; /* dourado */
  --cor-salvia:     #3E5730; /* verde-sálvia */
  --cor-terracota:  #99502F; /* terracota/mocha */

  /* texto — mocha/carvão escuro sobre o fundo claro */
  --cor-texto:      #2E2A22;
  --cor-texto-soft: rgba(46,42,34,.72);

  /* mocha-escuro controlado — só nos 2 trechos deliberadamente escuros
     (o momento editorial do manifesto, sobre foto real já escura, e o
     rodapé do protótipo); nunca a identidade dominante */
  --cor-carvao:     #23201A;
  --cor-on-dark:        #F7F1E1;
  --cor-on-dark-soft:   rgba(247,241,225,.78);
  --cor-salvia-on-dark:   #9FC77F;
  --cor-destaque-on-dark: #D9BC82;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-h: 64px;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{
  background: linear-gradient(160deg, var(--cor-fundo-1) 0%, var(--cor-fundo-2) 55%, var(--cor-fundo-3) 100%);
  scroll-behavior:auto;
}
body{
  font-family:var(--font-body); color:var(--cor-texto);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-optical-sizing:auto; }
.display em{ font-style:italic; font-weight:450; color:var(--cor-destaque); }
.serif{ font-family:var(--font-display); font-weight:600; }
.eyebrow{ display:inline-block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--cor-salvia); }

/* ---------- grain (literal do kit — base.css das clientes aprovadas) ---------- */
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- canvas WebGL — fundo fixo, full-bleed, atrás de tudo ---------- */
#webgl-canvas{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block;
  will-change:opacity;
}
html.no-webgl #webgl-canvas{ display:none; }

/* ---------- selo de protótipo (chip escuro autocontido — legível sobre qualquer fundo) ---------- */
.proto-badge{
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:40;
  background:rgba(35,32,26,.82); border:1px solid rgba(217,188,130,.4); color:var(--cor-destaque-on-dark);
  font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:6px 14px; border-radius:100px; backdrop-filter:blur(6px); white-space:nowrap;
}

/* ---------- nav — faixa frosted CLARA (sempre legível: hero claro OU
   sobre o trecho escuro do manifesto, que o nav fixo também sobrevoa) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20; height:var(--nav-h); display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(250,244,232,.68) 0%, rgba(250,244,232,0) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav-inner{ width:100%; max-width:1440px; margin:0 auto; padding:0 clamp(20px,5vw,56px); display:flex; align-items:center; gap:12px; }
.nav-logo{ font-size:1.15rem; color:var(--cor-texto); }
.nav-tag{ color:var(--cor-salvia); }

/* =====================================================================
   HERO — pin scroll-driven (230vh de altura; .hero-pin fica sticky
   ocupando 100vh enquanto o wrap rola). A foto é DOMINANTE e nunca é
   coberta por card — o texto/CTA vive sobre o "vazio" 3D claro ao redor
   dela, com um véu CLARO (nunca escuro) nas bordas da foto pra garantir
   contraste do texto mocha.
   ===================================================================== */
.hero-wrap{ position:relative; height:230vh; z-index:1; }
.hero-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
}

/* foto — mobile: âncora inferior, ocupa a base da tela, feather no topo
   pra se fundir com o "vazio" 3D (onde o vidro aparece) */
.hero-photo{
  position:absolute; left:0; right:0; bottom:0; height:64vh;
  /* background-image vem inline no HTML (aponta pro asset real da dona) */
  background-size:cover; background-position:64% 22%;
  -webkit-mask-image:linear-gradient(to top, #000 58%, transparent 100%);
  mask-image:linear-gradient(to top, #000 58%, transparent 100%);
  will-change:transform, opacity;
}
.hero-photo-scrim{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg,
    rgba(250,244,232,.92) 0%,
    rgba(250,244,232,.55) 30%,
    rgba(250,244,232,0) 56%,
    rgba(250,244,232,0) 100%);
}
.hero-content{
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--nav-h) + 22px) clamp(20px,6vw,30px) 0;
  max-width:640px;
  will-change:transform, opacity;
}
.hero-content .eyebrow{ margin-bottom:16px; }
.hero-title{ font-size:clamp(2.15rem,8.6vw,3.1rem); line-height:1.08; color:var(--cor-texto); text-shadow:0 2px 18px rgba(46,42,34,.14); }
.hero-sub{ margin-top:18px; max-width:40ch; color:var(--cor-texto-soft); font-size:clamp(.96rem,3vw,1.05rem); line-height:1.55; }
.hero-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:13px 22px; border-radius:100px; font-weight:600; font-size:.9rem;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn .arrow{ font-size:.95em; }
.btn-ghost{
  color:var(--cor-texto); border:1px solid rgba(46,42,34,.32); background:rgba(46,42,34,.06);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(46,42,34,.12); border-color:rgba(46,42,34,.55); transform:translateY(-1px); }
.btn-outline-link{ color:var(--cor-destaque); border:1px solid rgba(138,95,38,.5); }
.btn-outline-link:hover{ background:rgba(138,95,38,.12); transform:translateY(-1px); }

.hero-scrolldown{
  position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%);
  width:22px; height:34px; border:1.5px solid rgba(46,42,34,.3); border-radius:14px;
}
.hero-scrolldown span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px; border-radius:2px;
  background:var(--cor-destaque); animation:scrolldown 1.8s ease-in-out infinite;
}
@keyframes scrolldown{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(11px);} 100%{ opacity:0; } }

@media(min-width:900px){
  .hero-photo{
    left:44%; right:0; bottom:0; top:0; height:auto;
    background-position:50% 24%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 34%);
    mask-image:linear-gradient(to right, transparent 0%, #000 34%);
  }
  .hero-photo-scrim{
    background:
      radial-gradient(60% 60% at 30% 20%, rgba(250,244,232,.35) 0%, rgba(250,244,232,0) 55%),
      linear-gradient(100deg, rgba(250,244,232,.92) 0%, rgba(250,244,232,.5) 30%, rgba(250,244,232,0) 56%);
  }
  .hero-content{ justify-content:center; padding-top:0; max-width:600px; }
}

/* =====================================================================
   MANIFESTO — entra em cena com translateY + scale + opacity (JS). Único
   trecho deliberadamente ESCURO do protótipo (a foto-fonte é um macro real
   já escuro — não dá pra clarear pixel de foto); usa os tokens "on-dark"
   pra manter leitura, aquecido (mocha, não mais carvão frio) pra não
   destoar do resto claro da experiência.
   ===================================================================== */
.manifesto{ position:relative; min-height:100vh; z-index:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:14vh 0; }
.manifesto-bg{
  position:absolute; inset:-6% -4%; background-size:cover; background-position:22% 40%;
  filter:saturate(.75) brightness(.7); will-change:transform;
}
.manifesto-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(35,32,26,.8) 0%, rgba(35,32,26,.58) 30%, rgba(35,32,26,.78) 78%, rgba(35,32,26,.88) 100%),
    linear-gradient(100deg, rgba(35,32,26,.5) 0%, rgba(35,32,26,.16) 50%, rgba(35,32,26,.55) 100%);
}
.manifesto-inner{
  position:relative; z-index:2; max-width:760px; width:100%; margin:0 auto; padding:0 clamp(20px,6vw,40px);
  text-align:center; will-change:transform, opacity;
}
.manifesto-inner .eyebrow{ margin-bottom:22px; color:var(--cor-salvia-on-dark); }
.manifesto-quote{
  font-size:clamp(1.5rem,5.4vw,2.5rem); line-height:1.28; color:var(--cor-on-dark);
  text-shadow:0 8px 40px rgba(35,32,26,.55);
}
.manifesto-quote em{ color:var(--cor-destaque-on-dark); }
.manifesto-quote .quotemark{ color:var(--cor-destaque-on-dark); font-size:1.15em; }
.manifesto-attr{ display:block; margin-top:26px; font-size:.85rem; letter-spacing:.03em; color:var(--cor-on-dark-soft); }

.proto-end{ position:relative; z-index:1; padding:8vh clamp(20px,6vw,40px) 12vh; text-align:center; background:var(--cor-carvao); }
.proto-end p{ margin:0; font-size:.78rem; color:var(--cor-on-dark-soft); letter-spacing:.02em; }

/* ---------- reduced motion: garante estado final legível, sem depender de JS ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-wrap{ height:auto; }
  .hero-pin{ position:relative; }
  #webgl-canvas{ display:none; }
}