/* ===========================================================
   Clínica Demari & Rodrigues — Implantes Dentários
   Visual language adapted from the "Dentix" Framer site,
   recolored to the clinic's gold + deep-olive brand.
   =========================================================== */

:root{
  /* Brand */
  --gold:        #C2B75A;
  --gold-deep:   #8E7E26;
  --gold-soft:   #DBD295;
  --gold-wash:   #EEE8CF;

  /* Deep charcoal (replaces the immersive olive blocks) */
  --olive:       #242424;
  --olive-2:     #1a1a1a;
  --olive-soft:  #333333;

  /* Neutrals */
  --cream:   #EEECE3;     /* page canvas */
  --cream-2: #E6E3D6;
  --card:    #FFFFFF;
  --card-2:  #FAF9F3;
  --ink:     #1B1C13;     /* footer / darkest */

  --text:        #20211A;
  --text-soft:   #55564A;
  --text-muted:  #84826F;
  --on-olive:    #ECEBDC;
  --muted-olive: #B4B79A;

  --line:        rgba(27,28,19,.10);
  --line-2:      rgba(27,28,19,.07);
  --line-olive:  rgba(236,235,220,.15);

  /* Type */
  --display: "Schibsted Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;

  /* Metrics */
  --container: 1280px;
  --r-xl:  34px;
  --r-lg:  26px;
  --r-md:  18px;
  --r-sm:  12px;
  --gap:   16px;
  --pad-y: clamp(64px, 7vw, 104px);
  --ease:  cubic-bezier(.22,.7,.26,1);

  --shadow-sm: 0 2px 14px rgba(27,28,19,.05);
  --shadow:    0 26px 60px -34px rgba(27,28,19,.34);
  --shadow-gold: 0 18px 36px -16px rgba(142,126,38,.5);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-.025em; color:var(--text); }
.h-display{ font-size:clamp(2.5rem, 5.6vw, 4.5rem); font-weight:600; }
h2.section-title{ font-size:clamp(2rem, 3.8vw, 3.1rem); }
h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); letter-spacing:-.02em; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,3.4vw,28px); }
.section{ padding-block:var(--pad-y); position:relative; }
.bg-cream{ background:var(--cream); }
.tac{ text-align:center; }

