/* UXEN — home.css
 * Portado 1:1 de preview-home-final.html (capa de la portada; se encola SOLO en is_front_page()).
 * El mega header (.mh/.mhm/.mhs) NO se incluye aquí: vive en header.css (site-wide).
 */
.site-main{max-width:none;margin:0;padding:0}

:root{
	--bg:#f6f8ff; --bg2:#eef3ff; --surface:#ffffff;
	--fg:#666666; --muted:#8b90a2; --line:rgba(26,33,119,.12); --line2:rgba(26,33,119,.06);
	--accent:#2f6ef3; --accent-br:#1940e5; --accent-deep:#1a2177; --accent-soft:#e8effe; --accent-lt:#bcd3ff;
	--ink:#1a2177; --ink-fg:#ffffff; --ink-muted:rgba(255,255,255,.68); --ink-line:rgba(255,255,255,.16);
	--grad:radial-gradient(88% 78% at 8% 2%,rgba(47,110,243,.85) 0%,rgba(47,110,243,0) 52%),radial-gradient(82% 90% at 100% 100%,rgba(25,64,229,.92) 0%,rgba(25,64,229,0) 60%),linear-gradient(150deg,#1940e5 0%,#1b2a97 55%,#1a2177 100%);
	--shadow:0 18px 44px rgba(20,26,90,.14); --shadow-sm:0 8px 22px rgba(20,26,90,.10); --shadow-lg:0 50px 110px rgba(20,26,90,.22);
	--serif:"Playfair Display",Georgia,serif;
	--sans:"Inter",system-ui,-apple-system,sans-serif;
	--ease:cubic-bezier(.16,1,.3,1);
	--rad:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.04}
/* Ancho unificado del sitio: 1280px (max-w-7xl) + el mismo canal lateral en
   todas las hojas, para que el borde del contenido coincida con el del header. */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.eyebrow{font:600 .72rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.eyebrow--light{color:var(--accent-lt)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- NAV (fijo, claro) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.4s var(--ease)}
.nav__in{display:flex;align-items:center;justify-content:space-between;padding-block:20px;border-bottom:1px solid transparent}
.brand img{height:26px;width:auto;display:block}
.nav__links{display:flex;gap:15px;font-size:.8rem;flex-wrap:wrap}
.nav__links a{position:relative;color:var(--muted);transition:color .3s}
.nav__links a:hover{color:var(--fg)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .35s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__cta{font:500 .82rem var(--sans);padding:11px 20px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--ink);transition:.3s var(--ease);cursor:pointer}
.nav__cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav.is-stuck{background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav.is-stuck .nav__in{border-color:var(--line);padding-block:13px}
.nav.is-stuck .nav__cta{background:var(--accent);border-color:var(--accent);color:#fff}
.nav.is-stuck .nav__cta:hover{background:var(--accent-br);border-color:var(--accent-br)}
@media(max-width:860px){.nav__links{display:none}}

/* ---------- HERO 4.1 ---------- */
.gtext{font-style:italic;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sb{display:flex;align-items:center;gap:10px;max-width:560px;padding:7px 7px 7px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:.3s var(--ease)}
.sb:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,110,243,.18),var(--shadow)}
.sb__ic{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.sb__in{flex:1 1 auto;min-width:0;border:0;background:transparent;color:#33384a;font:400 1.04rem var(--sans);padding:13px 4px;outline:none}
.sb__in::placeholder{color:#9aa0ad}
.sb__bt{flex:0 0 auto;border:0;cursor:pointer;font:500 .9rem var(--sans);padding:13px 26px;border-radius:10px;background:var(--grad);color:#fff;transition:.3s var(--ease)}
.sb__bt:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* Móvil: el botón baja a su propia línea, pero la lupa y el campo se quedan
   juntos (con flex-basis:100% el input saltaba de línea y la lupa se quedaba
   sola en la primera fila). */
@media(max-width:430px){.sb{flex-wrap:wrap;border-radius:16px;padding:10px 14px;gap:8px}.sb__in{flex:1 1 120px;min-width:0;order:1;padding-inline:2px;font-size:1rem}.sb__bt{flex:1 0 100%;order:2;padding-block:12px}}
.qa1{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:26px;font-size:.82rem}
.qa1__lbl{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-right:2px}
.qa1 a{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;border:1px solid var(--line);color:var(--accent-deep);white-space:nowrap;flex:0 0 auto;transition:.25s var(--ease)}
.qa1 a i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.qa1 a:hover{border-color:var(--accent);background:var(--accent-soft)}
.qa1 a.qa1__all{color:var(--accent);border-style:dashed}
.qa1 a.qa1__all:hover{background:var(--accent);color:#fff;border-style:solid}
/* ---------- SECCIÓN 1 · Hero de introducción (.hint) ----------
   Foto a sangre + copy de marca abajo, a dos columnas (titular / párrafos).
   El scrim es un div y no un ::after porque el <img> del fondo debe quedar
   debajo del degradado sin sacar el contenido a otro stacking context. */
.hint{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:#fff;min-height:min(80vh,780px);min-height:min(80svh,780px);padding:clamp(96px,14vh,150px) 0 clamp(46px,6vh,74px)}
.hint__bg{position:absolute;inset:0;z-index:0}
.hint__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hint__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,58,.34) 0%,rgba(10,14,58,.05) 24%,rgba(10,14,58,.66) 54%,rgba(10,14,58,.94) 100%)}
.hint__in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,60px);align-items:end}
.hint__title{font:600 clamp(1.85rem,3.5vw,3.05rem)/1.09 var(--serif);letter-spacing:-.03em;color:#fff;margin-top:16px;text-wrap:balance}
.hint__title em{font-style:italic;font-weight:600;color:var(--accent-lt)}
.hint__copy p{margin:0;max-width:54ch;color:rgba(255,255,255,.86);font-size:clamp(.94rem,1.05vw,1.03rem);line-height:1.75}
.hint__copy p+p{margin-top:14px}
.hint__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hint__btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:11px;font:500 .92rem var(--sans);transition:.3s var(--ease)}
.hint__btn--pri{background:#fff;color:var(--ink)}
.hint__btn--pri:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(6,9,40,.34)}
.hint__btn--gh{border:1px solid rgba(255,255,255,.42);color:#fff}
.hint__btn--gh:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.72)}
/* ≤940 la rejilla se apila: el titular deja de competir con los párrafos y la
   foto se reencuadra hacia el edificio, que en retrato queda fuera del centro.
   Apilada, la copy ocupa mucho más alto y cae sobre el cielo (la parte clara de
   la foto): el degradado tiene que empezar a oscurecer mucho antes que en
   escritorio o el eyebrow en --accent-lt se vuelve ilegible. */
@media(max-width:940px){
	.hint{min-height:0;padding-top:clamp(84px,22vh,150px)}
	.hint__in{grid-template-columns:1fr;gap:22px}
	/* Apilada la foto se recorta a lo ancho (no a lo alto): la torre está al 44%
	   del original, así que el eje X es el único que la mantiene en cuadro. */
	.hint__bg img{object-position:44% 50%}
	.hint__scrim{background:linear-gradient(180deg,rgba(10,14,58,.44) 0%,rgba(10,14,58,.34) 20%,rgba(10,14,58,.64) 40%,rgba(10,14,58,.88) 70%,rgba(10,14,58,.95) 100%)}
	.hint__copy p{max-width:none}
}
/* En móvil la copy arranca mucho más arriba (el titular ocupa 6 líneas), justo
   sobre el cielo: hace falta otra vuelta de tuerca al degradado. */
@media(max-width:700px){
	.hint__scrim{background:linear-gradient(180deg,rgba(10,14,58,.46) 0%,rgba(10,14,58,.44) 16%,rgba(10,14,58,.76) 36%,rgba(10,14,58,.92) 68%,rgba(10,14,58,.96) 100%)}
}
@media(max-width:520px){.hint__act{flex-direction:column;align-items:stretch}}

/* ---------- SECCIÓN 2 · Buscador (antes hero de portada) ----------
   Al dejar de ser el primer bloque perdió el padding superior de hero. */
.hv1{position:relative;background:var(--bg);color:var(--fg);overflow:hidden;padding:clamp(56px,8vh,92px) 0 clamp(72px,9vh,110px)}
.hv1__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.hv1__title{font:700 clamp(2.5rem,5.4vw,4.6rem)/1.02 var(--serif);letter-spacing:-.03em;color:var(--ink);margin-top:18px}
.hv1__lead{margin-top:18px;color:var(--fg);max-width:46ch;font-size:1.05rem;line-height:1.7}
.hv1 .sb{margin-top:28px}
.hv1__media{position:relative;z-index:0}
.hv1__media>img{width:100%;height:clamp(360px,50vh,520px);object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.hv1__frame{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hv1__frame img{display:block;width:100%;height:clamp(360px,50vh,500px);object-fit:cover}
.hv1__bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;gap:8px;padding:18px;color:#fff;background:linear-gradient(0deg,rgba(11,15,66,.86),rgba(11,15,66,.15) 70%,rgba(11,15,66,0))}
.hv1__st{text-align:center}
.hv1__st b{font:700 1.35rem/1 var(--serif)}
.hv1__st span{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:5px}
@media(max-width:860px){.hv1__grid{grid-template-columns:1fr}}

/* ---------- SECCIÓN 2 · La red ---------- */
.s1{background:#fff;border-block:1px solid var(--line);padding-block:clamp(40px,6vw,68px);text-align:center}
/* Va sobre el mismo div que .container, así que hereda de ahí el ancho. */
.s1__in{margin-inline:auto}
.s1__ttl{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-top:12px;color:var(--ink)}
.s1__ttl em{font-style:italic;font-weight:500;color:var(--accent)}
.s1__stats{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(5,1fr)}
.s1__stat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 8px;border-left:1px solid var(--line)}
.s1__stat:first-child{border-left:0}
.s1__stat b{display:block;font:700 clamp(1.6rem,3vw,2.4rem)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-.03em}
.s1__stat span{font:500 .68rem/1.35 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center;text-wrap:balance}
/* Separadores: sólo entre columnas. Antes había cuatro medias-queries pisándose
   y en ≤440 la cuarta pintaba el borde del 4º dato con --ink-line (blanco sobre
   fondo blanco): se veía un hueco sin línea en mitad de la rejilla. */
@media(max-width:760px){.s1__stats{grid-template-columns:repeat(3,1fr);row-gap:34px}.s1__stat{border-left:1px solid var(--line)}.s1__stat:nth-child(3n+1){border-left:0}}
/* Ojo con la especificidad: en ≤440 conviven las dos medias-queries y `:nth-child(3n+1)`
   (0,2,0) le gana a `.s1__stat` (0,1,0), así que al 4º dato hay que devolverle el borde
   con otro :nth-child, no con la regla base — si no, queda un hueco sin línea. */
@media(max-width:440px){.s1__stats{grid-template-columns:repeat(2,1fr);row-gap:30px}.s1__stat:nth-child(even){border-left:1px solid var(--line)}.s1__stat:nth-child(odd){border-left:0}}

/* ---------- SECCIÓN 3 · Instalaciones (pin: scroll vertical -> horizontal) ---------- */
.hzp{position:relative;background:var(--grad)}
.hzp__sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hzp__track{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);padding-inline:clamp(20px,5vw,64px);will-change:transform}
.hzp__panel{flex:0 0 auto;height:min(76vh,640px)}
.hzp__intro{width:min(86vw,540px);display:flex;flex-direction:column;justify-content:center;padding-right:clamp(10px,3vw,40px)}
.hzp .eyebrow{color:var(--accent-lt)}
.hzp__intro h2{font-size:clamp(2.4rem,5vw,4.4rem);color:#fff;margin-top:16px;letter-spacing:-.03em;line-height:1}
.hzp__intro h2 em{font-style:italic;font-weight:600;color:var(--accent-lt);-webkit-text-fill-color:var(--accent-lt)}
.hzp__intro p{margin-top:18px;color:rgba(255,255,255,.82);max-width:38ch}
.hzp__scrollhint{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:#fff;font-weight:600;font-size:.9rem}
.hzp__scrollhint b{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.hzp__slide{width:min(84vw,760px);position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hzp__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hzp__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(12,14,50,.85))}
.hzp__no{position:absolute;top:22px;left:24px;z-index:2;font:italic 500 1rem var(--serif);color:rgba(255,255,255,.85)}
.hzp__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(26px,3.2vw,42px);color:#fff}
.hzp__cap h3{font:600 clamp(1.7rem,2.8vw,2.6rem) var(--serif)}
.hzp__cap p{margin-top:8px;color:rgba(255,255,255,.86);max-width:46ch}
.hzp__dots{position:absolute;left:0;right:0;bottom:30px;z-index:5;display:flex;gap:9px;justify-content:center}
.hzp__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.34);transition:.3s var(--ease)}
.hzp__dot.on{width:30px;border-radius:100px;background:#fff}
@media(max-width:820px){
	.hzp{height:auto!important}
	.hzp__sticky{position:relative;top:0;height:auto;overflow:visible;display:block;padding-block:clamp(60px,10vw,90px)}
	.hzp__track{flex-direction:column;transform:none!important;padding-inline:clamp(20px,5vw,56px);gap:22px;max-width:640px;margin-inline:auto}
	.hzp__panel{width:100%!important;height:auto}
	.hzp__intro{padding:0 0 6px}
	.hzp__slide{aspect-ratio:16/12}
	.hzp__dots,.hzp__scrollhint{display:none}
}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink);color:#fff;padding-block:clamp(56px,8vw,90px) 30px}
.foot__top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--ink-line)}
.foot__brand img{height:34px;width:auto}
.foot__brand p{margin-top:14px;color:var(--ink-muted);max-width:34ch;font-size:.98rem}
.foot__cta{align-self:flex-start;padding:13px 26px;border-radius:11px;background:#fff;color:var(--ink);font:500 .92rem var(--sans);transition:.3s var(--ease)}
.foot__cta:hover{transform:translateY(-2px)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-block:44px}
.foot__col h4{font:600 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 16px}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.94rem}
.foot__col a{color:rgba(255,255,255,.8)}.foot__col a:hover{color:#fff}
.foot__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid var(--ink-line);color:var(--ink-muted);font-size:.82rem}
@media(max-width:760px){.foot__cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.foot__cols{grid-template-columns:1fr}}

.wip{position:fixed;right:14px;bottom:14px;z-index:9000;background:var(--ink);color:#fff;font:600 11px/1 var(--sans);padding:8px 13px;border-radius:100px;letter-spacing:.02em;opacity:.9}

/* ---------- encabezado de sección ---------- */
.shead{max-width:800px;margin-bottom:clamp(34px,5vw,54px)}
.shead h2{font-size:clamp(2.1rem,4.8vw,3.6rem);margin-top:15px;color:var(--ink);letter-spacing:-.03em}
.shead h2 em{font-style:italic;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.shead p{margin-top:14px;color:var(--fg);max-width:56ch}

/* ---------- SECCIÓN 4 · Servicios (G5 · glass expandible) ---------- */
/* --g5-ph es la altura de la foto: el ícono va colgado justo del borde inferior
   de la imagen, así que si las dos se escriben a mano se despegan al primer
   retoque. Con la variable, cambiar la altura las mueve juntas. */
.g5{background:var(--surface);padding-block:clamp(56px,8vw,96px);--g5-ph:180px}
/* 3 columnas para las 6 tarjetas: en 4 quedaba una segunda fila coja de dos y un
   hueco a la derecha que se leía como si faltara contenido. */
.g5__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* La tarjeta es flex en columna y el body crece: así las seis cierran a la misma
   altura aunque solo dos lleven botón (ver .g5__btn). */
.g5__card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s var(--ease)}
.g5__card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.g5__ph{height:var(--g5-ph);overflow:hidden}
.g5__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.g5__card:hover .g5__ph img{transform:scale(1.07)}
.g5__ic{position:absolute;top:var(--g5-ph);left:18px;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.g5__ic svg{width:22px;height:22px}
.g5__body{padding:32px 20px 22px;display:flex;flex-direction:column;flex:1}
.g5__body h3{font:600 1.2rem var(--serif);color:var(--ink)}
.g5__body p{font:400 .92rem var(--sans);color:var(--muted);margin-top:7px;line-height:1.55}
/* Unidades con micrositio propio (50 Labs, Hospital del Corazón). El margin-top
   auto empuja el botón al fondo de la tarjeta, y su ::after cubre la tarjeta
   entera para que todo el bloque sea clickeable sin envolver el <article> en un
   <a> (que se llevaría el h3 dentro del enlace). */
.g5__btn{align-self:flex-start;margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;font:600 .85rem var(--sans);color:var(--accent);transition:color .2s var(--ease)}
.g5__btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.g5__btn::after{content:"";position:absolute;inset:0;border-radius:16px}
.g5__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.g5__card--unit:hover{border-color:var(--accent-lt)}
.g5__card--unit:hover .g5__btn{color:var(--accent-br)}
.g5__card--unit:hover .g5__btn svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.g5__btn svg{transition:none}}
@media(max-width:900px){.g5__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g5__grid{grid-template-columns:1fr}}

/* ---------- 5 · Presencia (mapa real MX + cards de sede) ---------- */
.pres{position:relative;background:#fff;padding:clamp(8px,1.5vw,20px) 0 clamp(56px,8vw,96px);text-align:center}
.pres .shead{margin-inline:auto;text-align:center}
.pres .shead p{margin-inline:auto}
/* Hospitales destacados: misma pieza que en Presencia, pero ahora vive sola justo
   debajo del hero, así que necesita su propio aire arriba (el .pres original casi
   no lleva padding-top porque venía pegado a la sección anterior). */
.pres--hosp{padding-block:clamp(44px,6vw,76px)}
/* Cuánto puede salirse el mapa del contenedor en móvil: exactamente el padding
   de .container, para que quede a sangre sin provocar scroll horizontal. */
.pres__map{--uxen-map-bleed:clamp(20px,5vw,56px)}
.mx{position:relative;width:100%;aspect-ratio:1000/643}
.mx__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cmap{max-width:880px;margin:0 auto}
.mfill use{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1;stroke-linejoin:round}
.pin{position:absolute;transform:translate(-50%,-50%);z-index:3}
.pin i{display:block;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(47,110,243,.16),0 4px 12px rgba(47,110,243,.5);position:relative}
.pin i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);animation:presPing 2.6s ease-out infinite;opacity:0}
@keyframes presPing{0%{transform:scale(.65);opacity:.7}100%{transform:scale(2);opacity:0}}
.pin em{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 .72rem var(--sans);font-style:normal;color:#fff;background:var(--accent-deep);padding:4px 10px;border-radius:100px;box-shadow:0 6px 16px rgba(20,30,90,.25)}
.pin--soon i{background:#e0a23b;box-shadow:0 0 0 5px rgba(224,162,59,.18)}
.pin--soon i::after{border-color:#e0a23b}
.pin--soon em{background:#8a5a0c}
/* Hospitales en operación — acordeón horizontal (elegido sobre las 4
   disposiciones de preview-hospitales-layouts-variants.html).
   Cuatro paneles a sangre que llenan la fila; el señalado se abre. La foto va
   en posición absoluta: en flujo con height:100% el porcentaje depende de un
   alto que depende del contenido, el navegador descarta la proporción y el
   marco adopta el alto natural de la imagen. */
.hacc{display:flex;gap:10px;height:400px;margin-top:26px}
.hacc__pan{position:relative;flex:1 1 0;min-width:0;border-radius:16px;overflow:hidden;
           transition:flex-grow .45s var(--ease)}
.hacc__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hacc__fb{position:absolute;inset:0;background:linear-gradient(135deg,#1a2450,#2f6ea2)}
.hacc__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,50,.06) 30%,rgba(12,14,50,.88))}
/* En reposo sólo cabe el nombre, y cabe en vertical. */
.hacc__vert{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) rotate(180deg);
            writing-mode:vertical-rl;font:600 .92rem var(--sans);color:#fff;white-space:nowrap;
            transition:opacity .25s var(--ease)}
.hacc__open{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;color:#fff;
            /* .pres centra su contenido; aquí no. Sin esto el nombre y las
               cifras (block) se centraban mientras la ciudad y los botones
               (flex) se quedaban a la izquierda, y el bloque salía torcido. */
            text-align:left;
            opacity:0;transform:translateY(10px);pointer-events:none;
            transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hacc__name{display:block;font:600 1.16rem var(--sans);letter-spacing:-.01em}
.hacc__loc{display:flex;align-items:center;gap:6px;margin-top:5px;font:500 .82rem var(--sans);color:rgba(255,255,255,.92)}
.hacc__loc svg{width:14px;height:14px;flex:none;color:var(--accent-lt)}
.hacc__nums{display:block;margin-top:7px;font:500 .76rem var(--sans);color:rgba(255,255,255,.72)}
.hacc__btns{display:flex;gap:8px;margin-top:14px}
.hacc__bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;
          font:600 .8rem var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:.16s var(--ease)}
.hacc__bt--pri{background:#fff;color:var(--ink);padding:9px 16px}
.hacc__bt--pri:hover{background:var(--accent-soft)}
.hacc__bt--gh{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.42);padding:9px 16px}
.hacc__bt--gh:hover{background:rgba(255,255,255,.26)}
.hacc__bt--wa{width:38px;flex:none;padding:0;background:#25d366;color:#fff;border:0}
.hacc__bt--wa:hover{background:#1eb658}
.hacc__bt--wa svg{width:19px;height:19px;fill:currentColor}

/* Uno abierto de salida: sin esto, quien no señala nada sólo ve cuatro nombres
   en vertical. Es el SEGUNDO panel. Al entrar el cursor en la fila se cierra,
   salvo que sea justo el señalado — de ahí que la regla de :hover vaya después. */
.hacc__pan:nth-child(2){flex-grow:3.4}
.hacc__pan:nth-child(2) .hacc__vert{opacity:0}
.hacc__pan:nth-child(2) .hacc__open{opacity:1;transform:none;pointer-events:auto}
.hacc:hover .hacc__pan:nth-child(2){flex-grow:1}
.hacc:hover .hacc__pan:nth-child(2) .hacc__vert{opacity:1}
.hacc:hover .hacc__pan:nth-child(2) .hacc__open{opacity:0;transform:translateY(10px);pointer-events:none}
.hacc__pan:hover,.hacc:hover .hacc__pan:hover,
.hacc__pan:focus-within,.hacc:hover .hacc__pan:focus-within{flex-grow:3.4}
.hacc__pan:hover .hacc__vert,.hacc:hover .hacc__pan:hover .hacc__vert,
.hacc__pan:focus-within .hacc__vert,.hacc:hover .hacc__pan:focus-within .hacc__vert{opacity:0}
.hacc__pan:hover .hacc__open,.hacc:hover .hacc__pan:hover .hacc__open,
.hacc__pan:focus-within .hacc__open,.hacc:hover .hacc__pan:focus-within .hacc__open{opacity:1;transform:none;pointer-events:auto}

/* Sin acordeón cuando no hay puntero que pueda señalar, o cuando los paneles
   cerrados quedarían demasiado estrechos. `hover:none` cubre el caso que el
   ancho solo no ve: una tablet táctil de 1024px, donde el acordeón se quedaría
   congelado con el primer panel abierto y los otros tres inalcanzables.
   Apilado se abren todos, con sus botones. */
@media (hover: none), (max-width: 1024px){
	.hacc{display:grid;grid-template-columns:repeat(2,1fr);height:auto;gap:12px}
	.hacc__pan{aspect-ratio:4/3}
	.hacc__vert{display:none}
	.hacc__open,.hacc:hover .hacc__pan:nth-child(2) .hacc__open{opacity:1;transform:none;pointer-events:auto}
}
@media(max-width:560px){.hacc{grid-template-columns:1fr}}

/* ==== Bloques del plan añadidos: Especialidades · Tienda · Médicos · Inversionistas · Blog · Contacto ==== */
.ph-sec{padding-block:clamp(60px,8vw,100px)}
.ph-sec--tint{background:var(--surface)}
.ph-shead{max-width:640px;margin-bottom:clamp(26px,4vw,42px)}
.ph-shead--c{margin-inline:auto;text-align:center}
.ph-shead h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--ink)}
.ph-shead p{margin-top:12px;color:var(--fg);max-width:54ch}
.ph-btn{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--sans);padding:12px 22px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:.25s var(--ease)}
.ph-btn--grad{background:var(--grad);color:#fff;box-shadow:var(--shadow-sm)}
.ph-btn--grad:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ph-btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.ph-btn--ghost:hover{border-color:var(--accent);background:var(--accent-soft)}
.ph-grid{display:grid;gap:18px}.ph-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.ph-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ph-3{grid-template-columns:1fr}}
.ph-spec{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.ph-spec{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ph-spec{grid-template-columns:repeat(2,1fr)}}
.ph-spec a{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-weight:600;color:var(--ink);font-size:.9rem}
.ph-spec a:hover{border-color:var(--accent);background:var(--accent-soft)}
.ph-spec .d{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto}
/* Especialidades · fondo azul + tiles con icono */
.ph-sec--blue{background:var(--grad);color:#fff}
.ph-sec--blue .eyebrow{color:var(--accent-lt)}
.ph-sec--blue .ph-shead h2{color:#fff}
.ph-sec--blue .gtext{-webkit-text-fill-color:var(--accent-lt);color:var(--accent-lt);background:none}
.esp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.esp-tile{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.07);transition:.16s var(--ease)}
.esp-tile:hover{background:#fff;transform:translateY(-2px)}
.esp-tile .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;flex:0 0 auto;transition:.16s var(--ease)}
.esp-tile:hover .ic{background:var(--accent);color:#fff}.esp-tile .ic svg{width:21px;height:21px;display:block}
.esp-tile b{font:600 .92rem var(--sans);color:#fff}.esp-tile:hover b{color:var(--ink)}
.esp-more{display:inline-flex;align-items:center;gap:7px;margin-top:24px;color:#fff;font:600 .9rem var(--sans)}.esp-more svg{width:16px;height:16px;color:var(--accent-lt);display:block}
@media(max-width:900px){.esp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.esp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.esp-grid{grid-template-columns:1fr}}
.ph-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s var(--ease)}
.ph-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ph-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ph-card__b{padding:18px}.ph-card__b h3{font-size:1.15rem;color:var(--ink)}
.ph-tag{font-size:.8rem;color:var(--accent);font-weight:600}
.ph-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:820px){.ph-split{grid-template-columns:1fr}}
.ph-split img{border-radius:16px;aspect-ratio:16/11;object-fit:cover;box-shadow:var(--shadow);width:100%}
.ph-split h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--ink)}
.ph-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ph-mini span{font-size:.8rem;background:var(--accent-soft);color:var(--accent-deep);padding:6px 12px;border-radius:100px;font-weight:600}
.ph-shop{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:620px){.ph-shop{grid-template-columns:1fr}}
.ph-shop a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between}
.ph-shop a:hover{border-color:var(--accent)}
/* ===== Tienda (copia fiel del demo, autocontenida) ===== */
/* Tienda · Pasaporte a tu salud — «foto a sangre, ficha encima», con la ficha
   a la derecha (elegida entre las 6 de preview-pasaporte-variants-4.html).
   La sección deja de ser un panel dentro de una caja clara y pasa a ocupar
   todo el ancho con una fotografía de instalaciones. Sin personas, por
   decisión del cliente. */
.tshopx{position:relative;line-height:1.5;display:grid;grid-template-columns:minmax(0,1fr);
        align-items:center;overflow:hidden;min-height:clamp(420px,42vw,540px);
        padding-block:clamp(34px,4.5vw,64px);background:var(--ink)}
.tshopx a{color:inherit;text-decoration:none}
.tshopx .tx-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 52%}
/* Velo de derecha a izquierda: la ficha va a la derecha, así que ahí es donde
   hace falta oscurecer; la recepción de Zapopan se ve limpia por el lado
   contrario, que es su lado bueno. */
.tshopx .tx-scrim{position:absolute;inset:0;background:linear-gradient(270deg,rgba(12,14,50,.88) 0%,rgba(12,14,50,.52) 46%,rgba(12,14,50,.18) 100%)}
/* width:100% obligatorio: dentro de un grid, `margin:0 auto` gana al estirado
   y la caja se encogería a su contenido, dejando la ficha centrada. */
.tshopx .tx-wrap{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.tshopx .tx-row{display:flex;justify-content:flex-end}
.tshopx .tx-card{max-width:470px;width:100%;background:#fff;border-radius:18px;
                 padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-lg)}
.tshopx .tx-eye{font:600 .7rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.tshopx .tx-h2{font:600 clamp(1.4rem,2.7vw,1.95rem) var(--serif);color:var(--ink);margin:12px 0 0;letter-spacing:0}
.tshopx .tx-lead{margin:10px 0 0;font-size:.92rem;color:var(--fg)}
.tshopx .tx-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.tshopx .tx-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink)}
.tshopx .tx-list svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto;display:block}
.tshopx .tx-fb{display:flex;align-items:center;gap:16px;margin-top:20px;padding-top:18px;
               border-top:1px solid var(--line);flex-wrap:wrap}
