/* ============================================================
   Marca Dra. Elizabeth Gil López — variables y componentes compartidos.
   Se carga en todos los layouts, DESPUÉS de css/style.css (ClinicMaster),
   para sobreescribir sus variables sin tocar el archivo original.
   ============================================================ */

/* El header principal se vuelve position:fixed (clase .is-fixed, agregada por JS al hacer scroll)
   y mide ~100px en mobile / ~70px ya compactado — sin esto, cualquier salto a un ancla (#servicios,
   las categorías de /precios) deja el título tapado debajo del header. */
html {
	scroll-padding-top: 110px;
}

:root {
	--font-family-base: 'Nunito Sans', sans-serif;
	--font-family-title: 'Montserrat', sans-serif;

	/* Los 2 acentos de la paleta (docs/01) que no participan del sistema fucsia/naranja
	   de --bs-primary por tema: no cambian entre landings, así que viven en :root. */
	--brand-azul: #0077C8;      /* Azul Arándano Eléctrico — acento "ciencia/confianza" */
	--brand-azul-rgb: 0, 119, 200;
	--brand-verde: #A7D129;     /* Verde Kiwi Vivo — acento "prevención/salud", uso moderado */
	--brand-verde-rgb: 167, 209, 41;
	--brand-rosa-claro: #FFF5F9; /* fondo alterno de sección (tinte de la propia paleta) */
}

/* Tema por defecto (Home + landing Ginecología Integral): fucsia/morado. */
html[data-theme-color=skin-5] {
	--bs-body-color: #2C3E50;
	--bs-heading-color: #3C1A5B;
	--bs-heading-color-rgb: 60, 26, 91;
	--bs-primary: #E6007E;
	--bs-secondary: #3C1A5B;
	--bs-light: #FFF8F3;
	--bs-primary-rgb: 230, 0, 126;
	--bs-secondary-rgb: 60, 26, 91;
	--bs-light-rgb: 255, 248, 243;
	--bs-primary-text-emphasis: rgb(92, 0, 50.4);
	--bs-secondary-text-emphasis: rgb(24, 10.4, 36.4);
	--bs-light-text-emphasis: rgb(102, 99.2, 97.2);
	--bs-primary-bg-subtle: rgb(250, 204, 229.2);
	--bs-secondary-bg-subtle: rgb(216, 209.2, 222.2);
	--bs-light-bg-subtle: rgb(255, 253.6, 252.6);
	--bs-primary-border-subtle: rgb(250, 204, 229.2);
	--bs-secondary-border-subtle: rgb(216, 209.2, 222.2);
	--bs-light-border-subtle: rgb(255, 253.6, 252.6);
	--bs-primary-btn-hover-bg: rgb(195.5, 0, 107.1);
	--bs-primary-btn-hover-border-color: rgb(195.5, 0, 107.1);
	--bs-secondary-btn-hover-bg: rgb(51, 22.1, 77.35);
	--bs-secondary-btn-hover-border-color: rgb(51, 22.1, 77.35);
	--bs-light-btn-hover-bg: rgb(216.75, 210.8, 206.55);
	--bs-light-btn-hover-border-color: rgb(216.75, 210.8, 206.55);
}