/* ---------- Pill label ---------- */
.pill-label{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:.78rem;
  letter-spacing:.02em; color:var(--gold-deep);
  background:var(--card); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.pill-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.on-olive .pill-label{ background:rgba(255,255,255,.07); border-color:var(--line-olive); color:var(--gold); }

.lead{ font-size:clamp(1.04rem,1.4vw,1.18rem); color:var(--text-soft); max-width:62ch; }
.on-olive .lead, .panel.olive .lead{ color: #ffffff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:.96rem;
  padding:15px 24px; border-radius:999px; letter-spacing:-.01em;
  transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn .arr{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22); transition:transform .35s var(--ease); }
.btn .arr svg{ width:13px; height:13px; }
.btn:hover .arr{ transform:rotate(45deg); }
.btn svg.ic{ width:18px; height:18px; }
.btn-primary{ background:var(--gold); color:var(--olive-2); box-shadow:var(--shadow-gold); }
.btn-primary .arr{ background:rgba(27,28,19,.16); }
.btn-primary:hover{ background:var(--gold-soft); transform:translateY(-3px); }
.btn-olive{ background:var(--olive); color:var(--on-olive); }
.btn-olive:hover{ background:var(--olive-soft); transform:translateY(-3px); }
.btn-light{ background:var(--card); color:var(--text); border:1px solid var(--line); }
.btn-light .arr{ background:var(--gold-wash); color:var(--gold-deep); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.btn-ghost{ background:transparent; color:var(--on-olive); border:1.5px solid var(--line-olive); }
.btn-ghost .arr{ background:rgba(255,255,255,.14); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }
.btn-wa{ background:#fff; color:var(--text); border:1px solid var(--line); }
.btn-wa svg.ic{ color:#25D366; }
.btn-wide{ width:100%; }

/* ---------- Google review badge ---------- */
.gbadge{ display:inline-flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 18px 9px 12px; box-shadow:var(--shadow-sm); }
.gbadge .avs{ display:flex; }
.gbadge .avs img, .gbadge .avs span{ width:34px; height:34px; border-radius:50%; border:2px solid var(--card); object-fit:cover; margin-left:-10px; }
.gbadge .avs :first-child{ margin-left:0; }
.gbadge .avs span{ display:grid; place-items:center; background:var(--gold-wash); color:var(--gold-deep); font-family:var(--display); font-weight:700; font-size:.8rem; }
.gbadge .meta{ display:flex; flex-direction:column; line-height:1.15; }
.gbadge .meta .top{ display:flex; align-items:center; gap:7px; }
.gbadge .meta b{ font-family:var(--display); font-weight:700; font-size:1rem; }
.gbadge .stars{ display:flex; gap:1px; color:var(--gold-deep); }
.gbadge .stars svg{ width:14px; height:14px; }
.gbadge .meta small{ font-size:.76rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.gbadge .gicon{ width:15px; height:15px; }

/* ============================================================
   HEADER / NAV (floating)
   ============================================================ */
.site-header{ position:fixed; inset:14px 0 auto 0; z-index:60; transition:inset .4s var(--ease); }
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:rgba(238,236,227,.0); border:1px solid transparent; border-radius:999px;
  padding:10px 12px 10px 18px; transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.site-header.scrolled{ inset:10px 0 auto 0; }
.site-header.scrolled .nav{ background:rgba(255,255,255,.82); backdrop-filter:blur(16px); border-color:var(--line); box-shadow:var(--shadow); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ height:46px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text b{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em; color:var(--text); }
.brand-text span{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.site-header:not(.scrolled) .brand-text b{ color:#fff; }
.site-header:not(.scrolled) .brand-text span{ color:var(--gold); }

/* ============================================================
   HERO  (inset rounded card)
   ============================================================ */
.hero{ padding:8px; }
.hero-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  min-height:clamp(560px, 88svh, 820px); display:flex; align-items:flex-end;
  background:var(--olive-2);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; transform:scale(1.08); animation:kenburns 16s ease-out forwards; }
@keyframes kenburns{ to{ transform:scale(1); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,22,12,.90) 0%, rgba(20,22,12,.62) 40%, rgba(20,22,12,.16) 72%, rgba(20,22,12,.30) 100%),
    linear-gradient(0deg, rgba(20,22,12,.82) 0%, rgba(20,22,12,0) 52%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding:clamp(28px,4vw,52px); padding-top:clamp(120px,15vh,180px); }
.hero h1{ color:#fff; max-width:15ch; font-weight:600; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero .lead{ color:rgba(255,255,255,.82); margin-top:20px; max-width:46ch; }
.hero-benefits{ display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:22px; }
.hero-benefits li{ display:flex; align-items:center; gap:8px; list-style:none; color:rgba(255,255,255,.92); font-weight:500; font-size:.96rem; }
.check{ flex:none; width:23px; height:23px; border-radius:50%; background:var(--gold); color:var(--olive-2); display:grid; place-items:center; }
.check svg{ width:12px; height:12px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-foot{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:34px; }

/* trust marquee */
.marquee{ overflow:hidden; padding-block:18px; }
.marquee-track{ display:flex; gap:42px; white-space:nowrap; width:max-content; animation:scroll-x 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--text-muted); display:flex; align-items:center; gap:42px; letter-spacing:-.01em; }
.marquee-track span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ============================================================
   Generic section heads
   ============================================================ */
.head{ max-width:780px; }
.head.center{ margin-inline:auto; text-align:center; }
.head .pill-label{ margin-bottom:18px; }
.head h2{ text-wrap:balance; }
.head .lead{ margin-top:16px; }
.head.center .lead{ margin-inline:auto; }
.head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ============================================================
   INTRO statement + pillars
   ============================================================ */
.intro-top{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.exp-cluster{ display:flex; flex-direction:column; gap:10px; }
.exp-cluster .avs{ display:flex; }
.exp-cluster .avs img, .exp-cluster .avs span{ width:46px; height:46px; border-radius:50%; border:3px solid var(--cream); object-fit:cover; margin-left:-14px; }
.exp-cluster .avs :first-child{ margin-left:0; }
.exp-cluster .avs span{ display:grid; place-items:center; background:var(--olive); color:var(--gold); font-family:var(--display); font-weight:700; font-size:.95rem; }
.exp-cluster .lbl b{ font-family:var(--display); font-weight:800; font-size:1.7rem; color:var(--gold-deep); }
.exp-cluster .lbl span{ display:block; font-size:.82rem; color:var(--text-muted); margin-top:-2px; }
.intro-statement{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.5vw,2.15rem); line-height:1.28; letter-spacing:-.02em; color:var(--text); text-wrap:balance; }
.intro-statement b{ color:var(--gold-deep); font-weight:600; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(44px,5vw,68px); }
.pillar{ display:flex; flex-direction:column; gap:12px; }
.pillar .pic{ width:54px; height:54px; border-radius:50%; background:var(--gold-wash); color:var(--gold-deep); display:grid; place-items:center; }
.pillar .pic svg{ width:25px; height:25px; }
.pillar h3{ font-size:1.16rem; }
.pillar p{ color:var(--text-soft); font-size:.99rem; }
.intro-cta{ margin-top:38px; }

/* ============================================================
   DUO row (visit clinic + offer)
   ============================================================ */
.duo{ display:grid; grid-template-columns:1.18fr .82fr; gap:var(--gap); }
.visit-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:300px; display:flex; align-items:flex-end; box-shadow:var(--shadow); }
.visit-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; transition:transform 1.1s var(--ease); }
.visit-card:hover img{ transform:scale(1.05); }
.visit-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,22,12,.8), rgba(20,22,12,0) 60%); }
.visit-card .vc-body{ position:relative; z-index:2; padding:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; width:100%; }
.visit-card h3{ color:#fff; } .visit-card p{ color:rgba(255,255,255,.8); font-size:.9rem; margin-top:5px; }
.map-btn{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--card); color:var(--olive); display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .3s var(--ease); }
.map-btn:hover{ transform:scale(1.08); }
.map-btn svg{ width:22px; height:22px; }

.offer-card{ position:relative; border-radius:var(--r-lg); background:var(--olive); color:var(--on-olive); padding:30px; display:flex; flex-direction:column; min-height:300px; overflow:hidden; }
.offer-card .gift{ width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.1); color:var(--gold); display:grid; place-items:center; margin-bottom:auto; }
.offer-card .gift svg{ width:26px; height:26px; }
.offer-card .corner{ position:absolute; top:22px; right:22px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-olive); display:grid; place-items:center; color:var(--gold); }
.offer-card .corner svg{ width:16px; height:16px; }
.offer-card h3{ color:#fff; font-size:clamp(1.4rem,2.2vw,1.85rem); margin-top:24px; }
.offer-card p{ color:var(--muted-olive); margin-top:10px; font-size:.95rem; }
.offer-card .btn{ margin-top:22px; align-self:flex-start; }

/* ============================================================
   Generic rounded-card surface section
   ============================================================ */
.panel{ background:var(--card); border-radius:var(--r-xl); padding:clamp(32px,4vw,64px); box-shadow:var(--shadow-sm); }
.panel.olive{ background:var(--olive); color:var(--on-olive); }
.panel.olive h2,.panel.olive h3{ color:#fff; }
.panel.wash{ background:var(--gold-wash); }

/* ============================================================
   PAIN cards
   ============================================================ */
.pain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-top:48px; }
.pain-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.pain-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.pain-ic{ width:50px; height:50px; border-radius:14px; background:var(--gold-wash); color:var(--gold-deep); display:grid; place-items:center; margin-bottom:18px; }
.pain-ic svg{ width:24px; height:24px; }
.pain-card p{ font-family:var(--display); font-weight:500; font-size:1.08rem; letter-spacing:-.01em; line-height:1.32; }
.pain-note{ margin-top:var(--gap); background:var(--olive); color:var(--on-olive); border-radius:var(--r-lg); padding:clamp(30px,4vw,50px); display:grid; grid-template-columns:1.5fr .9fr; gap:28px; align-items:center; }
.pain-note h3{ color:#fff; font-size:clamp(1.4rem,2.3vw,1.9rem); }
.pain-note p{ color:var(--muted-olive); margin-top:12px; }
.pain-note .solucao{ font-family:var(--display); font-weight:700; color:var(--gold); font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; }

/* ============================================================
   SPLIT (image + text)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.5vw,68px); align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media .frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; }
.split-media .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.split-media:hover .frame img{ transform:scale(1.06); }
.badge-float{ position:absolute; background:var(--card); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:13px; }
.badge-float.tl{ top:22px; left:-18px; } .badge-float.br{ bottom:24px; right:-18px; }
.badge-float .num{ font-family:var(--display); font-weight:800; font-size:1.8rem; color:var(--gold-deep); letter-spacing:-.03em; }
.badge-float small{ display:block; font-size:.76rem; color:var(--text-muted); line-height:1.25; max-width:13ch; }
.benefit-list{ margin-top:26px; display:grid; gap:13px; }
.benefit-list li{ display:flex; gap:13px; align-items:flex-start; list-style:none; }
.benefit-list .check{ margin-top:2px; }
.benefit-list b{ font-family:var(--display); font-weight:500; font-size:1.04rem; letter-spacing:-.01em; }
.split-body .btn{ margin-top:30px; }

/* ============================================================
   TREATMENTS accordion list
   ============================================================ */
.treat{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,4.5vw,68px); align-items:start; }
.treat-aside .pill-label{ margin-bottom:18px; }
.treat-aside .stars{ display:flex; gap:2px; color:var(--gold-deep); margin-top:24px; }
.treat-aside .stars svg{ width:18px; height:18px; }
.treat-aside .rev-note{ font-size:.86rem; color:var(--text-muted); margin-top:8px; }
.treat-aside .btn{ margin-top:26px; }
.treat-list{ display:grid; gap:12px; }
.titem{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .4s var(--ease), border-color .4s var(--ease); }
.titem.active{ box-shadow:var(--shadow); border-color:transparent; }
.titem-head{ display:flex; align-items:center; gap:18px; padding:22px 24px; width:100%; text-align:left; }
.titem-ic{ flex:none; width:48px; height:48px; border-radius:12px; background:var(--gold-wash); color:var(--gold-deep); display:grid; place-items:center; transition:.4s var(--ease); }
.titem.active .titem-ic{ background:var(--olive); color:var(--gold); }
.titem-ic svg{ width:24px; height:24px; }
.titem-head h3{ flex:1; font-size:1.18rem; font-weight:600; }
.titem-tog{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; position:relative; transition:.4s var(--ease); }
.titem.active .titem-tog{ background:var(--gold); border-color:var(--gold); }
.titem-tog::before,.titem-tog::after{ content:""; position:absolute; top:50%; left:50%; background:var(--text); border-radius:2px; transition:.4s var(--ease); }
.titem-tog::before{ width:13px; height:2px; transform:translate(-50%,-50%); }
.titem-tog::after{ width:2px; height:13px; transform:translate(-50%,-50%); }
.titem.active .titem-tog::before,.titem.active .titem-tog::after{ background:var(--olive-2); }
.titem.active .titem-tog::after{ transform:translate(-50%,-50%) scaleY(0); }
.titem-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.titem-body-inner{ padding:0 24px 24px 90px; color:var(--text-soft); }

/* ============================================================
   CANDIDATOS checklist
   ============================================================ */
.checklist{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; margin-top:34px; }
.checklist li{ display:flex; gap:12px; align-items:center; list-style:none; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:16px 18px; font-weight:500; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.checklist li:hover{ transform:translateX(6px); box-shadow:var(--shadow-sm); }
.checklist .check{ background:var(--olive); color:var(--gold); }

/* ============================================================
   PROCESS steps (inside olive panel)
   ============================================================ */
.process{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,4.5vw,68px); align-items:start; }
.steps{ display:grid; gap:12px; }
.step{ border:1px solid var(--line-olive); border-radius:var(--r-md); overflow:hidden; background:rgba(255,255,255,.03); transition:background .4s var(--ease), border-color .4s var(--ease); }
.step.active{ background:rgba(194,183,90,.1); border-color:rgba(194,183,90,.4); }
.step-head{ display:flex; align-items:center; gap:18px; padding:22px 24px; width:100%; text-align:left; }
.step-num{ flex:none; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-olive); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1rem; color:var(--gold); transition:.4s var(--ease); }
.step.active .step-num{ background:var(--gold); color:var(--olive-2); border-color:var(--gold); }
.step-head h3{ flex:1; color:#fff; font-size:clamp(1.1rem,1.7vw,1.32rem); }
.step-tog{ flex:none; width:28px; height:28px; position:relative; }
.step-tog::before,.step-tog::after{ content:""; position:absolute; top:50%; left:50%; background:var(--gold); border-radius:2px; transition:.4s var(--ease); }
.step-tog::before{ width:13px; height:2px; transform:translate(-50%,-50%); }
.step-tog::after{ width:2px; height:13px; transform:translate(-50%,-50%); }
.step.active .step-tog::after{ transform:translate(-50%,-50%) scaleY(0); }
.step-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.step-body-inner{ padding:0 24px 24px 86px; color:var(--muted-olive); }

/* ============================================================
   FEATURE testimonial (olive block + portrait)
   ============================================================ */
.tfeature{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:stretch; }
.tfeature-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:380px; }
.tfeature-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tfeature-media .seal-mini{ position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px; background:rgba(27,28,19,.6); color:#fff; padding:8px 14px; border-radius:999px; font-size:.78rem; font-weight:600; backdrop-filter:blur(6px); }
.tfeature-media .seal-mini svg{ width:15px; height:15px; color:var(--gold); }
.tfeature-body{ display:flex; flex-direction:column; justify-content:center; }
.tfeature .stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:20px; }
.tfeature .stars svg{ width:22px; height:22px; }
.tfeature blockquote{ font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); line-height:1.3; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.tfeature .small-q{ color:var(--muted-olive); margin-top:24px; font-size:1rem; }
.tfeature .who{ color:var(--gold); font-family:var(--display); font-weight:600; margin-top:14px; }
.tfeature .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.tfeature .tags span{ font-size:.8rem; padding:7px 14px; border-radius:999px; border:1px solid var(--line-olive); color:var(--on-olive); }

/* ============================================================
   STATS strip
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.stat{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:30px 28px; }
.stat .n{ font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,3.6vw,3rem); color:var(--gold-deep); letter-spacing:-.03em; line-height:1; }
.stat .t{ font-size:.92rem; color:var(--text-muted); margin-top:8px; }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:48px; }
.tmember{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.tmember:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.tmember .ph{ position:relative; aspect-ratio:1/1; background:var(--olive); overflow:hidden; }
.tmember .ph image-slot, .tmember .ph img{ position:absolute; inset:0; width:100%; height:100%; }
.tmember .body{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:22px 24px; }
.tmember b{ font-family:var(--display); font-weight:600; font-size:1.12rem; display:block; }
.tmember small{ color:var(--text-muted); font-size:.86rem; }
.tmember .arr-btn{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--gold-deep); transition:.3s var(--ease); }
.tmember:hover .arr-btn{ background:var(--gold); border-color:var(--gold); color:var(--olive-2); transform:rotate(45deg); }
.tmember .arr-btn svg{ width:16px; height:16px; }
.team-promise{ text-align:center; max-width:60ch; margin:48px auto 0; font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.4; letter-spacing:-.02em; color:var(--text-muted); }
.team-promise b{ color:var(--text); font-weight:600; }

/* ============================================================
   CASOS (tabs + before/after)
   ============================================================ */
.tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-top:28px; }
.tab{ padding:11px 22px; border-radius:999px; border:1px solid var(--line); font-family:var(--body); font-weight:600; font-size:.9rem; color:var(--text-soft); background:var(--card); transition:.3s var(--ease); }
.tab.active{ background:var(--olive); color:var(--on-olive); border-color:var(--olive); }
.tab:hover:not(.active){ border-color:var(--olive); }
.cpanel{ display:none; margin-top:34px; }
.cpanel.active{ display:block; animation:fadeup .5s var(--ease) both; }
@keyframes fadeup{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.review-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; gap:14px; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.review-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.review-card .stars{ display:flex; gap:3px; color:var(--gold-deep); }
.review-card .stars svg{ width:18px; height:18px; }
.review-card p{ color:var(--text-soft); font-size:1.01rem; }
.reviewer{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.reviewer .av{ width:44px; height:44px; border-radius:50%; background:var(--gold-wash); color:var(--gold-deep); display:grid; place-items:center; font-family:var(--display); font-weight:700; }
.reviewer b{ font-family:var(--display); font-size:.95rem; }
.reviewer small{ display:block; color:var(--text-muted); font-size:.8rem; }
.ba-wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.ba{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; user-select:none; box-shadow:var(--shadow-sm); }
.ba image-slot, .ba .ba-layer{ position:absolute; inset:0; width:100%; height:100%; }
.ba .ba-after{ clip-path:inset(0 0 0 50%); }
.ba .ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--gold); transform:translateX(-50%); z-index:4; }
.ba .ba-knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--olive-2); display:grid; place-items:center; box-shadow:var(--shadow); z-index:5; }
.ba .ba-tag{ position:absolute; bottom:12px; z-index:6; font-family:var(--display); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; background:rgba(27,28,19,.7); color:#fff; padding:6px 12px; border-radius:999px; }
.ba .ba-tag.l{ left:12px; } .ba .ba-tag.r{ right:12px; }
.note{ margin-top:20px; display:flex; gap:10px; align-items:center; color:var(--text-muted); font-size:.88rem; }
.note svg{ width:18px;height:18px;flex:none; color:var(--gold-deep); }

/* ============================================================
   FINAL CTA (olive block + form)
   ============================================================ */
.cta-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4vw,60px); align-items:center; }
.cta-grid h2{ color:#fff; }
.form-card{ background:var(--card); color:var(--text); border-radius:var(--r-lg); padding:clamp(26px,3vw,38px); box-shadow:var(--shadow); }
.form-card h3{ font-size:1.3rem; }
.form-row{ display:grid; gap:6px; margin-top:14px; }
.form-row.two{ grid-template-columns:1fr 1fr; gap:13px; }
.form-row label{ font-size:.82rem; font-weight:600; color:var(--text-soft); }
.form-row input,.form-row select{ font:inherit; font-size:.97rem; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; background:var(--card-2); color:var(--text); transition:border-color .25s, background .25s; }
.form-row input:focus,.form-row select:focus{ outline:none; border-color:var(--gold-deep); background:#fff; }
.form-card .btn{ margin-top:20px; }
.form-note{ font-size:.8rem; color:var(--text-muted); margin-top:13px; text-align:center; }
.form-success{ display:none; text-align:center; padding:24px 6px; }
.form-success.show{ display:block; animation:fadeup .5s var(--ease) both; }
.form-success .tick{ width:62px;height:62px;border-radius:50%;background:var(--gold);color:var(--olive-2);display:grid;place-items:center;margin:0 auto 16px; }
.form-success .tick svg{ width:28px;height:28px; }

/* WhatsApp action card (replaces form) */
.wa-card{ background:var(--card); color:var(--text); border-radius:var(--r-lg); padding:clamp(30px,3.4vw,44px); box-shadow:var(--shadow); text-align:center; display:flex; flex-direction:column; align-items:center; }
.wa-card-ic{ width:72px; height:72px; border-radius:50%; background:rgba(37,211,102,.12); color:#1FAE54; display:grid; place-items:center; margin-bottom:20px; }
.wa-card-ic svg{ width:38px; height:38px; }
.wa-card h3{ font-size:clamp(1.45rem,2.2vw,1.85rem); }
.wa-card p{ color:var(--text-soft); margin-top:12px; max-width:42ch; }
.btn-wa-solid{ background:#25D366; color:#fff; box-shadow:0 16px 32px -14px rgba(37,211,102,.65); margin-top:24px; }
.btn-wa-solid svg.ic{ color:#fff; }
.btn-wa-solid:hover{ background:#1FAE54; transform:translateY(-3px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:var(--on-olive); border-radius:var(--r-xl) var(--r-xl) 0 0; margin-top:var(--gap); padding-block:clamp(56px,6vw,84px) 28px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:38px; }
.footer .brand-text b{ color:#fff; } .footer .brand-text span{ color:var(--gold); }
.footer p{ color:var(--muted-olive); margin-top:18px; max-width:34ch; }
.footer h4{ color:#fff; font-size:1rem; margin-bottom:16px; font-family:var(--display); }
.footer ul{ list-style:none; display:grid; gap:11px; }
.footer ul a, .footer ul li{ color:var(--muted-olive); transition:color .25s; font-size:.95rem; }
.footer ul a:hover{ color:var(--gold); }
.footer .map{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-olive); aspect-ratio:16/10; }
.footer .map iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.05); }
.footer-bottom{ border-top:1px solid var(--line-olive); margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted-olive); font-size:.85rem; }

/* ============================================================
   FLOAT WHATSAPP
   ============================================================ */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:80; width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.7); transition:transform .35s var(--ease); }
.wa-float svg{ width:31px; height:31px; }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:pulse 2.2s var(--ease) infinite; }
.wa-float:hover{ transform:scale(1.08); }
@keyframes pulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.6);opacity:0} }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-media img{ animation:none; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .duo, .split, .treat, .process, .tfeature, .cta-grid, .pain-note, .intro-top{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .pillars, .team-grid, .review-grid, .footer-grid{ grid-template-columns:1fr 1fr; }
  .ba-wrap{ grid-template-columns:1fr; }
  .exp-cluster{ flex-direction:row; align-items:center; gap:18px; }
  .titem-body-inner, .step-body-inner{ padding-left:24px; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .pain-grid, .pillars, .team-grid, .review-grid, .footer-grid, .checklist, .stats, .form-row.two{ grid-template-columns:1fr; }
  .brand-text{ display:none; }
  .hero-inner{ padding-top:110px; }
}