@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --blue:#0087FF;
  --blue-dim:#0087FF33;
  --blue-glow:#0087FF66;
  --white:#FFFFFF;
  --dark:#1C1C2B;
  --dark-2:#14141F;
  --dark-3:#242438;
  --muted:rgba(255,255,255,0.58);
  --muted-2:rgba(255,255,255,0.34);
  --line:rgba(255,255,255,0.10);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:'Chivo',Arial,sans-serif;
  background:var(--dark);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}

.bg-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  position:relative;
  z-index:1;
}

/* ---------- NAV ---------- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(28,28,43,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-weight:900;
  font-size:19px;
  letter-spacing:-0.3px;
  display:flex;
  align-items:center;
  gap:9px;
}
.logo img{height:34px; width:auto; display:block;}
footer .logo img{height:30px;}
.logo .dot{
  width:9px;height:9px;border-radius:2px;
  background:var(--blue);
  box-shadow:0 0 14px var(--blue-glow);
  transform:rotate(45deg);
  flex:none;
}
.logo b{font-weight:900;}
.logo span.sub{
  font-weight:400; color:var(--blue); font-size:12px; letter-spacing:2px;
  margin-left:4px; text-transform:uppercase;
}
nav.links{display:flex; align-items:center; gap:36px;}
nav.links .btn{display:none;}
nav.links a{
  font-size:14px; font-weight:500; color:var(--muted);
  letter-spacing:.2px; transition:color .2s ease; position:relative;
}
nav.links a:hover{color:var(--white);}
nav.links a.active{color:var(--white);}
nav.links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-22px;height:2px;background:var(--blue);
}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px;
  background:var(--blue);
  color:var(--white);
  font-weight:700;
  font-size:14px;
  border-radius:3px;
  border:none;
  cursor:pointer;
  letter-spacing:.2px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 0 0 rgba(0,135,255,0);
}
.btn:hover{
  background:#1a93ff;
  transform:translateY(-2px);
  box-shadow:0 10px 30px -6px var(--blue-glow);
}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.22);
  color:var(--white);
}
.btn.ghost:hover{border-color:var(--blue); background:rgba(0,135,255,0.08); box-shadow:none;}
.btn.block{width:100%; justify-content:center; padding:16px 24px; font-size:15px;}

.mobile-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:38px; height:38px;
  align-items:center; justify-content:center;
}
.mobile-toggle svg{width:22px;height:22px;stroke:var(--white);}

/* ---------- SECTIONS / TYPE ---------- */
section{position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--blue); margin-bottom:22px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--blue);}

h1,h2,h3{font-weight:900; letter-spacing:-0.5px; line-height:1.05;}
h1{font-size:clamp(38px,5.4vw,72px);}
h2{font-size:clamp(28px,3.6vw,44px);}
h3{font-size:20px; letter-spacing:-0.2px;}
p{color:var(--muted); font-size:16px; line-height:1.7; font-weight:400;}
.lead{font-size:19px; color:rgba(255,255,255,0.78); line-height:1.6;}

.accent{color:var(--blue);}

/* ---------- HERO ---------- */
.hero{
  padding:120px 0 100px;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-260px; right:-220px;
  width:640px;height:640px;
  background:radial-gradient(circle, var(--blue-glow) 0%, transparent 68%);
  filter:blur(10px);
  z-index:0;
}

/* Light variant of the hero (white background, dark text) */
.hero.light{
  background:var(--white);
  border-bottom:1px solid rgba(28,28,43,0.08);
}
.hero.light::before{
  background:radial-gradient(circle, rgba(0,135,255,0.16) 0%, transparent 68%);
}
.hero.light .eyebrow{color:var(--blue);}
.hero.light .eyebrow::before{background:var(--blue);}
.hero.light h1{color:var(--dark);}
.hero.light .lead{color:rgba(28,28,43,0.68);}
.hero.light .btn.ghost{color:var(--dark); border-color:rgba(28,28,43,0.22);}
.hero.light .btn.ghost:hover{border-color:var(--blue); background:rgba(0,135,255,0.06);}
.hero.light .hero-stats{border-top:1px solid rgba(28,28,43,0.10);}
.hero.light .stat b{color:var(--dark);}
.hero.light .stat span{color:rgba(28,28,43,0.45);}