/* Tema de la landing de Alto Riesgo: mismo sistema, naranja como acento de urgencia. */
html[data-theme-color=skin-alto-riesgo] {
	--bs-body-color: #2C3E50;
	--bs-heading-color: #3C1A5B;
	--bs-heading-color-rgb: 60, 26, 91;
	--bs-primary: #FF6A13;
	--bs-secondary: #3C1A5B;
	--bs-light: #FFF8F3;
	--bs-primary-rgb: 255, 106, 19;
	--bs-secondary-rgb: 60, 26, 91;
	--bs-light-rgb: 255, 248, 243;
	--bs-primary-text-emphasis: rgb(102, 42.4, 7.6);
	--bs-secondary-text-emphasis: rgb(24, 10.4, 36.4);
	--bs-light-text-emphasis: rgb(102, 99.2, 97.2);
	--bs-primary-bg-subtle: rgb(255, 225.2, 207.8);
	--bs-secondary-bg-subtle: rgb(216, 209.2, 222.2);
	--bs-light-bg-subtle: rgb(255, 253.6, 252.6);
	--bs-primary-border-subtle: rgb(255, 225.2, 207.8);
	--bs-secondary-border-subtle: rgb(216, 209.2, 222.2);
	--bs-light-border-subtle: rgb(255, 253.6, 252.6);
	--bs-primary-btn-hover-bg: rgb(216.75, 90.1, 16.15);
	--bs-primary-btn-hover-border-color: rgb(216.75, 90.1, 16.15);
	--bs-secondary-btn-hover-bg: rgb(51, 22.1, 77.35);
	--bs-secondary-btn-hover-border-color: rgb(51, 22.1, 77.35);
	--bs-light-btn-hover-bg: rgb(216.75, 210.8, 206.55);
	--bs-light-btn-hover-border-color: rgb(216.75, 210.8, 206.55);
}

.tagline-script {
	font-family: 'Playfair Display', serif;
	font-style: italic;
}

/* ---------- Lockup de marca: isotipo + "Dra. Elizabeth Gil López" + eslogan "Salud Infinita" ----------
   Jerarquía oficial (docs/08): el nombre de la doctora va primero, Salud Infinita es el eslogan.
   El color del eslogan usa el morado del propio manual de "Salud Infinita" (Índigo Mora), no el
   morado de brand.css — es el color que trae el logo real, para que combinen entre sí. */
.brand-lockup {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.brand-lockup img {
	flex: none;
}
.brand-lockup-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
/* Sustitutos libres de las fuentes oficiales del manual (docs/08) para este lockup puntual:
   - Rhikane (acento del nombre, según el manual) no se puede usar: el archivo del paquete
     gráfico es una demo de USO PERSONAL únicamente (ver read-me), y además le faltan glifos
     acentuados en mayúsculas. Pacifico es gratuita (Google Fonts, OFL), cubre acentos y tiene
     un peso/personalidad de script similar.
   - Bodoni 72 Book Italic (la fuente del logotipo "Salud infinita") no viene incluida en el
     paquete en absoluto — es de pago/Adobe Fonts. Libre Bodoni Italic es su equivalente libre
     de código abierto, visualmente casi idéntica.
   Si en algún momento se compra la licencia de Rhikane y/o se consigue Bodoni 72 Book Italic
   (Adobe Fonts u otra fuente), solo hay que añadir el @font-face correspondiente y cambiar el
   font-family aquí — el resto del sitio no depende de esta decisión. */
.brand-lockup-nombre {
	font-family: 'Pacifico', cursive;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--bs-secondary);
}
.brand-lockup-eslogan {
	font-family: 'Libre Bodoni', serif;
	font-style: italic;
	font-weight: 600;
	font-size: 0.7rem;
	margin-top: 3px;
	color: #6A2EFF;
}
.brand-lockup.text-claro .brand-lockup-nombre {
	color: #fff;
}
.brand-lockup.text-claro .brand-lockup-eslogan {
	color: #D9B8FF;
}

/* ---------- Fondo alterno "rosa claro" (docs/01: 2 fondos suaves para alternar por sección) ----------
   Solo se usa dentro del tema skin-5 (fucsia): en el tema naranja de Alto Riesgo un fondo rosa
   competiría visualmente con el acento de urgencia, así que esa landing se queda solo con marfil. */
html[data-theme-color=skin-5] .bg-rosa {
	background-color: var(--brand-rosa-claro) !important;
}

/* ---------- Acentos "ciencia/confianza" (azul) y "prevención/salud" (verde) ----------
   Uso deliberadamente restringido a detalles puntuales (credenciales, checkmarks, badges),
   no a bloques grandes de color — así no compiten con fucsia/naranja como color de acción. */
