/* ==========================================================================
   MODELO CLÍNICA DE ESTÉTICA — Design tokens
   Paleta: bege + dourado + preto. Minimalista.
   ========================================================================== */
:root{
  --ink:#1A1A1A;                /* preto suave — texto principal */
  --blue-900:#B8935A;           /* dourado — cor de destaque/CTA (nome da variável ficou de uma paleta antiga) */
  --blue-800:#96703E;           /* dourado mais escuro — hover */
  --black:#141414;              /* preto — navbar, footer */
  --white:#FFFFFF;
  --white-dim: rgba(255,255,255,0.72);
  --paper:#F7F1E7;              /* bege quente — fundo das seções claras */
  --grid-line: rgba(255,255,255,0.14);
}
 
*{ margin:0; padding:0; box-sizing:border-box; }
 
body{
  background:var(--black);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
}
 
/* política de privacidade — fixa no rodapé, aparece toda vez que a
   página carrega (não guarda escolha em lugar nenhum) */
.privacy-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:200;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:var(--ink);
  color:var(--white);
  padding:18px clamp(20px, 5vw, 60px);
  box-shadow:0 -8px 30px rgba(0,0,0,0.25);
}
.privacy-banner.hidden{ display:none; }
.privacy-banner__text{
  font-size:13.5px;
  line-height:1.5;
  color:rgba(255,255,255,0.85);
  max-width:760px;
}
.privacy-banner__text a{ color:var(--blue-900); text-decoration:underline; }
.privacy-banner__btn{
  flex-shrink:0;
  background:var(--blue-900);
  color:var(--ink);
  border:none;
  padding:10px 22px;
  border-radius:999px;
  font-family:inherit;
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
}
.privacy-banner__btn:hover{ opacity:0.9; }
 
button, input{ font-family:inherit; }
 
