/*
Theme Name: Zaragoza Sin Dolor
Theme URI: https://zaragozasindolor.es
Template: astra
Author: Instituto Anestésico de Aragón
Description: Tema hijo de Astra para zaragozasindolor.es — Unidad del Dolor. Incluye tipos de contenido, campos y opciones propias de la clínica.
Version: 3.3.2
Text Domain: zsd
*/

/* ══════════════════════════════════════════════════════════
   TOKENS
   Un único sitio donde vive el color y la medida. Astra pinta
   la mayor parte desde el personalizador; esto cubre lo que el
   personalizador no alcanza y mantiene la coherencia.
   ══════════════════════════════════════════════════════════ */
:root {
	/* Azules: el color de la marca */
	--zsd-azul-900: #0B2C40;   /* fondos oscuros, titulares */
	--zsd-azul-950: #06202F;   /* pie de página: un punto más hondo que el cierre */
	--zsd-azul-700: #12688F;   /* enlaces, botón principal */
	--zsd-azul-400: #4B6274;   /* texto secundario sobre claro */
	--zsd-azul-200: #7A8B99;   /* apoyos, líneas */

	/* Verdes: acento y respiración */
	--zsd-verde-500: #2FA98C;  /* acento sólido */
	--zsd-verde-400: #5FD3AE;  /* acento medio */
	--zsd-verde-300: #7FE0C0;  /* acento sobre oscuro */
	--zsd-verde-900: #06342A;  /* fondo profundo */
	--zsd-verde-100: #DFF0E9;  /* fondo suave */

	/* Neutros cálidos: el papel del sitio */
	--zsd-crema-50:  #FDFBF8;
	--zsd-crema-100: #F4F0EA;
	--zsd-crema-200: #EFEAE3;
	--zsd-crema-300: #E7E1D8;

	/* Tipografía */
	--zsd-font-titulo: 'Outfit', system-ui, -apple-system, sans-serif;
	--zsd-font-texto:  'Instrument Sans', system-ui, -apple-system, sans-serif;

	/* Ritmo vertical y radios */
	--zsd-radio:    18px;
	--zsd-radio-sm: 12px;
	--zsd-seccion:  clamp(56px, 8vw, 116px);   /* mismo ritmo que el diseño */
	--zsd-lateral:  clamp(18px, 4vw, 56px);    /* aire lateral del diseño */
	--zsd-ancho:    1400px;
}

/* ── Base ────────────────────────────────────────────────── */
body {
	font-family: var(--zsd-font-texto);
	color: var(--zsd-azul-900);
	background: var(--zsd-crema-50);
}

h1, h2, h3, h4, h5, h6,
.zsd-titulo {
	font-family: var(--zsd-font-titulo);
	color: var(--zsd-azul-900);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* Los titulares del diseño mezclan dos pesos en la misma frase.
   Esta clase marca la parte ligera. */
.zsd-suave { font-weight: 300; }

a { color: var(--zsd-azul-700); }

/* ── Titulares con clase propia ──────────────────────────────
   Astra pinta sus propios h1/h2 (tamaño, peso, color) desde el
   personalizador y desde `.entry-content h2`. Si el titular va sin
   clase, gana Astra y la sección se rompe. Por eso TODO titular del
   tema lleva su clase, con cada propiedad declarada: aquí no se
   hereda nada. La especificidad `.zsd-seccion .zsd-h2` (0,2,0)
   supera a `.entry-content h2` (0,1,1). */
.zsd-h1,
.zsd-seccion .zsd-h1,
.zsd-hero .zsd-h1 {
	margin: 0 0 22px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(40px, 6.4vw, 80px);
	font-weight: 600;
	line-height: .98;
	letter-spacing: -.035em;
	color: var(--zsd-azul-900);
	text-wrap: balance;
}

.zsd-h2,
.zsd-seccion .zsd-h2 {
	margin: 0 0 22px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--zsd-azul-900);
	text-wrap: balance;
}

/* Variante menor para cabeceras de columna (contacto, etc.). */
.zsd-h2--menor,
.zsd-seccion .zsd-h2--menor {
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	letter-spacing: -.02em;
}