.text-brand-azul { color: var(--brand-azul) !important; }

.badge-prevencion {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #4b6b0f;
	background: rgba(var(--brand-verde-rgb), 0.18);
	border-radius: 999px;
	padding: 3px 10px;
	margin-bottom: 10px;
}
.badge-prevencion i { color: var(--brand-verde); font-size: 0.85rem; }

/* Checklist de servicios preventivos (Home) — checkmarks en verde en vez del fucsia/naranja
   de acción, porque aquí el check significa "cuidado preventivo", no un CTA. */
ul.list-check.list-check-verde li:before {
	color: var(--brand-verde) !important;
}

/* ---------- Header minimal de las landings (sin menú de navegación) ---------- */
.header-minimal {
	background: #fff;
	padding: 14px 0;
	box-shadow: 0 2px 12px rgba(60, 26, 91, 0.08);
	position: sticky;
	top: 0;
	z-index: 500;
}
.header-minimal .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.header-minimal .logo-header img {
	height: 40px;
}
.header-minimal .btn {
	white-space: nowrap;
}

/* ---------- Hero compacto (Ginecología Integral, Alto Riesgo — ads y sitio) ----------
   El .hero-banner.style-1 original (950px, heredado del home) es demasiado alto para el
   contenido de estas landings de servicio (subtítulo + credenciales + CTA); usamos la misma
   altura de referencia que los banners internos (dz-bnr-inr-md) pero conservando el layout
   de .hero-banner.style-1 porque estas landings sí necesitan el CTA de WhatsApp en el hero. */
.hero-banner.style-1.hero-compacto {
	height: 560px;
	padding-top: 130px;
}
@media only screen and (max-width: 1199px) {
	.hero-banner.style-1.hero-compacto {
		height: 500px;
		padding-top: 120px;
	}
}
@media only screen and (max-width: 991px) {
	.hero-banner.style-1.hero-compacto {
		height: auto;
		padding-top: 150px;
		padding-bottom: 40px;
	}
}
@media only screen and (max-width: 767px) {
	.hero-banner.style-1.hero-compacto {
		padding-top: 180px;
	}
}

/* ---------- Embeds responsivos de YouTube/Vimeo ----------
   custom.js envuelve automáticamente cualquier <iframe src="...youtube.com/vimeo.com..."> en un
   div .embed-responsive.embed-responsive-16by9 (buscar "embed-responsive" en custom.js), pero la
   plantilla nunca trajo las reglas base de esa clase (patrón heredado de Bootstrap 4) — sin esto
   el iframe se queda con su tamaño intrínseco del navegador (300x150) sin importar el contenedor
   que lo envuelva desde afuera. */
.embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
}
.embed-responsive::before {
	display: block;
	content: "";
	padding-top: 75%;
}
.embed-responsive-16by9::before {
	padding-top: 56.25%;
}
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Header de las landings de ads (mismo look que el header del sitio, sin menú) ----------
   Reutiliza .site-header.box-header2.header-transparent (pill flotante) pero sin el <ul> de
   navegación: el pseudo-elemento :before que dibuja el pill queda pegado solo al logo, así que
   quitamos el separador vertical que en el header completo divide el logo del menú. La plantilla
   también oculta .header-part-right a partir de 1199px porque ahí espera un menú hamburguesa —
   estas landings no tienen uno, así que el botón de WhatsApp debe seguir visible siempre. */
.header-landing-ads .logo-header {
	border-right: none !important;
}
.header-landing-ads .header-part-right {
	display: flex !important;
}
.header-landing-ads .header-part-left {
	flex: 0 1 auto;
}
.header-landing-ads .main-bar .inner-bar {
	justify-content: space-between;
}
@media only screen and (max-width: 575px) {
	.header-landing-ads .main-bar .container .header-part-right {
		padding-left: 12px;
		margin-right: 0;
	}
	.header-landing-ads .btn.btn-lg {
		padding: 10px 16px;
		font-size: 0.85rem;
	}
}

