/* ==========================================================================
   SORRISO CORPORATIVO® — IDEIA STUDIO
   Design System: cores, tipografia, componentes
   ========================================================================== */

:root{
  --navy:#253545;
  --navy-deep:#182330;
  --gold:#ecb04e;
  --gold-soft:#f5cd82;
  --gray:#f7f7f7;
  --white:#ffffff;
  --ink:#1c2833;
  --slate:#5c6d7a;
  --line:#e3e6e8;
  --line-dark:rgba(247,247,247,.12);
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --ease:cubic-bezier(.16,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:10px;
}
.eyebrow .diamond{width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);flex:none;}
.eyebrow.on-light{color:#a97a1f;}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;line-height:1.08;}
.section-title{font-size:40px;color:var(--navy);max-width:680px;}
.section-title em{font-style:italic;color:var(--gold);font-weight:400;}
.section-title.on-dark{color:var(--white);}
p.lede{font-size:17px;line-height:1.7;color:var(--slate);max-width:560px;}

.diamond-mark{width:12px;height:12px;border:1.5px solid var(--gold);transform:rotate(45deg);flex:none;}

/* ---------- HEADER ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(37,53,69,.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line-dark);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:34px;width:auto;}
.brand-name{font-family:var(--serif);color:var(--white);font-size:16px;letter-spacing:.02em;}
.brand-name b{color:var(--gold);font-weight:500;}
nav.main-nav{display:flex;align-items:center;gap:36px;}
nav.main-nav a{font-size:13px;color:var(--white);opacity:.72;letter-spacing:.02em;transition:opacity .2s;}
nav.main-nav a:hover{opacity:1;}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.01em;
  padding:13px 26px;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:all .3s var(--ease);
}
.btn-gold{background:var(--gold);color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-1px);}
.btn-outline-dark{border-color:rgba(247,247,247,.35);color:var(--white);}
.btn-outline-dark:hover{border-color:var(--gold);color:var(--gold);}

.nav-toggle{display:none;background:none;border:none;color:var(--white);font-size:22px;cursor:pointer;}
.mobile-nav{display:none;}

/* ---------- HERO ---------- */
.hero{
  background:var(--navy);
  position:relative;overflow:hidden;
  padding:190px 0 140px;
  min-height:92vh;display:flex;align-items:center;
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:saturate(.88) brightness(.9) contrast(1.02);
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(24,35,48,.28) 0%,
    rgba(24,35,48,.55) 32%,
    rgba(24,35,48,.82) 52%,
    var(--navy) 72%
  );
}
.hero::before{
  content:'';position:absolute;
  width:520px;height:520px;
  border:1px solid rgba(236,176,78,.10);
  right:-220px;top:-160px;
  transform:rotate(45deg);
  z-index:2;
}
.hero .wrap{position:relative;z-index:3;}
.hero-inner{max-width:600px;margin-left:auto;}
.hero h1{font-size:52px;color:var(--white);margin:26px 0 26px;}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero p.lede{color:#c3ccd3;font-size:18px;max-width:520px;margin-bottom:44px;}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- SECTION GENERIC ---------- */
section{padding:120px 0;}
.section-light{background:var(--white);}
.section-gray{background:var(--gray);}
.section-dark{background:var(--navy);}
.section-head{margin-bottom:64px;}

/* ---------- CENARIO (stats + treatment chips) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px;}
.stat-card{background:var(--white);padding:38px 30px;}
.stat-num{font-family:var(--serif);font-size:44px;color:var(--navy);}
.stat-num span{color:var(--gold);}
.stat-label{margin-top:10px;font-size:13.5px;color:var(--slate);line-height:1.5;}

.chip-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.chip{font-family:var(--mono);font-size:12.5px;color:var(--slate);border:1px solid var(--line);padding:9px 16px;letter-spacing:.02em;}

/* ---------- OPORTUNIDADE ---------- */
.opp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;}
.opp-visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.opp-diamond{position:absolute;border:1px solid var(--line);transform:rotate(45deg);}
.opp-diamond.d1{width:88%;height:88%;}
.opp-diamond.d2{width:64%;height:64%;border-color:var(--gold);}
.opp-diamond.d3{width:38%;height:38%;background:var(--navy);}
.opp-figure{position:relative;z-index:2;text-align:center;}
.opp-figure .n{font-family:var(--serif);font-size:52px;color:var(--white);}
.opp-figure .l{font-family:var(--mono);font-size:11px;color:var(--gold-soft);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;}

/* ---------- METODO (flow) ---------- */
.flow{position:relative;padding-left:36px;margin-top:50px;}
.flow::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:1px;background:var(--line);}
.flow-step{position:relative;padding:0 0 40px 34px;}
.flow-step:last-child{padding-bottom:0;}
.flow-step .node{position:absolute;left:-36px;top:0;width:22px;height:22px;border:1.5px solid var(--gold);background:var(--white);transform:rotate(45deg);}
.flow-step .node::after{content:'';position:absolute;inset:5px;background:var(--gold);}
.flow-step h4{font-family:var(--serif);font-size:19px;color:var(--navy);font-weight:500;margin-bottom:6px;}
.flow-step p{font-size:14px;color:var(--slate);max-width:460px;line-height:1.65;}

