/* Vincii Point, página de venda: base comum às três direções.
   Tokens, fontes, botões, topo em barra e marca. Herdado da venda do Sign (aprovada). */
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;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:"Manrope";src:url(fonts/manrope-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* itálico com a mesma altura x e a mesma caixa de linha do Manrope: a palavra senta na mesma linha de base */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin-standard-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap;size-adjust:124%;ascent-override:86%;descent-override:24.2%;line-gap-override:0%}

:root{
  --g0:#262D2E; --g1:#2F3738; --g2:#384142;
  --t:#00BFA6; --t-claro:#E3F7F3; --t-meio:#9FE6DA; --ink:#03302A;
  --tx:#EEF2F1; --tx2:#A9B5B3;
  --lt:#0B1F1C; --lt2:#586462; --lt3:#7C8886; --ttx:#007A69;
  --paper:#F5F6F6; --line:#E4E8E7; --white:#FFFFFF;
  --amb:#B26A00; --amb-bg:#FFF3DF; --red:#B4372E; --red-bg:#FCE9E7;
  --hair:rgba(238,242,241,.08); --hair2:rgba(238,242,241,.14);
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut-l:max(clamp(16px,4.2vw,56px),env(safe-area-inset-left,0px));
  --gut-r:max(clamp(16px,4.2vw,56px),env(safe-area-inset-right,0px));
  --sans:"Manrope",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --sombra:0 40px 90px -45px rgba(11,31,28,.45),0 0 0 1px rgba(11,31,28,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%;scrollbar-color:#C9D0CE #fff}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:#fff;color:var(--lt);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--t);color:var(--ink)}
:focus-visible{outline:2px solid var(--ttx);outline-offset:4px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--ttx)}
.num{font-variant-numeric:tabular-nums}
.page{overflow-x:clip;width:100%;position:relative}
.wrap{max-width:1360px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.nw{white-space:nowrap}

/* grão fixo, quase invisível */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.03;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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .15 0 0 0 0 .14 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- botões: pílula com ícone aninhado ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:7px 7px 7px 24px;border-radius:999px;font:700 16px/1 var(--sans);text-decoration:none;letter-spacing:-.005em;white-space:nowrap;transition:transform .5s var(--ease),background-color .4s var(--ease),color .4s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.magnetico{transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
.btn .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:transform .5s var(--ease)}
.btn:hover .ic{transform:translate(2px,-1px) scale(1.06)}
.btn .ic svg{width:18px;height:18px;display:block}
.btn-p{background:var(--t);color:var(--ink);box-shadow:0 10px 40px -12px rgba(0,191,166,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-p .ic{background:rgba(3,48,42,.12)}
.btn-p:hover{box-shadow:0 14px 50px -10px rgba(0,191,166,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-i{background:var(--ink);color:#fff}
.btn-i .ic{background:rgba(255,255,255,.14)}
.btn-i:hover{background:#0A4038}
.btn-l{color:var(--lt);padding:7px 26px;border:1px solid rgba(11,31,28,.16);background:rgba(255,255,255,.6)}
.btn-l:hover{background:rgba(11,31,28,.05)}
.btn-c{background:#fff;color:var(--lt)}
.btn-c .ic{background:rgba(11,31,28,.08)}
.btn-g{color:var(--tx);padding:7px 26px;border:1px solid var(--hair2)}
.btn-g:hover{background:rgba(238,242,241,.08)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ---------- topo: barra de largura total; transparente na abertura, branca com linha fina ao rolar ---------- */
.topo{position:fixed;z-index:50;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px);background:transparent;border-bottom:1px solid transparent;transition:background-color .4s var(--ease),border-color .4s var(--ease)}
.topo.solid{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:rgba(11,31,28,.1)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;height:84px}
.topo nav{display:flex;align-items:center;gap:28px}
.topo nav ul{display:flex;align-items:center;gap:4px}
.topo nav ul a{display:flex;align-items:center;height:40px;padding:0 12px;font-size:15px;font-weight:500;color:var(--lt2);text-decoration:none;transition:color .3s var(--ease)}
.topo nav ul a:hover{color:var(--lt)}
.topo .btn{height:44px;min-height:44px;padding:0 6px 0 20px;gap:12px;font-size:15px;line-height:1}
.topo .btn .ic{width:32px;height:32px}
.topo .btn .ic svg{width:16px;height:16px}
@media (max-width:960px){ .topo nav ul{display:none} }
@media (max-width:860px){
  .topo .wrap{height:66px}
  .topo .btn{height:40px;min-height:40px;padding:0 5px 0 16px;font-size:14px}
  .topo .btn .ic{width:30px;height:30px}
}

/* ---------- marca do Point: símbolo + palavra (o pingo do i é tiffany, como no Sign) ---------- */
.marca{display:flex;align-items:center;gap:.22em;font-size:44px;line-height:1;text-decoration:none;color:var(--ink);flex:none}
.marca svg{height:1.18em;width:auto;display:block;flex:none}
.pw{font-family:var(--sans);font-weight:800;letter-spacing:-.045em;font-size:1em;line-height:1;display:inline-flex;align-items:baseline;transform:translateY(.02em)}
.pw .pi{position:relative;display:inline-block}
.pw .pi::after{content:"";position:absolute;left:50%;top:-.03em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--t)}
.marca.br{color:#fff}
@media (max-width:860px){ .marca{font-size:34px} }

/* ---------- títulos ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .2em 0;margin:0 -.08em -.2em 0}
.wm-i{display:inline-block;will-change:transform}
.h2{font-weight:600;font-size:clamp(34px,4.2vw,64px);line-height:1.04;letter-spacing:-.035em;max-width:17em;text-wrap:balance}
.lead{margin-top:24px;max-width:34em;font-size:clamp(17px,1.35vw,20px);color:var(--lt2);text-wrap:pretty}
.sobre{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ttx)}
.sobre::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--t)}
.sec{padding-top:clamp(96px,11vw,168px);padding-bottom:clamp(96px,11vw,168px)}

/* ---------- perguntas ---------- */
.faq{display:grid;border-top:1px solid var(--line);margin-top:clamp(36px,4vw,56px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.015em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--paper);transition:transform .5s var(--ease),background-color .4s var(--ease)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:2px;background:var(--lt)}
.faq summary i::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
.faq details[open] summary i{background:var(--t-claro)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 0 26px;max-width:46em;color:var(--lt2)}

/* ---------- rodapé ---------- */
.rodape{padding:48px 0 44px;border-top:1px solid var(--line);font-size:14px;color:var(--lt2)}
.rodape .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.rodape .marca{font-size:28px}
.rodape .vincii{display:flex;align-items:center;gap:12px}
.rodape .vincii img{height:24px;width:auto}

@media (max-width:480px){ .btn{min-height:50px} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}