/* =====================================================================
   Nácar Clínica Dental · Prediseño de home
   Blancos perlados, tinta verde azulado y aguamarina. El brillo
   iridiscente del nácar (lila, rosa y aguamarina muy suaves) solo en
   detalles: la perla del logotipo, el halo del hero, los marcadores de
   pasos, el tirador del comparador y la tarjeta de financiación.
   Una sola familia: Plus Jakarta Sans, del 300 al 800.
   ===================================================================== */
:root{
  --perla:#F7F6F3; --white:#FFFFFF;
  --tinta:#0D3B3E; --tinta-2:#082C2E; --tinta-3:#165055;
  --aqua:#6CC6BE; --aqua-2:#8AD5CE; --aqua-d:#21756E;
  --bruma:#E6F2F0; --bruma-2:#D5E9E6;
  --text:#17302F; --muted:#4E6564; --soft:#6E8382;
  --line:rgba(13,59,62,.11); --line-2:rgba(13,59,62,.18); --line-l:rgba(255,255,255,.14);
  --iri-1:#EADFF3; --iri-2:#DDF3EF; --iri-3:#F3E6EF; --iri-4:#E1ECF7;
  --iri:linear-gradient(125deg, var(--iri-1) 0%, #E9E9F6 45%, var(--iri-2) 100%);
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pad:clamp(16px,4vw,56px); --max:1320px;
  --r-xl:36px; --r-l:26px; --r-m:18px; --r-s:12px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --shadow:0 30px 60px -32px rgba(13,59,62,.32);
  --sr-accent:#6CC6BE; --sr-font:'Plus Jakarta Sans', system-ui, sans-serif;
  --sr-bg:rgba(8,44,46,.97); --sr-radius:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--text); font-family:var(--font); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.025em; color:var(--tinta)}
