/* =====================================================================
   CLÍNICA WOITAS — Protocolo de Emagrecimento
   Direção: EDITORIAL ATELIER (revista de luxo médico)
   Cores: #2B3830 verde · #C19A61 dourado · #B78B4A hover · #EBEAE8 claro · #333 texto
   Assinatura: os quilos como material editorial + protocolo como sequência 01–06
   ===================================================================== */

:root{
  --marca:#2B3830;
  --dourado:#C19A61;
  --dourado-hover:#B78B4A;
  --dourado-escuro:#7C5E30;          /* dourado p/ TEXTO pequeno sobre fundo claro (WCAG AA) */
  --claro:#EBEAE8;
  --texto:#333333;
  --hair:rgba(43,56,48,.16);      /* fio de ouro/tinta em fundo claro */
  --hair-dark:rgba(255,255,255,.16);
  --measure:62ch;
  --container:1200px;
  --gutter:clamp(1.25rem,5vw,3rem);
}

*{ box-sizing:border-box; }
/* reset mínimo (substitui o preflight do Tailwind, que foi removido) */
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,address,dl{ margin:0; }
ul,ol{ padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:#fff;
  color:var(--texto);
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
::selection{ background:var(--dourado); color:#fff; }

.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;
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

.section{ padding-block:clamp(4rem,9vw,7.5rem); }
.section--light{ background:#fff; }
.section--cream{ background:var(--claro); }
.section--dark{ background:var(--marca); color:#fff; }

/* =====================================================================
   TIPOGRAFIA EDITORIAL
   ===================================================================== */
.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:.72rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--dourado-escuro);       /* sobre fundo claro — contraste AA */
  margin:0 0 1.4rem;
}
.eyebrow::before{ content:""; width:44px; height:1px; background:currentColor; flex:0 0 auto; opacity:.8; }
.eyebrow--onDark{ color:var(--dourado); }   /* sobre verde escuro — dourado vivo */
.eyebrow--center{ justify-content:center; }

.section__head{ max-width:var(--measure); margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__head--center{ max-width:none; text-align:center; }
.section__head--center .eyebrow{ display:none; }

.section__title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.01em;
  font-size:clamp(2rem,5.4vw,3.6rem);
  color:var(--marca);
  margin:0;
}
.section__title em{ font-style:italic; color:var(--dourado); }
/* dourado grande sobre fundo claro: usa o tom mais fechado p/ passar 3:1 (AA texto grande) */
.section--light .section__title em,
.section--cream .section__title em{ color:var(--dourado-hover); }
.section__title--gold{ color:var(--dourado); }
.section--dark .section__title{ color:#fff; }
.section--dark .section__title em{ color:var(--dourado); }

.section__lead{
  margin:1.4rem 0 0;
  max-width:var(--measure);
  font-size:1.05rem; line-height:1.75;
  color:rgba(51,51,51,.82);
}
.section--dark .section__lead{ color:rgba(255,255,255,.78); }
.section__lead--center{ margin-inline:auto; }

.section__head--center .section__title{ margin-top:0; }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  padding:1rem 2rem; border-radius:4px; border:2px solid transparent;
  transition:transform .2s ease, box-shadow .28s ease, background-color .2s ease;
}
.btn--gold{
  background:var(--dourado); color:var(--marca);
  box-shadow:0 10px 26px -12px rgba(193,154,97,.85);
}
.btn--gold:hover,.btn--gold:focus-visible{
  background:var(--dourado-hover); transform:translateY(-3px);
  box-shadow:0 18px 34px -12px rgba(193,154,97,.95);
}
.btn--gold:active{ transform:translateY(-1px); }
.btn--lg{ padding:1.15rem 2.4rem; font-size:.92rem; }
.btn--sm{ padding:.6rem 1.15rem; font-size:.72rem; }
.btn--arrow::after{
  content:"\2192"; font-size:1.05em; line-height:1;
  transition:transform .22s ease;
}
.btn--arrow:hover::after{ transform:translateX(5px); }

.section__cta{ margin-top:clamp(2.5rem,5vw,3.5rem); }

/* Foco visível */
a:focus-visible,button:focus-visible{ outline:3px solid var(--dourado); outline-offset:3px; }
.section--dark a:focus-visible,.hero a:focus-visible{ outline-color:#fff; }

/* =====================================================================
   BARRA STICKY DE CONVERSÃO
   ===================================================================== */
.site-bar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--hair);
  transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.site-bar.is-visible{ transform:none; }
.site-bar__inner{
  max-width:var(--container); margin-inline:auto;
  padding:.7rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-bar__brand{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:1.1rem; color:var(--marca); letter-spacing:.01em;
}

/* =====================================================================
   SEÇÃO 1 — HERO (editorial, assimétrico, texto à esquerda)
   ===================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  color:#fff;
  padding:clamp(1.5rem,4vw,2.5rem) 0 0;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  background:url('https://woitasclinica.com.br/wp-content/uploads/2025/10/BG-1.webp') center/cover no-repeat;
  transform:scale(1.06);
  will-change:transform;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(20,28,23,.82) 0%, rgba(20,28,23,.55) 45%, rgba(20,28,23,.25) 100%),
    linear-gradient(0deg, rgba(20,28,23,.72) 0%, rgba(20,28,23,0) 55%);
}

.hero__top{
  max-width:var(--container); width:100%; margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.hero__logo{ width:clamp(128px,15vw,168px); height:auto; }
.hero__meta{
  font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
@media (max-width:560px){ .hero__meta{ display:none; } }

.hero__content{
  align-self:center;
  max-width:var(--container); width:100%; margin-inline:auto;
  padding:clamp(2rem,6vw,3rem) var(--gutter);
}
.hero__title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600; line-height:1.16; letter-spacing:-.01em;
  font-size:clamp(2rem,4.6vw,3.4rem);
  max-width:20ch; margin:0;
  text-wrap:balance;
}
.hero__title strong{ font-weight:700; color:var(--dourado); }
.hero__sub{
  margin:1.6rem 0 0; max-width:44ch;
  font-size:clamp(1.02rem,2vw,1.25rem); line-height:1.6;
  color:rgba(255,255,255,.9);
}
.hero__sub em{ font-style:italic; color:#fff; }
.hero .btn{ margin-top:2.2rem; }

/* faixa de prova social */
.hero__proof{
  border-top:1px solid var(--hair-dark);
  background:linear-gradient(0deg, rgba(20,28,23,.35), rgba(20,28,23,0));
}
.hero__proof-inner{
  max-width:var(--container); margin-inline:auto;
  padding:clamp(1.2rem,3vw,1.8rem) var(--gutter);
  display:flex; align-items:center; gap:clamp(1.2rem,4vw,2.6rem);
  flex-wrap:wrap;
}
.stat{ display:flex; align-items:baseline; gap:.7rem; margin:0; }
.stat__num{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; font-size:clamp(2.2rem,5vw,3rem); line-height:1;
  color:var(--dourado);
}
.stat__num::before{ content:"+"; }
.stat__num--sr::before{ content:""; }
.stat__label{
  font-size:.8rem; font-weight:600; letter-spacing:.04em; line-height:1.3;
  text-transform:uppercase; color:rgba(255,255,255,.82);
}
.hero__proof-rule{ width:1px; height:44px; background:var(--hair-dark); }
@media (max-width:560px){ .hero__proof-rule{ display:none; } }
.hero__doctor{
  margin:0; font-size:.9rem; font-weight:600; line-height:1.4;
  color:rgba(255,255,255,.9);
}
.hero__doctor span{ color:rgba(255,255,255,.6); font-weight:500; letter-spacing:.06em; font-size:.78rem; }

/* =====================================================================
   SEÇÃO 2 — PROTOCOLO (sequência clínica numerada 01–06)
   ===================================================================== */
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.step{
  display:grid;
  grid-template-columns:minmax(64px,110px) 1fr;
  gap:1rem 2rem;
  padding:clamp(1.6rem,3.5vw,2.4rem) 0;
  border-bottom:1px solid var(--hair);
  align-items:start;
}
.step__num{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:500; font-size:clamp(2.2rem,5vw,3.4rem); line-height:.9;
  color:var(--dourado);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.step:hover .step__num{ transform:translateX(6px); }
.step__title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600; font-size:clamp(1.2rem,2.4vw,1.55rem); line-height:1.2;
  color:var(--marca); margin:.35rem 0 .6rem;
}
.step__text{ margin:0; max-width:60ch; color:rgba(51,51,51,.82); font-size:1rem; }

/* =====================================================================
   SEÇÃO 3 — QUALIFICAÇÃO (checklist editorial)
   ===================================================================== */
.criterios{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0; grid-template-columns:1fr;
  border-top:1px solid var(--hair);
}
@media (min-width:768px){ .criterios{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4rem); } }
.criterio{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--hair);
  font-weight:600; font-size:1.05rem; color:var(--marca); line-height:1.35;
}
.criterio__mark{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--dourado); color:var(--dourado);
  transition:background-color .25s ease, color .25s ease;
}
.criterio__mark svg{ width:18px; height:18px; }
.criterio:hover .criterio__mark{ background:var(--dourado); color:#fff; }

/* =====================================================================
   SEÇÃO 4 — OBJEÇÕES (Q&A editorial)
   ===================================================================== */
.qa{ border-top:1px solid var(--hair); }
.qa__item{
  padding:clamp(1.6rem,3.5vw,2.4rem) 0;
  border-bottom:1px solid var(--hair);
  display:grid; gap:.6rem;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .qa__item{ grid-template-columns:minmax(220px,32%) 1fr; gap:2.5rem; align-items:start; }
}
.qa__q{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600; font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem); line-height:1.15;
  color:var(--marca); margin:0;
}
.qa__a{ margin:0; max-width:56ch; color:rgba(51,51,51,.85); font-size:1.05rem; }

