/* Base tokens */
:root{
  --black:#1B1C1F;
  --gray-600:#989897;
  --gray-300:#CDCDCD;
  --gold-700:#B9903C;
  --gold-500:#E6BF65;
  --white:#FFFFFF;
  --yellow-soft:#FBEC93;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --shadow: 0 8px 24px rgba(27,28,31,.08);
}

*, *::before, *::after{ box-sizing:border-box }

/* Typography */
@font-face{
  font-family:'Boowie';
  src: url('/assets/fonts/Boowie.woff2') format('woff2'),
       url('/assets/fonts/Boowie.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html{scroll-behavior:smooth}
body{
  margin:0; padding:0;
  background:var(--white);
  color:var(--black);
  font-family:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
.container{max-width:1120px; width:92%; margin-inline:auto;}
.narrow{max-width:840px; width:92%;}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:saturate(140%) blur(6px); background:#ffffff; border-bottom:1px solid rgba(0,0,0,.06); z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-logo{height:80px; width:auto; display:block}
.brand-name{font-family:'Boowie','Mulish',sans-serif; font-size:1.1rem; letter-spacing:.4px}

.nav .menu{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
.nav a{color:var(--black); text-decoration:none; padding:8px 12px; border-radius:10px}
.nav a:hover{background:#E6BF65}
.nav .btn{margin-left:6px}
.nav-toggle{display:none; background:transparent; border:0; font-size:22px}
body.menu-open{overflow:hidden}

/* Hero */
.hero{padding:72px 0 54px; position:relative; background-color:rgba(27,28,31,.7); background-image:linear-gradient(to bottom, rgba(27,28,31,.90) 0%, rgba(185,144,60,.30) 100%), url('../../imagem/hero-clínica-performance.webp'); background-size:cover; background-position:center; color:#FFFFFF}
.hero-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:center; justify-items:center; min-height:64vh; text-align:center}
.hero-title{font-family:'Boowie','Mulish',sans-serif; font-weight:700; font-size:clamp(36px, 5vw, 56px); margin:0 0 8px; letter-spacing:.3px; color:#FFFFFF; text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero-subtitle{color:#FFFFFF; font-weight:600; margin:0 0 12px; opacity:.98; text-shadow:0 2px 10px rgba(0,0,0,.35); font-size:24px}
.hero-text{color:#FFFFFF; margin:0 0 20px; opacity:.96; text-shadow:0 2px 10px rgba(0,0,0,.35); font-size:20px}
.hero-media{display:none}

/* Buttons */
.btn{display:inline-block; border:1px solid transparent; padding:10px 16px; border-radius:12px; font-weight:600; text-decoration:none; cursor:pointer; transition:.2s ease}
.btn-primary{background:linear-gradient(135deg, var(--gold-500), #e2b252); color:#1e1e1e}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(185,144,60,.28)}
.btn-lg{padding:14px 22px; border-radius:14px; margin-top:20px}
.btn-outline{background:#fff; border-color:var(--gray-300); color:#303136}
.btn-outline:hover{border-color:var(--gold-700); color:#1f1f1f}

/* Sections */
.section{padding:40px 0}
.section-alt{background:linear-gradient(180deg, #fff, #fff), radial-gradient(1400px 400px at 10% -20%, rgba(230,191,101,.14), transparent 60%), radial-gradient(1200px 420px at 90% -10%, rgba(185,144,60,.10), transparent 60%); background-blend-mode:normal, screen, screen}
.section-title{font-family:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:clamp(30px, 4vw, 36px); margin:0 0 24px}
#agendar{ background:#f4f4f4 }
.section#especialistas .section-title, #especialistas .section-title,
#sobre .section-title,
#agendar .section-title,
#contato .section-title,
#resultados .section-title,
#faq .section-title{font-family:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.section#especialistas .section-title, #especialistas .section-title{ text-align:center }
.section-lead{color:#4a4b51; margin-top:-8px}
#contato .section-title{ text-align:center }
#resultados .section-title{ font-family:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; text-align:center }
#resultados .section-lead{ text-align:center }
#faq .section-title{ font-family:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; text-align:center }
.about-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:24px; align-items:center}
.about-media img{border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--gray-300)}

/* Sobre — center layout */
#sobre .about-grid{ grid-template-columns:1fr; justify-items:center }
#sobre .section-title{ text-align:center }
#sobre .about-copy{ max-width:840px; margin-inline:auto }
#sobre .about-copy img{ display:block; margin:8px auto 16px; border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--gray-300) }

/* Text alignment adjustments */
#sobre .about-copy p{ text-align:justify; text-justify:inter-word; font-size: 18px}
#especialistas .card-text{ text-align:justify; text-justify:inter-word }

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.card-media{aspect-ratio:4/3; overflow:hidden;}
.card-media img{height:100%; width:100%; object-fit:cover}
.ring{position:relative}
.ring::after{content:none}
.card-body{padding:16px 16px 18px}
.card-title{font-weight:800; font-size:1.1rem; margin:0 0 6px}
.card-role{color:#5b5c62; font-weight:600; margin:0 0 8px}
.card-text{color:#4a4b51; margin:0}

/* Slider (Testimonials) */
.slider{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:stretch; gap:12px; margin-top:8px}
.slider-track{overflow:hidden; position:relative}
.slider-track-inner{display:flex; transition:transform .35s ease; will-change:transform}
.slider-track .slide{box-sizing:border-box; min-width:33.3333%; flex:0 0 33.3333%}
.slider-btn{background:#fff; border:1px solid var(--gray-300); color:#1f1f1f; width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; align-self:center; box-shadow:var(--shadow)}
.slider-btn:hover{border-color:var(--gold-700)}
.slider-dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.slider-dots button{width:8px; height:8px; border-radius:50%; border:0; background:#d7d7d7; cursor:pointer}
.slider-dots button[aria-current="true"]{background:var(--gold-700)}
.testimonial-card{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; margin: 0 5px;}
.testimonial-card .card-body{padding:18px}
.testimonial-card .card-text{font-size:18px}
.testimonial-media{aspect-ratio:16/9; overflow:hidden}
.testimonial-media img{width:100%; height:100%; object-fit:cover; display:block}

/* Form */
.form{margin-top:10px}
.form-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
.form-field{display:flex; flex-direction:column; gap:8px}
.form-field-full{grid-column:1/-1}
label{font-weight:700}
input, select, textarea{border:1px solid var(--gray-300); border-radius:12px; padding:12px 12px; font:inherit; background:#fff}
input:focus, select:focus, textarea:focus{outline:2px solid rgba(230,191,101,.55); border-color:var(--gold-700)}
.form-disclaimer{color:#5b5c62; font-size:.95rem; margin-top:12px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:22px; align-items:start}
.address{font-style:normal; color:#3a3b3f}
.tel{color:#1f1f1f; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; gap:8px; margin-top:10px}
.tel .fa-whatsapp{color:#25D366}
.contact-actions{margin-top:25px}
.map-wrapper{border-radius:16px; overflow:hidden; border:1px solid var(--gray-300); box-shadow:var(--shadow)}
.map-wrapper iframe{width:100%; height:340px; border:0}

/* FAQ (Accordion) */
.faq-list{display:grid; gap:12px}
.faq-item{border:0; background:transparent}
.faq-item summary{list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{background:linear-gradient(135deg, #f8f8f8, #f0ece5); color:#1e1e1e; border:1px solid transparent; border-radius:14px; padding:12px 16px; font-weight:800; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; transition:.2s ease}
.faq-q::after{content:'▸'; opacity:.85; transform:translateY(1px); transition:transform .2s ease}
.faq-item[open] .faq-q::after{transform:rotate(90deg)}
.faq-q:hover{transform:translateY(-1px); box-shadow:0 3px 10px rgba(185,144,60,.28)}
.faq-q:focus-visible{outline:2px solid rgba(230,191,101,.55); outline-offset:2px}
.faq-a{background:#fff; border:1px solid var(--gray-300); border-radius:12px; margin-top:8px; padding:14px 16px; box-shadow:var(--shadow); color:#3a3b3f}

@media (min-width: 901px){
  #faq .narrow{ width:50%; max-width:none }
}

/* Footer */
.site-footer{background:var(--black); color:#fff; padding:32px 0; margin-top:20px}
.footer-inner{display:grid; gap:10px; align-items:center; justify-items:center}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:#fff; text-decoration:none; opacity:.92}
.footer-nav a.social-link{ margin-left:8px; display:inline-flex; align-items:center }
.footer-nav a:hover{color:var(--gold-500)}
.social-link{color:var(--gold-500); text-decoration:none}
.social .icon, .footer-nav .icon{font-size:24px; line-height:1; display:inline-block}
.social-link:hover{color:var(--gold-700)}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .nav-toggle{display:inline-block}
  .nav .menu{display:none}
  .nav .menu.open{display:flex; position:fixed; right:0%; top:80px; width:100%; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:15px; flex-direction:column; gap:15px; box-shadow:var(--shadow); z-index:100}
  .cards{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  #agendar .section-title{ text-align:center }
  .slider-track .slide{min-width:50%; flex-basis:50%}
}
@media (max-width: 560px){
  .brand-logo{height:75px}
  .header-inner{padding:10px 0}
  .container, .narrow{ width:100%; padding-inline:28px }
  #agendar{ scroll-margin-top: 92px }
  .form-grid{ gap:22px }
  .btn.btn-lg{ margin-top:24px }
  #contato .contact-actions a[href="#agendar"]{ margin-top:10px }
  .testimonial-card{ margin:0 }
  .slider-track .slide{min-width:100%; flex-basis:100%}
}
@media (max-width: 400px){
  .brand-logo{height:56px}
}

/* Cookie Banner */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:1000; background:#0f172a; color:#fff; transform:translateY(100%); transition:transform .3s ease; box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner .inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.cookie-banner p{margin:0; font-size:14px; line-height:1.5; color:#e5e7eb}
.cookie-banner a{color:var(--gold-500)}
.cookie-banner .actions{flex:0 0 auto; display:flex; gap:8px}
.cookie-banner .actions .btn{white-space:nowrap}
@media (max-width: 700px){
  .cookie-banner .inner{flex-direction:column; align-items:flex-start; gap:10px}
  .cookie-banner .actions{width:100%; display:flex; gap:10px}
  .cookie-banner .actions .btn{width:100%}
}