/* Dra. Patrícia Sugino — biolinks
   Estilos da página. Imagens em assets/img/, script em assets/js/. */

/* ══════════════════════════════════════════════════════════════
   IMAGENS DOS BOTÕES
   Cada --img-N é a foto de fundo de um botão, embutida no arquivo.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Pálpebras · olhos ocidentais */
  --img-1: url("../img/botao-palpebras.webp");
  /* Site · bancada da Clínica Skeye */
  --img-2: url("../img/botao-site.webp");
  /* Pálpebras orientais · olhos orientais */
  --img-3: url("../img/botao-palpebras-orientais.webp");
  /* Localização · sala da Clínica Skeye */
  --img-4: url("../img/botao-localizacao.webp");
  /* Fale comigo · celular */
  --img-5: url("../img/botao-fale-comigo.webp");
}
:root{
  --cream:   #FBF6F1;
  --cream-2: #F5EAE0;
  --tan:     #F0DCCB;
  --peach:   #FCD9C3;
  --marsala: #8E324F;
  --plum:    #4E182D;
  --ink:     #3E1526;
  --ink-2:   rgba(62,21,38,.6);
  --hair:    rgba(142,50,79,.15);
  --ease:    cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-weight:300; font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-color:#EFE0D2;
  background-image:url("../img/fundo-textura.webp");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center center;
  background-size:cover;
}
body::before{        /* grão sobre o fundo lateral */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.08; 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='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
.page::after{
  content:""; position:absolute; inset:0; z-index:20; pointer-events:none;
  opacity:.055; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{
  position:relative; z-index:1; width:100%; max-width:820px; margin:0 auto;
  background:var(--cream); overflow:hidden;
  box-shadow:0 0 60px -10px rgba(74,38,26,.28);
}
.pad{ padding-left:clamp(20px,5.5vw,44px); padding-right:clamp(20px,5.5vw,44px); }
.srf{ font-family:"Prata",Georgia,serif; font-weight:400; }
.cg{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:400; }

/* ═════════ 1 · HERO, mesma capa da home ═════════ */
/* bloco único: capa + botões sobre o mesmo fundo */
.top{ position:relative; overflow:hidden; }
.top__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(251,246,241,0) 45%,rgba(251,246,241,.32) 56%,rgba(251,246,241,.7) 67%,rgba(251,246,241,.93) 79%,#FBF6F1 90%),
    radial-gradient(112% 46% at 70% 22%, rgba(203,101,80,.34) 0%, rgba(120,45,42,.2) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(158deg,#41251A 0%,#2C1811 42%,#22120D 74%,#2A1712 100%);
}
.hero{
  position:relative; z-index:2;
  min-height:clamp(466px,92vw,660px); padding:clamp(30px,6vw,52px) clamp(20px,5.5vw,44px) clamp(24px,5vw,40px);
  display:flex; align-items:center;
  color:var(--cream);
}
.hero__fig{
  position:absolute; z-index:0; right:-92px; bottom:-10px; z-index:1;
  height:clamp(404px,84vw,600px); width:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,0) 100%);
}
.hero__veil{
  position:absolute; top:0; left:0; right:0; z-index:1; pointer-events:none;
  height:calc(100% + 320px);
  background:linear-gradient(to right,rgba(29,15,10,.95) 8%,rgba(29,15,10,.76) 40%,rgba(29,15,10,0) 72%);
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 76%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 76%,rgba(0,0,0,0) 100%);
}
.hero__in{ position:relative; z-index:4; width:71%; text-align:center; }
.hero__logo{ display:block; width:clamp(150px,34vw,236px); height:auto; margin:0 auto; }
.hero__h1{
  font-family:"Prata",Georgia,serif; font-weight:400;
  font-size:clamp(25px,5.9vw,40px); line-height:1.3; letter-spacing:-.005em;
  margin:22px 0 0; color:var(--cream);
}
.hero__h1 i{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-size:clamp(28px,6.6vw,45px); color:#D89A7C; white-space:nowrap;
}
.hero__sub{
  margin:clamp(14px,2.6vw,22px) 0 0; font-size:clamp(12.6px,2.9vw,18px); line-height:1.7;
  color:rgba(251,246,241,.78);
}
.hero__sub i{ font-style:italic; }

