/* =====================================================================
   HERO.CSS — Ono Clínica Estética · hero + manifesto (extraído/adaptado de
   dra-raquel-lourenco/_integrado/css/proto.css — MOLDE RAQUEL, regra 5 do
   agente-designer-produto). Paleta 100% DERIVADA da marca real da Ono
   (nunca copiada da Raquel): navy/índigo #494F7B (amostrado do próprio
   card de identidade "homens_00.jpg" — Ono Clínica + kanji 大野) + creme
   quente + rosé empoeirado (amostrado das luvas/fundo dos posts reais) +
   dourado (joias nos retratos reais). Mobile-first (390px) → desktop.
   Simplificação deliberada vs a referência: sem o palco 3D em Three.js
   (flourish decorativo específico da Raquel, não exigido pela regra 5) —
   mantido o NÚCLEO exigido: hero com véu-parallax contido (nunca sobre o
   rosto) + rosto sempre limpo em repouso.
   ===================================================================== */

:root{
  --cor-fundo-1:  #FAF3EA;
  --cor-fundo-2:  #F1E3D0;
  --cor-fundo-3:  #E4D0B8;

  --cor-indigo:      #4A5079; /* navy da marca real (Ono Clínica card) */
  --cor-indigo-deep: #2F3357; /* mais escuro — texto/UI sobre claro */
  --cor-rosa:        #8C5465; /* rosé empoeirado, aprofundado p/ contraste AA (5.34:1 sobre --cor-fundo-1) */
  --cor-rosa-tint:   #E9D2D6;
  --cor-dourado:     #886735; /* dourado aprofundado p/ contraste AA (4.72:1 sobre --cor-fundo-1) */

  --cor-texto:      #2A2620;
  --cor-texto-soft: rgba(42,38,32,.72);

  --cor-carvao:         #232244; /* trecho escuro deliberado — variação da navy da marca */
  --cor-on-dark:        #F6EFE1;
  --cor-on-dark-soft:   rgba(246,239,225,.78);
  --cor-rosa-on-dark:   #E3AEBC;
  --cor-dourado-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-dourado); }
.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-rosa); }

/* ---------- grain (mesma textura do kit aprovado) ---------- */
.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");
}