/* =====================================================================
   SEÇÃO 5 — DEPOIMENTOS (vídeos 9:16, seção escura)
   ===================================================================== */
.depoimentos-swiper{ padding-bottom:4rem; }
.depoimentos-swiper .swiper-slide{ height:auto; }
/* padding-top = razão 16/9 (177.78%) — robusto dentro do flex do Swiper,
   evita o colapso de altura que o aspect-ratio sofre no carrossel */
.video-card{
  margin:0; position:relative;
  width:100%; padding-top:177.78%;
  border-radius:10px; overflow:hidden;
  background:#111; border:1px solid var(--hair-dark);
}
.video-card__media{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border:0;
}
/* Overlay de play sobre o poster (só afeta o clique via .video-card; some ao tocar) */
.video-card__play{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:0; padding:0;
  background:linear-gradient(180deg, rgba(20,28,23,0) 40%, rgba(20,28,23,.35) 100%);
  transition:opacity .3s ease;
}
.video-card__play::before{
  content:""; width:66px; height:66px; border-radius:50%;
  background:rgba(43,56,48,.55); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .25s ease, background-color .25s ease;
}
.video-card__play::after{
  content:""; position:absolute;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff;
  transform:translateX(3px);
}
.video-card__play:hover::before{ transform:scale(1.08); background:var(--dourado); }
.video-card.is-playing .video-card__play{ opacity:0; pointer-events:none; }
.video-card__result{
  position:absolute; left:1rem; top:1rem; z-index:2;
  pointer-events:none;                 /* nunca bloqueia os controles do vídeo */
  background:var(--dourado); color:var(--marca);
  font-family:'Montserrat',Arial,sans-serif; font-weight:600;
  font-size:.86rem; letter-spacing:.04em;
  padding:.5rem .9rem; border-radius:4px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);
}
.video-card__result span{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.15rem;
}