/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:rgba(20,20,20,0.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-top{
  height:3px;
  background:linear-gradient(90deg, var(--blue-900), var(--blue-800));
}
.nav-center{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:24px 40px;
}
.nav-center-left{ justify-self:start; }
.nav-center-right{ justify-self:end; }
.nav-center-left, .nav-center-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.menu-btn{
  width:26px; height:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.menu-btn span{
  display:block;
  height:2px;
  width:100%;
  background:var(--white);
  border-radius:2px;
}
.nav-logo{
  display:flex;
  align-items:center;
}
.nav-logo img{
  height:28px;
  width:auto;
  display:block;
}
.nav-filters{ display:none; }
@media (min-width: 881px){
  .nav-filters{
    display:flex;
    gap:28px;
  }
}
.nav-filters a{
  position:relative;
  color:var(--white-dim);
  text-decoration:none;
  font-size:14px;
  letter-spacing:0.01em;
  padding:9px 20px;
  border-radius:999px;
  border:1px solid transparent;
  transition:color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.nav-filters a:hover{ color:var(--white); border-color:rgba(184,147,90,0.5); }
.nav-filters a.active{
  color:var(--white);
  border-color:var(--blue-900);
  background:rgba(184,147,90,0.12);
}
 
.lang-link{
  color:var(--white-dim);
  text-decoration:none;
  font-size:14px;
}
.lang-link:hover{ color:var(--white); }
 
/* botões fixos da navbar — ficam visíveis em todas as seções/páginas,
   já que a navbar é fixa no topo o tempo todo */
.nav-btn{
  padding:9px 18px;
  font-size:13.5px;
  white-space:nowrap;
}
.nav-btn--ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,0.35);
}
.nav-btn--ghost:hover{ border-color:var(--white); background:rgba(255,255,255,0.06); }
.nav-btn--special{
  background:transparent;
  color:var(--blue-900);
  border-color:var(--blue-900);
}
.nav-btn--special:hover{ background:var(--blue-900); color:var(--ink); }
 
/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn{
  display:inline-block;
  text-decoration:none;
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  padding:15px 28px;
  border-radius:2px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn:hover{ transform:scale(1.04); }
.btn.primary{
  background:var(--blue-900);
  color:var(--ink);
  font-weight:600;
}
.btn.primary:hover{ background:var(--blue-800); color:var(--white); }
.btn.ghost{
  background:transparent;
  color:var(--white);
  border-color:rgba(255,255,255,0.4);
}
.btn.ghost:hover{ border-color:var(--white); }
.btn.hero-special-btn{
  background:var(--ink);
  color:var(--blue-900);
  border-color:var(--blue-900);
  font-weight:600;
}
.btn.hero-special-btn:hover{ background:var(--blue-800); color:var(--white); border-color:var(--blue-800); }
 
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
 
/* ==========================================================================
   MENU LATERAL (drawer)
   ========================================================================== */
.side-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.side-overlay.open{ opacity:1; pointer-events:auto; }
 
.side-menu{
  position:fixed;
  top:0; left:0; bottom:0;
  width:min(360px, 86vw);
  z-index:70;
  background:var(--black);
  color:var(--white);
  padding:28px 28px 32px;
  display:flex;
  flex-direction:column;
  transform:translateX(-100%);
  transition:transform 0.35s ease;
  overflow-y:auto;
}
.side-menu.open{ transform:translateX(0); }
 
.side-menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:40px;
}
.side-menu .logo{
  font-family:'Fraunces', serif;
  font-size:16px;
  color:var(--white);
}
.close-btn{
  background:none;
  border:none;
  color:var(--white);
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
 
.side-links{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.side-links li a{
  display:block;
  padding:14px 0;
  color:var(--white);
  text-decoration:none;
  font-size:16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.side-links li a:hover{ color:var(--blue-900); }
 
.side-menu-bottom{
  margin-top:auto;
  padding-top:24px;
  font-size:13px;
  color:rgba(255,255,255,0.55);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.side-menu-bottom .brass{ color:var(--blue-900); }
 
/* ==========================================================================
   HERO — única transição de scroll que sobrou no site (um fade/slide
   simples da hero pra seção de Serviços, sem pin nem GSAP scrub).
   ========================================================================== */
#heroServicesStage{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
}
.hero{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  background:#000;
  overflow:hidden;
}
.video-layer .hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
/* efeito de luz — gradiente radial dourado/claro atrás da
   profissional, tipo "spotlight", em vez de escurecer a foto */
.hero .video-layer::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 60% 55% at 78% 42%, rgba(184,147,90,0.14) 0%, rgba(184,147,90,0) 70%),
    linear-gradient(200deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.05) 45%, rgba(20,20,20,0.35) 100%);
  pointer-events:none;
}
 
/* bloco de texto "vidro" — painel fosco/translúcido, em vez do
   texto flutuando solto direto em cima da foto */
.hero .content{
  position:relative;
  z-index:2;
  margin:0 clamp(40px, 8vw, 120px);
  max-width:640px;
}
.hero .file-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:18px;
  text-shadow:0 0 12px rgba(184,147,90,0.65), 0 2px 8px rgba(0,0,0,0.45);
}
.hero .file-label .dash{ width:22px; height:1px; background:var(--blue-900); display:inline-block; }
 
.hero h1{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(2.8rem, 6vw, 4.6rem);
  line-height:1.06;
  color:var(--white);
  margin-bottom:20px;
  text-shadow:0 0 26px rgba(184,147,90,0.6), 0 4px 22px rgba(0,0,0,0.5);
}
.hero h1 em{ font-style:italic; color:var(--white); }
 
.hero .sub{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,0.92);
  max-width:46ch;
  margin-bottom:36px;
  text-shadow:0 0 16px rgba(184,147,90,0.45), 0 2px 14px rgba(0,0,0,0.5);
}
 
/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.page-services{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow-y:auto;
  background:var(--paper);
  padding:120px clamp(24px, 6vw, 100px);
}
.section-header{
  max-width:640px;
  margin:0 auto 56px;
  text-align:center;
}
.section-header .file-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--blue-800);
  margin-bottom:16px;
  justify-content:center;
}
.section-header .file-label .dash{ width:22px; height:1px; background:var(--blue-800); display:inline-block; }
.section-header h2{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(1.9rem, 3.6vw, 2.6rem);
  color:var(--ink);
  margin-bottom:14px;
}
.section-header p{
  font-size:15px;
  line-height:1.6;
  color:rgba(26,26,26,0.65);
}
 