h1,h2,h3{text-wrap:balance}
p,figure,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
fieldset{margin:0; padding:0; border:0; min-width:0}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
svg.g{fill:initial; stroke:none}
.stars{color:#F2B01E; letter-spacing:1.5px; line-height:1}
:focus-visible{outline:2px solid var(--aqua-d); outline-offset:3px}

/* ---------- Cursor perla ---------- */
html.cursor-nacar{
  --nacar-pearl:radial-gradient(circle at 34% 30%, #fff 0 30%, #F2EAF8 58%, #C9ECE6 100%);
  --nacar-deep:radial-gradient(circle at 34% 30%, #5FB3AC 0 18%, #1B6A69 55%, #0D3B3E 100%);
  --cur-dot:9px; --cur-dot-bg:var(--nacar-deep); --cur-dark-dot:var(--nacar-deep); --cur-light-dot:var(--nacar-pearl);
  --cur-ring:40px; --cur-ring-border:0px solid transparent; --cur-dark-ring:0px solid transparent; --cur-light-ring:0px solid transparent;
  --cur-ring-bg:transparent; --cur-link-scale:1.5; --cur-link-bg:rgba(108,198,190,.12); --cur-link-dot:.6;
  --cur-label-size:90px; --cur-label-bg:linear-gradient(140deg, #fff 0%, #EFE6F7 42%, #D6F1EC 100%); --cur-label-fg:#0D3B3E;
  --cur-label-font:'Plus Jakarta Sans', system-ui, sans-serif; --cur-lerp:.15}
.cursor-nacar .cur-dot::before{box-shadow:0 0 0 1.5px rgba(255,255,255,.85), 0 2px 8px rgba(13,59,62,.35)}
html.has-cur.cursor-nacar.cur-light .cur-dot::before{box-shadow:0 0 0 1px rgba(13,59,62,.4), 0 2px 10px rgba(0,0,0,.35)}
html.has-cur.cursor-nacar.cur-light .cur-ring::after{background:conic-gradient(from 0deg, #8FE0D8, #C2B4F2, #F4C1DC, #F6DDB0, #8FE0D8)}
.cursor-nacar .cur-ring::after{content:""; position:absolute; left:0; top:0; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  background:conic-gradient(from 0deg, #2FA79C, #7E68CC, #D877AC, #DDAE62, #2FA79C);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.8px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.4px), #000 calc(100% - 1.8px));
  animation:curSpin 7s linear infinite; transition:scale .45s cubic-bezier(.2,.8,.2,1), opacity .3s}
@keyframes curSpin{to{rotate:360deg}}
html.has-cur.cursor-nacar.cur-link .cur-ring::after{scale:1.5}
html.has-cur.cursor-nacar.cur-down .cur-ring::after{scale:.82}
html.has-cur.cursor-nacar.cur-text .cur-ring::after{opacity:0; scale:.6}
.cursor-nacar .cur-label{white-space:normal; padding:0 6px; line-height:1.2; font-size:13px; font-weight:700; letter-spacing:-.005em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 16px 34px -12px rgba(13,59,62,.5)}

/* ---------- Botones ---------- */
.btn{position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; min-height:50px; padding:0 24px; border-radius:999px; border:0; cursor:pointer; font:600 15px/1 var(--font); letter-spacing:0; transition:background .3s, color .3s, box-shadow .3s, transform .3s var(--ease)}
.btn .ic{width:18px; height:18px}
.btn-lg{min-height:58px; padding:0 30px; font-size:16px}
.btn-sm{min-height:44px; padding:0 20px; font-size:14.5px}
.btn-full{width:100%}
.btn-dark{background:var(--tinta); color:#fff}
.btn-dark::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg, transparent 25%, rgba(234,223,243,.35) 42%, rgba(221,243,239,.45) 55%, transparent 72%); transform:translateX(-110%); transition:transform .9s var(--ease)}
.btn-dark:hover{background:var(--tinta-3); box-shadow:0 14px 30px -14px rgba(13,59,62,.6)}
.btn-dark:hover::after{transform:translateX(110%)}
.btn-aqua{background:var(--aqua); color:var(--tinta-2)}
.btn-aqua:hover{background:var(--aqua-2)}
.btn-ghost{background:transparent; color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost:hover{background:#fff; box-shadow:inset 0 0 0 1.5px var(--tinta)}
.link{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--tinta); border-bottom:1.5px solid var(--aqua); padding-bottom:3px; transition:gap .3s var(--ease)}
.link:hover{gap:12px}
.link .ic{width:16px; height:16px}

/* ---------- Barra de anuncio ---------- */
.topbar{background:var(--tinta); color:rgba(255,255,255,.86); font-size:13.5px}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px}
.topbar p{display:flex; align-items:center; gap:10px; font-weight:500}
.topbar p .ic{width:16px; height:16px; color:var(--aqua)}
.tb-short{display:none}
.topbar ul{display:flex; align-items:center; gap:24px}
.topbar a{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#fff; transition:color .2s}
.topbar a:hover{color:var(--aqua)}
.topbar a .ic{width:16px; height:16px; color:var(--aqua)}
@media (max-width:760px){
  .topbar ul{display:none}
  .topbar-in{justify-content:center; min-height:38px}
  .topbar p{font-size:13px}
  .tb-long{display:none} .tb-short{display:inline}
}

/* ---------- Cabecera ---------- */
.hd{position:sticky; top:0; z-index:90; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.hd.is-scrolled{box-shadow:0 12px 30px -22px rgba(13,59,62,.4)}
.hd-in{display:flex; align-items:center; gap:28px; height:82px; transition:height .3s var(--ease)}
.hd.is-scrolled .hd-in{height:70px}

.logo{display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; color:var(--tinta)}
.pearl{position:relative; width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 14%, rgba(255,255,255,.0) 42%),
    conic-gradient(from 210deg, var(--iri-1), var(--iri-2), #F6F1EA, var(--iri-4), var(--iri-3), var(--iri-1));
  box-shadow:inset -4px -5px 9px rgba(13,59,62,.2), inset 3px 3px 6px rgba(255,255,255,.9), 0 3px 8px -2px rgba(13,59,62,.25)}
.pearl::after{content:""; position:absolute; left:22%; top:16%; width:28%; height:18%; border-radius:50%; background:rgba(255,255,255,.9); filter:blur(1.5px); transform:rotate(-30deg)}
.logo-txt{display:flex; flex-direction:column; line-height:1}
.logo-txt b{font-size:29px; font-weight:700; letter-spacing:-.055em; line-height:.9}
.logo-txt small{font-size:11.5px; font-weight:500; letter-spacing:.02em; color:var(--soft); margin-top:5px}

.nav{margin-left:auto; align-self:stretch}
.nav > ul{display:flex; align-items:stretch; height:100%; gap:2px}
.nav > ul > li{display:flex; align-items:center}
.nav > ul > li > a{display:flex; align-items:center; gap:6px; white-space:nowrap; padding:10px 15px; border-radius:999px; font-size:15px; font-weight:500; color:var(--text); transition:background .25s, color .25s}
.nav > ul > li:hover > a, .nav > ul > li:focus-within > a{background:var(--bruma); color:var(--tinta)}
.nav .chev{width:15px; height:15px; stroke-width:2; transition:transform .3s var(--ease)}
.has-mega:hover .chev, .has-mega:focus-within .chev{transform:rotate(180deg)}

/* Megamenú */
.mega{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--line); box-shadow:0 40px 70px -40px rgba(13,59,62,.45); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .25s, transform .35s var(--ease), visibility 0s .35s}
.has-mega:hover .mega, .has-mega:focus-within .mega{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .35s var(--ease)}
.mega-in{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:36px; padding-top:30px; padding-bottom:34px}
.mega-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 10px; align-content:start}
.mt{display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:var(--r-m); transition:background .25s}
.mt-ico{display:grid; place-items:center; flex:0 0 auto; width:50px; height:50px; border-radius:15px; background:var(--bruma); color:var(--tinta); transition:background .35s}
.mt-ico svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.mt-txt{display:flex; flex-direction:column; flex:1 1 auto; align-self:stretch; min-width:0; padding-top:2px}
.mt-txt b{font-size:15.5px; font-weight:700; color:var(--tinta); letter-spacing:-.01em}
.mt-txt span{font-size:14px; color:var(--muted); line-height:1.45; margin-top:3px}
.mt-txt em{font-style:normal; font-size:13.5px; font-weight:600; color:var(--aqua-d); margin-top:auto; padding-top:8px}
.mt:hover{background:var(--perla)}
.mt:hover .mt-ico{background:var(--iri)}
.mega-note{grid-column:1 / -1; margin:10px 14px 0; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
.mega-note a{font-weight:600; color:var(--tinta); border-bottom:1.5px solid var(--aqua); margin-left:6px}
.mega-fin{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; padding:28px; border-radius:var(--r-l); background:var(--iri)}
.mega-fin::before{content:""; position:absolute; right:-60px; top:-60px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.85), transparent 70%)}
.mf-ico{position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--tinta)}
.mf-title{position:relative; margin-top:18px; font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-.02em; color:var(--tinta)}
.mf-text{position:relative; margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.5}
.mf-ex{position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:12px; width:100%; margin:18px 0 20px; padding:12px 16px; border-radius:var(--r-s); background:rgba(255,255,255,.7); font-size:13.5px; color:var(--muted)}
.mf-ex b{font-size:18px; color:var(--tinta)}
.mf-ex span,.mf-ex b{white-space:nowrap}
.mf-ex{flex-wrap:wrap}

.hd-actions{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.hd-sr .sr-trigger{font-size:14px; font-weight:600; color:var(--tinta); --sr-dot-ring:#fff; padding:.66em 1.05em .66em .9em}
.hd-cta{min-height:48px; padding:0 26px}
.burger{display:none; width:48px; height:48px; border:0; border-radius:50%; background:var(--bruma); cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto}
.burger span{position:relative; width:18px; height:2px; border-radius:2px; background:var(--tinta); transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:var(--tinta); transition:transform .35s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1400px){
  .hd-in{gap:20px}
  .logo-txt small{display:none}
  .nav > ul > li > a{padding:10px 12px; font-size:14.5px}
  .mega-in{grid-template-columns:minmax(0,1fr) 290px; gap:24px}
  .mt{padding:12px; gap:12px}
  .mega-fin{padding:24px}
  .mf-ex{padding:12px 14px; gap:8px}
  .mf-ex b{font-size:17px}
}
@media (max-width:1300px){
  .hd-in{gap:16px}
  .nav > ul > li > a{padding:10px 10px}
}
@media (max-width:1199px){
  .nav,.hd-sr{display:none}
  .burger{display:inline-flex}
  .hd-actions{margin-left:auto}
  .logo-txt small{display:block}
}
@media (max-width:560px){
  .hd-in{height:70px; gap:12px}
  .hd.is-scrolled .hd-in{height:64px}
  .logo{gap:10px}
  .pearl{width:30px; height:30px}
  .logo-txt b{font-size:26px}
  .logo-txt small{font-size:10.5px}
  .hd-cta{min-height:44px; padding:0 18px; font-size:14px}
  .burger{width:44px; height:44px}
}
@media (max-width:360px){ .logo-txt small{display:none} }

/* ---------- Menú móvil ---------- */
.mmenu{position:fixed; inset:0; z-index:85; background:var(--perla); color:var(--text); padding-top:96px; overflow:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .35s, transform .45s var(--ease), visibility 0s .45s}
.menu-open .mmenu{opacity:1; visibility:visible; transform:none; transition:opacity .35s, transform .45s var(--ease)}
.menu-open body{overflow:hidden}
.menu-open .hd{position:fixed; top:0; left:0; right:0; box-shadow:none}
.mmenu-in{width:100%; max-width:640px; margin:0 auto; padding:8px var(--pad) 48px}
.macc{border-bottom:1px solid var(--line)}
.macc > button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; padding:17px 0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--tinta); cursor:pointer}
.macc > button:focus-visible{outline:2px solid var(--aqua-d); outline-offset:2px}
.macc > button .ic{width:22px; height:22px; transition:transform .35s var(--ease)}
.macc.is-open > button .ic{transform:rotate(180deg)}
.macc-panel{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.macc-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 0 18px}
.macc-list a{display:flex; align-items:center; gap:9px; min-width:0; padding:9px; border-radius:var(--r-m); background:#fff; font-size:14px; font-weight:600; color:var(--tinta); line-height:1.25; hyphens:auto; overflow-wrap:anywhere}
.macc-list .mt-ico{width:34px; height:34px; border-radius:10px}
@media (max-width:374px){ .macc-list{grid-template-columns:minmax(0,1fr)} }
.macc-list .mt-ico svg{width:22px; height:22px}
.mlink{display:block; padding:17px 0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--tinta); border-bottom:1px solid var(--line)}
.mfin{display:flex; align-items:center; gap:14px; margin:24px 0 14px; padding:16px 18px; border-radius:var(--r-m); background:var(--iri); color:var(--tinta)}
.mfin .ic{width:22px; height:22px}
.mfin span{display:flex; flex-direction:column; font-size:13.5px; color:var(--muted); line-height:1.4}
.mfin b{font-size:15.5px; color:var(--tinta)}
.mrow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.mhours{margin-top:16px; text-align:center; font-size:13.5px; color:var(--muted)}
.mmenu .srm{--srm-line:var(--line)}

/* ---------- Encabezados de sección ---------- */
.head{margin-bottom:clamp(40px,5vw,64px)}
.head h2{font-size:clamp(32px,3.6vw,52px); line-height:1.08; letter-spacing:-.03em}
.head p{font-size:17.5px; color:var(--muted); max-width:52ch}
.head-split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px 64px; align-items:end}
.head-split h2{max-width:20ch}
.head-center{text-align:center; display:flex; flex-direction:column; align-items:center}
.head-center p{margin-top:16px}
.head-aside{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
@media (max-width:880px){ .head-split{grid-template-columns:1fr; gap:16px} }

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--perla); overflow:hidden}
.hero::before{content:""; position:absolute; inset:auto 0 0; height:160px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff)}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5.5vw,88px); align-items:center; padding-top:clamp(40px,4.5vw,68px); padding-bottom:clamp(96px,9vw,128px)}
.hero-loc{display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--line); font-size:13.5px; font-weight:600; color:var(--tinta)}
.hero-loc span{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--iri)}
.hero-loc .ic{width:15px; height:15px}
.hero h1{margin-top:26px; font-size:clamp(42px,4.3vw,66px); line-height:1.03; letter-spacing:-.03em; font-weight:700; max-width:15ch}
.hero-sub{margin-top:24px; font-size:clamp(17px,1.35vw,19.5px); line-height:1.6; color:var(--muted); max-width:35em}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero-note{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px}
.hero-note li{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--muted)}
.hero-note .ic{width:20px; height:20px; padding:3px; border-radius:50%; background:var(--bruma); color:var(--aqua-d); stroke-width:2.6}