/* =====================================================================
   SEÇÃO 6 — AUTORIDADE (spread de revista)
   ===================================================================== */
.autoridade{ display:grid; gap:clamp(2.5rem,6vw,5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .autoridade{ grid-template-columns:.9fr 1.1fr; } }
.autoridade__figure{ position:relative; }
.autoridade__img{
  width:100%; object-fit:cover; border-radius:6px;
  position:relative; z-index:1;
  box-shadow:0 30px 60px -30px rgba(43,56,48,.55);
}
.autoridade__frame{
  position:absolute; inset:0; z-index:0;
  transform:translate(16px,16px);
  border:1px solid var(--dourado); border-radius:6px;
}
.autoridade__stat{
  font-family:'Montserrat',Arial,sans-serif; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; font-size:.85rem;
  color:rgba(51,51,51,.6); margin:0 0 .4rem;
}
.autoridade__stat span{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:1.6rem; color:var(--dourado-hover); letter-spacing:0; text-transform:none;
  margin-right:.4rem;
}
.autoridade__name{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.05; color:var(--marca); margin:0;
}
.autoridade__crm{
  margin:.4rem 0 0; font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dourado-escuro);
}
.autoridade__bio{ margin-top:1.6rem; display:grid; gap:1rem; max-width:56ch; }
.autoridade__bio p{ margin:0; color:rgba(51,51,51,.85); }
.autoridade__lead{
  font-family:'Playfair Display',Georgia,serif; font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.5rem) !important; line-height:1.4;
  color:var(--marca) !important;
}
.autoridade__lead em{ color:var(--dourado); }
.autoridade .btn{ margin-top:2rem; }

/* =====================================================================
   SEÇÃO 7 — GALERIA
   ===================================================================== */