.zsd-seccion--oscura .zsd-h1,
.zsd-seccion--oscura .zsd-h2,
.zsd-seccion--verde .zsd-h1,
.zsd-seccion--verde .zsd-h2,
.zsd-hero .zsd-h1 { color: #fff; }

/* ── Contenedor ──────────────────────────────────────────── */
.zsd-wrap {
	width: min(100% - (var(--zsd-lateral) * 2), var(--zsd-ancho));
	margin-inline: auto;
}

.zsd-seccion {
	padding-block: var(--zsd-seccion);

	/*
	 * Ancho completo.
	 *
	 * Basta con el 100%: el contenedor de Astra ya se neutraliza en
	 * customizer.php. Los márgenes negativos que había aquí desplazaban
	 * el contenido cuando el contenedor sí ocupaba todo el ancho, y
	 * además provocaban desbordamiento horizontal por el ancho de la
	 * barra de desplazamiento.
	 */
	width: 100%;
}

.zsd-seccion--oscura {
	background: var(--zsd-azul-900);
	color: #fff;
}
.zsd-seccion--oscura h1,
.zsd-seccion--oscura h2,
.zsd-seccion--oscura h3 { color: #fff; }

.zsd-seccion--verde {
	background: var(--zsd-verde-900);
	color: #fff;
}
.zsd-seccion--verde h2 { color: #fff; }

.zsd-seccion--crema { background: var(--zsd-crema-100); }

/* ── Botones ─────────────────────────────────────────────── */
.zsd-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--zsd-font-titulo);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.zsd-btn:hover { transform: translateY(-1px); }

.zsd-btn--principal {
	background: var(--zsd-azul-900);
	color: #fff;
}
.zsd-btn--principal:hover { background: var(--zsd-azul-700); color: #fff; }

.zsd-btn--acento {
	background: var(--zsd-verde-400);
	color: var(--zsd-verde-900);
}
.zsd-btn--acento:hover { background: var(--zsd-verde-300); }

.zsd-btn--linea {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}
.zsd-btn--linea:hover { background: var(--zsd-azul-900); color: #fff; border-color: var(--zsd-azul-900); }

/* Sobre fondo oscuro el botón de línea se aclara al pasar. */
.zsd-seccion--oscura .zsd-btn--linea:hover,
.zsd-seccion--verde .zsd-btn--linea:hover {
	background: #fff;
	color: var(--zsd-azul-900);
	border-color: #fff;
}

/* ── Antetítulo ──────────────────────────────────────────── */
.zsd-ante {
	display: block;
	margin-bottom: 18px;
	font-family: var(--zsd-font-titulo);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--zsd-verde-500);
}
.zsd-seccion--oscura .zsd-ante,
.zsd-seccion--verde .zsd-ante { color: var(--zsd-verde-300); }

/* ── Rejilla de dolencias ────────────────────────────────── */
.zsd-dolencias {
	display: grid;
	/* 300px de mínimo, como el diseño: cuatro columnas a 1400px. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}

.zsd-dolencia {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	min-height: 138px;
	padding: clamp(20px, 2.2vw, 26px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--zsd-radio);
	background: rgba(255, 255, 255, .05);
	color: #fff;
	text-decoration: none;
	transition: background .18s, border-color .18s;
}
.zsd-dolencia:hover {
	background: var(--zsd-azul-700);
	border-color: var(--zsd-verde-400);
	color: #fff;
}
.zsd-dolencia-t span[aria-hidden] { flex: none; font-size: 17px; color: var(--zsd-verde-300); line-height: 1; }
.zsd-dolencia-num {
	font-family: var(--zsd-font-titulo);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--zsd-verde-300);
}
.zsd-dolencia-t {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(17px, 1.5vw, 19.5px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.25;
}

/* ── Tarjetas de tratamiento ─────────────────────────────── */
.zsd-tratamientos { display: grid; gap: clamp(18px, 2vw, 28px); }

.zsd-tratamiento {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.4vw, 40px);
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--zsd-crema-300);
	border-radius: var(--zsd-radio);
	background: var(--zsd-crema-50);
}
@media (min-width: 860px) {
	.zsd-tratamiento { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
	.zsd-tratamiento--invertido .zsd-tratamiento-media { order: 2; }
}
.zsd-tratamiento-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--zsd-radio-sm);
}
.zsd-tratamiento h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 14px; }
.zsd-tratamiento-lista { margin: 18px 0 0; padding: 0; list-style: none; }
.zsd-tratamiento-lista li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 8px;
	color: var(--zsd-azul-400);
}
.zsd-tratamiento-lista li::before {
	content: '';
	position: absolute;
	left: 0; top: 9px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--zsd-verde-400);
}

/* ── Equipo ──────────────────────────────────────────────── */
.zsd-equipo { display: grid; gap: clamp(24px, 3vw, 48px); }

.zsd-doctor {
	display: grid;
	gap: clamp(20px, 2.6vw, 44px);
	padding: clamp(24px, 3vw, 48px);
	border-radius: var(--zsd-radio);
	background: var(--zsd-crema-50);
}
@media (min-width: 900px) {
	.zsd-doctor { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
}
.zsd-doctor-foto {
	width: 100%;
	border-radius: var(--zsd-radio-sm);
	object-fit: cover;
}
.zsd-doctor-rol {
	font-family: var(--zsd-font-titulo);
	font-size: 14px;
	font-weight: 500;
	color: var(--zsd-verde-500);
	margin-bottom: 6px;
}
.zsd-doctor h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 18px; }
.zsd-doctor-bloque + .zsd-doctor-bloque { margin-top: 22px; }
.zsd-doctor-bloque h3 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zsd-azul-200);
	margin-bottom: 10px;
}
.zsd-doctor-bloque ul { margin: 0; padding-left: 18px; }
.zsd-doctor-bloque li { margin-bottom: 7px; color: var(--zsd-azul-400); }

/* ── Numerados (resultados, pasos) ───────────────────────── */
.zsd-pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(16px, 2vw, 28px);
	counter-reset: paso;
}
.zsd-paso {
	padding: clamp(20px, 2.2vw, 28px);
	border: 1px solid var(--zsd-crema-300);
	border-radius: var(--zsd-radio);
	background: var(--zsd-crema-50);
}
.zsd-paso-num {
	display: block;
	margin-bottom: 12px;
	font-family: var(--zsd-font-titulo);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--zsd-verde-500);
}