.hero-copy{position:relative; z-index:2}
.hero-media{position:relative; z-index:1}
.hero-media::before{content:""; position:absolute; z-index:0; left:-14%; right:-18%; top:50%; aspect-ratio:1; translate:0 -50%; border-radius:50%;
  background:conic-gradient(from 0deg, #E4D5F1, #D2EEE9, #F0DFEA, #DCE7F6, #D6F1EB, #E4D5F1);
  filter:blur(64px); opacity:0; animation:haloIn 2.6s ease .5s forwards, halo 32s linear infinite}
@keyframes halo{to{rotate:360deg}}
@keyframes haloIn{to{opacity:1}}
.hero.is-off .hero-media::before,.hero.is-off .fc{animation-play-state:paused}
.hero-img{--hero-pos:50% 32%; position:relative; z-index:1; width:100%; aspect-ratio:1/1.02; max-height:calc(100vh - 200px); min-height:420px; border-radius:var(--r-xl); overflow:hidden; background:var(--bruma); box-shadow:0 50px 90px -50px rgba(13,59,62,.55);
  animation:heroClip 1.3s var(--ease) both}
.hero-par{position:absolute; left:0; right:0; top:-5%; bottom:-5%}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos); animation:heroImg 2s var(--ease) both}
@keyframes heroClip{from{clip-path:inset(7% 7% 7% 7% round var(--r-xl)); opacity:0}to{clip-path:inset(0 round var(--r-xl)); opacity:1}}
@keyframes heroImg{from{transform:scale(1.1)}to{transform:none}}

.fc{position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border-radius:var(--r-m);
  background:linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.7)) padding-box, linear-gradient(135deg, #fff, var(--iri-1) 45%, var(--iri-2)) border-box;
  border:1px solid transparent; -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 24px 44px -22px rgba(13,59,62,.45);
  transition:opacity .9s var(--ease), transform 1s cubic-bezier(.2,1.2,.3,1)}
html.js .fc:not(.is-in){opacity:0; transform:translateY(22px) scale(.92)}
.fc.is-in{animation:fcFloat 7s ease-in-out 1.2s infinite alternate}
.fc-1{top:3%; left:-48px}
.fc-2{top:47%; right:-30px}
@media (min-width:1400px){ .fc-2{right:-56px} }
@media (min-width:1500px){ .fc-2{right:-88px} }
.fc-3{bottom:8%; left:-30px}
.fc-2.is-in{animation-delay:2s} .fc-3.is-in{animation-delay:1.6s}
@keyframes fcFloat{from{translate:0 0}to{translate:0 -8px}}
.fc-av{display:flex; align-items:center; margin-left:4px; padding-left:14px; border-left:1px solid var(--line)}
.fc-av img,.fc-av i{width:30px; height:30px; border-radius:50%; border:2px solid #fff; margin-left:-9px; object-fit:cover; background:var(--bruma)}
.fc-av img:first-child{margin-left:0}
.fc-av i{display:grid; place-items:center; width:auto; padding:0 7px; border-radius:99px; font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--tinta)}
html.js .fc-av > *{opacity:0; transform:scale(.5); transition:opacity .4s, transform .6s cubic-bezier(.2,1.4,.4,1)}
html.js .fc-1.is-in .fc-av > *{opacity:1; transform:none}
.fc-av > :nth-child(1){transition-delay:.55s} .fc-av > :nth-child(2){transition-delay:.7s} .fc-av > :nth-child(3){transition-delay:.85s}
.fc-ico{display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border-radius:13px; background:var(--tinta); color:var(--aqua)}
.fc-ico .ic{width:22px; height:22px}
.fc-ico.fc-g{background:#fff; box-shadow:0 0 0 1px var(--line)}
.fc-g svg{width:24px; height:24px}
.fc-txt{display:flex; flex-direction:column; line-height:1.2; white-space:nowrap}
.fc-txt b{font-size:16px; font-weight:700; color:var(--tinta); letter-spacing:-.01em}
.fc-txt small{font-size:13px; color:var(--muted); margin-top:2px}
.fc-txt .stars{font-size:12.5px; margin-top:4px}
.fc-3 .fc-txt small{margin:0 0 2px}
.fc-3 .fc-txt b{font-size:19px}

/* Entrada del texto del hero */
.hero-copy > *{animation:rise .9s var(--ease) both}
.hero-copy > h1{animation:none}
.hero-copy > :nth-child(3){animation-delay:.6s}
.hero-copy > :nth-child(4){animation-delay:.75s}
.hero-copy > :nth-child(5){animation-delay:.9s}
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

@media (max-width:1240px){
  .fc-1{left:-24px} .fc-3{left:-16px} .fc-2{right:-16px}
}
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr; gap:48px; padding-bottom:110px}
  .hero h1{max-width:14ch}
  .hero-media{max-width:640px; width:100%; margin:0 auto}
  .hero-img{max-height:none; min-height:0; aspect-ratio:4/3.4}
  .fc-1{left:-12px} .fc-3{left:-12px} .fc-2{right:-12px}
}
@media (max-width:640px){
  .hero-in{padding-top:28px; gap:40px; padding-bottom:96px}
  .hero h1{margin-top:20px; font-size:clamp(36px,10.4vw,46px); letter-spacing:-.03em}
  .hero-sub{margin-top:18px; font-size:16.5px}
  .hero-cta{margin-top:28px}
  .hero-cta .btn{width:100%}
  .hero-img{aspect-ratio:1/1.05; border-radius:28px}
  .hero-note{margin-top:18px; flex-direction:column; gap:8px}
  .fc-av{padding-left:10px}
  .fc-av img{width:26px; height:26px}
  .fc-av i{height:26px; padding:0 6px; font-size:10.5px}
  .fc{padding:9px 14px 9px 9px; gap:10px; border-radius:15px}
  .fc-ico{width:38px; height:38px; border-radius:11px}
  .fc-ico .ic{width:19px; height:19px}
  .fc-g svg{width:20px; height:20px}
  .fc-txt b{font-size:14.5px}
  .fc-txt small{font-size:12px}
  .fc-3 .fc-txt b{font-size:16px}
  .fc-1{top:14px; left:12px}
  .fc-2{top:auto; bottom:84px; right:12px}
  .fc-3{bottom:14px; left:12px}
}

/* ---------- Fila de confianza ---------- */
.trust{position:relative; z-index:3; margin-top:calc(-1 * clamp(56px,6vw,72px))}
.trust-in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:22px 8px; border-radius:var(--r-l); background:#fff; box-shadow:var(--shadow), 0 0 0 1px rgba(13,59,62,.05)}
.trust-in li{display:flex; align-items:flex-start; gap:14px; padding:6px 22px; border-left:1px solid var(--line)}
.trust-in li:first-child{border-left:0}
.t-ico{display:grid; place-items:center; flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--iri); color:var(--tinta)}
.t-ico .ic{width:22px; height:22px}
.trust-in p{display:flex; flex-direction:column; line-height:1.3; min-width:0; padding-top:2px}
.trust-in b{font-size:15.5px; font-weight:700; color:var(--tinta); letter-spacing:-.01em}
.trust-in span{font-size:14px; color:var(--muted); margin-top:3px}
@media (max-width:1100px){
  .trust-in{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:10px; padding:18px 8px}
  .trust-in li:nth-child(3){border-left:0}
}
@media (max-width:560px){
  .trust-in{grid-template-columns:1fr; padding:8px 18px}
  .trust-in li{border-left:0; padding:14px 0; border-top:1px solid var(--line)}
  .trust-in li:first-child{border-top:0}
}

