/* ============================================================================
 * SOMNO · paginas.css
 * ----------------------------------------------------------------------------
 * Estilos homogeneos para las PAGINAS INTERNAS (Especialidades, Trastornos,
 * Examenes, Pagina simple, etc.) que se editan con Elementor.
 *
 * Objetivo: dar un look consistente con el rediseno (home/reserva) SIN sacar
 * el contenido de Elementor. Consume tokens.css. Reemplaza progresivamente al
 * style.css viejo. Usa !important donde el style.css viejo tambien lo usa, para
 * poder ganar la cascada mientras conviven ambos.
 *
 * Contenedor base de estas paginas: .somno-content (viene de las plantillas PHP).
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. Contenedor y ancho
 *    Unificar a 1200px (--somno-header-max), igual que home y reserva. El
 *    style.css viejo pone .container en 1480px, lo que hacia ver las internas
 *    mas anchas/desalineadas respecto al header y a reserva.
 * -------------------------------------------------------------------------- */
.somno-content {
	font-family: var(--somno-font);
	color: var(--somno-text);
	overflow-wrap: break-word;
}
/* El style.css viejo pone padding: 50px vertical a cada .somno-content, lo que
   deja huecos enormes entre banner y contenido, y entre bloques. Lo reducimos
   de forma generica para un ritmo mas ajustado y homogeneo. */
.somno-content.container {
	padding-top: 8px !important;
	padding-bottom: 20px !important;
}
.somno-content.container,
.somno-content .container {
	max-width: var(--somno-header-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ----------------------------------------------------------------------------
 * 1b. BANNER del encabezado (.somno-interna-hero) — emula el hero de
 *     reserva-nueva: fondo gradiente suave, borde, redondeado. Se aplica via
 *     clase agregada en las plantillas PHP (especialidades.php, etc.), no con
 *     :first-of-type (que agarraba un contenedor equivocado).
 * -------------------------------------------------------------------------- */
.somno-interna-hero {
	background: linear-gradient(135deg, var(--somno-hero-grad-1, oklch(0.96 0.018 250)) 0%, var(--somno-surface) 100%) !important;
	border: 1px solid var(--somno-border);
	border-radius: var(--somno-radius-lg);
	padding: 34px 40px !important;
	margin-top: 24px !important;
	margin-bottom: 16px !important;
}
/* La columna vacia de la derecha (d-lg-block) no aporta en el hero: la
   ocultamos para que el texto respire a lo ancho. */
.somno-interna-hero .col-lg-6.d-none.d-lg-block { display: none !important; }
.somno-interna-hero .col-lg-6.col-md-12 { flex: 0 0 100%; max-width: 100%; }
/* Los botones de acceso dentro del hero: alineados a la izquierda, con aire */
.somno-interna-hero .sospecha,
.somno-interna-hero > .row { margin-bottom: 0 !important; }

/* ----------------------------------------------------------------------------
 * 2. Tipografia homogenea (titulos y texto)
 *    El style.css viejo pone h2/h3 en #3885bf y otros grises. Unificamos con
 *    la paleta del rediseno: titulos en navy/primary, texto en text/muted.
 * -------------------------------------------------------------------------- */
.somno-content h1 {
	font-family: var(--somno-font) !important;
	font-size: 38px !important;
	font-weight: 800 !important;
	color: var(--somno-navy) !important;
	line-height: 1.15 !important;
	margin-bottom: 18px !important;
}
/* Acercar el contenido al banner SIN pegar los titulos entre si.
   El hueco grande tras el banner era el PADDING-TOP de la primera seccion de
   Elementor: eso lo quitamos. Los titulos conservan TODOS su margin-top de 32px
   uniforme (no tocamos el margin del primero, para que no se peguen entre si). */
.somno-content .elementor-section:first-of-type,
.somno-content .elementor > .elementor-section:first-child {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.somno-content h2,
.somno-content h2.elementor-heading-title {
	font-family: var(--somno-font) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: var(--somno-navy) !important;
	line-height: 1.25 !important;
	margin-top: 32px !important;
	margin-bottom: 14px !important;
}

.somno-content h3,
.somno-content h3.elementor-heading-title {
	font-family: var(--somno-font) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--somno-primary) !important;
	line-height: 1.3 !important;
	margin-top: 24px !important;
	margin-bottom: 12px !important;
}

.somno-content h4,
.somno-content h4.elementor-heading-title {
	font-family: var(--somno-font) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--somno-primary) !important;
	margin-bottom: 10px !important;
}

.somno-content p,
.somno-content li,
.somno-content .elementor-widget-text-editor,
.somno-content .elementor-widget-text-editor p {
	font-family: var(--somno-font) !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--somno-text) !important;
}