/* ---------- COMO FUNCIONA (timeline) ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;}
.timeline-item{border-top:1px solid var(--line-dark);padding:28px 26px 0 0;position:relative;}
.timeline-item .idx{font-family:var(--mono);font-size:12px;color:var(--gold);margin-bottom:14px;display:block;}
.timeline-item h4{font-family:var(--serif);font-size:18px;color:var(--white);font-weight:500;margin-bottom:8px;}
.timeline-item p{font-size:13.5px;color:#aeb8c1;line-height:1.6;}

/* ---------- BENEFICIOS tabs ---------- */
.tabs{display:flex;gap:8px;margin-bottom:44px;flex-wrap:wrap;}
.tab-btn{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 22px;border:1px solid var(--line);background:transparent;color:var(--slate);cursor:pointer;
  transition:all .25s var(--ease);
}
.tab-btn.active{background:var(--navy);border-color:var(--navy);color:var(--white);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.benefit-card{background:var(--white);padding:34px 28px;min-height:150px;}
.benefit-card .diamond-mark{margin-bottom:16px;}
.benefit-card h4{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--navy);margin-bottom:8px;}
.benefit-card p{font-size:13.5px;color:var(--slate);line-height:1.6;}

/* ---------- INDICE DE SAUDE BUCAL CORPORATIVA ---------- */
.index-panel{
  background:var(--navy-deep);border:1px solid var(--line-dark);
  padding:52px;margin-top:50px;
}
.index-head{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;margin-bottom:40px;}
.index-head h3{font-family:var(--serif);color:var(--white);font-size:24px;font-weight:500;max-width:480px;}
.index-badge{font-family:var(--mono);font-size:11px;color:var(--gold);border:1px solid rgba(236,176,78,.35);padding:8px 14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.index-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;}
.index-metric{}
.index-metric .bar-track{height:5px;background:rgba(247,247,247,.1);width:100%;margin-bottom:14px;position:relative;overflow:hidden;}
.index-metric .bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0;transition:width 1.4s var(--ease);}
.index-metric .pct{font-family:var(--serif);font-size:30px;color:var(--white);}
.index-metric .lbl{font-size:12.5px;color:#aeb8c1;margin-top:8px;line-height:1.5;}
.index-note{margin-top:36px;font-size:12.5px;color:#8b98a3;display:flex;align-items:flex-start;gap:10px;}
.index-note .diamond-mark{margin-top:3px;flex:none;}

/* ---------- INCLUSO checklist ---------- */
.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px;margin-top:16px;}
.included-item{display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.included-item .diamond-mark{margin-top:5px;border-color:var(--navy);}
.included-item span{font-size:14.5px;color:var(--ink);}

/* ---------- DIFERENCIAIS ---------- */
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-dark);margin-top:20px;}
.diff-col{padding:44px 40px;}
.diff-col.no{border-right:1px solid var(--line-dark);}
.diff-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:26px;}
.diff-col.no h4{color:#8a97a2;}
.diff-col.yes h4{color:var(--gold);}
.diff-col li{padding:13px 0;border-top:1px solid var(--line-dark);font-size:15px;color:#c3ccd3;}
.diff-col li:first-of-type{border-top:none;}
.diff-col.no li{color:#7d8a95;text-decoration:line-through;text-decoration-color:rgba(125,138,149,.5);}

/* ---------- SOBRE / MANIFESTO ---------- */
.manifesto{max-width:740px;margin:0 auto;text-align:center;}
.manifesto p{font-family:var(--serif);font-size:24px;line-height:1.55;color:var(--navy);font-weight:400;}
.manifesto p em{color:var(--gold);font-style:italic;}
.manifesto .slogan{margin-top:40px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}

.ecosystem{margin-top:70px;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.eco-card{background:var(--white);padding:24px 18px;text-align:center;}
.eco-card.active{background:var(--navy);}
.eco-card.active span{color:var(--gold);}
.eco-card span{font-family:var(--serif);font-size:14px;color:var(--navy);line-height:1.4;}

/* ---------- FAQ ---------- */
.faq-list{margin-top:20px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq-q h4{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--navy);}
.faq-icon{width:14px;height:14px;border:1.5px solid var(--gold);transform:rotate(45deg);flex:none;position:relative;transition:transform .35s var(--ease);}
.faq-item.open .faq-icon{transform:rotate(135deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a p{font-size:14.5px;color:var(--slate);line-height:1.7;padding-bottom:26px;max-width:640px;}

/* ---------- CTA FINAL + FORM ---------- */
.cta-final{background:var(--navy-deep);position:relative;overflow:hidden;}
.cta-final::before{content:'';position:absolute;width:600px;height:600px;border:1px solid rgba(236,176,78,.12);left:-200px;top:-160px;transform:rotate(45deg);}
.cta-final .wrap{position:relative;z-index:2;}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:flex-start;}
.cta-final h2{color:var(--white);}
.cta-final p.lede{color:#aeb8c1;}

.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#aeb8c1;}
.form-row input,.form-row textarea{
  background:transparent;border:none;border-bottom:1px solid rgba(247,247,247,.25);
  color:var(--white);font-family:var(--sans);font-size:15px;padding:10px 0;
  transition:border-color .3s;
}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--gold);}
.form-row textarea{resize:vertical;min-height:80px;}
.form-note{font-size:12px;color:#7d8a95;margin-top:4px;}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed;right:26px;bottom:26px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:var(--gold);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.07);}
.wa-float svg{width:28px;height:28px;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-deep);padding:60px 0 34px;border-top:1px solid var(--line-dark);}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-dark);}
.footer-brand{display:flex;align-items:center;gap:12px;}
.footer-brand img{height:30px;}
.footer-cols{display:flex;gap:70px;flex-wrap:wrap;}
.footer-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.footer-col a,.footer-col span{display:block;font-size:13.5px;color:#aeb8c1;margin-bottom:10px;}
.footer-bottom{display:flex;justify-content:space-between;padding-top:26px;flex-wrap:wrap;gap:14px;}
.footer-bottom span{font-size:12.5px;color:#7d8a95;}

::selection{background:var(--gold);color:var(--navy-deep);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}