/* ── Etiquetas sueltas (indicaciones, méritos) ───────────── */
/* `flex-wrap: balance` reparte los elementos entre las líneas en vez de
   dejar uno suelto abajo. Es reciente (Chrome 150) y todavía no está en
   todos los navegadores, así que va SIEMPRE detrás de `wrap`: un valor
   que el navegador no conoce invalida esa declaración y se queda con la
   anterior. Nunca al revés. */
.zsd-etiquetas { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 10px; }
.zsd-etiqueta {
	padding: 9px 18px;
	border: 1px solid var(--zsd-crema-300);
	border-radius: 999px;
	background: var(--zsd-crema-50);
	font-size: 14px;
	color: var(--zsd-azul-900);
}
.zsd-seccion--oscura .zsd-etiqueta,
.zsd-seccion--verde .zsd-etiqueta {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
}

/* ── Formulario ──────────────────────────────────────────── */
.zsd-form { display: grid; gap: 16px; }
/* Las etiquetas de campo. Se excluyen las que no lo son —la casilla de
   aceptación y las pastillas de opción—, porque `.zsd-form label` pesa
   más que sus propias clases y les imponía el `display: block` y el
   tamaño de texto. */
.zsd-form label:not(.zsd-acepta):not(.zsd-canal) {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zsd-azul-400);
}
.zsd-form input,
.zsd-form select,
.zsd-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(11, 44, 64, .16);
	border-radius: 12px;
	background: var(--zsd-crema-50);
	font-family: inherit;
	font-size: 16px;   /* 16px evita el zoom de iOS al enfocar */
	color: var(--zsd-azul-900);
	transition: border-color .16s;
}
.zsd-form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234B6274' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center; }
.zsd-form textarea { resize: vertical; min-height: 130px; }
.zsd-form input::placeholder,
.zsd-form textarea::placeholder { color: var(--zsd-azul-200); }
.zsd-form input:focus,
.zsd-form select:focus,
.zsd-form textarea:focus {
	outline: none;
	border-color: var(--zsd-verde-500);
	box-shadow: 0 0 0 3px rgba(47, 169, 140, .18);
}
/* La trampa antirrobots: fuera de la vista pero sin display:none, que
   algunos robots detectan. */
.zsd-form-trampa {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}
.zsd-form-et {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zsd-azul-400);
}
#zsd-form-aviso:empty { display: none; }
.zsd-form-pista { display: block; margin-top: 6px; font-size: 13px; color: var(--zsd-azul-200); }
.zsd-form input[type=file] {
	padding: 12px 14px;
	background: var(--zsd-crema-50);
	border: 1px dashed rgba(11, 44, 64, .28);
	cursor: pointer;
}
.zsd-form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; }
.zsd-form button[type=submit] { justify-self: start; padding: 15px 30px; font-size: 15.5px; }

/* ── Casilla de aceptación ───────────────────────────────── */
/* La casilla va a la izquierda y el texto a su lado, alineados por
   arriba: el texto ocupa dos líneas y con `center` la casilla quedaba
   flotando a media altura. */
.zsd-acepta,
.zsd-form .zsd-acepta {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 4px 0 2px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--zsd-azul-400);
	cursor: pointer;
}
.zsd-acepta input[type=checkbox] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--zsd-verde-500);
	cursor: pointer;
}
.zsd-acepta span { display: block; }
.zsd-acepta p { margin: 0; }
.zsd-acepta a { color: var(--zsd-azul-700); text-decoration: underline; text-underline-offset: 2px; }
.zsd-acepta a:hover { color: var(--zsd-azul-900); }
.zsd-acepta input:focus-visible { outline: 2px solid var(--zsd-verde-400); outline-offset: 2px; }

/* ── Botón de envío: reposo y espera ─────────────────────── */
/* htmx pone .htmx-request en el formulario mientras se envía. Sin esta
   regla se ven los dos textos a la vez. */
.zsd-form-btn-espera { display: none; }
.zsd-form.htmx-request .zsd-form-btn-txt { display: none; }
.zsd-form.htmx-request .zsd-form-btn-espera { display: inline; }
.zsd-form.htmx-request button[type=submit] { opacity: .75; cursor: progress; }

/* ── Avisos del formulario ───────────────────────────────── */
.zsd-form-aviso {
	margin: 0 0 4px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.5;
}
.zsd-form-aviso.es-ok    { background: var(--zsd-verde-100); color: #0B5941; }
.zsd-form-aviso.es-error { background: #FDECEA; color: #A93226; }
.zsd-form-aviso:focus { outline: 2px solid var(--zsd-verde-400); outline-offset: 2px; }

/* Agradecimiento que sustituye al formulario tras enviarlo. */
.zsd-form-gracias { text-align: center; padding: clamp(20px, 3vw, 36px) 0; }
.zsd-form-gracias-icono {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--zsd-verde-400);
	color: var(--zsd-verde-900);
	font-size: 26px;
	font-weight: 700;
}
.zsd-form-gracias .zsd-form-aviso { background: none; padding: 0; font-size: 17px; font-weight: 600; }
.zsd-form-gracias-txt { margin: 8px 0 0; color: var(--zsd-azul-400); font-size: 15px; }

/* Canal de contacto preferido: pastillas, no un desplegable. */
.zsd-canales { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 10px; }
.zsd-canal input { position: absolute; opacity: 0; width: 0; height: 0; }
.zsd-canal span {
	display: block;
	padding: 11px 20px;
	border: 1px solid rgba(11, 44, 64, .18);
	border-radius: 999px;
	background: var(--zsd-crema-50);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--zsd-azul-900);
	cursor: pointer;
	transition: background .16s, color .16s, border-color .16s;
}
.zsd-canal input:checked + span {
	background: var(--zsd-azul-900);
	border-color: var(--zsd-azul-900);
	color: #fff;
}
.zsd-canal input:focus-visible + span {
	outline: 2px solid var(--zsd-verde-400);
	outline-offset: 2px;
}

