/* Dr. Xavier Zabaleta — estilos del sitio (dr.xavierzabaleta.com) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:#F6F8FC;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#16243A;text-decoration:none}a:hover{color:#2F6BFF}
img,svg{max-width:100%}
img{height:auto}
a,button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2F6BFF;outline-offset:2px}
section div,.hero-vis{min-width:0}
label{font-size:13px;font-weight:600;color:#55657E;display:block;margin-bottom:6px}
.skip{position:absolute;left:-9999px;top:8px;background:#16243A;color:#fff;padding:10px 16px;border-radius:12px;z-index:100}
.skip:focus{left:8px;color:#fff}
.nav-pill .logo{white-space:nowrap}

/* Menú móvil */
.menu-btn{display:none;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(40,70,130,.15);cursor:pointer;align-items:center;justify-content:center}
.mobile-menu{display:none;margin-top:10px;padding:10px;border-radius:24px;background:rgba(255,255,255,.95);box-shadow:0 16px 40px rgba(40,70,130,.18);flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:14px 16px;border-radius:14px;font-weight:600;font-size:16px}
.mobile-menu a:hover{background:#EDF3FF}

/* Comparador antes / después */
.cmp-card{width:100%;max-width:1000px;margin:0 auto;box-sizing:border-box;border-radius:clamp(26px,4vw,40px);padding:clamp(10px,2.4vw,20px);background:rgba(255,255,255,.88);box-shadow:0 2px 6px rgba(40,70,130,.05),0 32px 70px rgba(40,70,130,.16)}
.cmp{position:relative;border-radius:28px;line-height:0;aspect-ratio:1200/504;user-select:none;-webkit-user-select:none}
.cmp-clip{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#E4EAF3}
.cmp-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.cmp-after{clip-path:inset(0 100% 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:0;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.4);pointer-events:none}
.cmp-handle{position:absolute;top:50%;left:0;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;pointer-events:none}
.cmp-range{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.cmp-hit{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.cmp-hit:active{cursor:grabbing}
.cmp:focus-within{outline:3px solid #2F6BFF;outline-offset:4px}
.cmp-ui{display:flex;flex-direction:column;gap:12px;padding:22px 8px 4px}
.cmp-labels{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;font-weight:600;color:#7A889D}
.cmp-labels span{transition:color .2s}
.cmp-labels .on-before{font-weight:800;color:#16243A}
.cmp-labels .on-after{font-weight:800;color:#2F6BFF}
.cmp-bar{position:relative;height:16px;border-radius:999px;background:#E3EAF5;overflow:hidden}
.cmp-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,#16243A 0%,#16243A 22%,#2F6BFF 55%,#7C5CFF 78%,#16B8A6 100%);clip-path:inset(0 100% 0 0)}
.cmp-ctrls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding-top:6px}
.seg{display:flex;gap:4px;background:#EDF1F8;border-radius:999px;padding:4px}
.seg button{border:0;cursor:pointer;font:700 14px Inter,system-ui,sans-serif;padding:12px 20px;border-radius:999px;background:transparent;color:#4C5E78;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{color:#fff;box-shadow:0 6px 16px rgba(40,70,130,.25)}
.seg button[data-go="0"][aria-pressed="true"],.seg button[data-go="50"][aria-pressed="true"]{background:#16243A}
.seg button[data-go="100"][aria-pressed="true"]{background:#2F6BFF}
.btn-ghost{border:1px solid #CFD9EA;background:#fff;color:#2352C9;font:700 14px Inter,system-ui,sans-serif;padding:12px 18px;border-radius:999px;cursor:pointer}
.cmp-hint{margin:0;font-size:14px;color:#55657E;line-height:1.4;text-align:center}

/* Formulario */
.contact-form{flex:1 1 420px;background:#fff;border-radius:28px;padding:clamp(18px,4vw,28px);color:#16243A;display:flex;flex-direction:column;gap:16px}
.contact-form input[type="text"],.contact-form input[type="tel"]{font-family:Inter,system-ui,sans-serif;font-size:16px;color:#16243A;border:1px solid #DCE3EF;border-radius:14px;padding:15px 16px;background:#fff;width:100%;box-sizing:border-box}
.field.error input,.field.error .select-btn{border-color:#C62F2F}
.field-error{margin:6px 0 0;font-size:13px;color:#B42318}
.select{position:relative}
.select-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 16px Inter,system-ui,sans-serif;color:#16243A;border:1px solid #DCE3EF;border-radius:14px;padding:15px 16px;background:#fff;cursor:pointer;text-align:left;box-sizing:border-box;box-shadow:0 2px 6px rgba(40,70,130,.06)}
.select-btn svg{transition:transform .2s}
.select-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.select-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid #E3EAF5;border-radius:18px;box-shadow:0 24px 60px rgba(40,70,130,.3);display:flex;flex-direction:column;gap:2px}
.select-list[hidden]{display:none}
.select-list button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;background:transparent;color:#16243A;font:500 16px Inter,system-ui,sans-serif;padding:13px 14px;border-radius:12px;cursor:pointer;text-align:left}
.select-list button:hover,.select-list button:focus-visible{background:#F2F6FF}
.select-list button[aria-selected="true"]{background:#EDF3FF;color:#2352C9}
.select-list button svg{visibility:hidden}
.select-list button[aria-selected="true"] svg{visibility:visible}
.btn-dark{background:#16243A;color:#fff;border:0;border-radius:14px;padding:16px;font:700 16px Inter,system-ui,sans-serif;cursor:pointer}
.btn-dark[disabled]{opacity:.65;cursor:wait}
.form-note{margin:0;font-size:13px;line-height:1.5;color:#55657E;text-align:center}
.form-note.ok{color:#0B6B45;font-weight:600}
.form-note.err{color:#B42318;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Mapa */
.map-card{height:220px;border-radius:28px;overflow:hidden;box-shadow:0 20px 50px rgba(40,70,130,.18);background:#E6EEF8;line-height:0}
.map-card iframe{width:100%;height:100%;border:0;display:block}

/* Pantallas anchas: se amplía todo el contenido para no dejar una columna pequeña */
@media (min-width:1600px){.root{zoom:1.12}}
@media (min-width:1920px){.root{zoom:1.3}}
@media (min-width:2400px){.root{zoom:1.6}}
@media (min-width:3000px){.root{zoom:2}}

/* Tablet y celular */
@media (max-width:880px){
.nav-links{display:none !important}
.menu-btn{display:flex}
}
@media (max-width:900px){.fl1{left:0 !important}.fl2{right:0 !important}}
@media (max-width:760px){
.nav-pill{padding:8px 8px 8px 18px !important}
.hero-vis{min-height:0 !important;flex-direction:column;gap:16px}
.fl1{position:relative !important;left:auto !important;bottom:auto !important;width:100% !important;max-width:360px;box-sizing:border-box}
.fl2{position:relative !important;right:auto !important;top:auto !important;order:-1}
.cmp{aspect-ratio:16/9}
.cmp-img{object-position:30% 50%}
}
@media (max-width:400px){.cta-long{display:none}.nav-pill .logo{font-size:15px !important}}
@media (max-width:480px){
.seg button{padding:12px 14px}
.cmp{aspect-ratio:3/2}
}
@media (hover:none) and (pointer:coarse){.cmp-hit{cursor:default}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms !important}}