.somno-content strong { color: var(--somno-text) !important; }

.somno-content a:not(.elementor-button) {
	color: var(--somno-primary);
	text-decoration: none;
}
.somno-content a:not(.elementor-button):hover { text-decoration: underline; }

/* ----------------------------------------------------------------------------
 * 3. Botones Elementor -> azul de marca (antes: teal viejo #2a898f)
 *    OJO: se excluye #reserva (ese ya usa azul propio) y se respeta el submit.
 * -------------------------------------------------------------------------- */
.somno-content .elementor-button,
.somno-content .elementor-button[type="submit"] {
	background-color: var(--somno-accent) !important;
	color: var(--somno-text-invert) !important;
	font-family: var(--somno-font) !important;
	font-weight: 600 !important;
	border-radius: var(--somno-radius) !important;
	transition: background-color 0.15s ease !important;
}
.somno-content .elementor-button:hover,
.somno-content .elementor-button[type="submit"]:hover {
	background-color: var(--somno-accent-600) !important;
	color: var(--somno-text-invert) !important;
}

/* ----------------------------------------------------------------------------
 * 4. Acordeones Elementor (FAQs de las paginas)
 * -------------------------------------------------------------------------- */
.somno-content .elementor-accordion .elementor-tab-title {
	color: var(--somno-navy) !important;
	font-family: var(--somno-font) !important;
	font-weight: 600 !important;
}
.somno-content .elementor-accordion .elementor-tab-title.elementor-active {
	color: var(--somno-primary) !important;
}
.somno-content .elementor-accordion .elementor-accordion-item {
	border: 1px solid var(--somno-border) !important;
	border-radius: var(--somno-radius) !important;
	margin-bottom: 10px;
	overflow: hidden;
}

/* ----------------------------------------------------------------------------
 * 5. Subtitulo SEO (.subtitle) y fechas
 * -------------------------------------------------------------------------- */