/* ---------- Tratamientos ---------- */
.treat{padding:clamp(80px,9vw,128px) 0}
/* Rejilla: las tarjetas de ortodoncia y carillas comparten filas (subgrid) para que
   icono, título, texto y precio queden a la misma altura. Sin row-gap: la separación
   vertical entre filas de tarjetas se da con margin-top. */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:18px; row-gap:0;
  grid-template-rows:auto auto 1fr auto auto auto;
  grid-template-areas:
    "feat feat orto car"
    "feat feat orto car"
    "feat feat orto car"
    "feat feat orto car"
    "feat feat blan blan"
    "kid kid per per"}
.tc{position:relative; display:flex; flex-direction:column; min-width:0; border-radius:var(--r-l); background:var(--perla); padding:28px; transition:background .35s, box-shadow .35s, transform .45s var(--ease)}
.tc:hover{background:#fff; box-shadow:0 0 0 1px var(--line), 0 30px 50px -36px rgba(13,59,62,.5); transform:translateY(-3px)}
.tc h3{font-size:21px; line-height:1.2; letter-spacing:-.02em}
.tc-desc{display:block; margin-top:10px; font-size:16px; line-height:1.6; color:var(--muted)}
.tc-ico{display:grid; place-items:center; width:56px; height:56px; border-radius:17px; background:#fff; color:var(--tinta); margin-bottom:22px; box-shadow:0 0 0 1px var(--line); transition:background .35s}
.tc-ico svg{width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.tc:hover .tc-ico{background:var(--iri)}
.tc-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:auto; padding-top:26px}
.price{display:flex; flex-direction:column; gap:7px; line-height:1}
.price small{font-size:13.5px; font-weight:500; color:var(--muted)}
.price b{font-size:28px; font-weight:700; letter-spacing:-.03em; color:var(--tinta); white-space:nowrap}
.go{display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--tinta); box-shadow:0 0 0 1px var(--line); transition:background .3s, color .3s}
.tc:hover .go{background:var(--tinta); color:#fff}
.more{display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto; min-height:46px; padding:0 20px; border-radius:999px; font-size:15px; font-weight:600; white-space:nowrap; transition:gap .3s var(--ease)}
.more .ic{width:16px; height:16px}
.tc:hover .more{gap:12px}

.tc-sub{display:grid; grid-template-rows:subgrid; row-gap:0}
/* Entrada escalonada de las tarjetas e iconos que se dibujan */
html.js .bento[data-reveal]{opacity:1; transform:none}
html.js .bento[data-reveal]:not(.is-in) .tc{opacity:0}
.bento.is-in .tc{animation:tcIn .9s var(--ease) both; animation-delay:calc(var(--i,0) * 90ms)}
@keyframes tcIn{from{opacity:0; translate:0 26px}to{opacity:1; translate:0 0}}
.tc-ico svg{stroke-dasharray:1 2}
html.js .bento[data-reveal] .tc-ico svg{stroke-dashoffset:1.02; transition:stroke-dashoffset 1.8s cubic-bezier(.6,.1,.2,1); transition-delay:calc(var(--i,0) * 90ms + 380ms)}
html.js .bento.is-in .tc-ico svg{stroke-dashoffset:0}
/* Brillo nacarado que sigue al ratón */
.tc:not(.tc-feat)::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,30%), rgba(236,224,246,.95), rgba(214,241,236,.7) 40%, rgba(255,255,255,0) 72%)}
.tc:not(.tc-feat):hover::after{opacity:1}
.tc:not(.tc-feat) > *{position:relative; z-index:1}
.tc-sub .tc-desc{align-self:start}
.tc-sub .tc-foot{align-self:end}
.tc-orto{grid-area:orto} .tc-car{grid-area:car}

.tc-feat{grid-area:feat; padding:0; overflow:hidden; background:var(--tinta); color:#fff}
.tc-feat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; transition:transform 1.2s var(--ease)}
.tc-feat::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,44,46,.1) 0%, rgba(8,44,46,0) 26%, rgba(8,44,46,.6) 56%, rgba(8,44,46,.95) 100%)}
.tc-feat:hover{background:var(--tinta); box-shadow:0 40px 70px -40px rgba(13,59,62,.7)}
.tc-feat:hover img{transform:scale(1.04)}
.tc-feat-in{position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:28px}
.badge{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:13px; font-weight:600; line-height:1.2; color:var(--tinta)}
.badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--aqua)}
.tc-feat h3{color:#fff; font-size:clamp(28px,2.6vw,36px); letter-spacing:-.03em}
.tc-feat .tc-desc{color:rgba(255,255,255,.88); max-width:44ch}
.tc-feat .tc-foot{margin-top:24px; border-top:1px solid var(--line-l)}
.tc-feat .price small{color:rgba(255,255,255,.75)}
.tc-feat .price b{color:#fff; font-size:34px}
.tc-feat .more{background:var(--aqua); color:var(--tinta-2)}

.tc-blan{grid-area:blan; margin-top:18px; background:var(--iri); overflow:hidden}
.tc-blan::before{content:""; position:absolute; right:-80px; top:-90px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); pointer-events:none}
.tc-blan > *{position:relative}
.tc-blan:hover{background:var(--iri)}
.tc-blan .tc-ico{background:rgba(255,255,255,.75); box-shadow:none}
.tc-blan .tc-desc{max-width:56ch}
.tc-blan .price b{font-size:34px}
.tc-blan .more{background:var(--tinta); color:#fff}

.tc-row{flex-direction:row; align-items:flex-start; gap:20px; margin-top:18px}
.tc-kid{grid-area:kid} .tc-per{grid-area:per}
.tc-row .tc-ico{margin:0; flex:0 0 auto}
.tc-row-copy{flex:1 1 auto; min-width:0}
.tc-row-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; min-height:32px}
.tc-row .tc-desc{margin-top:8px}
.tag{flex:0 0 auto; padding:8px 14px; border-radius:999px; background:var(--bruma); font-size:13px; font-weight:600; line-height:1.2; color:var(--tinta); white-space:nowrap}

@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto auto 1fr auto auto auto auto;
    grid-template-areas:"feat feat" "orto car" "orto car" "orto car" "orto car" "blan blan" "kid kid" "per per"}
  .tc-feat{min-height:480px; margin-bottom:18px}
}
@media (max-width:640px){
  .bento{display:flex; flex-direction:column; gap:14px}
  .tc{padding:24px}
  .tc-sub{display:flex; flex-direction:column}
  .tc-sub .tc-desc,.tc-sub .tc-foot{align-self:stretch}
  .tc-feat,.tc-blan,.tc-row{margin:0}
  .tc-feat{min-height:520px; padding:0}
  .tc-feat-in{padding:24px}
  .tc-feat .tc-foot{flex-wrap:wrap}
  .tc-desc{font-size:15px}
  .tc-row{flex-direction:column; gap:0}
  .tc-row .tc-ico{margin-bottom:22px}
  .tc-row-head{flex-direction:column; align-items:flex-start; gap:10px}
}
@media (max-width:380px){
  .tc-foot{flex-wrap:wrap}
}