/* ═════════ 2 · BOTÕES ═════════ */
/* Um único marsala para os cinco. A foto vive no fundo, do lado direito,
   e some para dentro da cor por uma passagem longa. */
.stack{
  position:relative; z-index:2; display:flex; flex-direction:column;
  gap:clamp(10px,2.2vw,16px);
  padding:clamp(10px,2vw,18px) 0 clamp(32px,6vw,52px);
}
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:clamp(12px,2.8vw,20px);
  min-height:clamp(126px,32vw,220px);
  padding:clamp(22px,5vw,40px) clamp(22px,5vw,40px);
  border-radius:clamp(16px,3.4vw,24px);
  text-decoration:none; color:var(--cream);
  background:linear-gradient(160deg,#77434F 0%,#6A3846 46%,#572C39 100%);
  border:1px solid rgba(252,217,195,.16);
  box-shadow:0 16px 34px -20px rgba(48,14,30,.95);
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.btn__bg{
  position:absolute; top:0; right:0; bottom:0; z-index:-2;
  width:66%;
  background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.34) 20%,rgba(0,0,0,.82) 46%,#000 68%);
          mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.34) 20%,rgba(0,0,0,.82) 46%,#000 68%);
}
.btn__sh{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 40%,rgba(38,10,22,.2) 100%);
}
.btn__txt{ flex:1; min-width:0; }
.btn__lb{
  display:block; font-family:"Prata",Georgia,serif;
  font-size:clamp(20px,4.6vw,31px); line-height:1.18;
  text-shadow:0 1px 12px rgba(48,12,28,.55);
}
.btn__lb em{
  display:block; margin-top:clamp(3px,.9vw,8px);
  font-family:"Cormorant Garamond",Georgia,serif; font-style:italic;
  font-size:clamp(18.5px,4.4vw,30px); line-height:1.25;
  color:var(--peach); opacity:.92;
  text-shadow:0 1px 12px rgba(48,12,28,.55);
}
.btn__go{
  flex:none; display:grid; place-items:center;
  width:clamp(32px,7vw,48px); height:clamp(32px,7vw,48px);
  border-radius:50%; border:1px solid rgba(252,217,195,.5);
  color:var(--peach); opacity:.94;
  transition:transform .34s var(--ease), background .34s var(--ease);
}
.btn__go svg{ width:clamp(12px,2.6vw,17px); height:clamp(12px,2.6vw,17px); display:block; }
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px); border-color:rgba(252,217,195,.36);
  box-shadow:0 24px 40px -20px rgba(48,14,30,1);
}
.btn:hover .btn__go,.btn:focus-visible .btn__go{ transform:translateX(3px); background:rgba(252,217,195,.16); }

.btn--1 .btn__bg{ background-image:var(--img-1); }
.btn--2 .btn__bg{ background-image:var(--img-2); }
.btn--3 .btn__bg{ background-image:var(--img-3); }
.btn--4 .btn__bg{ background-image:var(--img-4); }
.btn--5 .btn__bg{ background-image:var(--img-5); }