.tshopx .tx-price{font:700 1.75rem var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tshopx .tx-price small{font:500 .78rem var(--sans);color:var(--muted)}
.tshopx .tx-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
                font:600 .88rem var(--sans);padding:13px 26px;background:var(--grad);color:#fff;
                box-shadow:var(--shadow-sm);transition:.18s var(--ease);white-space:nowrap}
.tshopx .tx-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
/* Apilado la ficha ocupa el ancho y el velo pasa a vertical: un degradado
   lateral no tapa nada cuando ya no hay dos columnas. */
@media(max-width:820px){
	.tshopx .tx-scrim{background:linear-gradient(180deg,rgba(12,14,50,.5),rgba(12,14,50,.82))}
	.tshopx .tx-card{max-width:none}
}

/* ===== Médicos (variante A, autocontenida = copia fiel del demo) ===== */
.mdx{line-height:1.5;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(40px,5.5vw,72px)}
.mdx a{color:inherit;text-decoration:none}
.mdx .md-wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.mdx .md-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,56px);align-items:center}
.mdx .md-eye{font:600 .7rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.mdx .md-h2{font:600 clamp(1.9rem,4vw,3rem) var(--serif);color:var(--ink);margin:12px 0 0;line-height:1.05}
.mdx .md-g{font-style:italic;font-weight:600;background:linear-gradient(135deg,#1940e5,#1a2177);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Subtítulo: va entre el titular y el cuerpo, con peso propio para que no
   se lea como una segunda línea del párrafo. */
.mdx .md-sub{margin:12px 0 0;font:600 1.12rem var(--sans);color:var(--ink);max-width:40ch;line-height:1.4}
.mdx .md-lead{margin:10px 0 0;color:#5b6070;font-size:1.02rem;max-width:46ch;line-height:1.6}
.mdx .md-blist{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.mdx .md-item{display:flex;gap:13px;align-items:flex-start}
.mdx .md-item .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}.mdx .md-item .ic svg{width:21px;height:21px;display:block}
.mdx .md-item b{font:600 .95rem var(--sans);color:var(--ink)}.mdx .md-item small{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}
.mdx .md-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1940e5,#1a2177);color:#fff;border-radius:100px;padding:12px 22px;font:600 .9rem var(--sans);margin-top:24px}.mdx .md-cta svg{width:16px;height:16px;display:block}
.mdx .md-media img{width:100%;height:clamp(340px,44vh,460px);object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
@media(max-width:820px){.mdx .md-split{grid-template-columns:1fr}}
/* ===== Blog (variante E · lista editorial, autocontenida) ===== */
.blgx{line-height:1.5;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(38px,5vw,64px)}
.blgx a{color:inherit;text-decoration:none}
.blgx .bl-wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.blgx .bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,34px)}
.blgx .bl-eye{font:600 .7rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.blgx .bl-h2{font:600 clamp(1.7rem,3.6vw,2.7rem) var(--serif);color:var(--ink);margin:10px 0 0}
.blgx .bl-g{font-style:italic;font-weight:600;background:linear-gradient(135deg,#1940e5,#1a2177);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.blgx .bl-seeall{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font:600 .88rem var(--sans)}.blgx .bl-seeall svg{width:16px;height:16px;display:block}
.blgx .bl-list{display:flex;flex-direction:column}
.blgx .bl-row{display:flex;align-items:center;gap:18px;padding:18px 4px;border-top:1px solid var(--line);transition:.16s var(--ease)}.blgx .bl-row:first-child{border-top:0}
.blgx .bl-row:hover{padding-left:8px}
.blgx .bl-thumb{width:96px;height:70px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.blgx .bl-tx{flex:1;min-width:0}
.blgx .bl-tag{display:inline-block;font:600 .68rem var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:100px;padding:4px 11px}
.blgx .bl-tx h3{font:600 1.15rem var(--serif);color:var(--ink);margin-top:6px}
.blgx .bl-meta{font-size:.78rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}.blgx .bl-meta svg{width:14px;height:14px;display:block}
.blgx .bl-arw{color:var(--accent);opacity:0;transition:.16s var(--ease);flex:0 0 auto}.blgx .bl-row:hover .bl-arw{opacity:1}.blgx .bl-arw svg{width:18px;height:18px;display:block}
@media(max-width:560px){.blgx .bl-thumb,.blgx .bl-meta{display:none}}
/* ===== CTA pre-footer (combo 1) — el footer .cf-foot vive en footer.css (site-wide) ===== */
.cf-cta{line-height:1.5;background:#f6f8ff;padding:clamp(40px,6vw,72px) 0;text-align:center}
.cf-cta .cf-wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.cf-cta .cf-eye{font:600 .7rem var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.cf-cta h2{font:600 clamp(2rem,4.4vw,3.3rem) var(--serif);color:var(--ink);margin:12px 0 0;line-height:1.05}.cf-cta h2 em{font-style:italic;color:var(--accent)}
.cf-cta p{color:var(--muted);margin:14px auto 0;max-width:46ch;font-size:1.02rem}
.cf-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cf-btn{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:13px 24px;font:600 .9rem var(--sans);transition:.16s var(--ease)}.cf-btn svg{width:16px;height:16px;display:block}
.cf-btn--grad{background:linear-gradient(135deg,#1940e5,#1a2177);color:#fff}.cf-btn--grad:hover{filter:brightness(1.08)}
.cf-btn--wa{background:#22a565;color:#fff}.cf-btn--wa:hover{filter:brightness(.96)}

/* Móvil: enlaces de texto de una línea con altura de toque suficiente. */
@media(max-width:820px){.esp-more,.blgx .bl-seeall{padding-block:8px}.qa1 a{padding-block:9px}}

.ph-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.ph-rows{grid-template-columns:1fr}}
.ph-row{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:20px}
.ph-row b{display:block;font:600 1.05rem var(--serif);color:var(--ink);margin-bottom:4px}