/* ---------- Antes y después ---------- */
.ba-sec{position:relative; overflow:hidden; background:var(--tinta); color:#fff; padding:clamp(80px,9vw,128px) 0 clamp(64px,7vw,104px)}
.ba-sec::before{content:""; position:absolute; right:-220px; top:-260px; width:720px; height:720px; border-radius:50%; background:radial-gradient(circle, rgba(108,198,190,.22), rgba(108,198,190,0) 65%); pointer-events:none}
.ba-in{position:relative; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(40px,6vw,96px); align-items:center}
.ba-copy h2{color:#fff; font-size:clamp(32px,3.6vw,52px); line-height:1.08; letter-spacing:-.03em; max-width:13ch}
.ba-copy > p{margin-top:20px; color:rgba(255,255,255,.76); font-size:17.5px; max-width:44ch}
.ba-list{display:grid; gap:12px; margin:28px 0 36px}
.ba-list li{display:flex; align-items:flex-start; gap:12px; font-size:16px; color:rgba(255,255,255,.92)}
.ba-list .ic{width:22px; height:22px; padding:3px; border-radius:50%; background:rgba(108,198,190,.18); color:var(--aqua); stroke-width:2.4; margin-top:1px}

.ba-fig figcaption{margin-top:14px; font-size:13px; color:rgba(255,255,255,.55)}
.ba{--ba:50%; position:relative; aspect-ratio:16/11; border-radius:var(--r-xl); overflow:hidden; background:var(--tinta-3); box-shadow:0 50px 90px -50px rgba(0,0,0,.7); user-select:none; touch-action:pan-y}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; pointer-events:none}
.ba-before{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--ba)) 0 0)}
.ba-before img{filter:sepia(.55) saturate(.62) brightness(.86) contrast(.94)}
.ba-label{position:absolute; top:18px; z-index:2; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--tinta); pointer-events:none}
.ba-l1{left:18px} .ba-l2{right:18px}
.ba input{position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none}
.ba-handle{position:absolute; z-index:3; top:0; bottom:0; left:var(--ba); width:2px; margin-left:-1px; background:rgba(255,255,255,.92); box-shadow:0 0 18px rgba(0,0,0,.25); pointer-events:none}
.ba-knob{position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; color:var(--tinta);
  background:radial-gradient(circle at 34% 28%, #fff 0 16%, rgba(255,255,255,0) 46%), conic-gradient(from 210deg, var(--iri-1), var(--iri-2), #F6F1EA, var(--iri-4), var(--iri-3), var(--iri-1));
  box-shadow:inset -4px -5px 10px rgba(13,59,62,.18), inset 3px 3px 6px rgba(255,255,255,.9), 0 10px 26px -6px rgba(0,0,0,.4); transition:transform .3s var(--ease)}
.ba-knob .ic{width:22px; height:22px; stroke-width:2.2}
.ba:hover .ba-knob{transform:translate(-50%,-50%) scale(1.06)}
.ba input:focus-visible ~ .ba-handle .ba-knob{outline:3px solid var(--aqua); outline-offset:4px}
.ba-knob::after{content:""; position:absolute; inset:-1px; border-radius:50%; box-shadow:0 0 0 0 rgba(255,255,255,.55); opacity:0}
.ba.is-demo .ba-knob::after{animation:knobPulse 1.2s ease-out infinite}
@keyframes knobPulse{0%{opacity:1; box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{opacity:0; box-shadow:0 0 0 18px rgba(255,255,255,0)}}

.stats{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(64px,7vw,96px); padding-top:clamp(36px,4vw,48px); border-top:1px solid var(--line-l)}
.stat{padding:0 28px; border-left:1px solid var(--line-l)}
.stat:first-child{padding-left:0; border-left:0}
.stat b{display:block; font-size:clamp(44px,5vw,76px); font-weight:300; line-height:1; letter-spacing:-.05em; color:#fff}
.stat span{display:block; margin-top:12px; font-size:16px; color:rgba(255,255,255,.78); max-width:24ch}
@media (max-width:1000px){
  .ba-in{grid-template-columns:1fr}
  .ba-copy h2{max-width:none}
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px}
  .stat:nth-child(3){padding-left:0; border-left:0}
}
@media (max-width:640px){
  .ba{aspect-ratio:4/3.4; border-radius:26px}
  .ba-knob{width:50px; height:50px}
  .ba-copy .btn{width:100%}
  .stat{padding:0 0 0 18px}
  .stat:nth-child(odd){padding-left:0}
  .stat span{font-size:15px}
}

/* ---------- Primera visita ---------- */
.steps-sec{background:var(--bruma); padding:clamp(80px,9vw,128px) 0}
.steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,32px); row-gap:0}
.steps::before{content:""; position:absolute; top:31px; left:8%; right:8%; height:2px; background:linear-gradient(90deg, var(--iri-1), var(--aqua) 50%, var(--iri-1)); opacity:.8}
html.js .steps[data-reveal]{opacity:1; transform:none}
html.js .steps[data-reveal]::before{transform:scaleX(0); transform-origin:left center; transition:transform 1.9s cubic-bezier(.6,.1,.2,1) .25s}
html.js .steps.is-in::before{transform:none}
html.js .steps[data-reveal] .step-n{opacity:0; transform:scale(.5); transition:opacity .5s ease, transform .9s cubic-bezier(.3,1.5,.4,1); transition-delay:calc(var(--i,0) * 420ms + 150ms)}
html.js .steps[data-reveal] h3, html.js .steps[data-reveal] p{opacity:0; translate:0 12px; transition:opacity .7s ease, translate .9s var(--ease); transition-delay:calc(var(--i,0) * 420ms + 320ms)}
html.js .steps.is-in .step-n{opacity:1; transform:none}
html.js .steps.is-in h3, html.js .steps.is-in p{opacity:1; translate:0 0}
.steps li{position:relative; display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; justify-items:center; align-items:start; text-align:center; padding:0 6px}
.step-n{position:relative; display:grid; place-items:center; width:64px; height:64px; margin:0 auto 26px; border-radius:50%; font-size:22px; font-weight:700; color:var(--tinta);
  background:radial-gradient(circle at 34% 28%, #fff 0 18%, rgba(255,255,255,0) 50%), conic-gradient(from 210deg, var(--iri-1), var(--iri-2), #F6F1EA, var(--iri-4), var(--iri-3), var(--iri-1));
  box-shadow:inset -4px -5px 10px rgba(13,59,62,.14), inset 3px 3px 6px rgba(255,255,255,.9), 0 0 0 8px var(--bruma), 0 12px 24px -10px rgba(13,59,62,.35)}
.steps h3{font-size:20px; line-height:1.25; letter-spacing:-.02em}
.steps p{margin:10px auto 0; font-size:16px; color:var(--muted); max-width:30ch}
.steps-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 28px; margin-top:clamp(48px,5vw,64px)}
.call{display:inline-flex; align-items:center; gap:10px; font-size:16px; color:var(--tinta)}
.call b{font-weight:700}
.call .ic{width:40px; height:40px; padding:10px; border-radius:50%; background:#fff; color:var(--tinta)}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(n+3){margin-top:44px}
  .steps::before{display:none}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr; row-gap:0}
  .steps::before{display:block; top:32px; bottom:60px; left:31px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--aqua), var(--iri-1))}
  html.js .steps[data-reveal]::before{transform:scaleY(0); transform-origin:center top}
  html.js .steps.is-in::before{transform:none}
  .steps li{grid-row:auto; grid-template-rows:none; grid-template-columns:64px 1fr; column-gap:18px; justify-items:start; text-align:left; padding:0 0 30px}
  .steps li:nth-child(n+3){margin-top:0}
  .step-n{grid-row:span 2; margin:0}
  .steps h3{align-self:end; padding-top:6px}
  .steps p{margin:6px 0 0; font-size:15px}
  .steps-cta .btn{width:100%}
}