/* ═════════ 3 · NÚMEROS ═════════ */
.nums{
  display:grid; grid-template-columns:repeat(3,1fr); margin-top:24px;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.nums > div{ padding:clamp(15px,3.2vw,26px) 4px; text-align:center; }
.nums > div + div{ border-left:1px solid var(--hair); }
.nums b{ display:block; font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(18px,4vw,27px); color:var(--marsala); line-height:1.2; }
.nums span{ display:block; margin-top:5px; font-family:"Roboto",sans-serif; font-size:clamp(8.5px,1.9vw,12px); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }

/* ═════════ 7 · FAIXA ═════════ */
.band{ margin-top:26px;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:linear-gradient(100deg,var(--tan),#E7CDB8);
  color:#5C1C33; padding:clamp(20px,4.4vw,34px) 10px; text-align:center;
}
.band svg{ width:clamp(16px,3.4vw,24px); height:clamp(16px,3.4vw,24px); display:block; margin:0 auto 8px; opacity:.7; }
.band b{ display:block; font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(14.5px,3.2vw,22px); }
.band span{ display:block; margin-top:3px; font-family:"Roboto",sans-serif; font-size:clamp(8px,1.8vw,11px); letter-spacing:.16em; text-transform:uppercase; opacity:.72; }

/* ═════════ 8 · RODAPÉ ═════════ */
.foot{
  background:linear-gradient(160deg,#5C1C33 0%,#4E182D 55%,#3B1122 100%);
  color:var(--cream); text-align:center;
  padding:clamp(32px,6vw,52px) clamp(20px,5.5vw,44px) calc(clamp(26px,5vw,44px) + env(safe-area-inset-bottom));
}

.foot__soc-t{ margin:0 0 clamp(16px,3vw,24px); font-size:clamp(11.5px,2.4vw,15px); color:rgba(251,246,241,.7); }
.foot__soc{ display:flex; justify-content:center; gap:10px; margin-bottom:24px; }
.foot__soc a{
  width:clamp(38px,8vw,54px); height:clamp(38px,8vw,54px); border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(252,217,195,.34); color:var(--peach);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.foot__soc a:hover,.foot__soc a:focus-visible{ background:var(--peach); color:#4E182D; transform:translateY(-2px); }
.foot__soc svg{ width:clamp(16px,3.4vw,23px); height:clamp(16px,3.4vw,23px); display:block; }
.foot__rule{ height:1px; background:rgba(252,217,195,.2); margin:0 0 20px; }
.foot__logo{ display:block; width:clamp(146px,30vw,230px); height:auto; margin:0 auto 14px; }
.foot__meta{ margin:0; font-family:"Roboto",sans-serif; font-size:clamp(9px,1.9vw,12px); letter-spacing:.13em; text-transform:uppercase; color:rgba(251,246,241,.55); line-height:2; }
.foot__meta a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(252,217,195,.22); }
.foot__meta a:hover{ color:var(--peach); }

/* ═════════ movimento ═════════ */
a:focus-visible,summary:focus-visible{ outline:2px solid var(--marsala); outline-offset:3px; }
.rise{ opacity:0; transform:translateY(14px); animation:rise .85s var(--ease) forwards; }
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.26s}
.d4{animation-delay:.34s}.d5{animation-delay:.42s}.d6{animation-delay:.50s}
@keyframes rise{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .rise{ animation:none; opacity:1; transform:none } *{ transition-duration:.01ms !important } }

@media (max-width:359px){
  .hero{ min-height:440px; padding-left:17px; padding-right:17px; }
  .hero__in{ width:74%; }
  .hero__logo{ width:132px; }
  .hero__h1{ font-size:24px; } .hero__h1 i{ font-size:27px; }
  .hero__fig{ height:352px; right:-70px; }
    .pad{ padding-left:17px; padding-right:17px; }

  .btn{ gap:10px; padding:20px 18px; min-height:118px; }
  .btn__lb{ font-size:17px; } .btn__lb em{ font-size:16.5px; }
  .nums span{ font-size:8px; letter-spacing:.1em; }
  .band span{ font-size:7.5px; letter-spacing:.1em; }
}

/* ═════════ FORMULÁRIO DE QUALIFICAÇÃO (abre sobre a página) ═════════ */
.qz{
  position:fixed; inset:0; z-index:60; display:none;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#FDFAF7 0%,var(--cream) 40%,var(--cream-2) 100%);
}
.qz.on{ display:block; }
.qz__in{ max-width:600px; margin:0 auto; padding:clamp(20px,5vw,44px) clamp(20px,5vw,32px) 64px; }

.qz__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(18px,4vw,28px); }
.qz__logo{ width:clamp(120px,30vw,164px); height:auto; display:block; }
.qz__x{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--hair); background:rgba(255,255,255,.6);
  color:var(--ink-2); transition:border-color .2s var(--ease), color .2s var(--ease);
}
.qz__x:hover{ border-color:var(--marsala); color:var(--marsala); }
.qz__x svg{ width:14px; height:14px; }

.qz__bar{ height:2px; background:var(--hair); border-radius:2px; margin-bottom:clamp(22px,5vw,34px); overflow:hidden; }
.qz__fill{ height:100%; width:25%; background:linear-gradient(90deg,var(--marsala),#7A2B45); transition:width .45s var(--ease); }

.qz__step{ display:none; animation:qzin .45s var(--ease); }
.qz__step.on{ display:block; }
@keyframes qzin{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.qz__label{ font-family:"Roboto",sans-serif; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(62,21,38,.42); margin:0 0 10px; }
.qz__q{ font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(21px,4.6vw,27px); line-height:1.32; margin:0; color:var(--ink); }
.qz__sub{ margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.qz__note{
  margin:14px 0 0; padding:13px 15px; border-radius:12px;
  background:linear-gradient(140deg,rgba(252,217,195,.5),rgba(252,217,195,.18));
  border:1px solid var(--hair); font-size:12.8px; line-height:1.6; color:var(--ink-2);
}
.qz__note strong{ font-weight:500; color:var(--marsala); }

.qz__opts{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.qz__opt{
  display:flex; align-items:flex-start; gap:13px; padding:15px 16px;
  border:1px solid var(--hair); border-radius:13px; background:rgba(255,255,255,.55);
  cursor:pointer; transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.qz__opt:hover{ border-color:rgba(142,50,79,.34); background:#fff; transform:translateY(-1px); }
.qz__opt.sel{ border-color:var(--marsala); background:#FAF0EA; }
.qz__dot{ width:19px; height:19px; border-radius:50%; flex:none; margin-top:2px; border:1.5px solid rgba(142,50,79,.34); display:grid; place-items:center; transition:border-color .18s, background .18s; }
.qz__opt.sel .qz__dot{ border-color:var(--marsala); background:var(--marsala); }
.qz__opt.sel .qz__dot::after{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.qz__t{ display:block; font-size:15px; line-height:1.4; color:var(--ink); }
.qz__s{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.45; }

.qz__field{
  width:100%; margin-top:22px; padding:16px 18px;
  border:1px solid var(--hair); border-radius:13px; background:rgba(255,255,255,.7);
  font-family:"Prata",Georgia,serif; font-size:19px; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.qz__field::placeholder{ font-family:"Inter",sans-serif; font-size:15px; font-weight:300; color:rgba(62,21,38,.42); }
.qz__field:focus{ outline:none; border-color:var(--marsala); background:#fff; }

.qz__nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px; }
.qz__back{ font-family:"Inter",sans-serif; font-size:13.5px; color:var(--ink-2); background:none; border:none; cursor:pointer; padding:10px 0; }
.qz__back:hover{ color:var(--marsala); }
.qz__next{
  padding:13px 26px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(115deg,var(--marsala) 0%,#7A2B45 100%); color:var(--cream);
  font-family:"Roboto",sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 10px 22px -12px rgba(78,24,45,.9); transition:transform .28s var(--ease), opacity .2s;
}
.qz__next:disabled{ opacity:.32; cursor:not-allowed; box-shadow:none; }
.qz__next:not(:disabled):hover{ transform:translateY(-2px); }

.qz__card{
  text-align:center; padding:clamp(26px,6vw,40px) clamp(20px,5vw,32px);
  border:1px solid var(--hair); border-radius:20px;
  background:linear-gradient(150deg,rgba(252,217,195,.42),rgba(251,246,241,.6));
}
.qz__sun{ width:40px; height:auto; display:block; margin:0 auto 16px; opacity:.9; }
.qz__ct{ font-family:"Prata",Georgia,serif; font-weight:400; font-size:clamp(21px,4.6vw,26px); line-height:1.3; margin:0 0 12px; }
.qz__cb{ font-size:14px; line-height:1.68; color:var(--ink-2); margin:0; }
.qz__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  padding:15px 28px; border-radius:999px; text-decoration:none;
  background:linear-gradient(115deg,var(--marsala) 0%,#7A2B45 100%); color:var(--cream);
  font-family:"Roboto",sans-serif; font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  box-shadow:0 12px 26px -12px rgba(78,24,45,.95); transition:transform .28s var(--ease);
}
.qz__cta:hover{ transform:translateY(-2px); }
.qz__cta svg{ width:15px; height:15px; }
.qz__timer{ margin:14px 0 0; font-family:"Roboto",sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(62,21,38,.42); }
.qz__foot{ margin-top:32px; text-align:center; font-family:"Roboto",sans-serif; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(62,21,38,.42); line-height:2; }
body.qz-open{ overflow:hidden; }