/* ── Datos de contacto ───────────────────────────────────── */
.zsd-contactos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(20px, 2.4vw, 36px);
}
.zsd-contacto-label {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zsd-azul-200);
}
.zsd-contacto a {
	display: block;
	margin-bottom: 6px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.zsd-contacto a:hover { border-bottom-color: currentColor; }

/* ── Blog ────────────────────────────────────────────────── */
.zsd-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(20px, 2.4vw, 34px);
}
.zsd-post {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--zsd-crema-300);
	border-radius: var(--zsd-radio);
	background: var(--zsd-crema-50);
	overflow: hidden;
}
.zsd-post img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.zsd-post-cuerpo { padding: 24px; }
.zsd-post-tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--zsd-verde-100);
	font-size: 12px;
	font-weight: 600;
	color: var(--zsd-verde-900);
}
.zsd-post h2 { font-size: 20px; margin-bottom: 10px; }
.zsd-post h2 a { color: inherit; text-decoration: none; }

/* ── Cabecera y pie ──────────────────────────────────────── */
.zsd-cta-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.zsd-pie-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 34px 40px;
}
/* El texto base del pie va al 62% (diseño); los enlaces algo más
   presentes y blancos del todo al pasar por encima. */
.zsd-pie a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s; }
.zsd-pie a:hover { color: #fff; }
.zsd-pie-legal {
	margin-top: 38px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	justify-content: space-between;
	font-size: 13px;
	color: rgba(255, 255, 255, .4);
}
.zsd-pie-legal a { color: rgba(255, 255, 255, .4); }
.zsd-pie-legal a:hover { color: #fff; }

/* ── Accesibilidad ───────────────────────────────────────── */
.zsd-solo-lectores {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Animaciones de entrada ──────────────────────────────── */
/* tema.js marca cada bloque con .zsd-reveal y le da un retardo según
   su posición entre hermanos; al llegar a la vista añade .es-visible.
   Sin JS no pasa nada: el contenido se ve tal cual. */
.zsd-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .75s cubic-bezier(.2, .7, .2, 1) var(--zsd-retardo, 0ms),
		transform .75s cubic-bezier(.2, .7, .2, 1) var(--zsd-retardo, 0ms);
	will-change: opacity, transform;
}
.zsd-reveal.es-visible { opacity: 1; transform: none; will-change: auto; }

/* La portada entra con algo más de recorrido. */
.zsd-hero .zsd-reveal { transform: translateY(30px); }
.zsd-hero .zsd-hero-img.zsd-reveal { transform: scale(1.04); }
.zsd-hero .zsd-reveal.es-visible { transform: none; }

/* Tarjetas y retratos: elevación al pasar el ratón. */
.zsd-dolencia,
.zsd-tarjeta,
.zsd-post,
.zsd-retratos img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .25s, background-color .25s; }
@media (hover: hover) {
	.zsd-retratos img:hover { transform: translateY(-4px); }
	.zsd-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(11, 44, 64, .35); }
}

/* Cabecera: sombra suave en cuanto se abandona el borde superior. */
.zsd-header { transition: box-shadow .3s, background-color .3s; }
.zsd-header.ha-bajado { box-shadow: 0 8px 28px -18px rgba(11, 44, 64, .35); }

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.zsd-btn:hover { transform: none; }
	.zsd-reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   COMPONENTES DEL DISEÑO
   ══════════════════════════════════════════════════════════ */

/* ── Cabecera de página interior ─────────────────────────── */
/* Medidas del diseño para todas las páginas interiores. */
.zsd-cabecera { padding-block: clamp(44px, 6vw, 88px); }
.zsd-cabecera .zsd-ante { margin-bottom: 16px; }
.zsd-cabecera .zsd-h1 {
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0 0 20px;
	max-width: 860px;
}
.zsd-cabecera .zsd-h1:last-child { margin-bottom: 0; }
.zsd-cabecera .zsd-entradilla {
	max-width: 620px;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}
.zsd-cabecera--imagen .zsd-dos-col { gap: clamp(28px, 4vw, 56px); }
.zsd-cabecera--imagen .zsd-dos-col-media img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}

/* ── Foto ancha con pie ──────────────────────────────────── */
/* Panorámica 21/9 con esquinas de 24px, como en el diseño. */
.zsd-seccion .zsd-foto-ancha { margin: clamp(32px, 4.5vw, 64px) 0 0; }
.zsd-seccion .zsd-foto-ancha img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}
.zsd-seccion .zsd-foto-ancha .zsd-foto-pie,
.zsd-foto-ancha figcaption {
	margin-top: 14px;
	font-size: 15px;
	color: var(--zsd-azul-200);
	font-style: italic;
}