/* ---------- nav ---------- */
.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,243,234,.7) 0%, rgba(250,243,234,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-kanji{ font-size:.95rem; color:var(--cor-indigo); opacity:.75; }
.nav-tag{ color:var(--cor-rosa); }

/* =====================================================================
   HERO — pin simples (sticky) com véu-parallax. Sem stacking 3D (ver
   comentário do topo). ~200vh de trilho: 100vh sticky + o resto libera
   naturalmente pro manifesto.
   ===================================================================== */
.hero-wrap{ position:relative; height:210vh; height:210svh; z-index:2; }
.hero-pin{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; flex-direction:column;
  will-change:transform, opacity;
}

/* .hero-photo = camada AMBIENTE (a própria foto, desfocada, sem
   detalhe — por isso pode preencher via cover sem violar a regra de
   "nunca esticar além do nativo": não há nitidez pra deformar). O
   retrato NÍTIDO fica em .hero-portrait, abaixo — caixa própria, sempre
   menor que a resolução nativa do arquivo. */
.hero-photo{
  position:absolute; left:-8%; right:-8%; bottom:-8%; height:calc(66vh + 8%);
  background-size:cover; background-position:50% 15%;
  filter:blur(64px) saturate(1.05) brightness(1.04);
  -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;
}

/* ---------- retrato nítido (caixa própria, nunca esticada além do
   nativo — fonte = hero-luma-real.jpg, 550×990, frame real de story;
   aspect-ratio é o NATIVO do arquivo — garante estruturalmente rosto
   INTEIRO (testa a queixo) sempre visível, sem depender de
   object-position pra evitar corte) ---------- */
.hero-portrait{
  position:relative; z-index:2; margin:16px 0 4px;
  width:clamp(168px,42vw,214px); aspect-ratio:550/918;
  border-radius:18px; overflow:hidden;
  box-shadow:0 26px 60px -22px rgba(42,38,32,.38);
  border:1px solid rgba(255,255,255,.55);
}
.hero-portrait-img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
.hero-photo-scrim{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  /* véus CONTIDOS — nunca sobre o rosto (AUTO-REJECT VEU_SOBRE_ROSTO): topo
     morre em 40% (só atrás do eyebrow/título compacto), base sobe até 27%
     (só atrás dos CTAs). Zona do rosto (40–75%) sem véu. O que resta
     esvanece com o scroll — véu-parallax (js/hero.js). */
  background:
    linear-gradient(0deg,
      rgba(250,243,234,.88) 0%,
      rgba(250,243,234,.46) 15%,
      rgba(250,243,234,0) 27%),
    linear-gradient(180deg,
      rgba(250,243,234,.92) 0%,
      rgba(250,243,234,.5) 25%,
      rgba(250,243,234,0) 40%,
      rgba(250,243,234,0) 100%);
}
.hero-content{
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  padding: calc(var(--nav-h) + 14px) clamp(20px,6vw,30px) clamp(18px,3vh,28px);
  max-width:640px;
  will-change:transform, opacity;
  /* rede de segurança pra telas baixas (ex.: iPhone SE, 667px): com o
     .hero-portrait novo, o bloco de texto+retrato+CTAs pode passar da
     altura do pin (100svh, overflow:hidden). min-height:0 libera o item
     flex pra encolher e overflow-y:auto garante que nada fique
     inalcançável — em telas normais não há conteúdo suficiente pra
     ativar o scroll, então visualmente não muda nada. */
  min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.hero-content .eyebrow{ margin-bottom:10px; }
.hero-title{ font-size:clamp(2.05rem,8.2vw,3.2rem); line-height:1.08; color:var(--cor-texto); text-shadow:0 2px 18px rgba(42,38,32,.14); }
.hero-sub{ margin-top:12px; max-width:42ch; color:var(--cor-texto-soft); font-size:clamp(.96rem,3vw,1.05rem); line-height:1.5; }
.hero-actions{ margin-top:auto; 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(42,38,32,.32); background:rgba(42,38,32,.06);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(42,38,32,.12); border-color:rgba(42,38,32,.55); transform:translateY(-1px); }
.btn-outline-link{ color:var(--cor-indigo); border:1px solid rgba(74,80,121,.5); }
.btn-outline-link:hover{ background:rgba(74,80,121,.12); transform:translateY(-1px); }

/* telas baixas (celulares pequenos) — encolhe o retrato pra caber sem
   depender do scroll interno na maioria dos aparelhos */
@media (max-height:740px){
  .hero-portrait{ width:clamp(128px,34vw,168px); margin:10px 0 4px; }
  .hero-content{ padding-top:calc(var(--nav-h) + 6px); }
  .hero-sub{ margin-top:8px; }
}

.hero-scrolldown{
  position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%);
  width:22px; height:34px; border:1.5px solid rgba(42,38,32,.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-dourado); 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:calc(44% - 8%); right:-8%; bottom:-8%; top:-8%; 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,243,234,.35) 0%, rgba(250,243,234,0) 55%),
      linear-gradient(100deg, rgba(250,243,234,.92) 0%, rgba(250,243,234,.5) 30%, rgba(250,243,234,0) 56%);
  }
  /* hero-content mantém position:relative (z-index:2 válido — acima do
     ambiente); o retrato absolute usa o content como containing block mas é
     posicionado por LEFT calculado contra 100vw (o border-box do content
     começa em x=0), então vive no lado direito da TELA mesmo assim. */
  /* overflow:visible OBRIGATÓRIO no desktop — o overflow-y:auto (rede de
     segurança mobile p/ telas baixas) clipa o retrato posicionado fora da
     caixa de 600px (overflow em 1 eixo força clip no outro). */
  .hero-content{ justify-content:center; padding-top:0; max-width:600px; overflow:visible; }
  /* retrato DOMINANTE à direita (gate TESS 2026-07-28: o selinho no fluxo +
     borrão gigante reprovaram) — caixa usa o aspecto NATIVO do arquivo
     (550/990, não 4:5) pra nunca cortar o rosto; largura ≤460px, sempre
     abaixo do nativo (nunca esticado). */
  .hero-portrait{
    /* containing block é o .hero-content (will-change:transform cria
       containing block mesmo static — pegadinha CSS); a caixa dele começa
       em x=0 do viewport, então posicionamos por LEFT calculado contra
       100vw pra ancorar o retrato no lado direito da TELA. */
    position:absolute; left:calc(100vw - 6vw - min(26vw,420px)); right:auto;
    top:50%; transform:translateY(-50%);
    width:min(26vw,420px); aspect-ratio:550/918; margin:0; z-index:2;
  }
  .hero-portrait-img{ object-position:50% 50%; }
  /* véu de marca sobre o ambiente desfocado — vira atmosfera, não mancha
     de pele: mistura navy+rosê da paleta por cima do blur. */
  .hero-photo{
    filter:blur(64px) saturate(.9) brightness(1.02);
    opacity:.55;
  }
  .hero-actions{ margin-top:28px; }
}

/* =====================================================================
   MANIFESTO — seção escura própria (fundo = asset real da marca, o card
   navy "Ono Clínica" com kanji 大野, textura de papel — não é IA, é
   identidade visual real coletada). Reveal simples via data-reveal-fade
   (personality.js), sem stacking 3D.
   ===================================================================== */
.manifesto{
  position:relative; z-index:1; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding: 14vh 0;
}
.manifesto-bg{
  /* blur forte — funde o logotype "Ono Clínica" (asset real de marca) numa
     textura abstrata, evitando colisão de leitura com a citação por cima
     (2 blocos de texto nunca competem — mesmo princípio do ba-backdrop). */
  position:absolute; inset:-6% -4%; background-size:cover; background-position:50% 32%;
  filter:saturate(1.1) brightness(.9) blur(28px); will-change:transform;
}
.manifesto-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(35,34,68,.82) 0%, rgba(35,34,68,.62) 30%, rgba(35,34,68,.8) 78%, rgba(35,34,68,.9) 100%),
    linear-gradient(100deg, rgba(35,34,68,.5) 0%, rgba(35,34,68,.2) 50%, rgba(35,34,68,.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;
}
.manifesto-inner .eyebrow{ margin-bottom:22px; color:var(--cor-rosa-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(20,19,40,.55);
}
.manifesto-quote em{ color:var(--cor-dourado-on-dark); }
.manifesto-quote .quotemark{ color:var(--cor-dourado-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); }
.manifesto-facts{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;
}
.manifesto-fact{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cor-on-dark-soft);
  border:1px solid rgba(246,239,225,.28); border-radius:100px; padding:8px 16px;
}

@media (prefers-reduced-motion: reduce){
  .hero-wrap{ height:auto; }
  .hero-pin{ position:relative; }
  .hero-photo{ position:relative; left:0; right:0; bottom:0; top:auto; height:56vh; }
  .hero-content{ position:relative; }
}
html.no-webgl .hero-wrap{ height:auto; }
html.no-webgl .hero-pin{ position:relative; }