.services-layout{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:stretch;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-content:start;
}
.services-media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  min-height:100%;
}
.services-media__slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1s ease;
}
.services-media__slide.active{ opacity:1; }
.service-card{
  background:#fff;
  border:1px solid rgba(184,147,90,0.2);
  border-radius:14px;
  padding:22px 20px;
  text-align:left;
}
.service-card__tag{
  display:inline-block;
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--blue-800);
  background:rgba(184,147,90,0.12);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:14px;
}
.service-card h3{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:1.2rem;
  color:var(--ink);
  margin-bottom:8px;
}
.service-card p{
  font-size:14px;
  line-height:1.55;
  color:rgba(26,26,26,0.65);
  margin-bottom:16px;
}
.service-card__price{
  font-family:'Fraunces', serif;
  font-size:1.05rem;
  color:var(--blue-800);
}
.services-note{
  max-width:640px;
  margin:40px auto 0;
  text-align:center;
  font-size:13px;
  color:rgba(26,26,26,0.5);
}
 
/* ==========================================================================
   PROVAS SOCIAIS — um card QUADRADO por vez, do lado esquerdo da
   página. Fica parado um tempo, sai deslizando pra esquerda, o
   próximo entra deslizando da direita — looping infinito. Ver
   initTestimonialsCarousel no script.js.
   ========================================================================== */
.page-testimonials{
  background:#fff;
  padding:100px clamp(24px, 6vw, 100px);
}
 
.testimonials-layout{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:stretch;
}
.testimonials-carousel-wrap{
  width:min(900px, 100%);
  margin-left:0;
}
.testimonials-carousel{
  position:relative;
  width:100%;
  height:clamp(300px, 34vw, 400px);
  overflow:hidden;
  border-radius:18px;
}
.testimonials-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:100%;
  background:var(--paper);
  cursor:pointer;
}
.testimonials-media__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity 1s ease;
}
.testimonials-media__slide.active{ opacity:1; }
.testimonial-square{
  position:absolute;
  inset:0;
  background:var(--paper);
  padding:44px clamp(34px, 5vw, 64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
  transform:translateX(100%);
  opacity:0;
  transition:transform 0.6s ease, opacity 0.6s ease;
}
.testimonial-square.active{
  transform:translateX(0);
  opacity:1;
}
.testimonial-square.exit{
  transform:translateX(-100%);
  opacity:0;
}
.testimonial-square__quote{
  font-family:'Fraunces', serif;
  font-size:clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight:400;
  line-height:1.5;
  color:var(--ink);
  max-width:58ch;
  margin-bottom:20px;
}
.testimonial-square__author{
  display:flex;
  align-items:center;
  gap:12px;
}
.testimonial-square__avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.testimonial-square__avatar--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dbdbdb;
  color:#8e8e8e;
}
.testimonial-square__avatar--empty svg{ width:60%; height:60%; }
.testimonial-square__name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.testimonial-square__handle{ font-weight:400; color:rgba(26,26,26,0.45); margin-left:4px; }
 
.testimonials-carousel-dots{
  display:flex;
  gap:8px;
  margin-top:20px;
}
.testimonials-carousel-dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(26,26,26,0.18);
  cursor:pointer;
  transition:background 0.2s ease;
}
.testimonials-carousel-dots span.active{ background:var(--blue-900); }
 
/* ==========================================================================
   ENDEREÇO — mapa de um lado, carrossel de fotos do outro
   ========================================================================== */
.page-address{
  background:var(--paper);
  padding:100px clamp(24px, 6vw, 100px);
}
.address-layout{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:stretch;
}
.address-map iframe{
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  border-radius:14px;
}
.address-info{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14.5px;
  color:rgba(26,26,26,0.75);
}
.address-info strong{ color:var(--ink); }
 
.address-carousel-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  min-height:420px;
}
.address-carousel{
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.address-carousel::-webkit-scrollbar{ display:none; }
.address-carousel__slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  height:100%;
  background-color:#D9D9D9;
  background-size:cover;
  background-position:center;
}
.address-carousel-dots{
  position:absolute;
  bottom:16px;
  left:0; right:0;
  display:flex;
  justify-content:center;
  gap:8px;
}
.address-carousel-dots span{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.55);
  cursor:pointer;
}
.address-carousel-dots span.active{ background:var(--blue-900); }
 