/* ---------- Columna de foto en "Video de Autoridad Médica" (Ginecología Integral, ads y sitio) ----------
   El .m-b30 de la plantilla es fijo (no responsive): en desktop, con el bloque de texto ya más
   alto por las credenciales UNAM, ese margen deja la foto "flotando" separada del borde inferior
   de la sección. En mobile (columnas apiladas) el margen original sigue haciendo falta. */
@media (min-width: 992px) {
	.video-autoridad-col.m-b30 {
		margin-bottom: 0;
	}
	.video-autoridad-section.content-inner {
		padding-bottom: 0;
	}
}

/* ---------- Línea de credencial/autoridad bajo el subtítulo del hero ----------
   Usa azul ("ciencia/confianza" en docs/01), no el primary de la landing (fucsia/naranja):
   esto es una credencial, no un botón — debe leerse distinto de los CTA de WhatsApp. */
.trust-line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--bs-secondary);
	font-weight: 600;
	margin-bottom: 24px;
	background: rgba(var(--brand-azul-rgb), 0.08);
	border-radius: 999px;
	padding: 8px 16px 8px 8px;
}
.trust-line i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--brand-azul);
	color: #fff;
	font-size: 0.8rem;
	flex: none;
}

/* ---------- Bloque de solución/servicio/caso clínico con icono ---------- */
.solution-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--bs-primary-bg-subtle);
	color: var(--bs-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 20px;
	/* Sin esto, dentro de una fila flex (el encabezado de categoría en TablaPrecios.cshtml) el
	   navegador puede encoger el círculo por debajo de 64px de ancho cuando el texto vecino es
	   largo ("Interrupción Legal del Embarazo") — el alto no se toca, así que queda ovalado. */
	flex-shrink: 0;
}

/* ---------- Variantes de color del círculo de icono ----------
   Por defecto .solution-icon siempre sale en el mismo tono (fucsia/naranja de --bs-primary),
   así que filas de varias cards se ven monocromáticas. Estas variantes toman prestados los
   acentos ya definidos (azul/verde de arriba) más 3 tonos del manual oficial (docs/08: Bugambilia,
   Índigo Mora, Amarillo Mango) para dar variedad sin salirse de la paleta de marca — mismo criterio
   de "uso puntual, no como sistema" que ya se aplicaba a azul/verde. */
.solution-icon-azul {
	background: rgba(var(--brand-azul-rgb), 0.12);
	color: var(--brand-azul);
}
.solution-icon-verde {
	background: rgba(var(--brand-verde-rgb), 0.18);
	color: #6b8a1a;
}
.solution-icon-bugambilia {
	background: rgba(178, 44, 203, 0.12);
	color: #B22CCB;
}
.solution-icon-indigo {
	background: rgba(106, 46, 255, 0.12);
	color: #6A2EFF;
}
.solution-icon-mango {
	background: rgba(255, 211, 26, 0.22);
	color: #8a6800;
}

/* ---------- Botón flotante de WhatsApp ----------
   Excepción deliberada a la paleta: se queda con el verde real de la marca WhatsApp
   (#25D366), no con fucsia/naranja/verde-kiwi — el reconocimiento inmediato de "esto
   abre WhatsApp" importa más para la conversión que la consistencia cromática aquí. */
.whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 999;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
	animation: whatsappPulse 2.4s infinite;
}
.whatsapp-float:hover {
	color: #fff;
	background: #1ebe5b;
}
@keyframes whatsappPulse {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 575px) {
	.whatsapp-float { width: 52px; height: 52px; font-size: 26px; right: 14px; bottom: 14px; }
}