.galeria__selo{ width:clamp(84px,10vw,104px); height:auto; margin:0 auto 1.5rem; }
.section__head--center .section__title{ font-size:clamp(2.4rem,6vw,4rem); }
.galeria__local{
  margin:1.4rem 0 .2rem; font-weight:700; color:var(--marca); font-size:1.05rem;
}
.galeria__endereco{
  font-style:normal; color:rgba(51,51,51,.7); font-size:.95rem; max-width:52ch; margin-inline:auto;
}
.galeria-swiper{ padding-bottom:4rem; margin-top:clamp(2.5rem,5vw,3.5rem); }
.galeria__img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }

/* =====================================================================
   SWIPER (setas + paginação)
   ===================================================================== */
.swiper-nav{ display:flex; gap:.75rem; justify-content:center; margin-top:.5rem; }
.swiper-button-prev,.swiper-button-next{
  position:static; margin:0; width:48px; height:48px; border-radius:50%;
  background:transparent; border:1px solid var(--dourado); color:var(--dourado);
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.swiper-button-prev:hover,.swiper-button-next:hover{ background:var(--dourado); color:var(--marca); transform:translateY(-2px); }
.swiper-button-prev::after,.swiper-button-next::after{ font-size:1rem; font-weight:700; }
.section--dark .swiper-button-prev,.section--dark .swiper-button-next{ border-color:var(--dourado); color:var(--dourado); }
.swiper-pagination{ position:static; margin-top:1.5rem; }
.swiper-pagination-bullet{ background:var(--marca); opacity:.3; transition:opacity .2s, transform .2s; }
.swiper-pagination-bullet-active{ background:var(--dourado); opacity:1; transform:scale(1.25); }
.section--dark .swiper-pagination-bullet{ background:#fff; opacity:.35; }
.section--dark .swiper-pagination-bullet-active{ background:var(--dourado); opacity:1; }

/* =====================================================================
   SEÇÃO 8 — CTA FINAL
   ===================================================================== */
.cta-final__inner{ max-width:640px; margin-inline:auto; text-align:center; }
.cta-final__title{
  font-family:'Playfair Display',Georgia,serif; font-weight:600;
  font-size:clamp(2.2rem,6vw,3.8rem); line-height:1.05; color:#fff; margin:.4rem 0 0;
}
.cta-final__title em{ font-style:italic; color:var(--dourado); }
.cta-final__text{ margin:1.4rem auto 0; max-width:48ch; color:rgba(255,255,255,.82); font-size:1.08rem; }
.cta-final .btn{ margin-top:2.2rem; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.footer{ background:var(--marca); color:rgba(255,255,255,.62); border-top:1px solid var(--hair-dark); }
.footer__inner{ padding-block:2.5rem; text-align:center; font-size:.88rem; }
.footer__inner p{ margin:.25rem 0; }
.footer__brand{ color:rgba(255,255,255,.9); font-weight:600; }
.footer__legal{ color:rgba(255,255,255,.4); }

/* =====================================================================
   SEÇÃO 9 — WHATSAPP FLUTUANTE
   ===================================================================== */
.whatsapp-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7);
  transition:transform .2s ease, box-shadow .25s ease;
  animation:waPulse 2.8s ease-in-out infinite;
}
.whatsapp-float svg{ width:32px; height:32px; }
.whatsapp-float:hover,.whatsapp-float:focus-visible{ transform:scale(1.08); }
@media (min-width:768px){ .whatsapp-float{ right:1.6rem; bottom:1.6rem; width:62px; height:62px; } }
@keyframes waPulse{
  0%,100%{ box-shadow:0 10px 26px -8px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow:0 10px 26px -8px rgba(37,211,102,.7), 0 0 0 12px rgba(37,211,102,0); }
}

/* =====================================================================
   REVEAL AO ROLAR
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =====================================================================
   AJUSTES MOBILE — botões e faixa de prova social
   ===================================================================== */
@media (max-width:560px){
  /* botões compactos, sem a lacuna da seta quando o texto quebra */
  .btn{
    font-size:.76rem; letter-spacing:.05em; gap:.5rem;
    padding:.95rem 1.35rem; justify-content:center; text-align:center;
  }
  .btn--lg{ padding:1rem 1.1rem; font-size:.72rem; letter-spacing:.03em; }
  .btn--arrow::after{ font-size:1em; }
  .hero .btn{ margin-top:1.8rem; }

  /* faixa de prova: número e rótulo alinhados ao centro, sem vão vertical */
  .hero__proof-inner{ gap:1rem; padding-block:1.3rem; }
  .stat{ align-items:center; gap:.65rem; }
  .stat__num{ font-size:2.5rem; }
  .stat__label{ font-size:.71rem; line-height:1.25; letter-spacing:.03em; }
  .hero__doctor{ font-size:.84rem; }
}

/* =====================================================================
   MOVIMENTO REDUZIDO
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__bg{ transform:none; }
}