/* ============================================================
   UPSELL — Brow Lamination e Lash Lifting
   Mesmo sistema visual da Precifica Page: tokens, tipografia,
   paleta e margens idênticos.
   ============================================================ */

@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/geist-latin.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:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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;
}

/* ---------- 1. TOKENS ---------- */
:root{
  --nude-0:#FAF7F2;
  --nude-1:#F4EFE7;
  --nude-2:#EDE6DA;
  --white:#FFFFFF;

  --brown-100:#D9C6B4;
  --brown-300:#A9866A;
  --brown-400:#8A6A4F;
  --brown-500:#6E523C;
  --brown-600:#55402F;
  --brown-800:#2F231B;
  --brown-900:#231A14;

  --grad-brown:linear-gradient(135deg,#A9866A 0%,#6E523C 42%,#2F231B 100%);

  --ink:#1B1410;
  --ink-2:#4A3D34;
  --muted:#8A7C71;
  --line:rgba(53,38,28,.10);
  --line-2:rgba(53,38,28,.06);

  --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  --sec-y:clamp(48px,5vw,88px);
  --gutter:320px;
  --alerta-h:52px;

  --spring:cubic-bezier(.22,.72,.24,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,p{margin:0;padding:0}
a{color:inherit;text-decoration:none}
svg{display:block;max-width:100%}

body{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--nude-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  overflow:hidden;          /* a página inteira cabe na tela: sem rolagem */
  height:100dvh;
  display:flex;flex-direction:column;
}

.shell{width:100%;padding-inline:var(--gutter);margin-inline:auto}

/* ---------- 3. AVISO DE TOPO ---------- */
.alerta{
  position:sticky;top:0;z-index:20;
  min-height:var(--alerta-h);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px;
  background:linear-gradient(135deg,#E03A2F 0%,#C42419 55%,#A81C12 100%);
  text-align:center;
}
.alerta__ponto{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:#fff;
  animation:pulsa 1.8s var(--spring) infinite;
}
@keyframes pulsa{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.7)}
}
.alerta__texto{
  font-weight:500;
  font-size:clamp(.875rem,1.1vw,1.0625rem);
  letter-spacing:.01em;
  color:#fff;
}

/* ---------- 4. PÁGINA ---------- */
.pagina{
  flex:1;min-height:0;
  display:flex;align-items:center;
}
.pagina>.shell{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(18px,2.2vw,32px);
}

/* ---------- 5. TÍTULO ---------- */
.cabecalho{text-align:center;width:100%}
.intro{
  max-width:44ch;
  margin:0 auto clamp(12px,1.3vw,20px);
  font-weight:400;
  /* um degrau abaixo do título */
  font-size:clamp(1.25rem,1.75vw,1.6875rem);
  line-height:1.28;
  letter-spacing:-.022em;
  color:var(--brown-600);
  text-wrap:balance;
}
.display{
  /* medida no próprio título: aqui 1ch vale pela fonte grande, não pelos 16px do body */
  max-width:52ch;
  margin-inline:auto;
  font-weight:500;
  font-size:clamp(1.75rem,2.6vw,2.5rem);
  line-height:1.1;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.display em{
  font-style:normal;
  background:var(--grad-brown);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.descricao{
  /* solta a medida: no desktop a frase cabe em uma linha só */
  max-width:none;
  margin:clamp(12px,1.2vw,18px) auto 0;
  font-weight:400;
  font-size:clamp(1rem,1.15vw,1.1875rem);
  line-height:1.5;
  letter-spacing:-.008em;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ---------- 6. VÍDEO ---------- */
.video{
  /* a largura é limitada pela altura que sobra, mantendo o 16:9 exato */
  --reserva:560px;
  width:100%;
  max-width:min(900px, calc((100dvh - var(--reserva)) * 16 / 9));
  margin-inline:auto;
}
.video__moldura{
  padding:clamp(8px,.8vw,12px);
  border-radius:var(--r-xl);
  background:var(--grad-brown);
}
.video__area{
  position:relative;
  aspect-ratio:16/9;
  border-radius:calc(var(--r-xl) - 10px);
  overflow:hidden;
  background:var(--brown-900);
}
/* qualquer player colado aqui já ocupa a área inteira */
.video__area>iframe,
.video__area>video,
.video__area>embed{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.video__placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 70% at 50% 40%,rgba(169,134,106,.18),transparent 70%),
    linear-gradient(160deg,#3A2B20 0%,#231A14 60%,#2F231B 100%);
}
.video__aviso{
  font-size:.875rem;letter-spacing:-.004em;
  color:rgba(250,247,242,.5);
}

/* ---------- 7. RODAPÉ ---------- */
.rodape{
  background:var(--brown-900);
  padding-block:26px;
  color:rgba(250,247,242,.6);
}
.rodape__interno{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:.8125rem;letter-spacing:-.004em;
}
.rodape__link{
  color:rgba(250,247,242,.72);
  transition:color .25s var(--spring);
}
.rodape__link:hover{color:var(--nude-0)}
.rodape__sep{color:rgba(250,247,242,.3)}
.rodape__marca{color:rgba(250,247,242,.6)}

/* ---------- 8. REVEAL ---------- */
.js .reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .62s var(--spring),transform .62s var(--spring);
}
.js .reveal[data-reveal="scale"]{transform:translate3d(0,26px,0) scale(.982)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal.is-animating{will-change:opacity,transform}

@media (prefers-reduced-motion:reduce){
  .js .reveal{transition:opacity .25s ease;transform:none!important}
  .alerta__ponto{animation:none}
}

/* ============================================================
   9. RESPONSIVO — mesmas margens da Precifica Page
   ============================================================ */

@media (min-width:1680px){ :root{--gutter:320px} }

@media (min-width:1440px) and (max-width:1679.98px){
  :root{--gutter:clamp(180px,18vw,320px)}
}

@media (min-width:1200px) and (max-width:1439.98px){
  :root{--gutter:clamp(96px,10vw,150px)}
}

@media (min-width:1024px) and (max-width:1199.98px){
  :root{--gutter:72px}
}

/* ---- Tablet ---- */
@media (max-width:1023.98px){
  :root{--gutter:48px;--sec-y:clamp(40px,6vw,72px)}
  .display{max-width:24ch}
}

@media (max-width:860px){ :root{--gutter:40px} }

/* ---- Mobile ---- */
@media (max-width:767.98px){
  :root{
    --gutter:1.45em;
    --sec-y:clamp(32px,8vw,48px);
    --alerta-h:48px;
    --r-xl:26px;
  }
  .pagina{align-items:center}
  .video{--reserva:520px}
  .intro{font-size:clamp(1.0625rem,4.3vw,1.3125rem);max-width:none}
  .descricao{font-size:.9375rem}
  .display{max-width:none}
  .display{font-size:clamp(1.4375rem,5.9vw,1.875rem);line-height:1.18;letter-spacing:-.026em}
  .alerta{padding:11px 16px}
  .alerta__texto{font-size:.9375rem}
  .video{margin-top:26px}
  .video__moldura{padding:7px}
  .rodape{padding-block:22px}
}

@media (max-width:379.98px){
  .display{font-size:1.5rem}
}

:where(a):focus-visible{
  outline:2px solid var(--brown-400);
  outline-offset:3px;
  border-radius:var(--r-pill);
}