/* ---------- Video de autoridad médica ---------- */
.video-cover {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
}
.video-cover img { width: 100%; display: block; }
.video-cover .play-btn {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 74px; height: 74px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: var(--bs-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* ---------- Footer solo-legal (landings) ---------- */
.footer-legal {
	background: var(--bs-secondary);
	color: rgba(255,255,255,0.85);
	padding: 28px 0;
	font-size: 0.85rem;
}
.footer-legal a { color: #fff; text-decoration: underline; }
.footer-legal .cedulas { opacity: 0.8; margin-top: 6px; }
.footer-legal .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 8px; }

/* ---------- Páginas de cuenta (login/access denied) ---------- */
body.account-body {
	background: var(--bs-light, #FFF8F3);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.account-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 35px rgba(60, 26, 91, 0.12);
	padding: 40px;
	width: 100%;
	max-width: 420px;
}
.account-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}
.account-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--bs-secondary);
	margin-bottom: 20px;
	text-align: center;
}
/* Tinte derivado de Naranja Blood Orange #FF6A13 — es el "acento de urgencia/alerta"
   de docs/01, aplicado aquí a un mensaje de error de login (bg = naranja al 15% sobre
   blanco, borde al 35%, texto al 55% para contraste AA sobre el fondo claro). */
.account-alert {
	background: #FFE8DB;
	border: 1px solid #FFCBAC;
	color: #8C3A0A;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 0.9rem;
}

/* ---------- Franja de credenciales (Home) ----------
   Azul, no fucsia: son datos de formación/confianza, no un llamado a la acción
   (docs/01 asigna el azul justo a ese rol: "acento secundario — ciencia/confianza"). */
.credential-badge {
	display: block;
}
.credential-org {
	display: block;
	font-family: var(--font-family-title);
	font-weight: 800;
	font-size: 1.7rem;
	color: var(--brand-azul);
}
.credential-label {
	display: block;
	font-size: 0.95rem;
	color: var(--bs-secondary);
	font-weight: 600;
	margin-top: 6px;
}

/* ---------- Fix de contraste: inputs invisibles sobre fondo blanco ----------
   style.css define .form-control con border:0 y background blanco, más una línea con un typo
   real del tema (border-radius con un valor de "border", que el navegador ignora por inválido) —
   el resultado neto es que <input>/<textarea> quedan sin borde visible. En una sección de color
   eso no se nota, pero en formularios sobre fondo blanco (Agendar Cita) el campo desaparece por
   completo. select/input[type=date] no se ven afectados porque no comparten esa regla. */
.form-control {
	border: 1px solid rgba(var(--bs-secondary-rgb), 0.25) !important;
}
.form-control:focus {
	border-color: var(--bs-primary) !important;
}

/* ---------- Tabla de precios: se vuelve tarjetas apiladas en mobile ----------
   Con 3 columnas (Servicio/Duración/Precio) y texto de longitud muy variable (notas largas vs.
   precios de una sola línea), la fila crece según la columna más alta y Duración/Precio quedan
   flotando centrados en medio de mucho espacio vacío — se ve atropellado. En vez de eso, cada
   fila se apila como bloque y Duración/Precio llevan su propia etiqueta (atributo data-label
   en TablaPrecios.cshtml) ya que pierden el encabezado de columna al dejar de ser una tabla. */
@media (max-width: 767.98px) {
	.pricing-category .table thead {
		display: none;
	}
	.pricing-category .table,
	.pricing-category .table tbody,
	.pricing-category .table tr,
	.pricing-category .table td {
		display: block;
		width: 100%;
	}
	.pricing-category .table tr {
		padding: 16px 0;
	}
	.pricing-category .table td {
		border: none !important;
		padding: 3px 0 !important;
	}
	.pricing-category .table td[data-label]:not([data-label=""])::before {
		content: attr(data-label) ": ";
		font-weight: 700;
		color: var(--bs-secondary);
	}
}

/* ---------- Fix: contadores del Home tapados por su propio título ----------
   .content-bx.style-1 (style.css línea ~24993) está diseñado para una etiqueta CORTA (1-2
   palabras) superpuesta centrada sobre el número gigante (position:absolute, top:50%). Los
   contadores del Home usan frases completas ("Hospitales como profesora adjunta"), que al
   quedar centradas y superpuestas cubren casi todo el número. Aquí el título vuelve al flujo
   normal, debajo del número, en vez de superpuesto — funciona con texto de cualquier longitud. */