/* ── Rejilla de dolencias numeradas ──────────────────────── */
.zsd-dolor-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(30px, 4vw, 48px);
}
.zsd-dolor-cab .zsd-h2 { margin: 0; }
.zsd-dolor-cab .zsd-btn--linea { padding: 13px 24px; font-size: 15px; font-weight: 500; border-color: rgba(255, 255, 255, .3); }
.zsd-dolor-cab .zsd-btn--linea:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ── Bloque destacado (medicina regenerativa en portada) ─── */
/* El titular va en mayúsculas y más rotundo que un h2 normal;
   la imagen, centrada y contenida como en el diseño. */
.zsd-destacado .zsd-h2 {
	font-size: clamp(32px, 4vw, 54px);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0 0 14px;
}
.zsd-destacado-sub {
	font-family: var(--zsd-font-titulo);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 500;
	letter-spacing: -.02em;
	color: var(--zsd-azul-700);
	margin: 0 0 22px;
}
.zsd-destacado .zsd-entradilla { max-width: 560px; }
.zsd-destacado .zsd-dos-col-media img {
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
	object-fit: contain;
	border-radius: 22px;
	display: block;
}

/* ── Aseguradoras ────────────────────────────────────────── */
/* Sección baja: etiquetita verde con la nota al lado y los logos
   debajo. En escritorio, una fila con hueco regular; en móvil, un
   carrusel que se desplaza solo (la pista va duplicada en el HTML
   para que dé la vuelta sin salto). */
.zsd-aseg { padding-block: clamp(40px, 5vw, 72px); }
.zsd-aseg-cab {
	display: flex;
	flex-wrap: wrap;
	flex-wrap: balance;
	gap: 14px 28px;
	align-items: baseline;
	margin-bottom: clamp(24px, 3vw, 36px);
}
.zsd-aseg-etiqueta { margin-bottom: 0; }
.zsd-aseg-nota { font-size: 15px; color: var(--zsd-azul-200); }

.zsd-aseg-carrusel { --zsd-aseg-hueco: clamp(28px, 4vw, 56px); }
.zsd-aseg-logos {
	display: flex;
	flex-wrap: wrap;
	flex-wrap: balance;
	align-items: center;
	justify-content: center;
	gap: 26px var(--zsd-aseg-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
}
.zsd-aseg-logo { flex: none; display: flex; align-items: center; }
/* En gris para que ninguna compañía destaque sobre otra; al pasar el
   ratón recupera su color. */
.zsd-aseg-logo img {
	display: block;
	height: clamp(30px, 3.2vw, 46px);
	width: auto;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .62;
	transition: filter .2s, opacity .2s;
}
.zsd-aseg-logo img:hover { filter: none; opacity: 1; }
.zsd-aseg-nombre {
	font-family: var(--zsd-font-titulo);
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--zsd-azul-200);
}
/* En escritorio la copia sobra. */
.zsd-aseg-logos[aria-hidden] { display: none; }