/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.page-cta-final{
  background:var(--black);
  padding:110px clamp(24px, 6vw, 100px);
  text-align:center;
}
.page-cta-final .file-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--blue-900);
  margin-bottom:18px;
}
.page-cta-final .file-label .dash{ width:22px; height:1px; background:var(--blue-900); display:inline-block; }
.page-cta-final h2{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(2rem, 4.2vw, 3rem);
  color:var(--white);
  max-width:720px;
  margin:0 auto 20px;
  line-height:1.2;
}
.page-cta-final p{
  font-size:15.5px;
  color:rgba(255,255,255,0.7);
  max-width:520px;
  margin:0 auto 36px;
}
.page-cta-final .cta-row{ justify-content:center; }
 
/* chamada pro quiz interativo, dentro da seção de CTA final —
   botão com brilho pulsante pra chamar atenção sem competir com o
   CTA principal de WhatsApp acima */
.quiz-teaser{
  margin:56px auto 0;
  padding-top:44px;
  max-width:560px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.quiz-teaser__text{
  font-size:15.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.75);
  margin-bottom:26px;
}
.quiz-glow-btn{
  background:var(--blue-900);
  color:var(--ink);
  font-weight:600;
  border:none;
  animation:quizGlowPulse 2.6s ease-in-out infinite;
}
.quiz-glow-btn:hover{ background:var(--blue-800); color:var(--white); }
 
@keyframes quizGlowPulse{
  0%, 100%{
    box-shadow:0 0 0 0 rgba(184,147,90,0.5), 0 0 16px 2px rgba(184,147,90,0.3);
  }
  50%{
    box-shadow:0 0 0 8px rgba(184,147,90,0), 0 0 32px 6px rgba(184,147,90,0.55);
  }
}
@media (prefers-reduced-motion: reduce){
  .quiz-glow-btn{
    animation:none;
    box-shadow:0 0 20px 4px rgba(184,147,90,0.4);
  }
}
 
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding:64px clamp(24px, 6vw, 100px) 0;
}
.site-footer__top{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:32px;
  padding-bottom:48px;
}
.site-footer__brand .logo{
  font-family:'Fraunces', serif;
  font-size:18px;
  margin-bottom:14px;
}
.site-footer__brand p{
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,0.6);
  max-width:34ch;
  margin-bottom:20px;
}
.site-footer__social{ display:flex; gap:12px; }
.site-footer__social a{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
}
.site-footer__social a svg{ width:16px; height:16px; }
.site-footer__social a:hover{ border-color:var(--blue-900); color:var(--blue-900); }
 
.site-footer__title{
  display:block;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  margin-bottom:16px;
}
.site-footer__col a, .site-footer__col p{
  display:block;
  font-size:14px;
  color:rgba(255,255,255,0.75);
  text-decoration:none;
  margin-bottom:10px;
}
.site-footer__col a:hover{ color:var(--blue-900); }
 
.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding:24px 0;
}
.site-footer__legal p{
  font-size:12px;
  color:rgba(255,255,255,0.4);
  margin-bottom:4px;
}
 
/* ==========================================================================
   PÁGINA DE POLÍTICA DE PRIVACIDADE
   ========================================================================== */
