/* ============================================================
   DentPrax · Ortodoncia invisible en Playa del Carmen
   Sistema de diseño — color de marca #00a6d6
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --brand:#00a6d6;
  --brand-600:#0090bd;
  --brand-700:#0a7396;
  --brand-800:#075a76;
  --brand-050:#eef8fc;
  --brand-100:#d7eef8;
  --brand-200:#b0dff0;

  --ink:#0b2a35;
  --ink-70:#3e5c68;
  --ink-45:#6d878f;
  --ink-25:#9fb3ba;

  --line:#e2edf1;
  --bg:#ffffff;
  --bg-soft:#f4fafc;
  --bg-deep:#07313f;

  --amber:#ffb020;
  --coral:#ff6f5e;
  --ok:#12a150;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(11,42,53,.06), 0 4px 12px rgba(11,42,53,.05);
  --sh-2:0 2px 6px rgba(11,42,53,.07), 0 14px 34px rgba(11,42,53,.09);
  --sh-3:0 20px 60px rgba(7,49,63,.16);

  --maxw:1180px;
  --nav-h:72px;

  --font:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.14; letter-spacing:-.022em; font-weight:800}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding-inline:clamp(20px, 4vw, 32px);
  padding-inline-start:max(clamp(20px,4vw,32px), env(safe-area-inset-left));
  padding-inline-end:max(clamp(20px,4vw,32px), env(safe-area-inset-right));
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografía de secciones ---------- */
.h1{font-size:clamp(2.1rem, 5.2vw, 3.6rem)}
.h2{font-size:clamp(1.7rem, 3.6vw, 2.6rem)}
.h3{font-size:clamp(1.15rem, 2vw, 1.4rem)}
.lead{font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--ink-70)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.79rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-700);
}
.sec{padding:clamp(56px, 8vw, 104px) 0}
.sec--soft{background:var(--bg-soft)}
.sec-head{max-width:720px; margin:0 auto clamp(32px,4vw,52px); text-align:center}
.sec-head .lead{margin-top:14px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1.5px solid transparent;
  font-weight:700; font-size:1rem; cursor:pointer; text-align:center;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(0,166,214,.32)}