@media (max-width: 899px) {
	.zsd-aseg-carrusel {
		--zsd-aseg-hueco: 40px;
		display: flex;
		gap: var(--zsd-aseg-hueco);
		overflow: hidden;
		/* Los extremos se desvanecen para que la entrada y salida de
		   cada logo sea suave. */
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.zsd-aseg-logos,
	.zsd-aseg-logos[aria-hidden] {
		display: flex;
		flex: none;
		flex-wrap: nowrap;
		gap: var(--zsd-aseg-hueco);
		animation: zsd-marquee var(--zsd-aseg-dur, 28s) linear infinite;
	}
	.zsd-aseg-carrusel[data-pausa] .zsd-aseg-logos { animation-play-state: paused; }
	.zsd-aseg-logo img { height: 36px; max-width: 140px; }
}
@keyframes zsd-marquee {
	to { transform: translateX(calc(-100% - var(--zsd-aseg-hueco))); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
	/* Sin movimiento automático: se puede deslizar con el dedo. */
	.zsd-aseg-carrusel { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; }
	.zsd-aseg-logos { animation: none; }
	.zsd-aseg-logos[aria-hidden] { display: none; }
	.zsd-aseg-logo { scroll-snap-align: start; }
}

/* ── Ajustes de móvil ────────────────────────────────────── */
@media (max-width: 700px) {
	/* Doce tarjetas apiladas a 138px cada una hacían la portada
	   interminable: en móvil se compactan en una fila número + texto. */
	.zsd-dolencia {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		min-height: 0;
		padding: 16px 18px;
	}
	.zsd-dolencia-num { flex: none; width: 26px; }
	.zsd-dolencia-t { flex: 1; }
	.zsd-dolencias { gap: 10px; }

	/* La panorámica 21/9 se queda en una tira; a 4/3 se ve la consulta. */
	.zsd-seccion .zsd-foto-ancha img { aspect-ratio: 4 / 3; border-radius: 18px; }

	/* Los ajustes móviles del hero viven en inc/bloques.php, junto a su
	   regla base: ese CSS se imprime después de esta hoja y, a igual
	   especificidad, gana el último. */
}

/* ── Preguntas frecuentes: despliegue suave ─────────────── */
.zsd-faq[open] .zsd-faq-cuerpo { animation: zsd-desplegar .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes zsd-desplegar {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ── Cierre con teléfono ─────────────────────────────────── */
.zsd-cierre {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(30px, 4vw, 60px);
	align-items: center;
}
.zsd-cierre .zsd-h2 { margin: 0 0 18px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -.035em; }
.zsd-cierre-dato { max-width: 460px; font-size: 17px; color: rgba(255, 255, 255, .72); line-height: 1.6; margin: 0; }
.zsd-cierre > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.zsd-cierre-tel {
	display: block;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--zsd-verde-300);
	text-decoration: none;
	transition: color .2s;
}
.zsd-cierre-tel:hover { color: #fff; }
.zsd-cierre-mail { display: block; color: rgba(255,255,255,.6); text-decoration: none; font-size: 15px; transition: color .2s; }
.zsd-cierre-mail:hover { color: #fff; }
.zsd-cierre .zsd-btn { margin-top: 10px; padding: 15px 30px; font-size: 15.5px; }

/* Cierre sobre fondo claro (verde o crema): texto oscuro, teléfono en
   azul y botón marino. Es el mismo tratamiento que el diseño da al CTA
   de Medicina regenerativa. */
.zsd-cierre-seccion { padding-block: clamp(52px, 7vw, 96px); }
.zsd-cierre-seccion--verde { background: var(--zsd-verde-100); }
.zsd-cierre-seccion--verde .zsd-h2,
.zsd-cierre-seccion--crema .zsd-h2 { color: var(--zsd-azul-900); }
.zsd-cierre-seccion--verde .zsd-cierre-dato,
.zsd-cierre-seccion--crema .zsd-cierre-dato { color: #37564A; }
.zsd-cierre-seccion--crema .zsd-cierre-dato { color: var(--zsd-azul-400); }
.zsd-cierre-seccion--verde .zsd-cierre-tel,
.zsd-cierre-seccion--crema .zsd-cierre-tel { color: var(--zsd-azul-700); }
.zsd-cierre-seccion--verde .zsd-cierre-mail,
.zsd-cierre-seccion--crema .zsd-cierre-mail { color: var(--zsd-azul-400); }

/* ── Ficha de profesional ────────────────────────────────── */
/* Ficha de cada profesional (página Nosotros), medidas del diseño:
   foto 4/3 y nombre a la izquierda (fijos al desplazar), formación y
   trayectoria a la derecha. */
.zsd-ficha { padding-block: clamp(48px, 7vw, 104px); border-bottom: 1px solid rgba(11, 44, 64, .08); }
.zsd-seccion .zsd-ficha-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(30px, 4.5vw, 64px);
	align-items: start;
}
.zsd-ficha-lado { position: sticky; top: 96px; }
.zsd-ficha-txt { display: grid; gap: 30px; padding-top: 6px; }
.zsd-ficha-txt .zsd-bloque + .zsd-bloque { margin-top: 0; }
.zsd-doctor-foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}
.zsd-doctor-nombre {
	margin: 24px 0 8px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--zsd-azul-900);
}
.zsd-doctor-rol { margin: 0; color: var(--zsd-verde-500); font-weight: 600; font-size: 16.5px; }
.zsd-doctor-col { margin: 6px 0 0; font-size: 14px; color: var(--zsd-azul-200); }
@media (max-width: 700px) { .zsd-ficha-lado { position: static; } }

/* Listas con punto verde, como en el diseño. */
.zsd-lista-verde { margin: 0; padding: 0; list-style: none; }
.zsd-lista-verde li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 11px;
	font-size: 16px;
	color: var(--zsd-azul-400);
	line-height: 1.55;
}
.zsd-lista-verde li:last-child { margin-bottom: 0; }
.zsd-lista-verde li::before {
	content: '';
	position: absolute;
	left: 0; top: 9px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--zsd-verde-400);
}
.zsd-bloque-t {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(11, 44, 64, .14);
	font-family: var(--zsd-font-titulo);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zsd-azul-900);
}
.zsd-bloque + .zsd-bloque { margin-top: 30px; }

/* ── Área de tratamiento ─────────────────────────────────── */
/* Un bloque por área: foto 16/11 a un lado y texto al otro, alternando
   el lado. Medidas del diseño. */
