/* ============================================================
   Henry Silva | Educador Nail
   Paleta e tipografia conforme o Manual da Marca oficial.
   Estrutura, medidas e breakpoints permanecem os mesmos.
   ============================================================ */
/* Fontes do Manual da Marca, servidas do proprio dominio. Antes vinham do Google:
   duas conexoes externas (DNS + TLS) e um CSS que bloqueia a renderizacao, tudo no
   caminho critico. Arquivos sao os mesmos woff2 variaveis que o Google entrega,
   subset latin (cobre acentos do portugues, · e ™). Nome com -v1: se trocar a fonte,
   troque o numero, porque o navegador guarda por nome. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/playfair-display-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/playfair-display-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/inter-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-v1.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* Manual da marca */
  --royal:#0D47FF;          /* principal: titulos, destaques, linhas, botoes */
  --navy:#0A2EA8;           /* apoio: sombras, degrades, profundidade */
  --white:#FFFFFF;          /* base: fundo predominante */
  --platina:#F5F5F5;        /* apoio: fundos secundarios e areas de respiro */
  --silver:#D9D9D9;         /* prata fosco: molduras, bordas, divisorias */
  --graphite:#6E6E73;       /* apoio: textos secundarios */
  --ink:#111111;            /* preto premium: textos e contrastes */
  --graphite-bg:#1B1B1E;    /* grafite de fundo: secoes que quebram o branco */
  /* --royal-light: tint do royal p/ grafite. Royal puro so 2.75:1 em #1B1B1E (reprova AA).
     Este tom mantem 4.98:1 (passa AA ate em texto pequeno) e fica visualmente próximo
     do royal, não um azul pastel destoante. */
  --royal-light:#5C82FF;
  /* --royal-mist: tint mais claro, só pra texto sobre navy (CTA final). O royal-light
     cai pra ~3,3:1 no navy #0A2EA8; este fica acima de 5,5:1. Não trocar um pelo outro. */
  --royal-mist:#9DB6FF;

  --line:rgba(17,17,17,.11);
  --line-soft:rgba(17,17,17,.07);
  /* Metal escovado — molduras, aneis e selos */
  --brushed:linear-gradient(135deg,#fdfdfd 0%,#d9d9d9 26%,#a9a9ae 44%,#f2f2f4 58%,#c4c4c9 78%,#ededf0 100%);

  --serif:'Playfair Display','Noto Serif Display','Times New Roman',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(22px,6.2vw,34px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--white)}
/* CSS oficial do Lenis. Sem isto, o scroll-behavior:smooth acima briga com o
   smooth scroll do Lenis e o resultado e um scroll com atraso/travado.
   .lenis-stopped congela o scroll de um jeito que o Lenis reconhece (menu aberto). */
html.lenis,html.lenis body{height:auto}
/* Ancorado em .lenis (não .lenis-smooth): a classe modificadora nem sempre é
   aplicada, e sem isto o scroll-behavior:smooth acima continua brigando. */
html.lenis{scroll-behavior:auto!important}
html.lenis [data-lenis-prevent]{overscroll-behavior:contain}
html.lenis.lenis-stopped{overflow:hidden}
html.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* height:auto impede que os atributos width/height do HTML virem altura fixa. */
img{display:block;width:100%;height:auto}
figure{margin:0}
button,input,a{-webkit-tap-highlight-color:transparent}
section[id]{scroll-margin-top:74px}
/* Grao sutil (textura), mix-blend p/ nao lavar as cores por baixo. */
.noise{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}

/* Barra de progresso de leitura (topo, preenchida via GSAP/ScrollTrigger scrub). */
/* scaleX em vez de width: width recalcula layout a cada frame do scroll. */
.progress-bar{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--royal),var(--navy));z-index:90;pointer-events:none;will-change:transform}

/* Cursor customizado: só em desktop com mouse de verdade (hover:hover + pointer:fine).
   JS controla a posição; aqui só a aparência e o gate de mídia. */