/* ---------- La clínica ---------- */
.clinic{padding:clamp(80px,9vw,128px) 0}
.clinic-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,6vw,88px); align-items:stretch}
.clinic-copy h2{font-size:clamp(30px,3.2vw,46px); line-height:1.1; letter-spacing:-.03em; max-width:18ch}
.clinic-copy > h2 + p{margin-top:20px; font-size:17px; color:var(--muted); max-width:48ch}
.feat{display:grid; gap:4px; margin-top:30px}
.feat li{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line)}
.feat li:last-child{border-bottom:1px solid var(--line)}
.feat li > span{display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--bruma); color:var(--tinta)}
.feat li > span .ic{width:21px; height:21px}
.feat p{font-size:16px; color:var(--muted); line-height:1.55}
.feat b{display:block; font-size:16px; color:var(--tinta); font-weight:700; letter-spacing:-.01em; margin-bottom:2px}
.clinic-addr{display:flex; align-items:center; gap:10px; margin-top:24px; font-size:15px; font-weight:600; color:var(--tinta)}
.clinic-addr .ic{color:var(--aqua-d)}
.gallery{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,.82fr); gap:14px; height:100%; min-height:600px}
.gallery figure{position:relative; overflow:hidden; border-radius:var(--r-l); background:var(--bruma)}
.gallery img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.g1{grid-row:1 / 3} .g1 img{object-position:50% 35%}
.g3 img{object-position:50% 30%}
.g4{grid-column:1 / -1}
.swap img{transition:opacity 1.8s ease, transform 1.8s cubic-bezier(.2,.75,.15,1)}
.swap .sw-b{opacity:0}
.gallery.is-alt .swap img.sw-a,.gallery.is-alt .swap .cap.sw-a,.gallery.is-alt .swap figcaption.sw-a{opacity:0}
.gallery.is-alt .swap .sw-b{opacity:1}
.gallery figcaption,.gallery .cap{transition:opacity 1s ease}
.gallery figcaption,.gallery .cap{position:absolute; z-index:2; left:14px; bottom:14px; padding:6px 12px; line-height:1.3; border-radius:999px; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12.5px; font-weight:600; color:var(--tinta)}
@media (max-width:1000px){
  .clinic-in{grid-template-columns:1fr}
  .clinic-copy h2{max-width:22ch}
  .gallery{height:auto; min-height:0; grid-template-rows:260px 260px 220px}
}
@media (max-width:640px){
  .gallery{grid-template-rows:250px 180px 180px; gap:10px}
  .g1{grid-row:1 / 2; grid-column:1 / -1}
  .g4{grid-column:1 / -1}
  .gallery figure{border-radius:20px}
}

/* Revelado tipo cortinilla (lo dispara el contenedor, que no lleva clip-path) */
html.js .gallery[data-reveal],html.js .team-grid[data-reveal]{opacity:1; transform:none}
html.js .gallery[data-reveal] figure,html.js .team-grid[data-reveal] .doc-ph{clip-path:inset(0 0 100% 0); transition:clip-path 1.3s cubic-bezier(.77,0,.18,1); transition-delay:calc(var(--i,0) * 140ms)}
html.js .gallery.is-in figure,html.js .team-grid.is-in .doc-ph{clip-path:inset(0 0 0 0)}
html.js .gallery[data-reveal] figure img,html.js .team-grid[data-reveal] .doc-ph img{transform:scale(1.16); transition:transform 2s cubic-bezier(.2,.75,.15,1), opacity 1.8s ease; transition-delay:calc(var(--i,0) * 140ms)}
html.js .gallery.is-in figure img,html.js .team-grid.is-in .doc-ph img{transform:none}

/* ---------- Equipo ---------- */
.team{background:var(--perla); padding:clamp(80px,9vw,128px) 0}
.team-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,2vw,26px); row-gap:0}
.doc{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; align-items:start}
.doc-ph{position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:var(--r-l); background:var(--bruma)}
.doc-zoom{position:absolute; inset:0; display:block; transition:transform 1.1s var(--ease)}
.doc-ph img{width:100%; height:100%; object-fit:cover; object-position:50% 0%}
.doc-ph::after{content:""; position:absolute; inset:auto 0 0; height:30%; background:linear-gradient(180deg, transparent, rgba(13,59,62,.18)); pointer-events:none}
.doc:hover .doc-zoom{transform:scale(1.04)}
.doc-chip{position:absolute; z-index:2; left:12px; bottom:12px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12.5px; font-weight:600; line-height:1.2; color:var(--tinta); opacity:0; translate:0 8px; transition:opacity .4s ease, translate .5s var(--ease)}
.doc:hover .doc-chip{opacity:1; translate:0 0}
@media (hover:none){ .doc-chip{opacity:1; translate:0 0} }
.doc h3{margin-top:20px; font-size:20px; letter-spacing:-.02em}
.doc p{margin-top:4px; font-size:16px; line-height:1.45; color:var(--muted)}
.doc small{display:block; margin-top:8px; font-size:13px; color:var(--soft)}
@media (max-width:1100px){ .doc h3{font-size:18px; margin-top:16px} .doc p{font-size:15px} }
@media (max-width:700px){ .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .doc:nth-child(n+3){margin-top:32px} }
@media (max-width:430px){ .team-grid{column-gap:12px} .doc:nth-child(n+3){margin-top:28px} .doc h3{font-size:17px; margin-top:14px} .doc p{font-size:15px} .doc-ph{border-radius:20px} }