.zsd-area-lista { display: grid; gap: clamp(28px, 4vw, 56px); }
.zsd-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(24px, 3.5vw, 52px);
	align-items: center;
	padding-bottom: clamp(28px, 4vw, 52px);
	border-bottom: 1px solid rgba(11, 44, 64, .12);
}
.zsd-area:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 680px) {
	.zsd-area--invertida .zsd-area-media { order: 2; }
}
.zsd-area-media img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border-radius: 22px;
	display: block;
}
.zsd-seccion .zsd-area .zsd-h2 {
	margin: 0 0 22px;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.03em;
}
.zsd-area-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zsd-verde-500);
}
.zsd-area-txt { margin: 0 0 20px; color: var(--zsd-azul-400); line-height: 1.65; font-size: 16.5px; }
.zsd-area-txt:last-of-type { margin-bottom: 26px; }
.zsd-area .zsd-btn--linea {
	padding: 13px 24px;
	border-color: rgba(11, 44, 64, .2);
	color: var(--zsd-azul-900);
	font-size: 15px;
	font-weight: 600;
}
.zsd-area .zsd-btn--linea:hover { background: var(--zsd-azul-900); color: #fff; border-color: var(--zsd-azul-900); }

/* ── Tarjetas blancas sobre verde ────────────────────────── */
/* «¿Por qué zaragozasindolor?»: cuatro tarjetas claras con una frase
   en Outfit. Medidas del diseño. */
.zsd-meritos .zsd-h2 { margin: 0 0 20px; max-width: 640px; }
.zsd-meritos .zsd-entradilla { max-width: 720px; margin: 0 0 clamp(30px, 4vw, 48px); color: #37564A; }
.zsd-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: clamp(16px, 2vw, 22px);
}
.zsd-tarjeta {
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: 18px;
	background: var(--zsd-crema-50);
	font-family: var(--zsd-font-titulo);
	font-size: clamp(18px, 1.8vw, 21px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--zsd-azul-900);
}
.zsd-seccion--verdeclaro { background: var(--zsd-verde-100); }

/* ── Pasos con imagen ────────────────────────────────────── */
/* «¿Cómo se obtienen?»: tarjeta clara con foto 4/3 arriba, bola con
   el número y texto. Medidas del diseño. */
.zsd-pasos-img {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	margin-top: clamp(28px, 4vw, 48px);
}
.zsd-paso-img {
	display: flex;
	flex-direction: column;
	border-radius: 22px;
	background: var(--zsd-crema-50);
	overflow: hidden;
}
.zsd-paso-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--zsd-crema-300); }
.zsd-paso-img-cuerpo { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.zsd-paso-bola {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--zsd-azul-900);
	color: var(--zsd-verde-300);
	font-family: var(--zsd-font-titulo);
	font-size: 14px;
	font-weight: 600;
}
.zsd-paso-img p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--zsd-azul-400); }

/* ── Página flexible: disposiciones del diseño ───────────── */
/* Titular a la izquierda y párrafos a la derecha («¿En qué consiste?»). */
.zsd-seccion .zsd-dos-col--titular { align-items: start; }
.zsd-dos-col--titular .zsd-h2 { margin: 0; }
.zsd-fx-txt { max-width: 720px; font-size: 17px; line-height: 1.68; }
.zsd-fx-txt p { margin: 0 0 18px; }
.zsd-fx-txt p:last-child { margin-bottom: 0; }

/* Imagen de apoyo de cualquier sección: 4/3, esquinas de 24px. */
.zsd-fx-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}

/* Etiquetas sobre claro: pastilla verde suave con texto marino. */
.zsd-fx-etiquetas .zsd-etiqueta {
	padding: 10px 18px;
	border-color: transparent;
	background: var(--zsd-verde-100);
	color: var(--zsd-azul-900);
	font-size: 15px;
	font-weight: 500;
}
.zsd-seccion--verdeclaro .zsd-fx-etiquetas .zsd-etiqueta { background: #fff; }

/* Lista numerada sobre fondo claro. */
.zsd-numerada--clara li { border-bottom-color: var(--zsd-crema-300); color: var(--zsd-azul-400); }
.zsd-numerada--clara .n { color: var(--zsd-verde-500); }

/* Llamada final: texto | botones, en verde claro. */
.zsd-fx-cta { align-items: center; gap: clamp(30px, 4vw, 60px); }
.zsd-fx-cta .zsd-h2 { margin-bottom: 14px; }
.zsd-fx-cta-txt { max-width: 480px; font-size: 17px; line-height: 1.6; }
.zsd-seccion--verdeclaro .zsd-fx-cta-txt { color: #37564A; }
.zsd-fx-cta-botones { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 12px; }
.zsd-fx-cta-botones .zsd-btn { padding: 15px 30px; font-size: 15.5px; }
/* Botón de línea sobre fondo claro: borde suave, no blanco. */
.zsd-seccion:not(.zsd-seccion--oscura):not(.zsd-seccion--verde) .zsd-fx-cta-botones .zsd-btn--linea {
	border-color: rgba(11, 44, 64, .25);
	color: var(--zsd-azul-900);
}
.zsd-seccion:not(.zsd-seccion--oscura):not(.zsd-seccion--verde) .zsd-fx-cta-botones .zsd-btn--linea:hover {
	background: rgba(11, 44, 64, .06);
	color: var(--zsd-azul-900);
	border-color: rgba(11, 44, 64, .25);
}

/* ── Lista numerada sobre oscuro ─────────────────────────── */
.zsd-numerada { margin: 0; padding: 0; list-style: none; }
.zsd-numerada li {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .88);
	line-height: 1.55;
}
.zsd-numerada li:last-child { border-bottom: 0; }
.zsd-numerada .n {
	font-family: var(--zsd-font-titulo);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zsd-verde-300);
	padding-top: 3px;
}

/* ── Contacto ────────────────────────────────────────────── */
/* Columna izquierda: tarjetas crema con etiqueta verde y datos en
   Outfit; la última, oscura, con el teléfono grande y el botón de cita. */