.content-bx.style-1 .title {
	position: static;
	transform: none;
	background-color: transparent;
	margin-top: 8px;
	color: var(--bs-secondary);
}

/* ---------- Preloader: fondo transparente en vez de blanco sólido ----------
   .dz-preloader-1 (style.css) trae background-color:#fff — tapa la página con un blanco opaco
   mientras carga. Se prefiere un fondo semitransparente para que no se vea como un "flash" duro. */
.dz-preloader-1 {
	background-color: rgba(255, 255, 255, 0.7);
}

/* ---------- Fix: icono de pestaña se "pierde" al activarse ----------
   style.css sube el texto del .nav-link a blanco en :active/:hover, pero el icono (i o svg)
   tiene su PROPIO color fijo en var(--bs-primary) sin variante para el estado activo — sobre
   el fondo fucsia de la pestaña activa (mismo primary), el icono queda fucsia-sobre-fucsia,
   invisible. Faltaba justo la mitad de la regla que ya existe para svg path. */
.dz-tabs.style-3 .nav-tabs .nav-link.active i,
.dz-tabs.style-3 .nav-tabs .nav-link:hover i,
.dz-tabs.style-3 .nav-tabs .nav-link:active i,
.dz-tabs.style-3 .nav-tabs .nav-link:focus i {
	color: #fff;
}

/* ---------- Mobile: separación entre botones cuando el flex-wrap los apila ----------
   El hero y la sección "Agenda tu Cita" usan margin-right (m-r30) para separar 2 botones en
   una fila — funciona en desktop, pero al envolver en mobile (flex-wrap) ese margen horizontal
   no genera espacio vertical entre ellos y quedan pegados/desalineados. gap cubre ambos casos. */
@media (max-width: 767.98px) {
	.hero-content .d-flex.flex-wrap.align-items-center,
	.content-info .d-flex.flex-wrap.align-items-center {
		gap: 12px;
	}
}

/* ---------- Header: logo-header se queda angosto (135px) y el lockup se desborda ----------
   style.css fija .logo-header a un ancho fijo (165px desktop / 135px ≤1199px, sin override en
   mobile) pensado para un logo tradicional de una sola línea. Nuestro lockup (isotipo + nombre
   + eslogan en 2 líneas) necesita más ancho real, o el texto se corta/desborda. */
.header-part-left .logo-header {
	width: auto !important;
	max-width: 100%;
}
@media (max-width: 575.98px) {
	.header-part-left .brand-lockup img {
		height: 52px !important;
	}
}

/* ---------- Tabla de precios: cada categoría envuelta en su propia tarjeta ----------
   Antes cada categoría era solo un encabezado + tabla flotando sobre el mismo fondo blanco,
   sin separación visual clara entre una y otra. Cada tarjeta usa el mismo color de acento que
   ya tiene su icono (variantesIcono en TablaPrecios.cshtml) como franja superior, reforzando
   la variedad de color entre categorías. */