@media (hover:hover) and (pointer:fine){
  .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:95;border-radius:50%;opacity:0}
  .cursor-dot{width:6px;height:6px;background:var(--royal)}
  .cursor-ring{width:32px;height:32px;border:1px solid rgba(13,71,255,.4);transition:border-color .3s ease,background .3s ease}
  /* O tamanho no hover vem do GSAP (scale 1.625 = 52px), não daqui. */
  .cursor-ring.is-active{background:rgba(13,71,255,.06);border-color:var(--royal)}
  .custom-cursor-active body,.custom-cursor-active{cursor:none}
  .custom-cursor-active a,.custom-cursor-active button{cursor:none}
}

/* Sheen: brilho metálico que atravessa devagar (textura de superfície polida).
   Elemento próprio (não pseudo — .hero/.final-cta já usam ::before/::after nos anéis). */
.sheen{position:absolute;inset:-30% -70%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(13,71,255,.05) 46%,rgba(255,255,255,.12) 50%,rgba(13,71,255,.05) 54%,transparent 65%);animation:sheen-sweep 13s ease-in-out infinite}
@keyframes sheen-sweep{0%,100%{transform:translateX(-12%) translateY(-4%)}50%{transform:translateX(12%) translateY(4%)}}

:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.marquee :focus-visible,.footer :focus-visible,.final-cta :focus-visible,.path-primary :focus-visible{outline-color:#fff}
.skip-link{position:fixed;left:-9999px;top:0;z-index:200}
.skip-link:focus{left:12px;top:12px;padding:13px 18px;background:var(--royal);color:#fff;font-size:11px;letter-spacing:1.2px;text-transform:uppercase}

.topbar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;padding:8px 17px;background:var(--white)}
.topbar-nav{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{position:relative;display:flex;align-items:center;gap:11px}
.brand::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
/* Monograma oficial (assets/logo-mark.webp), recortado do arquivo do cliente. */
.brand-mark{width:auto;height:28px;flex:none}
.brand-copy{display:flex;flex-direction:column;line-height:1.02}
.brand-copy strong{font-family:var(--serif);font-weight:500;font-size:14px;letter-spacing:.4px}
.brand-copy small{font-size:7px;text-transform:uppercase;letter-spacing:1.9px;color:var(--graphite);margin-top:4px}
/* Menu hamburger: 3 tracos, vira X quando aberto. */
.menu-toggle{position:relative;width:32px;height:32px;display:grid;place-items:center;gap:2px;background:none;border:0;padding:0;cursor:pointer}
.menu-toggle::before{content:"";position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.menu-toggle span{width:20px;height:1.5px;background:var(--ink);border-radius:1px;transition:.25s ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

.menu-backdrop{position:fixed;inset:0;z-index:71;background:rgba(17,17,17,.4);opacity:0;transition:opacity .25s ease}
.menu-backdrop.is-open{opacity:1}
.site-menu{position:fixed;top:0;right:0;bottom:0;z-index:72;width:min(78vw,320px);background:#fff;border-left:1px solid var(--silver);padding:88px 26px 32px;display:flex;flex-direction:column;gap:2px;transform:translateX(100%);transition:transform .3s ease;box-shadow:-18px 0 40px rgba(17,17,17,.14)}
.site-menu.is-open{transform:translateX(0)}
.site-menu-link{padding:14px 4px;font-size:13px;letter-spacing:.3px;color:var(--ink);border-bottom:1px solid var(--line)}
.site-menu-link:hover{color:var(--royal)}
.site-menu-cta{margin-top:14px;border:1px solid var(--royal);border-radius:2px;padding:15px 12px;text-align:center;color:var(--royal);font-size:11px;text-transform:uppercase;letter-spacing:1.2px}
.site-menu-cta:hover{background:var(--royal);color:#fff}
@media (prefers-reduced-motion:reduce){.site-menu,.menu-backdrop,.menu-toggle span{transition:none}}

/* min-height em duas linhas: Safari iOS < 15.4 não conhece svh e descarta a
   declaração inteira — sem o 100vh antes, o hero perderia a altura de tela. */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:91px var(--pad) 38px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;background:
  radial-gradient(circle at 50% 26%,rgba(13,71,255,.07),transparent 44%),
  linear-gradient(180deg,#fff 0%,#fdfdfe 66%,var(--platina) 100%)}
.hero::before,.hero::after{content:"";position:absolute;border:1px solid var(--line-soft);border-radius:50%;pointer-events:none}
.hero::before{width:410px;height:410px;top:118px;left:50%;transform:translateX(-50%)}
.hero::after{width:520px;height:520px;top:64px;left:50%;transform:translateX(-50%)}
.hero-glow{position:absolute;width:180px;height:520px;top:0;right:-125px;background:linear-gradient(180deg,transparent,rgba(13,71,255,.16),transparent);filter:blur(30px);transform:rotate(21deg)}
.eyebrow{margin:0 0 13px;color:var(--royal);font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase}
.hero-credential{position:relative;z-index:2;width:100%;white-space:nowrap;font-size:clamp(7px,2.15vw,9px);letter-spacing:clamp(1.25px,.45vw,2px);margin-bottom:9px}
.hero-welcome{position:relative;z-index:2;font-family:var(--serif);font-size:14px;letter-spacing:.4px;margin:0 0 14px;color:var(--graphite)}
.hero-portrait-wrap{position:relative;z-index:2;width:min(82vw,350px);height:min(87vw,370px);margin-top:2px}
.hero-ring{position:absolute;inset:-10px 12px 3px;border-radius:52% 52% 12px 12px/35% 35% 8px 8px;padding:1px;background:var(--brushed);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.hero-arch{position:absolute;inset:0 22px;overflow:hidden;border-radius:48% 48% 10px 10px/31% 31% 10px 10px;background:var(--platina);border:1px solid var(--silver)}
.hero-arch img{height:100%;object-fit:cover;object-position:center 25%;filter:saturate(.95) contrast(1.03)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 62%,rgba(255,255,255,.55) 85%,rgba(255,255,255,.92) 100%)}
.seal{position:absolute;right:0;bottom:18px;width:82px;height:82px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--navy);border:1px solid var(--silver);box-shadow:0 8px 24px rgba(10,46,168,.22),inset 0 0 0 4px var(--navy),inset 0 0 0 5px rgba(255,255,255,.4);color:#fff;transform:rotate(6deg)}
.seal span{font-size:6px;letter-spacing:.6px;line-height:1.3}.seal strong{font-family:var(--serif);font-size:21px;line-height:1;font-weight:500;margin:2px 0}
.hero-copy{position:relative;z-index:3;margin-top:-4px;width:100%}
/* Escala calibrada para Playfair Display: o nome ocupa ~92% da largura util. */
/* Nome em Azul Royal sólido, como o Manual da Marca define para títulos. */
.hero h1{font-family:var(--serif);font-size:clamp(48px,16.6vw,80px);font-weight:500;line-height:.94;margin:0;color:var(--royal);letter-spacing:-2px}
.hero h1 .word{display:inline-block}
.hero-role{font-family:var(--serif);font-size:clamp(18px,6.8vw,32px);margin:9px 0 0;white-space:nowrap;color:var(--ink)}
.hero-offer{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--graphite);margin:12px 0 20px}
/* Seta em SVG, nao em caractere: U+2197 tem apresentacao de emoji e o celular
   renderiza colorido. Herda cor por currentColor e tamanho por em. */
.arrow{width:1em;height:1em;display:block;flex:none}
.button .arrow{width:1.3em;height:1.3em}
.path-content a b,.path-secondary a b,.sticky-whatsapp i,.drag-hint span{display:flex;align-items:center}
.drag-hint span{display:inline-flex;vertical-align:-.16em}
.button{min-height:52px;padding:0 18px;border-radius:2px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:1.35px;text-transform:uppercase;transition:.25s ease;border:1px solid transparent}
.button:active{transform:scale(.985)}
.button-wide{width:100%}
.button-primary{color:#fff;background:var(--royal);box-shadow:0 10px 28px rgba(13,71,255,.22);border-color:var(--royal)}
.button-primary:hover{background:var(--navy);border-color:var(--navy)}
.button-outline{border-color:var(--royal);color:var(--royal);background:rgba(13,71,255,.03)}
.button-outline:hover{background:var(--royal);color:#fff}
.button-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.button-dark:hover{background:var(--royal);border-color:var(--royal)}
.hero-proof{display:flex;justify-content:center;gap:17px;margin-top:15px;font-size:12px;letter-spacing:.65px;color:var(--graphite)}
.hero-proof span{display:flex;align-items:center;gap:6px}.hero-proof i{width:4px;height:4px;border-radius:50%;background:var(--royal)}

.marquee{overflow:hidden;background:var(--ink);color:#fff}
.marquee-track{width:max-content;display:flex;align-items:center;gap:15px;padding:11px 0;animation:marquee 25s linear infinite}
.marquee span{font-size:8px;font-weight:500;letter-spacing:1.6px}.marquee b{font-size:8px;color:var(--royal-light)}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:80px var(--pad)}
.section-pad{padding-left:var(--pad);padding-right:var(--pad)}
.section-head h2,.about h2,.volia h2,.location h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,10.6vw,56px);line-height:1.02;letter-spacing:-1.2px;margin:0 0 18px;color:var(--ink)}
em{font-style:normal;color:var(--royal)}
.section-head>p:last-child{margin:0;color:var(--graphite);font-size:14px;line-height:1.72;max-width:38ch}
.paths{background:linear-gradient(180deg,#fff 0%,var(--platina) 100%)}
.path-card{position:relative;overflow:hidden;border:1px solid var(--silver);background:#fff}
.path-primary{height:465px;margin-top:34px;border-color:transparent}
.path-primary img{height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
/* Meio do degradê mais forte: o reflexo metálico da foto aparecia atrás do eyebrow
   (3,6:1 medido no celular). O topo segue claro pra mostrar as unhas. */
.path-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,168,.06) 16%,rgba(10,46,168,.64) 50%,rgba(8,26,92,.93) 92%)}
.path-index{position:absolute;top:17px;right:17px;font-family:var(--serif);font-size:12px;color:#fff;border:1px solid rgba(255,255,255,.6);width:33px;height:33px;display:grid;place-items:center;border-radius:50%}
.path-secondary .path-index{color:var(--royal);border-color:var(--silver)}
.path-content{position:absolute;left:22px;right:22px;bottom:22px;color:#fff}
.path-content>p{color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:1.8px;margin:0 0 7px}
.path-secondary>p{color:var(--royal);font-size:10px;text-transform:uppercase;letter-spacing:1.8px;margin:0 0 7px}
.path-content h3,.path-secondary h3{font-family:var(--serif);font-weight:500;font-size:41px;margin:0 0 8px}
.path-secondary h3{color:var(--ink)}
.path-content>span{display:block;color:rgba(255,255,255,.85);font-size:14px;line-height:1.55;max-width:31ch}
.path-secondary>span:not(.path-index){display:block;color:var(--graphite);font-size:14px;line-height:1.55;max-width:31ch}
/* position:relative + ::after = area de toque 44px sem mudar o layout visual. */
.path-content a,.path-secondary a{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:15px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase}
.path-content a::after,.path-secondary a::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.path-content a{border-top:1px solid rgba(255,255,255,.35);color:#fff}
.path-secondary a{border-top:1px solid var(--line);color:var(--royal)}
.path-content a b,.path-secondary a b{font-size:17px;font-weight:300}
.path-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.path-secondary{min-height:240px;padding:27px 22px 20px;background:#fff}
.path-secondary .path-index{top:20px}.path-secondary h3{font-size:34px;margin-top:25px}.path-secondary a{margin-top:24px}
/* Curso VIP em grafite: quebra o branco e cria o ritmo azul > claro > escuro
   nos tres caminhos. Azul usado aqui e o --royal-light (4,98:1 no grafite). */
.path-secondary.path-dark{background:var(--graphite-bg);border-color:#33333a}
.path-dark>p{color:var(--royal-light)}
.path-dark h3{color:#fff}
.path-dark>span:not(.path-index){color:rgba(255,255,255,.75)}
.path-dark a{border-top-color:rgba(255,255,255,.2);color:var(--royal-light)}
.path-dark .path-index{color:var(--royal-light);border-color:rgba(255,255,255,.3)}
.path-dark :focus-visible{outline-color:#fff}

.about{background:var(--platina);color:var(--ink);padding-bottom:80px}
.about-photo{position:relative;margin:0 0 39px;border-radius:180px 180px 6px 6px/105px 105px 6px 6px;overflow:hidden;height:440px;background:#e6e6e8;border:1px solid var(--silver)}
.about-photo img{height:100%;object-fit:cover;object-position:center 28%;filter:saturate(.95) contrast(1.02)}
.about-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,rgba(10,46,168,.78))}
.photo-caption{position:absolute;z-index:2;bottom:17px;left:0;right:0;text-align:center;color:#fff;font-size:10px;letter-spacing:1.9px;text-transform:uppercase}
.about-copy>p:not(.eyebrow){font-size:14px;line-height:1.75;color:var(--graphite);margin:0 0 15px}
.credentials{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--line)}
.credentials li{display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--ink)}

.work{padding:80px 0 72px;background:linear-gradient(180deg,var(--graphite-bg),#232327 52%,var(--graphite-bg));overflow:hidden}
/* Galeria em cards: cada arrasto para em exatamente um card (scroll-snap-stop)
   e o arrasto horizontal não encadeia no "voltar" do browser (overscroll contain).
   Sem touch-action:pan-x de propósito — travar o eixo impedia o dedo de rolar a
   página verticalmente em cima das fotos. O navegador já escolhe o eixo pelo gesto. */
.work-scroll{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);overscroll-behavior-x:contain;padding:15px var(--pad) 0;scrollbar-width:none}
.work-scroll::-webkit-scrollbar{display:none}
.work-scroll:focus-visible{outline-offset:-3px}
.work-card{margin:0;min-width:80vw;max-width:380px;scroll-snap-align:start;scroll-snap-stop:always}
/* Dentro do scroller horizontal o .reveal atrapalha: o deslocamento vertical cria
   18px de sobra (mini-scroll vertical no card) e o card fora da tela só revela
   depois do arrasto, piscando após o snap. Aqui os cards já nascem visíveis. */
.work-scroll .reveal,.work-scroll .reveal.is-visible{opacity:1;transform:none}
.work-card img{height:450px;object-fit:cover;filter:saturate(.95) contrast(1.02);border:1px solid var(--silver)}
.work-card figcaption{display:flex;align-items:center;gap:10px;border-left:1px solid var(--royal);padding:14px 0 1px 13px;font-family:var(--serif);font-size:14px;color:var(--ink)}
.drag-hint{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--graphite);margin:19px 0 0}.drag-hint span{color:var(--royal);font-size:14px;margin-left:8px}

.method{padding:80px 0 72px;background:
radial-gradient(circle at 30% 14%,rgba(13,71,255,.06),transparent 36%),
linear-gradient(180deg,var(--platina),#fff 52%,var(--platina))}
.method-intro h2{font-family:var(--serif);font-size:clamp(37px,10.5vw,54px);line-height:1.06;font-weight:500;margin:0 0 21px;color:var(--ink)}.method-intro h2 strong{font-weight:500;color:var(--royal)}
.method-intro>p:not(.eyebrow){font-size:14px;line-height:1.72;color:var(--graphite);margin:0 0 15px}.method-intro .gold-line{color:var(--royal);font-size:10px;text-transform:uppercase;letter-spacing:1.4px;margin-top:23px}
.comparison{margin-top:51px}
.compare-title{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--serif);font-size:13px;color:var(--graphite);margin-bottom:19px}.compare-title b{color:var(--royal);font-size:17px;font-weight:400}
.compare-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.compare-card{min-height:242px;border:1px solid var(--silver);padding:20px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff}
.compare-card small{text-transform:uppercase;font-size:10px;letter-spacing:1.4px;color:var(--graphite);margin-bottom:16px}
.compare-card strong{font-family:var(--serif);font-size:clamp(28px,8.6vw,38px);font-weight:500;line-height:1;color:var(--ink)}
.compare-card span{font-size:12px;color:var(--graphite);margin-top:4px}
.compare-card hr{width:36px;border:0;border-top:1px solid var(--line);margin:18px 0}
.after{border-color:var(--royal);background:linear-gradient(180deg,rgba(13,71,255,.07),#fff)}.after strong{color:var(--royal)}
/* Empurra os numeros pra borda externa: o medalhao fica dono do miolo. */
/* Recuo do lado do medalhão: com os rótulos em 12px, 26px colidia com o anel em 360px.
   Medido: sem colisão a partir de 34px em 360/390/430, sem quebrar linha. */
.before{padding-right:38px}.after{padding-left:38px}
.method-medallion{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(78px,23vw,94px);height:clamp(78px,23vw,94px);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--navy);border:1px solid var(--silver);box-shadow:0 0 0 5px #fff,0 0 0 6px var(--silver),0 12px 30px rgba(10,46,168,.28);color:#fff}
.method-medallion span{font-size:6px;letter-spacing:.85px;line-height:1.25}.method-medallion strong{font-family:var(--serif);font-size:clamp(32px,9.6vw,39px);font-weight:400;line-height:.85;margin:3px 0}
.comparison-close{text-align:center;color:var(--graphite);font-size:13px;line-height:1.55;margin:24px 0 0}.comparison-close strong{font-weight:500;color:var(--royal)}
/* Lista com filete, mesma linguagem das credenciais: sem grade de cards idênticos. */
.benefits{display:grid;column-gap:40px;margin-top:45px}
.benefit{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding:20px 0}
/* Filete de fechamento nos itens da última linha (1 coluna no celular, 2 a partir de 720px). */
.benefit:last-child{border-bottom:1px solid var(--line)}
@media (min-width:720px){.benefit:nth-last-child(2){border-bottom:1px solid var(--line)}}
.benefit>span{display:grid;place-items:center;min-width:38px;height:38px;border:1px solid var(--silver);border-radius:50%;color:var(--royal)}
.benefit>span svg{width:18px;height:18px}
.benefit h3{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 4px;color:var(--ink)}
.benefit p{font-size:13px;color:var(--graphite);line-height:1.5;margin:0}
.method-cta{width:calc(100% - (var(--pad) * 2));margin:14px var(--pad) 0}

.volia{padding-top:80px;padding-bottom:80px;background:var(--platina);color:var(--ink)}
.volia-image{position:relative;overflow:hidden;height:410px;border-radius:5px 130px 5px 5px/5px 110px 5px 5px;background:#e6e6e8;border:1px solid var(--silver)}
.volia-image img{height:100%;object-fit:cover;object-position:center 48%}
.volia-badge{position:absolute;z-index:2;top:17px;right:17px;width:73px;height:73px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--navy);color:#fff;border:1px solid var(--silver);font-size:7px;letter-spacing:1.1px;line-height:1.4}
.volia-copy{padding-top:31px}.volia h2{font-size:clamp(40px,12vw,55px)}.volia p:last-child{color:var(--graphite);font-size:14px;line-height:1.75;margin:0}

.education{padding:80px 0 80px;background:linear-gradient(180deg,var(--graphite-bg),#232327 48%,var(--graphite-bg))}
.class-collage{position:relative;display:grid;grid-template-columns:1.18fr .82fr;gap:9px;margin-top:30px}
.class-main{margin:0;height:435px;overflow:hidden}.class-side{margin:0;height:260px;overflow:hidden}
.class-main img,.class-side img{height:100%;object-fit:cover}
.class-note{position:absolute;right:var(--pad);bottom:0;width:44%;min-height:164px;padding:18px 15px;background:var(--royal);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.class-note strong{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.1;margin-bottom:7px}.class-note span{font-size:12px;line-height:1.45}

.location{padding-top:80px;padding-bottom:80px;background:var(--platina);color:var(--ink)}
.location-card{border:1px solid var(--silver);padding:26px 20px 20px;background:#fff}
.location-top>p:last-child{color:var(--graphite);font-size:14px;line-height:1.65;margin:0 0 24px}
.map-frame{position:relative;height:210px;overflow:hidden;background:#e6e6e8;border:1px solid var(--silver);margin-bottom:14px}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.72) contrast(1.02)}
.map-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(170deg,rgba(13,71,255,.07),rgba(10,46,168,.04))}

.final-cta{position:relative;min-height:700px;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.final-cta>img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center 28%;filter:saturate(.8) contrast(1.04) brightness(.86)}
.final-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,168,.04) 18%,rgba(10,46,168,.4) 48%,rgba(8,24,80,.95) 88%),linear-gradient(90deg,rgba(8,24,80,.3),transparent 62%)}
.final-copy{position:relative;z-index:2;padding:45px var(--pad) 52px;width:100%;color:#fff}
/* Véu atrás do bloco de texto: onde o texto começa, a foto ainda é parede clara e o
   eyebrow azul sumia. O véu escurece só daqui pra baixo, o rosto lá em cima fica limpo. */
.final-copy::before{content:"";position:absolute;inset:-140px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,24,80,0),rgba(8,24,80,.88) 140px)}
.final-copy .eyebrow{color:var(--royal-mist)}
.final-copy h2{font-family:var(--serif);font-size:clamp(38px,10.9vw,56px);line-height:1.06;font-weight:500;margin:0 0 16px;letter-spacing:-1.1px;color:#fff}
.final-copy h2 em{color:var(--royal-mist)}
.final-copy p:not(.eyebrow){font-size:14px;color:rgba(255,255,255,.78);line-height:1.65;margin:0 0 22px}
.final-copy .button-primary{background:#fff;color:var(--royal);border-color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.24)}
.final-copy .button-primary:hover{background:var(--platina);border-color:var(--platina);color:var(--navy)}
.instagram{position:relative;display:block;text-align:center;margin-top:19px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#fff}
.instagram::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}

/* Rodape claro: o manual pede a marca em prata fosco sobre fundo claro. */
.footer{padding:56px var(--pad) 112px;background:var(--platina);color:var(--ink);border-top:1px solid var(--silver);text-align:center}
.footer-logo{width:min(264px,66vw);margin:0 auto 26px}
.footer p{font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.35;margin:0 0 28px}
.footer>small{display:block;font-size:11px;color:var(--graphite);letter-spacing:.4px}
/* CTA fixo: pilula compacta. Altura 46px, acima do minimo de toque (44px). */
.sticky-whatsapp{position:fixed;z-index:75;left:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));min-height:46px;padding:0 15px;border-radius:999px;display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:9px;background:var(--royal);color:#fff;box-shadow:0 8px 24px rgba(13,71,255,.3);border:1px solid var(--royal);transition:.3s ease}
.sticky-whatsapp span{font-size:6.5px;text-transform:uppercase;letter-spacing:.9px;border-right:1px solid rgba(255,255,255,.35);padding-right:9px}
.sticky-whatsapp b{font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;font-weight:600}
.sticky-whatsapp i{font-size:15px;font-style:normal}

/* ============================================================
   Secoes em grafite — quebram o branco solido sem tirar do
   manual o "fundo predominante branco". O royal puro nao passa
   contraste sobre grafite, entao aqui entra --royal-light.
   ============================================================ */
.work .eyebrow,.education .eyebrow{color:var(--royal-light)}
.work .section-head h2,.education .section-head h2{color:#fff}
.work em,.education em{color:var(--royal-light)}
.work .section-head>p:last-child,.education .section-head>p:last-child{color:rgba(255,255,255,.66)}
.work-card img{border-color:rgba(255,255,255,.16);filter:saturate(1) contrast(1.03)}
.work-card figcaption{color:#fff;border-left-color:var(--royal-light)}
.drag-hint{color:rgba(255,255,255,.5)}.drag-hint span{color:var(--royal-light)}
.work :focus-visible,.education :focus-visible{outline-color:#fff}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}

@media (min-width:720px){
  :root{--pad:clamp(34px,5vw,74px)}
  .topbar{padding:15px 28px}.hero{min-height:900px}.hero-portrait-wrap{width:390px;height:430px}.path-grid{grid-template-columns:1fr 1fr}.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center}.about-photo{margin:0;height:570px}.work-card{min-width:48vw}.benefits{grid-template-columns:1fr 1fr}.volia{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.volia-copy{padding:0}.education .section-head{max-width:650px}.class-collage{grid-template-columns:1.25fr .75fr}.map-frame{height:280px}.final-copy{max-width:660px}.sticky-whatsapp{right:22px;bottom:calc(22px + env(safe-area-inset-bottom))}
}
@media (min-width:1100px){
  .topbar{padding-left:45px;padding-right:45px}
  /* Linhas 1fr nas pontas: a sobra de altura do retrato vai pra cima e pra baixo do
     grupo de texto (que fica junto e centralizado), não pros vãos entre as linhas. */
  .hero{min-height:auto;display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:". portrait" "eyebrow portrait" "welcome portrait" "copy portrait" ". portrait";grid-template-rows:1fr auto auto auto 1fr;align-items:start;column-gap:60px;text-align:left;padding-top:91px}
  .hero::before,.hero::after{display:none}
  .hero-credential{grid-area:eyebrow;width:auto;white-space:normal;margin-bottom:14px}
  .hero-welcome{grid-area:welcome;margin-bottom:26px}
  .hero-copy{grid-area:copy;margin-top:0}
  .hero-portrait-wrap{grid-area:portrait;justify-self:end;align-self:center;width:430px;height:475px;margin-top:0}
  .hero h1{font-size:92px}.hero-role{font-size:36px}
  .hero-proof{justify-content:flex-start}
  .hero-copy .button-wide{width:fit-content;padding:0 40px}.section,.section-pad{padding-left:max(calc((100vw - 1120px)/2),60px);padding-right:max(calc((100vw - 1120px)/2),60px)}.paths .section-head{max-width:630px}.path-primary{height:570px}.path-grid{grid-template-columns:1fr 1fr}.about{padding-left:max(calc((100vw - 1120px)/2),60px);padding-right:max(calc((100vw - 1120px)/2),60px)}.work-scroll{padding-left:max(calc((100vw - 1120px)/2),60px);padding-right:max(calc((100vw - 1120px)/2),60px)}.work-card{min-width:360px}.method-intro,.comparison,.benefits{max-width:1120px;margin-left:auto;margin-right:auto}.method-cta{width:min(800px,100% - 120px);max-width:none;margin-left:auto;margin-right:auto}.class-collage{max-width:1120px;margin-left:auto;margin-right:auto}.location-card{max-width:900px;margin:auto}.footer{padding-left:max(calc((100vw - 1120px)/2),60px);padding-right:max(calc((100vw - 1120px)/2),60px)}
}
/* Colunas centradas de verdade no desktop. O .section-pad calcula o padding como se o
   elemento tivesse a largura da tela; somado a um max-width, em 1920 o conteúdo caía
   pra 320px e em 2560 pra zero. Aqui a coluna é min(800px, tela - 120px), sem padding. */
@media (min-width:1100px){
  .method-intro,.comparison,.benefits,.class-collage,.education .section-head{width:min(800px,100% - 120px);max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
  .education .section-head>*{max-width:650px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .marquee-track{animation:none}
  /* Fade de entrada continua: opacidade não causa desconforto vestibular.
     Some só o deslocamento. */
  .reveal{transform:none;transition:opacity .5s ease}
  .sheen{display:none}
  .cursor-dot,.cursor-ring{display:none}
  body,a,button{cursor:auto}
}
/* ?motion=force — devolve o motion completo mesmo com "reduzir movimento"
   ligado no sistema. Serve para conferir o site como o visitante comum vê. */
.force-motion .sheen{display:block}
.force-motion .marquee-track{animation:marquee 25s linear infinite}
@media (hover:hover) and (pointer:fine){
  .force-motion .cursor-dot,.force-motion .cursor-ring{display:block}
  .force-motion body,.force-motion a,.force-motion button{cursor:none}
}