.zsd-contacto-lado { display: grid; gap: clamp(20px, 2.4vw, 28px); align-content: start; }
.zsd-contacto-lado .zsd-h2--menor { margin: 0; }
.zsd-dato-caja {
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: 20px;
	background: var(--zsd-crema-100);
}
.zsd-dato-caja .zsd-contacto-label { margin-bottom: 12px; font-size: 12.5px; letter-spacing: .12em; color: var(--zsd-verde-500); }
/* La acción «Cómo llegar» queda fuera: es un enlace de otra naturaleza
   y esta regla, que pesa más que su clase, le imponía el display en
   bloque y el tamaño de los datos. */
.zsd-dato-caja a:not(.zsd-dato-accion),
.zsd-dato-caja > span {
	display: block;
	margin-bottom: 6px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(17px, 1.7vw, 20px);
	font-weight: 500;
	letter-spacing: -.015em;
	line-height: 1.35;
	color: var(--zsd-azul-900);
	text-decoration: none;
}
.zsd-dato-caja a:last-child,
.zsd-dato-caja > span:last-child { margin-bottom: 0; }
.zsd-dato-caja a:not(.zsd-dato-accion):hover { color: var(--zsd-azul-700); text-decoration: none; }

.zsd-cita-caja {
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: 20px;
	background: var(--zsd-azul-900);
	color: #fff;
}
.zsd-cita-caja .zsd-contacto-label { margin-bottom: 14px; font-size: 12.5px; letter-spacing: .12em; color: var(--zsd-verde-300); }
.zsd-cita-tel {
	display: block;
	margin: 0 0 16px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 600;
	letter-spacing: -.03em;
	color: #fff;
	text-decoration: none;
	transition: color .2s;
}
.zsd-cita-tel:hover { color: var(--zsd-verde-300); }

/* Foto del hospital con la dirección sobre un degradado, al pie. */
.zsd-hospital { padding-top: 0; }
.zsd-hospital-caja { position: relative; border-radius: 24px; overflow: hidden; background: var(--zsd-azul-900); }
.zsd-hospital-caja img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; opacity: .9; }
.zsd-hospital-txt {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: clamp(22px, 3vw, 40px);
	background: linear-gradient(0deg, rgba(11, 44, 64, .92), rgba(11, 44, 64, 0));
	color: #fff;
}
.zsd-hospital-nombre {
	margin: 0 0 6px;
	font-family: var(--zsd-font-titulo);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 600;
	letter-spacing: -.02em;
}
.zsd-hospital-dir { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .78); }
@media (max-width: 600px) { .zsd-hospital-caja img { aspect-ratio: 4 / 3; } }

/* ── Blog vacío ──────────────────────────────────────────── */
.zsd-blog-vacio {
	display: grid;
	gap: 24px;
	align-items: center;
	padding: clamp(28px, 3.4vw, 46px);
	border-radius: var(--zsd-radio);
	background: var(--zsd-verde-100);
	margin-top: clamp(24px, 3vw, 40px);
}
@media (min-width: 800px) { .zsd-blog-vacio { grid-template-columns: 1.2fr auto; } }
.zsd-blog-vacio h2 { margin: 0 0 10px; font-size: clamp(21px, 2vw, 28px); }
.zsd-blog-vacio p { margin: 0; color: var(--zsd-azul-400); line-height: 1.6; }
.zsd-blog-vacio-botones { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 10px; }

.zsd-post--vacio { min-height: 210px; justify-content: flex-end; }
.zsd-post--vacio .zsd-post-cuerpo { opacity: .55; }

/* ── Tarjetas claras dentro de secciones oscuras ─────────────
   Las secciones oscuras ponen el texto en blanco, y ese color lo
   heredaba todo lo de dentro: una tarjeta de fondo claro acababa con
   texto blanco sobre blanco, ilegible. Cada pieza con fondo propio
   declara su color en vez de confiar en lo que herede. */
.zsd-seccion--oscura .zsd-paso,
.zsd-seccion--verde .zsd-paso,
.zsd-seccion--oscura .zsd-tarjeta,
.zsd-seccion--verde .zsd-tarjeta,
.zsd-seccion--oscura .zsd-paso-img,
.zsd-seccion--verde .zsd-paso-img,
.zsd-seccion--oscura .zsd-post,
.zsd-seccion--verde .zsd-post {
	color: var(--zsd-azul-900);
}

.zsd-seccion--oscura .zsd-paso p,
.zsd-seccion--verde .zsd-paso p,
.zsd-seccion--oscura .zsd-paso-img p,
.zsd-seccion--verde .zsd-paso-img p {
	color: var(--zsd-azul-400);
}

.zsd-seccion--oscura .zsd-paso h3,
.zsd-seccion--verde .zsd-paso h3,
.zsd-seccion--oscura .zsd-tarjeta,
.zsd-seccion--verde .zsd-tarjeta {
	color: var(--zsd-azul-900);
}

/* El número sigue en verde, que sí contrasta con el fondo claro. */
.zsd-seccion--oscura .zsd-paso-num,
.zsd-seccion--verde .zsd-paso-num { color: var(--zsd-verde-500); }

/* Las tarjetas de paso llevan su propio fondo claro para no depender
   del de la sección. */
.zsd-paso { background: var(--zsd-crema-50); }
.zsd-paso p { color: var(--zsd-azul-400); margin: 0; }