:root{--paper:#F4F7FB;--surface:#EEF3FA;--navy:#0B1F3A;--ink:#0B1F3A;--soft:#46597A;--sky:#8EC5FF;--blue:#1F5FD6;--cta:#0B1F3A;--cta-h:#1F5FD6;--line:rgba(11,31,58,.14);
--f-d:"Fraunces",Georgia,serif;--f-t:"Instrument Sans",system-ui,sans-serif;--g:clamp(1.25rem,4vw,3rem);--max:1180px;--sec:clamp(4rem,10vw,7.5rem);--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(1rem,.95rem + .25vw,1.15rem)/1.6 var(--f-t);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}ul,ol{padding:0;list-style:none}img,video{display:block;max-width:100%;height:auto}
a{color:inherit}em{font-style:italic;color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.75rem 1rem;z-index:100}.skip:focus{left:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
h1,h2{font-family:var(--f-d);font-weight:400;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:clamp(1.5rem,4vw,2.5rem)}
h3{font:400 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--f-d)}
/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.75rem var(--g);background:transparent;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.top.solid{background:#fff;border-color:var(--line)}.top:not(.solid) .brand{color:#fff}.top:not(.solid) .brand span{color:var(--sky)}
.brand{font:400 1.6rem var(--f-d);text-decoration:none}.brand span{color:var(--blue)}
/* botones: el color coral SOLO se usa en CTAs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 1.6rem;background:var(--cta);color:#fff;border:0;border-radius:999px;font:600 1rem var(--f-t);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--cta-h);transform:translateY(-2px)}
.dark .btn,.top:not(.solid) .btn{background:#fff;color:var(--navy)}.dark .btn:hover,.top:not(.solid) .btn:hover{background:var(--sky)}
.dark .bookform .btn{background:var(--navy);color:#fff}.dark .bookform .btn:hover{background:var(--blue)}
.btn--sm{min-height:46px;padding:.55rem 1.1rem;font-size:.9rem}
/* hero */
.hero.dark{margin:0;border-radius:0 0 clamp(24px,4vw,48px) clamp(24px,4vw,48px);min-height:100svh;display:flex;align-items:center;padding:6.5rem 0 7rem}
.hero::before{display:none}
.hero>.hero__video,.hero>.hero__shade{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero>.hero__video{object-fit:cover}
.hero__shade{background:linear-gradient(90deg,rgba(11,31,58,.92) 0%,rgba(11,31,58,.62) 50%,rgba(11,31,58,.12) 100%),linear-gradient(0deg,rgba(11,31,58,.7),transparent 35%)}
.hero__in{width:100%;display:grid;gap:2.5rem;max-width:var(--max);margin-inline:auto;padding-inline:var(--g);align-items:center}
@media(min-width:900px){.hero__in{grid-template-columns:1.25fr .75fr;gap:3rem}}
/* tarjetas flotantes (contenido real del copy) */
.chips{display:none;gap:1rem;align-content:center}
@media(min-width:900px){.chips{display:grid}}
.chips li{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(11,31,58,.55);font-weight:600;max-width:21rem}
.chips li:nth-child(2){margin-left:2.5rem}.chips li:nth-child(3){margin-left:1rem}
.chips svg{width:26px;height:26px;flex:none;color:var(--sky)}
/* indicador de scroll */
@media(max-width:699px){.hero>.cue{display:none}}
.hero>.cue{position:absolute;left:50%;bottom:1.75rem;z-index:2;transform:translateX(-50%);display:grid;justify-items:center;gap:.6rem;font-size:.85rem;letter-spacing:.06em;color:#dbe8fb;text-decoration:none;min-height:44px;padding:.25rem 1rem}
.cue i{width:2px;height:44px;background:linear-gradient(var(--sky),transparent);transform-origin:top}
.eyebrow{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:1rem}
h1{font-size:clamp(2.6rem,5.2vw,4.6rem);margin-bottom:1.25rem}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:34ch;color:var(--soft);margin-bottom:1.75rem}
.cta-block{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.alt{font-weight:600;text-decoration:none;border-bottom:2px solid var(--line);padding-block:.5rem}.alt:hover{border-color:var(--blue)}
.micro{margin-top:1rem;font-size:.9rem;color:var(--soft)}.trust{margin-top:.5rem;font-size:.9rem;font-weight:600}
/* paneles oscuros estilo Cova: bloque redondeado sobre fondo claro */
.dark{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;margin-inline:clamp(.5rem,2vw,1.5rem);border-radius:clamp(20px,3vw,32px)}
.dark>*{position:relative;z-index:1}
.dark .lead,.dark .micro{color:#c9d9f0}.dark .eyebrow{color:#9fc4f0}
.dark .alt{border-color:rgba(255,255,255,.35)}.dark .alt:hover{border-color:var(--sky)}
/* fondo ambiental: patrón de línea (dientes, espejo, cepillo, brillo) que deriva + resplandor que respira. Solo transform/opacity. */
.dark::before,.dark::after{content:"";position:absolute;pointer-events:none;z-index:0}
.dark::before{left:-320px;top:-320px;right:0;bottom:0;background:url(../img/dental-pattern.svg) 0 0/320px 320px;opacity:.09}
.dark::after{inset:-15%;background:radial-gradient(40% 45% at 88% 92%,rgba(31,95,214,.55),transparent 70%),radial-gradient(35% 40% at 8% 4%,rgba(142,197,255,.22),transparent 70%)}
.how::before{opacity:.07}.how::after{background:radial-gradient(40% 45% at 12% 90%,rgba(31,95,214,.5),transparent 70%),radial-gradient(35% 40% at 92% 6%,rgba(142,197,255,.2),transparent 70%)}
/* secciones */
section[aria-labelledby]:not(.hero){padding-block:var(--sec)}
.dark em{color:var(--sky)}
.pain{display:grid;gap:1.75rem;margin-bottom:2.5rem}@media(min-width:800px){.pain{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.pain li{border-top:1px solid var(--line);padding-top:1rem;display:grid;gap:.5rem}
.pain b{font:400 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--f-d)}.pain span{color:var(--soft)}
.cost{max-width:46ch;font:400 clamp(1.25rem,2.4vw,1.8rem)/1.3 var(--f-d)}
.how{background:#0F2D57}
.steps{counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s)}
.steps b{display:block;font:400 1.5rem var(--f-d);margin:.4rem 0}.steps p{color:#d6e4f8}
.svc p{color:var(--soft)}
.proof{background:var(--surface)}
.proof__grid{display:grid;gap:1.5rem;margin-bottom:3rem}@media(min-width:900px){.proof__grid{grid-template-columns:1.3fr 1fr}}
.video video{width:100%;border-radius:16px;background:#000;aspect-ratio:16/9;object-fit:cover}
figcaption,.pend{font-size:.85rem;color:var(--blue);margin-top:.5rem}
.quotes{display:grid;gap:1rem;align-content:start}
blockquote{border:1px dashed var(--blue);border-radius:12px;padding:1.25rem;color:var(--blue);background:#fff}blockquote footer{font-size:.85rem;margin-top:.5rem}
.team{display:grid;gap:1.5rem;margin-bottom:2.5rem;align-items:center}@media(min-width:700px){.team{grid-template-columns:260px 1fr;gap:2.5rem}}
.team img{border-radius:16px;aspect-ratio:2/3;object-fit:cover;width:100%}.team p{color:var(--blue);border:1px dashed var(--blue);padding:1rem;border-radius:12px;margin-top:.75rem}
.fair table{width:100%;border-collapse:collapse}
.fair th,.fair td{text-align:left;padding:1rem .75rem;border-top:1px solid var(--line)}
.fair thead th{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.fair td:last-child{background:var(--surface);font-weight:600}.fair td:nth-child(2){color:var(--soft)}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:400 clamp(1.2rem,2.2vw,1.5rem) var(--f-d);min-height:44px;display:flex;align-items:center}
.faq details p{margin-top:.5rem;max-width:60ch;color:var(--soft)}
.book{margin-bottom:clamp(.5rem,2vw,1rem)}
.book__grid{display:grid;gap:2.5rem;align-items:start}@media(min-width:900px){.book__grid{grid-template-columns:1fr 1fr;gap:4rem}}
.next{display:grid;gap:1rem;counter-reset:n;margin-bottom:2rem}.next li{counter-increment:n;display:flex;gap:1rem;align-items:center;font-size:1.15rem}
.next li::before{content:counter(n);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#fff;color:var(--navy);font-weight:600;flex:none}
.contact{color:#c9d9f0}
.bookform{display:grid;gap:.5rem;background:#fff;color:var(--ink);padding:clamp(1.25rem,3vw,2.25rem);border-radius:18px}
.bookform label{font-weight:600;font-size:.9rem}
.bookform input,.bookform select{font:inherit;min-height:52px;padding:.7rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.bookform .btn{margin-top:.5rem;width:100%}.bookform small{color:var(--soft)}.form__msg{color:#a8321f;min-height:1.2em;font-size:.9rem}
.foot{padding:2rem 0 6rem;font-size:.9rem;color:var(--soft)}.foot .small{margin-top:.25rem}
/* bloques con foto */
.duo{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.duo{grid-template-columns:.8fr 1.2fr;gap:5rem}.duo--rev{grid-template-columns:1.2fr .8fr}.duo--rev>figure{order:2}}
.photo{position:relative;overflow:hidden;border-radius:24px;background:var(--surface);aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.tag{position:absolute;left:1rem;bottom:1rem;right:1rem;width:fit-content;padding:.6rem 1rem;border-radius:999px;background:rgba(11,31,58,.78);color:#fff;font-size:.9rem;font-weight:600}
.cost{margin-top:.5rem;padding-left:1.25rem;border-left:3px solid var(--blue)}
/* servicios como tarjetas */
.svc{display:grid;gap:1rem}@media(min-width:700px){.svc{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc li,.svc li:last-child{display:grid;grid-template-columns:none;gap:.5rem;align-content:start;padding:1.6rem;border:1px solid var(--line);border-radius:20px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s}
.svc li:hover{transform:translateY(-6px);box-shadow:0 18px 40px -22px rgba(11,31,58,.45)}
.ico{width:42px;height:42px;color:var(--blue);margin-bottom:.75rem}
/* pasos como línea de tiempo */
.steps{position:relative;display:grid;gap:2rem;margin-bottom:2.5rem;padding-left:4.25rem}
.steps::before,.steps::after{content:"";position:absolute;left:1.4rem;top:.5rem;bottom:.5rem;width:2px;background:rgba(255,255,255,.2)}
.steps::after{background:var(--sky);transform-origin:top}
.steps li{border:0;padding:0;position:relative}
.steps li::before{position:absolute;left:-4.25rem;top:-.2rem;width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:50%;background:#0F2D57;border:2px solid var(--sky);font:400 1.15rem var(--f-d);color:#fff;z-index:1}
/* barra móvil */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.bar.show{transform:none}.bar .btn{flex:1}
.bar__call{display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:52px;border:2px solid var(--navy);border-radius:999px;font-weight:600;text-decoration:none}
@media(max-width:799px){.bar{display:flex}}
/* motion: solo opacity+transform, sin librerías */
@media(prefers-reduced-motion:no-preference){
  .rv{display:inline-block;animation:up .9s var(--ease) both}.rv:nth-child(2){animation-delay:.12s}
  .hero__copy>:not(h1),.hero__img{animation:fade .9s .25s var(--ease) both}
  .js .fx{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js .fx.in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:no-preference){
  .dark::before{animation:drift 80s linear infinite;will-change:transform}
  .dark::after{animation:glow 16s ease-in-out infinite alternate;will-change:transform}
  .how::before{animation-direction:reverse;animation-duration:100s}
  .book::after{animation-duration:20s}
}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes px{from{transform:translateY(-7%) scale(1.14)}to{transform:translateY(7%) scale(1.14)}}
@keyframes line{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes out{to{opacity:0;transform:translateY(-60px)}}
@media(prefers-reduced-motion:no-preference){
  .cue i{animation:cue 2.2s ease-in-out infinite}
  .chips li{animation:bob 6s ease-in-out infinite}.chips li:nth-child(2){animation-delay:-2s}.chips li:nth-child(3){animation-delay:-4s}
}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){
  .px img{animation:px linear both;animation-timeline:view()}
  .steps::after{animation:line linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
  .hero__in{animation:out linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
}}
@keyframes drift{to{transform:translate3d(320px,320px,0)}}
@keyframes glow{to{transform:translate3d(-4%,-3%,0) scale(1.08)}}
@keyframes up{from{opacity:0;transform:translateY(40px)}}@keyframes fade{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.bookform small a,.foot a{display:inline-block;padding:.8rem .25rem}