/* UXEN — servicios.css · Hub de servicios hospitalarios (/servicios/).
 *
 * El archivo del CPT `servicio` no es un listado de fichas: es la página a la
 * que apuntan NUEVE enlaces distintos de los dos menús (Laboratorio,
 * Imagenología, Cirugía, Hospitalización, «Servicios en sede»…), así que tiene
 * que contestar por todos ellos. De ahí que cada servicio tenga su propia ancla.
 *
 * Mismos tokens que la portada (home.css) para que no se sienta «otra página»:
 * azul #2f6ef3 sobre tinta #1a2177, Playfair para titulares, Inter para cuerpo.
 * Todo va bajo `.svc-page` porque esta hoja se encola sobre ui.css, que ya pinta
 * el resto del sitio: sin el prefijo le pisaríamos los estilos a header y footer.
 *
 * Se encola SOLO cuando is_post_type_archive( 'servicio' ) (functions.php).
 */

.svc-page{
	--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-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);
	--serif:"Playfair Display",Georgia,serif;
	--sans:"Inter",system-ui,-apple-system,sans-serif;
	--ease:cubic-bezier(.16,1,.3,1);
	background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.62
}
.svc-page h2,.svc-page h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.svc-page p{margin:0}
.svc-page a{text-decoration:none}
.svc-page img{display:block;max-width:100%}

.svc-wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.svc-eyebrow{font:600 .72rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.svc-head{max-width:760px;margin-bottom:clamp(28px,4vw,46px)}
.svc-head h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-top:14px}
.svc-head h2 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.svc-head p{margin-top:13px;color:var(--fg);max-width:58ch}

/* ---------- Hero de interna ----------
   El hero lo pinta uxen_render_hero() con las clases de ui.css, donde el <h1>
   no lleva color propio: hereda. Dentro de `.svc-page` eso significaba heredar
   el gris del cuerpo (#666) y el titular salía descolorido, más claro que en
   las demás internas. Aquí se le devuelve la tinta de marca. */
.svc-page .uxen-hero__head{background:var(--bg)}
.svc-page .uxen-hero__head .u-h1{color:var(--ink)}
.svc-page .uxen-hero__head .u-eyebrow{color:var(--accent)}
.svc-page .uxen-hero__head .u-lead{color:var(--fg)}
/* Con portada el encabezado va dentro de la tarjeta blanca del arte (y en
   móvil sube sobre la imagen): sin anular este fondo se vería un rectángulo
   azulado sobre el blanco de la tarjeta. */
.svc-page .uxen-hero--cover .uxen-hero__head{background:none}

/* ---------- Barra de anclas ----------
   Los menús mandan «Laboratorio» y «Cirugía» a esta misma URL; la barra es lo
   que hace que cada uno aterrice donde debe. Pegajosa bajo el header. */
.svc-jump{position:sticky;top:60px;z-index:40;background:rgba(246,248,255,.86);backdrop-filter:saturate(180%) blur(14px);border-block:1px solid var(--line2)}
/* Nueve anclas no caben en una línea ni en escritorio, así que la tira rueda en
   horizontal. La máscara del borde derecho es lo que distingue «hay más» de
   «se cortó»: sin ella el último chip parece un bug de maquetación. */
.svc-jump__in{display:flex;gap:9px;overflow-x:auto;padding-block:13px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.svc-jump__in::-webkit-scrollbar{display:none}
.svc-jump a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:600 .82rem var(--sans);white-space:nowrap;transition:.2s var(--ease)}
.svc-jump a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.svc-jump a svg{width:15px;height:15px;color:var(--accent)}
/* Servicio a la vista (lo marca el script del final de archive-servicio.php). */
.svc-jump a.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.svc-jump a.is-active svg{color:#fff}

/* El ancla queda bajo el header fijo + la barra si no se compensa el scroll. */
.svc-card,.svc-unit,.svc-page [id]{scroll-margin-top:132px}

/* ---------- Rejilla de servicios ---------- */
.svc-list{padding-block:clamp(48px,7vw,84px);background:var(--surface)}
/* Urgencias va aparte, en grande; las otras ocho caben justas en 4 × 2. */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s var(--ease)}
.svc-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--accent-lt)}
.svc-card__ph{position:relative;height:176px;overflow:hidden;background:var(--accent-soft)}
.svc-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.svc-card:hover .svc-card__ph img{transform:scale(1.06)}
/* Las dos fotos verticales (retratos de personal): el recorte centrado de una
   ventana apaisada les deja la cara fuera, así que el encuadre sube. */