.somno-content .subtitle {
	color: var(--somno-text-muted) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	border-bottom: 1px solid var(--somno-border);
	padding-bottom: 16px;
	margin-bottom: 8px;
}
.somno-content .date,
.somno-content .date-mod {
	color: var(--somno-text-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
}
/* Las fechas Publicado/Modificado van juntas, discretas, en una linea sutil
   arriba, con poco espacio. El contenedor .somno-content que las envuelve traia
   padding 50px del style.css viejo = hueco enorme al final. */
.somno-content.container:has(.date),
.somno-content.container:has(.date-mod) {
	padding-top: 12px !important;
	padding-bottom: 16px !important;
	border-top: 1px solid var(--somno-border);
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	align-items: baseline;
}
.somno-content .date,
.somno-content .date-mod {
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* ----------------------------------------------------------------------------
 * 6. Anclas (indice de la pagina) -> chips
 * -------------------------------------------------------------------------- */
/* Anclas: pildoras SIN fondo (transparente), borde redondeado (radius 999px),
   altura pequena. Ordenadas con mismo ancho para que fluyan parejas en desktop
   y movil sin verse desordenadas por el largo distinto de cada palabra. */
.somno-content a.anclas,
.somno-content .anclas {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 5px !important;
	color: var(--somno-primary) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	background: transparent !important;
	border: 1px solid var(--somno-border) !important;
	border-radius: 999px !important;
	padding: 5px 10px !important;
	margin: 0 8px 8px 0 !important;
	min-width: 120px !important;
	line-height: 1.2 !important;
	float: none !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.somno-content a.anclas:hover,
.somno-content .anclas:hover {
	background: transparent !important;
	border-color: var(--somno-primary) !important;
	color: var(--somno-primary) !important;
}
/* La flechita de las anclas: pequena, apuntando abajo, alineada */
.somno-content .anclas .a-down,
.somno-content .anclas i {
	display: inline-block;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.6;
}

/* ----------------------------------------------------------------------------
 * 6b. Botones de acceso viejos (.btn-number, .btn-reserva, .boton-instalaciones)
 *     Venian en naranja #ffa500 del style.css viejo. Homogeneizados con el
 *     boton .somno-btn-reserva del header (radio 6px, sin subrayado).
 * -------------------------------------------------------------------------- */
.btn-number,
.btn-reserva,
.boton-instalaciones {
	background: var(--somno-surface) !important;
	color: var(--somno-accent) !important;
	border-radius: var(--somno-radius-sm) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 10px 18px !important;
	border: 1.5px solid var(--somno-accent) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}
.btn-number:hover,
.btn-reserva:hover,
.boton-instalaciones:hover {
	background: var(--somno-accent) !important;
	color: var(--somno-text-invert) !important;
	text-decoration: none !important;
}

/* ----------------------------------------------------------------------------
 * 6c. Grupos de botones de acceso (seccion .sospecha y contenedores
 *     .boton-reserva-online / -tlf / -copago / -presupuesto).
 *     Venian pegados sin espaciado. Los ponemos en fila con gap y centrados.
 * -------------------------------------------------------------------------- */
.sospecha { text-align: center; }
.sospecha .boton-reserva-online,
.sospecha .boton-reserva-tlf,
.sospecha .boton-copago,
.sospecha .boton-presupuesto,
.boton-reserva-online,
.boton-reserva-tlf,
.boton-copago,
.boton-presupuesto {
	display: inline-flex !important;
	float: none !important;
	margin: 6px !important;
	vertical-align: middle;
}
/* Envoltura flexible: si el contenedor de los 4 botones es un bloque, lo
   convertimos en flex centrado con wrap para que respiren. */
.sospecha .row,
.sospecha > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

/* ----------------------------------------------------------------------------
 * 7. Tarjetas de especialistas / doctores (carrusel swiperProfesionales)
 *    El style.css viejo pone card 350x650 FIJO e img 90%/300px (deforma).
 *    Aqui: card con alto flexible, imagen aspect-ratio fijo object-fit cover,
 *    boton anclado abajo. Se elimina el montaje de texto sobre boton.
 * -------------------------------------------------------------------------- */
.swiperProfesionales .card,
.swiperEquipo .card {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	padding: 12px !important;
	border: 1px solid var(--somno-border) !important;
	border-radius: var(--somno-radius-lg) !important;
	background: var(--somno-surface) !important;
	box-shadow: var(--somno-shadow-sm) !important;
}
/* El card-body contiene un div.text-center con nombre + especialidad +
   descripcion + boton. Ambos niveles deben ser flex column con flex:1 para
   que el boton (con margin-top:auto) se ancle abajo y quede al mismo nivel
   en todas las tarjetas. */
.swiperProfesionales .card .card-body,
.swiperEquipo .card .card-body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	text-align: center;
	padding: 4px !important;
}
.swiperProfesionales .card .card-body > div,
.swiperEquipo .card .card-body > div {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
}
/* El texto (nombre, especialidad, descripcion) que use todo el ancho de la card */
.swiperProfesionales .card .card-body *,
.swiperEquipo .card .card-body * {
	max-width: 100% !important;
}
.swiperProfesionales swiper-slide,
.swiperEquipo swiper-slide {
	height: auto !important;
	display: flex !important;
	align-items: stretch !important;
	padding: 10px !important;
	background: transparent !important;
}
/* Igualar altura de todas las slides del carrusel para que los botones queden
   al mismo nivel. Swiper con este flag estira las slides a la mas alta. */
.swiperProfesionales,
.swiperEquipo { align-items: stretch !important; }
.swiperProfesionales .swiper-wrapper,
.swiperEquipo .swiper-wrapper { align-items: stretch !important; }
.swiperProfesionales swiper-slide img,
.swiperEquipo swiper-slide img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	border-radius: var(--somno-radius) !important;
	margin-bottom: 12px !important;
}
.swiperProfesionales .card p,
.swiperEquipo .card p {
	flex: 1 1 auto;
	margin-bottom: 16px !important;
	line-height: 1.5 !important;
	font-size: 15px !important;
}
.swiperProfesionales .card .btn-number,
.swiperProfesionales .card .btn-reserva,
.swiperEquipo .card .btn-number,
.swiperEquipo .card .btn-reserva {
	margin-top: auto !important;
	align-self: center !important;
	position: static !important;
	writing-mode: horizontal-tb !important;
	flex-shrink: 0 !important;
	/* En las cards de doctores el boton va relleno (solido), para distinguir del
	   estilo outline de los botones de acceso/sospecha. */
	background: var(--somno-accent) !important;
	color: var(--somno-text-invert) !important;
	border: none !important;
	box-shadow: var(--somno-shadow-sm) !important;
}
.swiperProfesionales .card .btn-number:hover,
.swiperProfesionales .card .btn-reserva:hover,
.swiperEquipo .card .btn-number:hover,
.swiperEquipo .card .btn-reserva:hover {
	background: var(--somno-accent-600) !important;
	color: var(--somno-text-invert) !important;
}
.somno-content .thumb { border-radius: var(--somno-radius) !important; }

/* ----------------------------------------------------------------------------
 * 7b. Paginacion de los carruseles (los puntitos . . .)
 *     Estaban pegados encima de las cards (bottom:5px absolute). Les damos aire
 *     uniforme en TODOS los carruseles: espacio reservado abajo + puntos mas
 *     separados y en color de marca.
 * -------------------------------------------------------------------------- */
/* El contenedor swiper-container.swiperProfesionales tiene height:800px FIJO en
   el style.css viejo (con el tag swiper-container = misma especificidad hay que
   igualar). Lo ponemos en auto para que la altura la marque el contenido. */
swiper-container.swiperProfesionales,
swiper-container.swiperEquipo,
swiper-container.swiperResenas,
swiper-container.swiperConvenios {
	height: auto !important;
}
swiper-container.swiperProfesionales .card,
swiper-container.swiperEquipo .card {
	height: auto !important;
}
/* Modulo resenas: titulo y cards con separacion justa (no un hueco enorme) */
.somno-resenas__title {
	margin-bottom: 28px !important;
}
.somno-resenas__carousel {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Aire abajo para la paginacion, uniforme en todos los carruseles.
   El swiper reserva espacio con margin-bottom (no padding, porque la paginacion
   absolute ignora el padding del contenedor). La paginacion se saca fuera del
   area de cards con bottom negativo. */
swiper-container,
.swiperProfesionales,
.swiperEquipo {
	margin-bottom: 40px !important;
	overflow-x: hidden !important;
	overflow-y: visible !important;
}
/* Blindaje anti-overflow horizontal: ningun contenedor de contenido ni carrusel
   debe pasarse del ancho del viewport (rompia entre 992-1199px, el carrusel de
   profesionales empujaba de lado). Se aplica en TODOS los tamanos. */
.somno-content.especialistas,
.somno-content.listar-profesionales,
.especialistas,
.listar-profesionales {
	overflow-x: hidden !important;
	max-width: 100% !important;
}
.swiperProfesionales,
.swiperEquipo,
.swiperResenas,
.swiperConvenios {
	max-width: 100% !important;
}
/* El carrusel de convenios (logos) no necesita el margin-bottom de 40px que
   reservamos para los puntos de paginacion; deja un hueco muerto grande entre
   los logos y las fechas Publicado/Modificado. Lo reducimos. */
swiper-container.swiperConvenios,
.swiperConvenios {
	margin-bottom: 8px !important;
}
/* El swiper de convenios no muestra puntos de paginacion utiles (son logos en
   loop), asi que su paginacion no debe reservar espacio abajo. */
swiper-container.swiperConvenios::part(pagination),
swiper-container.swiperResenas::part(pagination) {
	display: none !important;
}
.swiperConvenios .swiper-pagination,
.swiperResenas .swiper-pagination { display: none !important; }
.swiper-pagination {
	bottom: -28px !important;
	top: auto !important;
}
.swiper-pagination .swiper-pagination-bullet {
	margin: 0 5px !important;
	background: var(--somno-text-muted) !important;
	opacity: 0.4;
}
.swiper-pagination .swiper-pagination-bullet-active {
	background: var(--somno-accent) !important;
	opacity: 1;
}
/* Swiper Element (<swiper-container>) aisla su paginacion en Shadow DOM. Se
   estiliza via ::part() que el componente expone. Asi separamos los puntos
   de las cards y los coloreamos con la marca en TODOS los carruseles. */
swiper-container::part(pagination) {
	bottom: -28px !important;
}
swiper-container::part(bullet) {
	background: var(--somno-text-muted) !important;
	opacity: 0.4 !important;
	margin: 0 5px !important;
}
swiper-container::part(bullet-active) {
	background: var(--somno-accent) !important;
	opacity: 1 !important;
	margin: 0 5px !important;
}

/* ----------------------------------------------------------------------------
 * 8. Ritmo vertical entre modulos de seccion (Especialistas, Convenios/Examenes
 *    de sangre, Resenas). Homogeneizado.
 *    El wrapper .especialistas (listar-profesionales) traia padding 50px del
 *    style.css viejo, que sumado a los margenes daba un hueco enorme. Lo
 *    controlamos para un ritmo uniforme (~48px entre secciones).
 * -------------------------------------------------------------------------- */
/* Wrapper del carrusel de especialistas: reducir su padding vertical */
.somno-content.especialistas,
.somno-content.container.especialistas {
	padding-top: 16px !important;
	padding-bottom: 8px !important;
}
/* El swiper dentro del wrapper: sin margin extra arriba (el wrapper ya da aire) */
.swiperProfesionales {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}
/* Modulos de seccion: separacion uniforme */
.somno-convenios,
.somno-resenas,
.somno-reviews {
	margin-top: 24px !important;
	margin-bottom: 0 !important;
}
.somno-convenios {
	padding-top: 32px !important;
	padding-bottom: 12px !important;
}
/* El <hr class="my-5"> (Bootstrap, margin 3rem = 48px arriba y abajo) que separa
   el carrusel de la seccion siguiente metia ~96px de aire. Lo reducimos. */
.somno-content .my-5,
.especialistas hr,
.somno-content hr.my-5 {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

/* ----------------------------------------------------------------------------
 * 9. Responsive (tablet y movil)
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* Banner hero: menos padding lateral para que el texto respire */
	.somno-interna-hero {
		padding: 24px 20px !important;
		margin-top: 16px !important;
		margin-bottom: 24px !important;
	}
	.somno-content h1 { font-size: 28px !important; }
	.somno-content h2 { font-size: 23px !important; }
	/* Titulo del banner centrado en movil */
	.somno-interna-hero h1,
	.somno-interna-hero .subtitle,
	.somno-interna-hero p { text-align: center !important; }
	/* Anclas en movil: grilla de 2 columnas iguales para que no se vean
	   desordenadas por el largo distinto de cada palabra. Altura pequena. */
	.somno-interna-hero div:has(> .anclas) {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		max-width: 320px;
		margin: 0 auto !important;
	}
	.somno-content .anclas {
		min-width: 0 !important;
		width: 100% !important;
		margin: 0 !important;
		font-size: 12.5px !important;
		padding: 6px 6px !important;
	}
	/* Botonera del banner en movil: grilla 2 columnas, botones full-width y
	   parejos (antes se apilaban 1 por fila con anchos distintos = desordenado) */
	.somno-interna-hero .somno-content,
	.somno-interna-hero .sospecha .somno-content {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
	}
	.somno-interna-hero .boton-reserva-online,
	.somno-interna-hero .boton-reserva-tlf,
	.somno-interna-hero .boton-copago,
	.somno-interna-hero .boton-presupuesto,
	.boton-reserva-online,
	.boton-reserva-tlf,
	.boton-copago,
	.boton-presupuesto {
		margin: 0 !important;
		width: 100% !important;
	}
	.somno-interna-hero .btn-number,
	.somno-interna-hero .btn-reserva {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 13.5px !important;
		padding: 11px 8px !important;
	}
	/* Botones de la seccion .sospecha en movil: misma grilla 2 columnas ordenada
	   que el banner (antes se apilaban 1 por fila desalineados) */
	.sospecha .somno-content {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		max-width: 340px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.sospecha .boton-reserva-online,
	.sospecha .boton-reserva-tlf,
	.sospecha .boton-copago,
	.sospecha .boton-presupuesto {
		margin: 0 !important;
		width: 100% !important;
	}
	.sospecha .btn-number,
	.sospecha .btn-reserva {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 13.5px !important;
		padding: 11px 8px !important;
	}
	/* Gaps entre secciones mas ajustados en movil */
	.somno-content.especialistas,
	.somno-content.container.especialistas {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.somno-convenios,
	.somno-resenas,
	.somno-reviews { margin-top: 16px !important; }
	.somno-convenios { padding-top: 24px !important; padding-bottom: 24px !important; }
	.somno-content .my-5,
	.especialistas hr,
	.somno-content hr.my-5 { margin-top: 16px !important; margin-bottom: 16px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.somno-interna-hero { padding: 28px 28px !important; }
}