.hero-mascot{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
}
.hero-mascot::before{
  content:'';
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,135,255,0.20) 0%, rgba(0,135,255,0.06) 55%, transparent 75%);
  z-index:0;
}
.hero-mascot img{
  position:relative;
  z-index:1;
  max-width:390px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 30px 40px rgba(28,28,43,0.22));
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  align-items:center;
}
.hero h1{margin-bottom:26px;}
.hero .lead{max-width:520px; margin-bottom:38px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.hero-stats{display:flex; gap:40px; padding-top:32px; border-top:1px solid var(--line);}
.stat b{display:block; font-size:30px; font-weight:900; color:var(--white);}
.stat span{font-size:12.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:1.2px;}

.hero-visual{position:relative; height:460px;}
.orbit-card{
  position:absolute;
  background:var(--dark-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px 24px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
}
.orbit-card.c1{top:0; right:0; width:280px;}
.orbit-card.c2{top:190px; left:0; width:250px;}
.orbit-card.c3{bottom:0; right:40px; width:230px;}
.orbit-card b{display:block; font-size:26px; color:var(--blue); font-weight:900;}
.orbit-card span{font-size:12.5px; color:var(--muted); display:block; margin-top:6px; line-height:1.5;}
.orbit-line{
  position:absolute; border-radius:50%;
  border:1px dashed rgba(0,135,255,0.28);
}
.orbit-line.o1{width:360px;height:360px; top:40px; left:60px;}
.orbit-line.o2{width:220px;height:220px; top:120px; left:130px;}

/* ---------- MARQUEE / TRUST STRIP ---------- */
.trust{
  padding:26px 0;
  border-bottom:1px solid var(--line);
  background:var(--dark-2);
}
.trust .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.trust p{
  font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-2);
}
.trust .items{display:flex; gap:34px; flex-wrap:wrap;}
.trust .items span{font-size:13.5px; font-weight:700; color:rgba(255,255,255,0.6);}

/* ---------- GRID / CARDS ---------- */
.section{padding:110px 0;}
.section.tight{padding:90px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:60px;
}
.section-head p{max-width:440px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}

.card{
  background:var(--dark-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:34px 30px;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
  position:relative;
}
.card:hover{transform:translateY(-5px); border-color:rgba(0,135,255,0.4); background:#171725;}
.card .num{
  font-size:12px; font-weight:700; color:var(--blue); letter-spacing:2px; margin-bottom:18px; display:block;
}
.card h3{margin-bottom:12px;}
.card p{font-size:14.5px;}
.icon-box{
  width:46px;height:46px;
  border-radius:8px;
  background:var(--blue-dim);
  border:1px solid rgba(0,135,255,0.35);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.icon-box svg{width:22px;height:22px;stroke:var(--blue);}

.list-check{margin-top:16px;}
.list-check li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:var(--muted); padding:7px 0; line-height:1.5;
}
.list-check li::before{
  content:'';
  flex:none;
  width:6px;height:6px;
  margin-top:7px;
  background:var(--blue);
  transform:rotate(45deg);
}

/* ---------- METHOD STEPS ---------- */
.steps{counter-reset:step; display:flex; flex-direction:column;}
.step{
  display:grid; grid-template-columns:90px 1fr; gap:32px;
  padding:44px 0; border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step-num{
  font-size:52px; font-weight:900; color:transparent;
  -webkit-text-stroke:1.4px rgba(0,135,255,0.55);
}
.step h3{margin-bottom:10px; font-size:22px;}
.step p{max-width:640px;}

/* ---------- QUOTE ---------- */
.quote-block{
  padding:90px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,135,255,0.10), transparent 60%);
}
.quote-flex{
  display:flex;
  align-items:center;
  gap:56px;
}
.quote-photo{
  flex:none;
  width:240px;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
}
.quote-photo img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.quote-content{flex:1; min-width:0;}
.quote-content blockquote{
  font-size:clamp(22px,2.6vw,34px);
  font-weight:900; letter-spacing:-0.5px; line-height:1.32;
  margin-bottom:24px;
}
.quote-block .wrap:not(.quote-flex){text-align:center;}
.quote-block .wrap:not(.quote-flex) blockquote{
  font-size:clamp(24px,3vw,38px);
  font-weight:900; letter-spacing:-0.5px; line-height:1.3;
  max-width:820px; margin:0 auto 20px;
}
.quote-block cite{font-style:normal; color:var(--muted); font-size:14px; letter-spacing:1px; text-transform:uppercase;}

/* ---------- CTA BAND ---------- */
.cta-band{
  padding:90px 0;
  background:linear-gradient(120deg, var(--dark-3), var(--dark-2));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:'';
  position:absolute; bottom:-160px; left:-100px;
  width:420px;height:420px;
  background:radial-gradient(circle, var(--blue-glow), transparent 70%);
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.cta-inner h2{max-width:560px;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer.site{
  border-top:1px solid var(--line);
  padding:72px 0 32px;
  background:var(--dark-2);
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:54px;
}
.footer-grid h4{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-2); margin-bottom:20px;}
.footer-grid ul li{margin-bottom:12px;}
.footer-grid ul li a{font-size:14.5px; color:var(--muted); transition:color .2s;}
.footer-grid ul li a:hover{color:var(--blue);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-top:28px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted-2); flex-wrap:wrap;
}
.footer-bottom .socials{display:flex; gap:18px;}

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-hero{
  padding:80px 0 70px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.page-hero::before{
  content:'';
  position:absolute; top:-200px; left:-160px;
  width:500px;height:500px;
  background:radial-gradient(circle, var(--blue-glow), transparent 70%);
  z-index:0;
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{max-width:760px;}
.page-hero p.lead{max-width:620px; margin-top:20px;}
.breadcrumb{font-size:13px; color:var(--muted-2); margin-bottom:20px; letter-spacing:.5px;}
.breadcrumb a{color:var(--muted-2);}
.breadcrumb a:hover{color:var(--blue);}

/* ---------- FORM ---------- */
.form-card{
  background:var(--dark-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:44px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.field label{font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted-2);}
.field input, .field select, .field textarea{
  background:var(--dark);
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 16px;
  color:var(--white);
  font-family:'Chivo',sans-serif;
  font-size:14.5px;
  outline:none;
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical; min-height:120px;}

.contact-info-card{
  background:var(--dark-2); border:1px solid var(--line); border-radius:10px; padding:28px;
  display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;
}
.contact-info-card .icon-box{margin-bottom:0;}
.contact-info-card h4{font-size:14px; margin-bottom:6px; letter-spacing:.2px;}
.contact-info-card p{font-size:14px; margin:0;}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:60;
  background:var(--blue);
  color:var(--white);
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 34px -8px var(--blue-glow);
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:26px; height:26px;}

/* ---------- CASES / PLACEHOLDER ---------- */
.notice{
  border:1px dashed rgba(0,135,255,0.4);
  background:rgba(0,135,255,0.06);
  border-radius:10px;
  padding:18px 22px;
  font-size:13.5px;
  color:var(--muted);
  margin-bottom:50px;
}
.notice b{color:var(--blue);}

.case-card{
  background:var(--dark-2); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.case-media{
  height:170px;
  background:
    repeating-linear-gradient(135deg, rgba(0,135,255,0.10) 0 2px, transparent 2px 14px),
    linear-gradient(135deg, var(--dark-3), var(--dark-2));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-2);
  border-bottom:1px solid var(--line);
}
.case-body{padding:26px;}
.case-tag{
  display:inline-block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--blue); border:1px solid rgba(0,135,255,0.35); padding:4px 10px; border-radius:20px; margin-bottom:14px;
}
.case-stats{display:flex; gap:22px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}
.case-stats div b{display:block; font-size:22px; font-weight:900; color:var(--white);}
.case-stats div span{font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.8px;}

/* ---------- COMPARATIVO (DR. BIRA x DR. ENZO) ---------- */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--dark-2);
  position:relative;
}
.compare-col{padding:34px 30px; position:relative;}
.compare-col.old{background:var(--dark-2); border-right:1px solid var(--line);}
.compare-col.new{background:linear-gradient(160deg, rgba(0,135,255,0.10), transparent 60%);}
.compare-photo{
  width:100%;
  aspect-ratio:3/4;
  margin-bottom:20px;
  position:relative;
  overflow:visible;
}
.compare-photo-inner{
  width:100%;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--dark-3);
}
.compare-photo img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.compare-name{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.compare-name h3{font-size:19px;}
.compare-tag{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  padding:5px 11px; border-radius:20px;
}
.compare-col.old .compare-tag{color:var(--muted); border:1px solid var(--line);}
.compare-col.new .compare-tag{color:var(--blue); border:1px solid rgba(0,135,255,0.4);}
.compare-rows div{
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 0; border-top:1px solid var(--line);
  font-size:13.5px;
}
.compare-rows div:last-child{border-bottom:1px solid var(--line);}
.compare-rows span.k{color:var(--muted-2); flex:none; width:44%;}
.compare-rows span.v{color:var(--white); font-weight:600; text-align:right;}

/* X badge: anchored to the right edge of Dr. Bira's photo. Both column
   paddings (30px) and the divider border (1px) are fixed px values, so the
   gap between the two photos is always exactly 61px — the badge is offset
   by half that gap minus half its own width, landing dead-center between
   the photos at any viewport width. */
.compare-vs{
  position:absolute;
  top:50%;
  left:100%;
  transform:translate(-21.5px,-50%);
  z-index:5;
  width:104px; height:104px;
  border-radius:50%;
  background:var(--dark);
  border:3px solid var(--blue);
  box-shadow:0 0 0 8px var(--dark-2), 0 20px 44px -10px rgba(0,0,0,0.6), 0 0 40px -4px var(--blue-glow);
  display:flex; align-items:center; justify-content:center;
}
.compare-vs span{
  font-weight:900;
  font-size:52px;
  line-height:1;
  color:var(--blue);
  letter-spacing:0;
}

/* ---------- AUTHOR / QUOTE SIGNATURE ---------- */
.quote-author{
  display:flex; align-items:center; gap:14px;
}
.quote-author .bar{width:34px; height:2px; background:var(--blue); flex:none;}
.quote-author .info{text-align:left;}
.quote-author .info b{display:block; font-size:15px; font-weight:700; color:var(--white);}
.quote-author .info span{font-size:12.5px; color:var(--muted-2); letter-spacing:.5px;}

/* ---------- PHOTO STRIP / HUMANIZED IMAGE ---------- */
.photo-frame{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  position:relative;
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,20,31,0.85));
  pointer-events:none;
}
.photo-frame .caption{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:1;
  font-size:12.5px; color:rgba(255,255,255,0.85); letter-spacing:.3px;
}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line); padding:26px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer; font-size:17px; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; color:var(--blue); font-size:22px; font-weight:400; flex:none;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:16px; max-width:700px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .nav .btn{display:none;}
  nav.links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--dark-2);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start;
    padding:8px 32px 26px;
    gap:0;
  }
  nav.links.open-mobile{display:flex;}
  nav.links a{width:100%; padding:14px 0; border-bottom:1px solid var(--line);}
  nav.links a.active::after{display:none;}
  nav.links .btn{display:inline-flex; margin-top:14px;}
  .mobile-toggle{display:flex;}
  header.site .nav{position:relative;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .hero-mascot{min-height:280px; margin-top:8px;}
  .hero-mascot img{max-width:220px;}
  .hero-mascot::before{width:260px; height:260px;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .section-head{flex-direction:column; align-items:flex-start;}
  .cta-inner{flex-direction:column; align-items:flex-start;}
  .step{grid-template-columns:1fr; gap:12px;}
  .compare{grid-template-columns:1fr;}
  .compare-col.old{border-right:none; border-bottom:1px solid var(--line);}
  .compare-photo{position:static;}
  .compare-vs{
    top:100%; right:auto; left:50%;
    transform:translate(-50%,-50%);
    width:76px; height:76px;
  }
  .compare-vs span{font-size:38px;}
  .quote-flex{flex-direction:column; align-items:flex-start; gap:28px;}
  .quote-photo{width:120px;}
}