.btn--primary:hover{background:var(--brand-600); box-shadow:0 10px 26px rgba(0,166,214,.38)}
.btn--ghost{background:#fff; color:var(--brand-700); border-color:var(--brand-200)}
.btn--ghost:hover{border-color:var(--brand); background:var(--brand-050)}
.btn--wa{background:#25d366; color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.30)}
.btn--wa:hover{background:#1fbb5a}
.btn--lg{padding:18px 34px; font-size:1.06rem}
.btn--block{width:100%}

/* ---------- navegación ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
}
.nav__in{display:flex; align-items:center; gap:22px; height:var(--nav-h)}
.nav__logo img{height:32px; width:auto}
.nav__links{display:flex; gap:26px; margin-left:auto; font-size:.95rem; font-weight:600; color:var(--ink-70)}
.nav__links a:hover{color:var(--brand-700)}
.nav__cta{display:flex; align-items:center; gap:10px; margin-left:22px}
.nav__burger{display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer}
.nav__burger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px}
.nav__burger span+span{margin-top:5px}

@media (max-width:980px){
  .nav__links{display:none}
  .nav__cta .btn--ghost{display:none}
  .nav__burger{display:block}
  .nav__cta{margin-left:0}
}
.nav__drawer{display:none; border-top:1px solid var(--line); background:#fff; padding:14px 20px 22px}
.nav__drawer.is-open{display:block}
.nav__drawer a{display:block; padding:12px 0; font-weight:600; border-bottom:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--brand-050) 0%, #fff 78%)}
.hero__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding-block:clamp(44px,6vw,84px) clamp(52px,7vw,92px)}
.hero h1{margin:16px 0 18px}
.hero .lead{max-width:34ch}
.hero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 22px}
.hero__media{position:relative}
.hero__media img{width:100%; height:auto; max-height:min(64vh,560px); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); aspect-ratio:4/5; object-fit:cover; object-position:50% 22%}

.partner{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px;
  background:#fff; border:1px solid var(--brand-100); border-radius:100px;
  box-shadow:var(--sh-1); font-size:.83rem; font-weight:700; color:var(--ink);
}
.partner svg, .partner img{height:15px; width:auto}
.partner__dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

.trustrow{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; font-size:.9rem; color:var(--ink-70); font-weight:600}
.trustrow b{color:var(--ink)}
.stars{color:var(--amber); letter-spacing:1px}

.hero__badge{
  position:absolute; left:-14px; bottom:26px; background:#fff; border-radius:var(--r);
  box-shadow:var(--sh-2); padding:14px 18px; display:flex; align-items:center; gap:12px; max-width:240px;
}
.hero__badge strong{display:block; font-size:1.42rem; line-height:1; color:var(--brand-700)}
.hero__badge span{font-size:.79rem; color:var(--ink-70); font-weight:600; line-height:1.3}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr; padding-block-start:32px}
  .hero__media{order:-1}
  .hero__media img{aspect-ratio:4/3; max-height:46vh; border-radius:var(--r-lg)}
  .hero .lead{max-width:none}
  .hero__badge{left:8px; bottom:-14px; padding:11px 14px}
}

/* ---------- barra de valor (4 pilares) ---------- */
.valuebar{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); margin-top:-38px; position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr)}
.valuebar__i{padding:24px 22px; display:flex; gap:13px; align-items:flex-start}
.valuebar__i+.valuebar__i{border-left:1px solid var(--line)}
.valuebar__i svg{flex:none; width:24px; height:24px; color:var(--brand)}
.valuebar__i b{display:block; font-size:.97rem; line-height:1.3}
.valuebar__i span{font-size:.83rem; color:var(--ink-45); font-weight:600}
@media (max-width:860px){
  .valuebar{grid-template-columns:repeat(2,1fr); margin-top:24px}
  .valuebar__i:nth-child(odd){border-left:0}
  .valuebar__i:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){
  .valuebar{grid-template-columns:1fr}
  .valuebar__i{border-left:0!important}
  .valuebar__i+.valuebar__i{border-top:1px solid var(--line)}
}

/* ---------- objetivos (entrada al test) ---------- */
.goals{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.goal{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px;
  text-align:left; cursor:pointer; transition:.18s ease; display:flex; flex-direction:column; gap:12px;
}
.goal:hover{border-color:var(--brand); box-shadow:var(--sh-2); transform:translateY(-3px)}
.goal__ico{width:46px;height:46px;border-radius:14px;background:var(--brand-050);display:grid;place-items:center;color:var(--brand-700)}
.goal__ico svg{width:24px;height:24px}
.goal b{font-size:1.02rem}
.goal span{font-size:.88rem; color:var(--ink-45); font-weight:600}
.goal__go{margin-top:auto; font-size:.86rem; font-weight:700; color:var(--brand-700)}
@media (max-width:900px){.goals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.goals{grid-template-columns:1fr}}

/* ---------- estadísticas ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.stat b{display:block; font-size:clamp(2rem,4vw,2.9rem); color:var(--brand-700); line-height:1}
.stat span{font-size:.9rem; color:var(--ink-70); font-weight:600}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr); gap:28px 16px}}

/* ---------- antes / después ---------- */
.ba-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
@media (max-width:760px){.ba-grid{grid-template-columns:1fr}}
.ba{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1)}
.ba__imgs{position:relative; aspect-ratio:2/1; display:grid; grid-template-columns:1fr 1fr}
.ba__imgs figure{margin:0; position:relative; overflow:hidden}
.ba__imgs img{width:100%; height:100%; object-fit:cover}
.ba__imgs figcaption{
  position:absolute; left:10px; top:10px; background:rgba(11,42,53,.74); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; backdrop-filter:blur(4px);
}
.ba__imgs figure+figure figcaption{background:var(--brand)}
.ba__imgs::after{content:""; position:absolute; inset:0 auto 0 50%; width:2px; background:#fff}
.ba__meta{padding:16px 18px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:.88rem; font-weight:600; color:var(--ink-70)}
.ba__meta b{color:var(--ink)}
.ba__tag{background:var(--brand-050); color:var(--brand-700); padding:3px 10px; border-radius:100px; font-size:.78rem; font-weight:700}
.disclaimer{font-size:.8rem; color:var(--ink-45); text-align:center; margin-top:22px; max-width:66ch; margin-inline:auto}

/* ---------- pilares / features ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,62px); align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r-xl); box-shadow:var(--sh-2); width:100%; object-fit:cover}
@media (max-width:860px){.split{grid-template-columns:1fr} .split--rev .split__media{order:0}}

.pillars{display:grid; gap:22px; margin-top:26px}
.pillar{display:flex; gap:15px}
.pillar__ico{flex:none; width:40px;height:40px;border-radius:12px;background:var(--brand-050);display:grid;place-items:center;color:var(--brand-700)}
.pillar__ico svg{width:21px;height:21px}
.pillar b{display:block; margin-bottom:3px}
.pillar p{font-size:.93rem; color:var(--ink-70)}

/* ---------- proceso ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; position:relative}
.step::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center; width:38px;height:38px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:800; font-size:1.05rem; margin-bottom:16px;
}
.step b{display:block; font-size:1.08rem; margin-bottom:7px}
.step p{font-size:.93rem; color:var(--ink-70)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- precios ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.plan{background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; display:flex; flex-direction:column; gap:16px}
.plan--feat{border-color:var(--brand); box-shadow:var(--sh-2); position:relative}
.plan__flag{position:absolute; top:-13px; left:26px; background:var(--brand); color:#fff; font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 13px; border-radius:100px}
.plan h3{font-size:1.2rem}
.plan__price b{font-size:2.05rem; color:var(--brand-700); line-height:1; letter-spacing:-.03em}
.plan__price span{display:block; font-size:.84rem; color:var(--ink-45); font-weight:600; margin-top:6px}
.plan ul{display:grid; gap:9px; font-size:.92rem; color:var(--ink-70)}
.plan li{display:flex; gap:9px; align-items:flex-start}
.plan li svg{flex:none; width:17px;height:17px; color:var(--brand); margin-top:3px}
.plan .btn{margin-top:auto}
@media (max-width:880px){.plans{grid-template-columns:1fr}}
.pricenote{font-size:.82rem; color:var(--ink-45); text-align:center; margin-top:20px}

/* ---------- testimonios ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; display:flex; flex-direction:column; gap:13px}
.quote p{font-size:.96rem; color:var(--ink-70)}
.quote__who{display:flex; align-items:center; gap:11px; margin-top:auto}
.quote__av{width:40px;height:40px;border-radius:50%;background:var(--brand-050);color:var(--brand-700);
  display:grid;place-items:center;font-weight:800;font-size:.95rem; flex:none}
.quote__who b{display:block; font-size:.92rem}
.quote__who span{font-size:.8rem; color:var(--ink-45); font-weight:600}
@media (max-width:880px){.quotes{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-weight:700; font-size:1.04rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:10px; top:50%; width:11px; height:11px;
  border-right:2.3px solid var(--brand); border-bottom:2.3px solid var(--brand);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding:0 30px 24px 0; color:var(--ink-70); font-size:.97rem}

/* ---------- ubicación ---------- */
.locard{display:grid; grid-template-columns:1fr 1.15fr; gap:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-1)}
.locard__info{padding:clamp(26px,4vw,44px)}
.locard__info ul{display:grid; gap:16px; margin:22px 0 26px}
.locard__info li{display:flex; gap:12px; font-size:.95rem; color:var(--ink-70)}
.locard__info li svg{flex:none;width:19px;height:19px;color:var(--brand); margin-top:3px}
.locard__info li b{color:var(--ink); display:block}
.locard iframe{width:100%; height:100%; min-height:330px; border:0; display:block}
@media (max-width:820px){.locard{grid-template-columns:1fr}}

/* ---------- CTA final ---------- */
.cta{background:linear-gradient(135deg,var(--brand-800),var(--brand)); color:#fff; border-radius:var(--r-xl);
  padding:clamp(38px,5vw,66px); text-align:center}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.88); margin:14px auto 28px; max-width:56ch}