.legal-page{
  background:var(--paper);
  padding:160px clamp(24px, 6vw, 100px) 100px;
  min-height:100vh;
}
.legal-page__header{
  max-width:760px;
  margin:0 auto 40px;
}
.legal-page__back-row{
  max-width:760px;
  margin:0 auto 28px;
}
.legal-page__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(26,26,26,0.6);
  text-decoration:none;
  font-size:14px;
}
.legal-page__back svg{ width:16px; height:16px; }
.legal-page__back:hover{ color:var(--blue-800); }
.legal-page__header .file-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--blue-800);
  margin-bottom:16px;
}
.legal-page__header .file-label .dash{ width:22px; height:1px; background:var(--blue-800); display:inline-block; }
.legal-page__header h1{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(2rem, 4vw, 2.8rem);
  color:var(--ink);
  margin-bottom:10px;
}
.legal-page__updated{
  font-size:13px;
  color:rgba(26,26,26,0.5);
}
.legal-page__body{
  max-width:760px;
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(184,147,90,0.2);
  border-radius:18px;
  padding:48px clamp(24px, 5vw, 64px);
}
.legal-page__body h2{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:1.35rem;
  color:var(--ink);
  margin:36px 0 14px;
}
.legal-page__body h2:first-child{ margin-top:0; }
.legal-page__body p,
.legal-page__body li{
  font-size:15px;
  line-height:1.7;
  color:rgba(26,26,26,0.72);
  margin-bottom:14px;
}
.legal-page__body ul{
  padding-left:20px;
  margin-bottom:14px;
}
.legal-page__body strong{ color:var(--ink); }
.legal-page__note{
  font-size:13px;
  color:rgba(26,26,26,0.5);
  border-top:1px solid rgba(184,147,90,0.2);
  padding-top:20px;
  margin-top:24px;
}
.site-footer__legal-link{
  display:inline;
  color:rgba(255,255,255,0.55) !important;
  text-decoration:underline !important;
  margin-bottom:0 !important;
  font-size:inherit !important;
}
.site-footer__legal-link:hover{ color:var(--blue-900) !important; }
 
@media (max-width: 880px){
  .legal-page{ padding:120px 20px 64px; }
  .legal-page__body{ padding:32px 24px; }
}
 
/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.whatsapp-float{
  display:flex;
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:90;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--blue-900);
  color:var(--ink);
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  transition:transform 0.2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float svg{ width:28px; height:28px; }
 
/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 880px){
  .nav-center{ padding:14px 20px; }
  .hero{ align-items:flex-start; }
  .hero .cta-row{ display:none; }
  .hero .content{ padding:110px 24px 64px; }
 
  /* Botões da navbar assumem o destaque preenchido que os botões
     da hero tinham antes de saírem de lá */
  .nav-btn--ghost{
    background:var(--blue-900);
    color:var(--ink);
    border-color:var(--blue-900);
    font-weight:600;
  }
  .nav-btn--ghost:hover{ background:var(--blue-800); color:var(--white); border-color:var(--blue-800); }
  .nav-btn--special{
    background:var(--ink);
    color:var(--blue-900);
    border-color:var(--blue-900);
    font-weight:600;
  }
  .nav-btn--special:hover{ background:var(--blue-800); color:var(--white); border-color:var(--blue-800); }
 
  /* Hero -> Serviços — sem pin no mobile (ver script.js), a seção
     de Serviços simplesmente segue o fluxo normal da página */
  #heroServicesStage{ height:auto; min-height:0; overflow:visible; }
  .hero{ height:100vh; min-height:560px; }
  .page-services{ position:relative; inset:auto; z-index:auto; overflow-y:visible; }
 
  /* Serviços — cards empilhados, painel de fotos abaixo deles */
  .page-services{ padding:64px 20px 56px; }
  .section-header{ margin-bottom:36px; }
  .services-grid{ grid-template-columns:1fr; }
  .services-layout{ grid-template-columns:1fr; gap:24px; }
  .services-media{ min-height:240px; }
 
  /* Depoimentos — card ocupa a largura toda, sem sobrar espaço vazio */
  .page-testimonials{ padding:56px 20px; }
  .testimonials-layout{ grid-template-columns:1fr; gap:24px; }
  .testimonials-carousel-wrap{ width:100%; }
  .testimonials-carousel{ height:clamp(240px, 62vw, 320px); }
  .testimonial-square{ padding:28px 24px; }
  .testimonials-media{ min-height:240px; }
 
  /* Endereço */
  .page-address{ padding:56px 20px; }
  .address-layout{ grid-template-columns:1fr; }
  .address-map iframe{ min-height:260px; }
  .address-carousel-wrap{ min-height:260px; }
 
  /* CTA final */
  .page-cta-final{ padding:64px 20px 56px; }
  .quiz-teaser{ margin-top:40px; padding-top:32px; }
 
  .site-footer__top{ grid-template-columns:1fr; gap:36px; }
}
 
@media (max-width: 560px){
  .lang-link{ display:none; }
  .nav-center-right{ gap:8px; }
  .nav-btn{ padding:8px 12px; font-size:12px; }
}