.pricing-category-card {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 35px rgba(60, 26, 91, 0.08);
	padding: 30px 30px 10px;
	border-top: 5px solid var(--bs-primary);
}
.pricing-category-card.acento-azul { border-top-color: var(--brand-azul); }
.pricing-category-card.acento-verde { border-top-color: var(--brand-verde); }
.pricing-category-card.acento-bugambilia { border-top-color: #B22CCB; }
.pricing-category-card.acento-indigo { border-top-color: #6A2EFF; }
.pricing-category-card.acento-mango { border-top-color: #FFD31A; }

/* ---------- Precio "Promoción $X" resaltado dentro del texto libre de precio ---------- */
.precio-promo-badge {
	display: inline-block;
	background: rgba(var(--brand-verde-rgb), 0.18);
	color: #4b6b0f;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
	margin-left: 4px;
}

/* ---------- Card de promo destacada arriba de la tabla de precios ---------- */
.promo-destacada {
	background: linear-gradient(120deg, var(--bs-primary), var(--bs-secondary));
	color: #fff;
	border-radius: 18px;
	padding: 28px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.promo-destacada .promo-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	font-weight: 700;
	opacity: 0.85;
}
.promo-destacada h3 {
	color: #fff;
	margin-bottom: 4px;
}
.promo-destacada .precio-tachado {
	text-decoration: line-through;
	opacity: 0.7;
	margin-right: 6px;
}
.promo-destacada .precio-promo {
	font-size: 1.4rem;
	font-weight: 800;
}

/* ---------- Tarjeta de certificación (detalle de colegas del equipo) ---------- */
.certificado-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--brand-rosa-claro);
	border-radius: 12px;
	padding: 16px 18px;
	height: 100%;
}
.certificado-card i {
	color: var(--bs-primary);
	font-size: 22px;
	flex: none;
	margin-top: 2px;
}

/* ---------- Fix: label de fecha se veía con un fondo/color distinto al resto ----------
   input[type=date] no soporta :placeholder-shown como los inputs de texto (el navegador
   dibuja su propio "dd/mm/yyyy"), así que Bootstrap trata la label como "flotada" todo el
   tiempo — con el fondo/color default del tema, no el nuestro. Se fuerza a que combine. */
.form-floating.floating-outline-rounded > label {
	background: #fff;
	color: rgba(var(--bs-secondary-rgb), 0.65) !important;
}

/* ---------- Textura de fondo (doodles médicos) en secciones blancas y footer ----------
   bg-cards.png ya viene pre-desaturada/tenue (editada directamente por Rafa), así que ya no
   hace falta el truco del velo blanco superpuesto (background-image de 2 capas) — de hecho esa
   versión de 2 capas no renderizaba (Rafa lo confirmó probando en DevTools: 1 sola capa sí
   funciona). Clase con !important agregada directo en el markup de cada sección/contenedor,
   en vez de depender de que la especificidad del selector le gane a otras reglas del tema.
   El card blanco del footer es el ::before de .footer-inner-wraper (background-color:#fff ahí
   mismo) — por eso esta misma clase también se define para ese pseudo-elemento. */
.bg-textura-doodle {
	background-image: url(/images/bg-cards.png) !important;
	background-repeat: repeat !important;
	background-size: 250px 250px !important;
}
.footer-inner-wraper.bg-textura-doodle::before {
	background-image: url(/images/bg-cards.png) !important;
	background-repeat: repeat !important;
	background-size: 250px 250px !important;
}
.bg-textura-doodle .dz-accordion.style-1 .accordion-item {
	background-color: #fff;
	border: solid 10px white;
}

/* ---------- Chips de categoría en /precios ---------- */
/* Ya no llevan estado "activo" por scroll (ver TablaPrecios.cshtml) — solo fondo blanco fijo
   más el hover propio de .btn-outline-secondary. */
.pricing-category-nav-simple a {
	background-color: #fff;
}

/* ---------- Formulario de /agendar-cita ---------- */
/* .floating-outline-rounded solo se usa en AgendarCita.cshtml. El tema trae los campos con
   fondo transparente, así que sobre la sección con textura (bg-white bg-textura-doodle) el
   patrón se veía detrás de cada input/select/textarea. */
.floating-outline-rounded .form-control,
.floating-outline-rounded .form-select {
	background-color: #fff;
}

/* ---------- Tarjetas del equipo (/equipo) ---------- */
/* .dz-team.style-1 solo se usa en Team/Index.cshtml. La fila de Bootstrap (.row) ya estira por
   flexbox las columnas de una misma línea a la altura de la más alta — falta que la tarjeta
   interna también ocupe ese 100% y reparta el espacio extra en .dz-content, si no el borde
   inferior de cada tarjeta queda a distinta altura aunque la columna sí esté pareja. */
.dz-team.style-1 {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.dz-team.style-1 .dz-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
}

/* ---------- Tarjetas de testimonios (carrusel "Lo que Dicen mis Pacientes") ---------- */
/* Ancho fijo ~400px por tarjeta — el carrusel usa slidesPerView:'auto' en dz.carousel.js,
   así que el ancho real de cada slide lo controla este CSS, no el JS. */
.testimonial-swiper2 .swiper-slide {
	width: 400px;
	max-width: 90vw;
	/* El CSS base de Swiper pone height:100% en .swiper-slide, lo cual bloquea el "stretch"
	   automático del flexbox de .swiper-wrapper (el que igualaría cada slide a la altura del
	   más alto) — un height explícito, aunque sea 100%, hace que el navegador no lo trate como
	   "auto" para efectos de stretch. Con height:auto aquí, todas las tarjetas quedan de la
	   misma altura que la más alta del grupo visible. */
	height: auto;
}

/* ---------- Slider de categorías en /servicios ---------- */
/* Mismo problema/solución que .testimonial-swiper2: .swiper-slide trae height:100% del CSS
   base de Swiper, lo cual bloquea el "stretch" del flexbox que iguala cada tarjeta a la altura
   de la más alta del grupo visible. Con height:auto, todas se ajustan dinámicamente. */
.service-swiper .swiper-slide {
	height: auto;
}

/* Sin hover: .icon-bx-wraper.style-3 normalmente cambia de color, rellena .bg y pone el
   texto en blanco al pasar el mouse (ver reglas base ".style-3.active/:hover" en style.css).
   Aquí se neutraliza todo eso para esta tarjeta en particular, restaurando cada propiedad a
   su valor de reposo — la tarjeta se ve igual con o sin mouse encima. */
.icon-bx-wraper.style-3.testimonio-card.active .bg,
.icon-bx-wraper.style-3.testimonio-card:hover .bg {
	opacity: 0;
}
.icon-bx-wraper.style-3.testimonio-card.active:after,
.icon-bx-wraper.style-3.testimonio-card:hover:after {
	background-color: #fff;
}
.icon-bx-wraper.style-3.testimonio-card.active .icon-bx,
.icon-bx-wraper.style-3.testimonio-card:hover .icon-bx {
	background-color: #fff;
}
.icon-bx-wraper.style-3.testimonio-card.active .icon-bx i,
.icon-bx-wraper.style-3.testimonio-card:hover .icon-bx i {
	color: var(--bs-primary);
}
.icon-bx-wraper.style-3.testimonio-card.active .dz-title,
.icon-bx-wraper.style-3.testimonio-card:hover .dz-title {
	color: var(--bs-heading-color);
}
.icon-bx-wraper.style-3.testimonio-card.active p,
.icon-bx-wraper.style-3.testimonio-card:hover p {
	color: var(--bs-body-color);
}
.icon-bx-wraper.style-3.testimonio-card.active .dz-title::after,
.icon-bx-wraper.style-3.testimonio-card:hover .dz-title::after {
	background: linear-gradient(to right, var(--bs-secondary) 0, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Panel admin ---------- */
.admin-topbar {
	background: var(--bs-secondary, #3C1A5B);
	color: #fff;
	padding: 14px 0;
}
.admin-topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.admin-topbar a.brand {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.admin-topbar form button {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);
	color: #fff;
	border-radius: 20px;
	padding: 6px 16px;
	font-size: 0.85rem;
}
.admin-content {
	padding: 32px 0;
}
.admin-title {
	font-weight: 800;
	color: var(--bs-secondary);
}
.admin-subtitle {
	color: rgba(44, 62, 80, 0.65); /* azul pizarra atenuado, no un gris ajeno a la paleta */
	margin-bottom: 20px;
}
.admin-table th {
	color: var(--bs-secondary);
	font-weight: 700;
	white-space: nowrap;
}