.cta .btn--primary{background:#fff; color:var(--brand-800); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.cta .btn--primary:hover{background:#f1fbfe}
.cta .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
.cta__ctas{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* ---------- footer ---------- */
.foot{background:var(--bg-deep); color:rgba(255,255,255,.72); padding:56px 0 28px; font-size:.92rem}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px}
.foot img.logo{height:34px; margin-bottom:16px}
.foot h4{color:#fff; font-size:.83rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px; font-weight:700}
.foot li{margin-bottom:9px}
.foot a:hover{color:#fff}
.foot__bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:38px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-size:.83rem; color:rgba(255,255,255,.55)}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ---------- barra móvil fija + WhatsApp ---------- */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px; padding:10px 14px
  calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px); border-top:1px solid var(--line);
}
.mobilebar .btn{flex:1; padding:14px 12px; font-size:.95rem}
@media (max-width:760px){ .mobilebar{display:flex} body{padding-bottom:76px} }

.wafloat{
  position:fixed; right:18px; bottom:18px; z-index:65; width:56px; height:56px; border-radius:50%;
  background:#25d366; display:grid; place-items:center; box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform .18s ease;
}
.wafloat:hover{transform:scale(1.07)}
.wafloat svg{width:29px;height:29px;color:#fff}
@media (max-width:760px){ .wafloat{bottom:84px; width:50px; height:50px} .wafloat svg{width:26px;height:26px} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ---------- muro de pacientes ---------- */
.wallhead{text-align:center; margin:clamp(48px,6vw,72px) auto clamp(20px,3vw,28px); max-width:640px}
.wallhead .lead{margin-top:8px}
.wall{display:grid; grid-template-columns:repeat(8,1fr); gap:10px}
.wall li{margin:0}
.wall img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px}
@media (max-width:900px){.wall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:480px){.wall{grid-template-columns:repeat(2,1fr)}}

/* ---------- caja de transparencia de precio ---------- */
.pricebox{
  margin-top:clamp(28px,4vw,40px); background:var(--brand-050); border:1px solid var(--brand-100);
  border-radius:var(--r-lg); padding:clamp(24px,3.4vw,34px);
  display:flex; flex-wrap:wrap; gap:20px 28px; align-items:center; justify-content:space-between;
}
.pricebox b{display:block; font-size:1.1rem; margin-bottom:6px}
.pricebox p{font-size:.95rem; color:var(--ink-70); max-width:62ch}
.pricebox .btn{flex:none}
@media (max-width:640px){.pricebox .btn{width:100%}}

/* ---------- banda del alineador ---------- */
.sec--tight{padding-block:clamp(36px,5vw,64px)}
.alig{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,52px); align-items:center}
.alig__txt h2{margin:10px 0 12px}
.alig__txt p{color:var(--ink-70); font-size:.97rem; max-width:44ch}
.alig__pics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.alig__pics img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-lg)}
@media (max-width:820px){
  .alig{grid-template-columns:1fr}
  .alig__pics{gap:10px}
}

/* ---------- fotos en los 3 pasos ---------- */
.step{display:flex; flex-direction:column; padding:0; overflow:hidden}
.step__img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.step::before{margin:24px 26px 14px}
.step b{padding:0 26px}
.step p{padding:0 26px 28px}