.svc-card__ph--tall img{object-position:50% 26%}
.svc-card__ic{position:absolute;top:176px;left:20px;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:13px;background:var(--accent);color:#fff;display:grid;place-items:center;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.svc-card__ic svg{width:22px;height:22px}
.svc-card__body{padding:34px 22px 24px;display:flex;flex-direction:column;flex:1}
/* Etapa del recorrido: convierte nueve tarjetas iguales en un camino. */
.svc-card__step{font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.svc-card__body h3{font-size:1.14rem}
.svc-card__body p{margin-top:8px;font-size:.92rem;color:var(--muted);line-height:1.6}
/* Detalle en lista: lo que incluye el servicio, sin convertirlo en una ficha. */
.svc-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.svc-card__tags span{font:500 .74rem var(--sans);color:var(--accent-br);background:var(--accent-soft);border-radius:7px;padding:4px 9px}
.svc-card__link{align-self:flex-start;margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;font:600 .85rem var(--sans);color:var(--accent);transition:color .2s var(--ease)}
.svc-card__link svg{width:16px;height:16px;flex:0 0 auto;transition:transform .25s var(--ease)}
/* Servicios sin página propia: el enlace es WhatsApp, con su verde y su logo. */
.svc-card__link--wa{color:#128c4a}
.svc-card:hover .svc-card__link--wa{color:#0e7a3f}
.svc-card:hover .svc-card__link--wa svg{transform:none}
/* Enlace de tarjeta completa: el <a> cubre la tarjeta sin anidar bloques. */
.svc-card__link::after{content:"";position:absolute;inset:0;border-radius:18px}
.svc-card:hover .svc-card__link{color:var(--accent-br)}
.svc-card:hover .svc-card__link svg{transform:translateX(4px)}
.svc-card__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Tarjeta destacada (Urgencias): misma tarjeta, foto a la izquierda. El icono
   deja de colgar del borde de la foto y entra en el cuerpo, junto al título. */
.svc-card--feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);margin-bottom:18px;border-color:var(--accent-lt)}
.svc-card--feat .svc-card__ph{height:auto;min-height:330px}
.svc-card--feat .svc-card__ph img{position:absolute;inset:0}
.svc-card--feat .svc-card__ic{position:static;transform:none;grid-column:2;grid-row:1;margin:clamp(26px,3.4vw,44px) 0 0 clamp(24px,3.4vw,44px);border:0;width:52px;height:52px;border-radius:14px}
.svc-card--feat .svc-card__ic svg{width:26px;height:26px}
.svc-card--feat .svc-card__body{grid-column:2;grid-row:1;justify-content:center;padding:calc(clamp(26px,3.4vw,44px) + 70px) clamp(24px,3.4vw,44px) clamp(26px,3.4vw,40px)}
.svc-card--feat .svc-card__body h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.svc-card--feat .svc-card__body p{font-size:1rem;max-width:44ch}
.svc-card--feat .svc-card__link{font-size:.92rem}
.svc-card__live{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:600 .78rem var(--sans);box-shadow:var(--shadow-sm)}
.svc-card__live i{width:8px;height:8px;border-radius:50%;background:#22b35e;box-shadow:0 0 0 3px rgba(34,179,94,.22)}

/* ---------- Unidades de alta especialidad ----------
   Sin foto a propósito: después de nueve tarjetas con imagen, otra rejilla
   fotográfica se leía como «más de lo mismo» y las unidades son otra cosa
   (marcas propias con micrositio). Banda de tinta y tipografía, no imagen. */
.svc-units{padding-block:clamp(48px,7vw,84px);background:var(--ink);background-image:var(--grad);color:var(--ink-fg)}
.svc-units h2,.svc-units h3{color:#fff}
.svc-units .svc-eyebrow{color:var(--accent-lt)}
.svc-units .svc-head p{color:var(--ink-muted)}
.svc-units__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-unit{display:flex;flex-direction:column;padding:28px 26px 26px;border:1px solid var(--ink-line);border-radius:18px;background:rgba(255,255,255,.06);transition:.25s var(--ease)}
.svc-unit:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);transform:translateY(-3px)}
.svc-unit__ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid var(--ink-line);display:grid;place-items:center;color:#fff}
.svc-unit__ic svg{width:22px;height:22px}
.svc-unit h3{margin-top:18px;font-size:1.3rem}
.svc-unit p{margin-top:10px;color:var(--ink-muted);font-size:.93rem;line-height:1.65}
.svc-unit__link{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;font:600 .85rem var(--sans);color:#fff}
.svc-unit__link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.svc-unit:hover .svc-unit__link svg{transform:translateX(4px)}

/* ---------- Dónde + el complejo ----------
   Una sola banda en dos columnas: las sedes a la izquierda y, al lado, lo que
   hay en cada complejo. Antes eran dos bandas flojas seguidas. */
.svc-where{padding-block:clamp(48px,7vw,84px);background:var(--bg2)}
.svc-where__cols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.svc-where__cols--solo{grid-template-columns:minmax(0,1fr);max-width:640px}
.svc-where__list{display:grid;gap:10px}
.svc-sede{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.25s var(--ease)}
.svc-sede:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.svc-sede__pin{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.svc-sede__pin svg{width:19px;height:19px}
.svc-sede__txt{flex:1;min-width:0}
.svc-sede h3{font-size:1.06rem}
.svc-sede p{margin-top:3px;font-size:.85rem;color:var(--muted)}
.svc-sede__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font:600 .82rem var(--sans);color:var(--accent)}
.svc-sede__go svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.svc-sede:hover .svc-sede__go svg{transform:translateX(3px)}
.svc-where__all{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font:600 .88rem var(--sans);color:var(--accent)}
.svc-where__all svg{width:16px;height:16px}
.svc-where__all:hover{color:var(--accent-br)}

.svc-extra{padding:clamp(24px,3vw,34px);background:#fff;border:1px solid var(--line);border-radius:18px}
.svc-extra h3{margin-top:12px;font-size:1.4rem}
.svc-extra p{margin-top:9px;font-size:.9rem;color:var(--muted)}
.svc-extra__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px}
.svc-extra__list li{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line2);font:500 .9rem var(--sans);color:var(--ink)}
.svc-extra__list li:first-child{border-top:0}
.svc-extra__list svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}

/* ---------- CTA final ---------- */
.svc-cta{padding-block:clamp(48px,7vw,84px);background:var(--bg)}
.svc-cta__box{display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-sm);padding:clamp(30px,4.5vw,50px)}
.svc-cta__box h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.svc-cta__box p{margin-top:10px;max-width:46ch;color:var(--fg)}
.svc-cta__txt{flex:1 1 auto;min-width:0}
.svc-acts{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:11px;justify-content:flex-end}
.svc-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;font:600 .9rem var(--sans);border:1px solid transparent;transition:.25s var(--ease)}
.svc-btn svg{width:18px;height:18px;flex:0 0 auto}
.svc-btn--pri{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(47,110,243,.28)}
.svc-btn--pri:hover{background:var(--accent-br);color:#fff;transform:translateY(-1px)}
.svc-btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.svc-btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.svc-btn--wa{background:#25d366;color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.28)}
.svc-btn--wa:hover{background:#1eb658;color:#fff}

/* ---------- Fichas publicadas del CPT ----------
   Hoy no hay ninguna y la página no las necesita, pero si alguien publica un
   `servicio` en wp-admin tiene que aparecer en algún sitio en vez de perderse. */
.svc-posts{padding-block:clamp(44px,6vw,72px);background:var(--bg2)}
.svc-posts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-post{display:block;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;transition:.25s var(--ease)}
.svc-post:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.svc-post__ph{height:160px;overflow:hidden;background:var(--accent-soft)}
.svc-post__ph img{width:100%;height:100%;object-fit:cover}
.svc-post__body{padding:20px 22px 22px}
.svc-post__body h3{font-size:1.06rem}
.svc-post__body p{margin-top:7px;font-size:.88rem;color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
	.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
	.svc-units__grid,.svc-posts__grid{grid-template-columns:repeat(2,1fr)}
	/* Tres unidades en dos columnas: la tercera ocupa la fila entera en vez de quedarse sola. */
	.svc-unit:last-child:nth-child(odd){grid-column:1/-1}
	.svc-where__cols{grid-template-columns:minmax(0,1fr)}
	.svc-cta__box{flex-direction:column;text-align:center}
	.svc-cta__box p{margin-inline:auto}
	.svc-acts{flex:1 1 auto;justify-content:center}
}
/* La destacada vuelve a ser una tarjeta normal (foto arriba) cuando la columna
   de texto ya no tiene ancho para respirar. */
@media (max-width:760px){
	.svc-card--feat{display:flex}
	.svc-card--feat .svc-card__ph{height:220px;min-height:0}
	.svc-card--feat .svc-card__ic{position:absolute;top:220px;transform:translateY(-50%);margin:0;left:20px;border:3px solid #fff;width:46px;height:46px;border-radius:13px}
	.svc-card--feat .svc-card__ic svg{width:22px;height:22px}
	.svc-card--feat .svc-card__body{padding:34px 22px 24px}
}
@media (max-width:640px){
	.svc-grid,.svc-units__grid,.svc-posts__grid{grid-template-columns:1fr}
	.svc-unit:last-child:nth-child(odd){grid-column:auto}
	.svc-card,.svc-unit,.svc-page [id]{scroll-margin-top:118px}
	.svc-card__ph,.svc-card--feat .svc-card__ph{height:200px}
	.svc-card__ic,.svc-card--feat .svc-card__ic{top:200px}
	.svc-sede__go{font-size:0;gap:0}
	.svc-acts .svc-btn{width:100%;justify-content:center}
}
/* El header baja a 56px en este mismo punto (header.css): la barra de anclas
   tiene que seguirlo o queda un hueco translúcido encima. */
@media (max-width:600px){
	.svc-jump{top:56px}
}
@media (prefers-reduced-motion:reduce){
	.svc-card,.svc-unit,.svc-sede,.svc-post,.svc-btn,.svc-jump a{transition:none}
	.svc-card:hover,.svc-unit:hover,.svc-sede:hover,.svc-post:hover{transform:none}
	.svc-card:hover .svc-card__ph img{transform:none}
}