/* ---------- Opiniones ---------- */
.reviews{padding:clamp(80px,9vw,128px) 0}
.rev-title{font-size:clamp(30px,3.4vw,48px); line-height:1.1; letter-spacing:-.03em; max-width:22ch; margin-bottom:clamp(40px,5vw,60px)}
.rev-in{display:grid; grid-template-columns:320px minmax(0,1fr); gap:clamp(20px,2.4vw,32px); align-items:start}
.g-sum{position:sticky; top:110px; padding:28px; border-radius:var(--r-l); background:var(--perla)}
.g-brand{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--tinta)}
.g-brand svg{width:22px; height:22px}
.g-score{display:flex; align-items:center; gap:16px; margin:20px 0 22px}
.g-score > b{font-size:64px; font-weight:700; line-height:.9; letter-spacing:-.05em; color:var(--tinta)}
.g-score .stars{display:block; font-size:19px}
.g-score small{display:block; margin-top:6px; font-size:14px; color:var(--muted)}
.g-bars{display:grid; gap:8px; margin-bottom:24px}
.g-bars li{display:grid; grid-template-columns:12px 1fr; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--muted)}
.g-bars i{position:relative; height:7px; border-radius:99px; background:var(--bruma-2); overflow:hidden}
.g-bars i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); min-width:4px; border-radius:inherit; background:#F2B01E}
.rev-slider{min-width:0}
.rev-stage{display:grid}
.rev-slide{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,22px)}
.rev-slide + .rev-slide{margin-top:clamp(16px,2vw,22px)}
html.js .rev-slide{grid-area:1 / 1; margin:0; transition:visibility 0s .7s}
html.js .rev-slide.is-active{transition:visibility 0s}
html.js .rev-slide:not(.is-active){visibility:hidden; pointer-events:none}
html.js .rev-slide .rev{opacity:0; translate:0 14px; transition:opacity .6s ease, translate .8s var(--ease)}
html.js .rev-slide.is-active .rev{opacity:1; translate:0 0; transition-delay:.18s}
html.js .rev-slide.is-active .rev:nth-child(2){transition-delay:.32s}
.rev-nav{display:flex; align-items:center; gap:20px; margin-top:24px}
.rev-dots{display:flex; gap:8px; flex:1}
.rev-dots button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; width:56px; height:24px}
.rev-dots i{position:relative; display:block; width:100%; height:3px; border-radius:3px; background:var(--bruma-2); overflow:hidden}
.rev-dots i::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--tinta); transform:scaleX(0); transform-origin:left center}
.rev-dots button.is-active i::after{animation:revBar var(--slider-interval,8000ms) linear forwards}
@keyframes revBar{to{transform:none}}
.rev-dots button:focus-visible{outline:2px solid var(--aqua-d); outline-offset:3px; border-radius:4px}
.rev-count{font-size:14px; font-weight:600; color:var(--soft); white-space:nowrap}
@media (max-width:560px){ .rev-count{display:none} .rev-dots button{width:44px} }
.rev-count b{color:var(--tinta)}
.rev-arrows{display:flex; gap:8px}
.rev-arrows button{all:unset; box-sizing:border-box; cursor:pointer; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line-2); color:var(--tinta); transition:background .25s, color .25s, box-shadow .25s}
.rev-arrows button:hover{background:var(--tinta); color:#fff; box-shadow:none}
.rev-arrows button:focus-visible{outline:2px solid var(--aqua-d); outline-offset:3px}
.rev-arrows button:first-child svg{transform:rotate(180deg)}
.rev{display:flex; flex-direction:column; padding:26px; border-radius:var(--r-l); background:#fff; box-shadow:0 0 0 1px var(--line)}
.rev-head{display:grid; grid-template-columns:46px 1fr 20px; gap:12px; align-items:center}
.rev-head img,.ini{width:46px; height:46px; border-radius:50%; object-fit:cover; background:var(--bruma)}
.ini{display:grid; place-items:center; background:var(--iri); font-size:15px; font-weight:700; color:var(--tinta)}
.rev-head p{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.rev-head b{font-size:15.5px; font-weight:700; color:var(--text)}
.rev-head small{font-size:13px; color:var(--soft)}
.rev-head svg{width:20px; height:20px; align-self:start}
.rev > .stars{margin-top:16px; font-size:16px}
.rev blockquote{margin-top:12px; font-size:16px; line-height:1.65; color:var(--text); flex:1}
.rev figcaption{align-self:flex-start; margin-top:18px; padding:6px 12px; border-radius:999px; background:var(--bruma); font-size:12.5px; font-weight:600; color:var(--tinta)}
@media (max-width:1100px){
  .rev-in{grid-template-columns:1fr}
  .g-sum{position:static; display:grid; grid-template-columns:auto 1fr; gap:10px 40px; align-items:center}
  .g-brand{grid-column:1 / -1}
  .g-score{margin:0}
  .g-bars{margin:0}
  .g-sum .btn{grid-column:1 / -1; justify-self:start; width:auto}
}
@media (max-width:720px){
  .rev-slide{grid-template-columns:1fr}
  .g-sum{grid-template-columns:1fr; gap:18px}
  .g-sum .btn{width:100%}
}

/* ---------- Financiación ---------- */
.fin-sec{background:var(--perla); padding:clamp(80px,9vw,128px) 0}
.fin{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(36px,5vw,80px); align-items:center; padding:clamp(36px,5vw,72px); border-radius:var(--r-xl); background:var(--tinta); color:#fff}
.fin::before{content:""; position:absolute; left:-200px; bottom:-260px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(108,198,190,.2), rgba(108,198,190,0) 65%); pointer-events:none}
.fin-copy{position:relative}
.fin-copy h2{color:#fff; font-size:clamp(30px,3.4vw,48px); line-height:1.08; letter-spacing:-.03em; max-width:15ch}
.fin-copy > p{margin-top:18px; font-size:17px; color:rgba(255,255,255,.76); max-width:44ch}
.fin-list{display:grid; gap:12px; margin-top:28px}
.fin-list li{display:flex; align-items:center; gap:12px; font-size:16px; color:rgba(255,255,255,.92)}
.fin-list .ic{width:22px; height:22px; padding:3px; border-radius:50%; background:rgba(108,198,190,.18); color:var(--aqua); stroke-width:2.4}
.sim{position:relative; padding:26px; border-radius:var(--r-l); background:#fff; color:var(--text); box-shadow:0 40px 70px -40px rgba(0,0,0,.6)}
.sim-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.sim-head p{font-size:17px; font-weight:700; color:var(--tinta); letter-spacing:-.01em}
.sim-head span{padding:5px 11px; border-radius:999px; background:var(--bruma); font-size:12px; font-weight:600; color:var(--tinta)}
.sim small{display:block; font-size:12.5px; font-weight:600; color:var(--soft)}
.sim-field p{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; padding:13px 14px; border-radius:var(--r-s); background:var(--perla); box-shadow:inset 0 0 0 1px var(--line); font-size:15px; font-weight:600; color:var(--tinta)}
.sim-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.sim-row b{display:block; margin-top:4px; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--tinta)}
.sim-track{margin-top:16px}
.sim-bar{--p:1; position:relative; height:8px; border-radius:99px; background:var(--bruma-2)}
.sim-bar i{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--iri-1), var(--aqua)); transform:scaleX(var(--p)); transform-origin:left center}
.sim-thumb{position:absolute; left:calc(var(--p) * 100%); margin-left:-12px; top:50%; width:24px; height:24px; transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--aqua), 0 6px 14px -4px rgba(13,59,62,.4)}
.sim-track ul{position:relative; height:16px; margin-top:10px; font-size:12.5px; font-weight:600; line-height:16px; color:var(--soft)}
.sim-track li{position:absolute; top:0; left:calc(var(--x) * 100%); transform:translateX(-50%); transition:color .2s}
.sim-track li:first-child{transform:none}
.sim-track li:last-child{transform:translateX(-100%)}
.sim-track li.on{color:var(--tinta)}
[data-sim-m],[data-sim-q]{font-variant-numeric:tabular-nums}
.sim-result{display:flex; justify-content:space-between; align-items:flex-end; margin:20px 0 18px; padding:18px 20px; border-radius:var(--r-m); background:var(--iri)}
.sim-result p{display:flex; align-items:baseline; gap:4px; line-height:1}
.sim-result b{font-size:46px; font-weight:700; letter-spacing:-.05em; color:var(--tinta)}
.sim-result p > span{font-size:16px; font-weight:600; color:var(--muted)}
.sim-result small{color:var(--muted); align-self:center}
.sim .btn{white-space:normal; text-align:center; line-height:1.3; padding:14px 22px}
.sim-note{margin-top:14px; font-size:13px; line-height:1.5; color:var(--soft)}
@media (max-width:900px){ .fin{grid-template-columns:minmax(0,1fr)} .fin-copy h2{max-width:20ch} }
@media (max-width:560px){ .fin{border-radius:28px; padding:28px 20px} .sim{padding:20px} .sim-result b{font-size:40px} }

/* ---------- Medios ---------- */
.press{border-bottom:1px solid var(--line)}
.press-in{display:flex; align-items:center; gap:24px 48px; padding-top:34px; padding-bottom:34px}
.press-in > p{flex:0 0 auto; font-size:14px; font-weight:500; color:var(--soft)}
.press ul{flex:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 36px; color:#7D8E8D}
.press li{white-space:nowrap; line-height:1; transition:color .3s}
.press li:hover{color:var(--tinta)}
.m-a3{font-size:23px; font-weight:800; letter-spacing:-.04em}
.m-a3 span{display:inline-grid; place-items:center; width:26px; height:26px; margin-left:3px; border-radius:50%; background:#7D8E8D; color:#fff; font-size:16px; letter-spacing:0; vertical-align:-4px; transition:background .3s}
.press li.m-a3:hover span{background:var(--tinta)}
.m-lp{font-family:Georgia,'Times New Roman',serif; font-size:19px; font-weight:700; letter-spacing:.04em}
.m-lev{font-family:Georgia,'Times New Roman',serif; font-size:24px; font-weight:700; font-style:italic; letter-spacing:-.01em}
.m-lev span{font-style:normal; font-family:var(--font); font-size:15px; font-weight:800; letter-spacing:.02em; margin-left:1px}
.m-ap{font-size:24px; font-weight:800; letter-spacing:-.05em}
.m-ser{display:inline-flex; align-items:baseline; gap:4px; font-size:25px; font-weight:800; letter-spacing:-.02em}
.m-ser small{font-size:14px; font-weight:600; letter-spacing:0}
.m-lr{font-family:Georgia,'Times New Roman',serif; font-size:21px; font-weight:400; letter-spacing:.08em}
@media (max-width:1180px){ .press-in{flex-direction:column; gap:20px; text-align:center} .press ul{justify-content:center; width:100%} }
@media (max-width:900px){ .press ul{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-items:center; gap:26px 16px} }
@media (max-width:560px){ .press ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .press ul{gap:22px 28px} .m-a3{font-size:20px} .m-lp{font-size:16px} .m-lev{font-size:20px} .m-ap{font-size:20px} .m-ser{font-size:21px} .m-lr{font-size:17px} }

/* ---------- Preguntas frecuentes ---------- */
.faq{background:var(--perla); padding:clamp(80px,9vw,128px) 0}
.faq-in{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,96px); align-items:start}
.faq-side{position:sticky; top:120px}
.faq-side h2{font-size:clamp(30px,3.4vw,48px); line-height:1.08; letter-spacing:-.03em; max-width:14ch}
.faq-side > p{margin-top:18px; color:var(--muted); max-width:38ch}
.faq-help{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:30px}
.faq-list{display:grid; gap:12px}
.qa{border-radius:var(--r-m); background:#fff; box-shadow:0 0 0 1px var(--line); transition:box-shadow .3s}
.qa.is-open{box-shadow:0 0 0 1px var(--line-2), 0 24px 40px -30px rgba(13,59,62,.35)}
.qa > button{all:unset; box-sizing:border-box; width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; font-size:clamp(17px,1.5vw,19px); font-weight:700; letter-spacing:-.015em; color:var(--tinta); cursor:pointer; border-radius:var(--r-m)}
.qa > button:focus-visible{outline:2px solid var(--aqua-d); outline-offset:2px}
.qa i{position:relative; flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--bruma); transition:background .3s}
.qa i::before,.qa i::after{content:""; position:absolute; left:50%; top:50%; width:13px; height:2px; border-radius:2px; background:var(--tinta); transform:translate(-50%,-50%); transition:transform .35s var(--ease)}
.qa i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.is-open i{background:var(--aqua)}
.qa.is-open i::after{transform:translate(-50%,-50%) rotate(0)}
.qa-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.qa-a p{padding:0 70px 24px 24px; font-size:16px; color:var(--muted)}
@media (max-width:900px){ .faq-in{grid-template-columns:1fr} .faq-side{position:static} .faq-side h2{max-width:20ch} }
@media (max-width:560px){ .qa > button{padding:18px} .qa-a p{padding:0 18px 20px} }

/* ---------- Llamada final ---------- */
.final{position:relative; overflow:hidden; background:var(--tinta); color:#fff; padding:clamp(80px,9vw,128px) 0}
.final::before{content:""; position:absolute; right:-220px; top:-280px; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle, rgba(108,198,190,.2), rgba(108,198,190,0) 65%); pointer-events:none}
.final::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s; background:radial-gradient(520px circle at var(--sx,70%) var(--sy,40%), rgba(234,223,243,.12), rgba(108,198,190,.08) 45%, transparent 70%)}
.final:hover::after{opacity:1}
.final-in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:clamp(40px,6vw,96px); align-items:center}
.final-copy h2{color:#fff; font-size:clamp(32px,3.8vw,54px); line-height:1.06; letter-spacing:-.032em; max-width:15ch}
.final-copy > p{margin-top:20px; font-size:17.5px; color:rgba(255,255,255,.76); max-width:46ch}
.final-contact{display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; margin-top:38px; padding-top:32px; border-top:1px solid var(--line-l)}
.final-contact li{display:flex; gap:14px; align-items:flex-start}
.final-contact li > span{display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:rgba(108,198,190,.16); color:var(--aqua)}
.final-contact p{font-size:16px; line-height:1.5; color:rgba(255,255,255,.9)}
.final-contact small{display:block; font-size:12.5px; color:rgba(255,255,255,.55); margin-bottom:2px}
.final-contact a{font-size:17px; font-weight:700; color:#fff}
.final-contact a:hover{color:var(--aqua)}

.form{padding:clamp(26px,3vw,36px); border-radius:var(--r-l); background:#fff; color:var(--text); box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.form h3{font-size:clamp(23px,2vw,27px); letter-spacing:-.03em; line-height:1.15}
.form-sub{margin-top:6px; margin-bottom:22px; font-size:15px; color:var(--muted)}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.field label,.field legend{font-size:13px; font-weight:600; color:var(--tinta); padding:0}
.field legend{margin-bottom:7px}
.field input,.field select{display:block; width:100%; height:52px; margin:0; font:inherit; font-size:16px; line-height:normal; color:var(--text); background:var(--perla); border:1.5px solid transparent; border-radius:var(--r-s); padding:0 16px; transition:border-color .2s, background .2s}
.field input::placeholder{color:#8A9C9B}
.field input:focus,.field select:focus{outline:none; border-color:var(--aqua-d); background:#fff}
.select{position:relative}
.select select{-webkit-appearance:none; appearance:none; padding-right:42px; cursor:pointer}
.select .ic{position:absolute; right:16px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--tinta)}
.slot-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.slot-row label{position:relative; cursor:pointer}
.slot-row input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.slot-row span{display:flex; align-items:center; justify-content:center; height:52px; padding:0 6px; border-radius:var(--r-s); text-align:center; font-size:14px; font-weight:600; color:var(--tinta); background:var(--perla); box-shadow:inset 0 0 0 1.5px transparent; transition:background .2s, box-shadow .2s, color .2s}
.slot-row input:checked + span{background:var(--tinta); color:#fff}
.slot-row input:focus-visible + span{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--aqua-d)}
.slot-row label:hover input:not(:checked) + span{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.check{display:flex; gap:10px; align-items:flex-start; margin:6px 0 20px; font-size:13px; line-height:1.45; color:var(--muted); cursor:pointer}
.check input{margin:2px 0 0; width:16px; height:16px; accent-color:var(--tinta); flex:0 0 auto}
.check a{color:var(--tinta); text-decoration:underline; text-underline-offset:2px}
.form-note{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--soft)}
.form-note .ic{width:15px; height:15px; color:var(--aqua-d)}
@media (max-width:1180px) and (min-width:901px){ .final-contact{grid-template-columns:1fr} }
@media (max-width:900px){ .final-in{grid-template-columns:minmax(0,1fr)} .final-copy h2{max-width:20ch} }
@media (max-width:560px){ .final-contact{gap:20px 16px} .final-contact li:nth-child(n+3){grid-column:1 / -1} }

/* ---------- Pie ---------- */
.ft{background:#fff; color:var(--muted); font-size:16px; padding:clamp(64px,7vw,90px) 0 28px}
.ft-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.25fr; gap:40px; padding-bottom:44px}
.ft-brand p{margin:20px 0 24px; max-width:36ch; font-size:16px; line-height:1.6}
.ft h4{font-size:15px; font-weight:700; color:var(--tinta); letter-spacing:-.01em; margin-bottom:16px}
.ft ul{display:grid; gap:10px}
.ft a{transition:color .2s}
.ft ul a:hover,.ft-contact a:hover{color:var(--tinta)}
.ft-contact p{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; line-height:1.5}
.ft-contact .ic{width:17px; height:17px; margin-top:3px; color:var(--aqua-d)}
.ft-legal{padding:22px 0; border-top:1px solid var(--line)}
.ft-legal p{font-size:13px; line-height:1.6; color:var(--soft); max-width:110ch}
.ft-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--soft)}
.ft-bot nav{display:flex; gap:22px}
.ft-bot a:hover{color:var(--tinta)}
@media (max-width:1100px){ .ft-top{grid-template-columns:1fr 1fr; row-gap:44px} }
@media (max-width:560px){ .ft-top{grid-template-columns:1fr 1fr; gap:36px 20px} .ft-brand,.ft-contact{grid-column:1 / -1} }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .hero-media::before{animation:none; opacity:1}
  *,*::before,*::after{transition-delay:0s !important}
  .rev-dots button.is-active i::after{animation:none; transform:none}
  .fc.is-in{animation:none}
}