/* Tipografía global */
body,
.entry-content,
.mainnav .menu > li > a,
.page-title-heading {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cit-ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
	background: var(--cit-bg);
}

/* Escala editorial */
.page-title-heading {
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cit-navy);
	line-height: 1.1;
}

.entry-content h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cit-navy);
}

.entry-content h2 {
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--cit-navy);
	margin-top: 2.5em;
}

.entry-content h3 {
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	font-weight: 600;
	color: var(--cit-teal);
}

.entry-content p,
.entry-content li {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--cit-ink);
}

.entry-content a {
	color: var(--cit-blue);
}

/* WCAG link-in-text-block: los links dentro de parrafos no deben depender solo del color */
.entry-content a:not(.cit-btn) {
	text-decoration: underline;
}

.entry-content a:focus-visible,
.cit-btn:focus-visible,
.mainnav .menu > li > a:focus-visible {
	outline: 2px solid var(--cit-blue);
	outline-offset: 2px;
}

/* Fase 6.6 — micro-interaccion sutil en botones (hover/active) */
.cit-btn {
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.cit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}
.cit-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Header */
#header {
	background: var(--cit-navy);
}

/* El theme padre pinta este bloque via CSS inline generado en PHP
   (inc/styles.php, opción header_menu_backgroundcolor, default #3764EB) con
   selector de alta especificidad — necesita !important para ganar. */
#header .inner-header-menu {
	background: var(--cit-navy) !important;
}

.mainnav .menu > li > a,
.header-menu a,
#mainnav > ul > li > a {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	color: #ffffff;
	font-weight: 600;
}

.mainnav .menu > li > a:hover {
	color: var(--cit-cta-green);
}

#mainnav ul.sub-menu > li > a {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	color: var(--cit-ink) !important;
}

/* Off-canvas móvil: solo tipografía, el color ya funciona sobre su panel claro */
#mainnav_canvas ul li a {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Footer */
.footer_background {
	background: var(--cit-navy) !important;
}

.footer_background a {
	color: #ffffff;
}

.footer_background a:hover {
	color: var(--cit-cta-green);
}

/* Cards genéricas de contenido WP (fuera de cit-sitio, que trae las suyas) */
.entry-content > .wp-block-group,
.entry-content table {
	border: 1px solid var(--cit-border);
	border-radius: 16px;
}

.entry-content table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.entry-content table th {
	background: var(--cit-warm);
	color: var(--cit-navy);
}

/* Fondo de sección alterna, uso opcional vía clase utilitaria */
.cit-section--warm {
	background: var(--cit-warm);
}

/* Placeholder de ilustración pendiente: banner compacto (no ocupa media
   pantalla vacía) — el prompt completo va en un comentario HTML antes de
   este div, no aquí, para no exponerlo a quien visite el sitio. */
.cit-illustration {
	width: 100%;
	margin: 1.5em 0;
	padding: 1rem 1.5rem;
	min-height: 64px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed var(--cit-teal);
	border-radius: 12px;
	background: linear-gradient(135deg, var(--cit-navy) 0%, var(--cit-teal) 100%);
}

.cit-illustration__label {
	display: block;
	max-width: 62ch;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #ffffff;
	text-align: center;
}

/* Oculto en vivo 2026-09-02: sin arte real todavia, la caja "Ilustracion
   proximamente" se ve como sitio sin terminar para un visitante real (8
   paginas la mostraban). El HTML y el comentario-spec de cada una quedan
   intactos en post_content para cuando se generen las piezas reales -- solo
   se le quita el render. */
.cit-illustration { display: none; }

/* Variante con arte real: anula el ocultamiento global de arriba y muestra
   la imagen contenida, sin el borde punteado ni el fondo degradado del
   placeholder. */
.cit-illustration--filled {
	display: flex;
	padding: 0;
	min-height: 0;
	border: none;
	background: none;
	border-radius: 16px;
	overflow: hidden;
}

.cit-illustration--filled img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* Placeholder temporal negro 2026-09-03: mientras Envato Elements esta caido
   (outage confirmado en status.envato.com), estas paginas muestran esta caja
   negra en vez de la ilustracion hecha a mano o la foto real, para no dejar
   arte incorrecto en produccion mientras se consigue la foto definitiva. */
.cit-illustration--pending {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: #0a0a0a;
	border: none;
	border-radius: 16px;
	padding: 2rem;
}

.cit-illustration--pending svg {
	opacity: 0.6;
}

.cit-illustration--pending span {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	color: var(--cit-teal);
	text-align: center;
}

/* Task g: el amarillo #FEE100 viene del theme padre en dos mecanismos distintos —
   accent_color (var --theme-accent-color, usada en reposo por .bottom .copyright span a,
   el footer) y mainnav_hover_color/mainnav_active_color (hex literal en selectores #mainnav
   de alta especificidad). Se reemplaza por el verde de acento ya usado en hovers del sitio,
   que combina con el navy. !important necesario para ganarle al <style> inline del padre. */
:root {
	--theme-accent-color: var(--cit-cta-green, #37d67a);
}

#mainnav > ul > li > a:hover {
	color: var(--cit-cta-green, #37d67a) !important;
}
#mainnav > ul > li > a:after {
	background: var(--cit-cta-green, #37d67a) !important;
}
#mainnav > ul > li.current-menu-item > a,
#mainnav > ul > li.current-menu-ancestor > a,
#mainnav > ul > li.current-menu-parent > a {
	color: var(--cit-cta-green, #37d67a) !important;
}

/* El footer del padre (labaid) trae su propia tipografia para .bottom .copyright,
   distinta a la Montserrat del resto del sitio. Se fuerza aqui igual que el color
   de acento arriba. */
.bottom .copyright,
.bottom .copyright span,
.bottom .copyright span a {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Tarea d: logo integrado a la fila del nav. Gateado por la clase que agrega
   header-layout.js (misma media query 992px que usa el theme padre para el
   nav-wrap vs. el hamburger) — si el JS no corre, el layout original de dos
   filas se mantiene sin cambios. */
@media (min-width: 992px) {
	#header.cit-header-restructured .inner-header {
		display: none;
	}

	#header.cit-header-restructured .header-menu {
		justify-content: flex-start;
	}

	#header.cit-header-restructured .header-menu .header-ct-left {
		display: flex;
		align-items: center;
		margin-right: 40px;
	}

	#header.cit-header-restructured .header-menu .header-ct-left .logo img {
		height: 32px !important;
		width: auto !important;
		max-width: none !important;
		filter: brightness(0) invert(1);
	}

	#header.cit-header-restructured .header-menu-right {
		margin-left: auto;
	}
}

/* Tope explicito del logo para <992px (tablet/movil) y como respaldo si
   header-layout.js no llega a correr. El archivo activo es 3022x345px
   (~8.76:1, lockup de una sola linea: icono + texto); esto solo limita el
   alto renderizado, el ancho se ajusta solo. */
.logo img.site-logo {
	max-height: 44px;
	width: auto;
	aspect-ratio: 220 / 58;
}
@media (max-width: 991px) {
	.logo-mobi img.site-logo {
		max-height: 40px;
		width: auto;
		aspect-ratio: 220 / 58;
		/* El header usa fondo oscuro (header_menu_backgroundcolor) en todos los
		   anchos; el mismo invert ya usado en desktop (linea ~288,
		   cit-header-restructured) se aplica aqui porque el logo navy no se ve
		   sobre ese fondo. */
		filter: brightness(0) invert(1);
	}
}

/* Fix 2026-09-07: el logo del panel movil off-canvas (menu hamburguesa,
   .modal-menu__panel-footer .logo-panel, fondo blanco) no tenia NINGUNA
   regla de tamano -- se renderizaba con los atributos width/height crudos
   del <img> (herencia de metadata vieja, 5149x255), se ve estirado/jalado.
   Mismo tope que el logo del header movil, sin invert porque el fondo del
   panel es blanco (#fff) y el logo navy si se ve ahi. */
.modal-menu__panel-footer .logo-panel img.site-logo {
	max-height: 40px;
	width: auto;
	aspect-ratio: 220 / 58;
}

/* Tarea e: nav fijo al hacer scroll (aplica en todos los tamaños, la fila
   .inner-header-menu existe en desktop, tablet y móvil). */
#header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Fix 2026-09-05: el tema padre pone overflow:hidden en .themesflat-boxed
   (ancestro directo de #header) por dos vias -- .boxed .themesflat-boxed en
   main.css linea ~6691, y sin condicion de layout dentro de un media query
   (max-width:1320px) en responsive.css linea ~79 -- y eso rompe
   position:sticky en TODOS los navegadores: cualquier valor de overflow
   distinto de visible en CUALQUIER eje (aunque sea solo overflow-x) ya
   convierte a ese ancestro en su propio "contenedor de scroll" segun spec
   CSS, y como ese div nunca hace scroll real (su alto siempre es igual a su
   contenido), el sticky queda atrapado ahi y nunca se pega al viewport real.
   Se cubren los dos selectores del tema padre para igualar/superar su
   especificidad, restaurando overflow:visible por completo. La proteccion
   contra scroll horizontal por elementos decorativos se mueve a <body>, que
   si es un ancestro seguro para overflow-x:hidden sin romper sticky (es el
   elemento raiz asociado al scroll real de la pagina). */
.themesflat-boxed,
.boxed .themesflat-boxed {
	overflow: visible;
}
body {
	overflow-x: hidden;
}

/* La banda "Agenda tu cita" (.cit-banda-cta, ver functions.php) es hermana
   de #header bajo el mismo padre. Antes se queria "fija, no sticky" a
   proposito; ahora el usuario pidio que tambien quede visible siempre al
   bajar, pegada justo debajo del header. El offset --cit-header-height lo
   calcula header-layout.js (ResizeObserver sobre #header), porque la altura
   del header cambia entre mobile/desktop y no conviene hardcodearla aqui. */
.cit-banda-cta {
	position: sticky;
	top: var(--cit-header-height, 0px);
	z-index: 998;
}

/* ===== Rediseño IA — sistema de patrones compartidos (Etapa 1) ===== */

/* Scaffold: cada instancia es un cambio de fondo/whitespace, el mecanismo
   real de separación visual entre temas. .wp-block-group ya trae borde/radio
   genérico (regla de arriba, "Cards genéricas de contenido WP") — se anula
   aquí con selector de igual especificidad para las secciones del rediseño. */
.entry-content > .wp-block-group.cit-section {
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding-block: clamp(56px, 8vw, 96px);
	margin-block: 0 !important;
}
.cit-section--navy { background: var(--cit-navy); color: #fff; }
.cit-section--warm { background: var(--cit-warm); }
.cit-section--white { background: #fff; }
/* Fix ultrawide: .entry-content limita el ancho de estas franjas a un
   contenedor centrado, dejando el fondo claro del body visible a los lados
   en pantallas anchas (no queda "a la par" del header, que si es full-bleed).
   Este box-shadow gigante pinta el mismo color mas alla del borde de la caja
   sin tocar su ancho/posicion real (cero riesgo de scroll horizontal), y el
   clip-path evita que se vea al hacer scroll vertical sobre otras secciones. */
.cit-section--navy,
.cit-section--warm,
.cit-section--white {
	clip-path: inset(0 -100vmax);
}
/* Selector con la misma especificidad que ".entry-content > .wp-block-group.cit-section"
   (que trae box-shadow:none unas lineas arriba) para poder ganarle por orden
   sin recurrir a !important. */
.entry-content > .wp-block-group.cit-section--navy { box-shadow: 0 0 0 100vmax var(--cit-navy); }
.entry-content > .wp-block-group.cit-section--warm { box-shadow: 0 0 0 100vmax var(--cit-warm); }
.entry-content > .wp-block-group.cit-section--white { box-shadow: 0 0 0 100vmax #fff; }
.cit-section--navy h2,
.cit-section--navy h3,
.cit-section--navy p { color: #fff; }

/* 1. INTRO — apertura de página o de capítulo en un pivote de tema */
.cit-intro { max-width: 1080px; margin-inline: auto; padding-inline: 24px; text-align: center; }
p.cit-intro__sub {
	max-width: 65ch;
	margin: 12px auto 0;
	font-size: 1.05rem;
	color: var(--cit-muted);
}
.cit-section--navy p.cit-intro__sub { color: rgba(255, 255, 255, .8); }
.cit-intro__cta { margin-top: 24px; }
.cit-intro__icon { display: block; font-size: 2rem; color: var(--cit-teal); margin-bottom: 14px; }
.cit-section--navy .cit-intro__icon { color: #fff; }

/* 2. ICON GRID */
.cit-icon-grid {
	max-width: 1080px;
	margin: 40px auto 0;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}
.cit-icon-card {
	position: relative;
	border-radius: 4px;
	padding: 20px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 48, 93, .08);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.cit-icon-card__link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
/* Fase 6.6 — micro-interaccion sutil en cards (hover) */
.cit-icon-card:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.cit-icon-card__icon { display: block; font-size: 2.5rem; line-height: 1; color: var(--cit-teal); margin-bottom: 12px; }
.cit-icon { width: 1em; height: 1em; vertical-align: -0.125em; }
.cit-icon-card__t { margin: 0 0 6px; font-size: 1.1rem; }
p.cit-icon-card__body {
	margin: 0;
	font-size: .92rem;
	color: var(--cit-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Fase 3 padecimientos -- variante clickable de .cit-icon-card (home: grid de 12 padecimientos) */
a.cit-icon-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
a.cit-icon-card:hover .cit-icon-card__t { color: var(--cit-teal); }

/* Fix 2026-09-07: en mobile, centrar el icono/titulo/texto de "Padecimientos
   que evaluamos" (grid --padecimientos, icono generico a la izquierda en
   desktop -- ver comentario "Fase 3 padecimientos" arriba). El usuario
   mando captura mobile pidiendo centrar el icono para que se entienda mejor
   en pantallas angostas. Solo mobile (<=991px); desktop queda igual. */
@media (max-width: 991px) {
	.cit-icon-grid--padecimientos .cit-icon-card__icon {
		margin-left: auto;
		margin-right: auto;
	}
	.cit-icon-grid--padecimientos .cit-icon-card__t,
	.cit-icon-grid--padecimientos p.cit-icon-card__body {
		text-align: center;
	}
}

/* 3. IMAGE + TEXT — la alternancia de lado es en sí un dispositivo de transición */
.cit-split {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 64px);
	align-items: center;
}
.cit-split--reverse .cit-split__media { order: 2; }
.cit-split--reverse .cit-split__text { order: 1; }
.cit-split__media img { width: 100%; height: auto; border-radius: 12px; display: block; }
@media (max-width: 767px) {
	.cit-split { grid-template-columns: 1fr; }
	.cit-split--reverse .cit-split__media,
	.cit-split--reverse .cit-split__text { order: initial; }
}

/* 4. PROCESS */
.cit-process { max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
.cit-process__step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding-block: 20px;
	border-bottom: 1px solid var(--cit-border);
}
.cit-process__step:last-child { border-bottom: none; }
.cit-section--navy .cit-process__step { border-bottom-color: rgba(255, 255, 255, .2); }
.entry-content .cit-process__num {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--cit-teal);
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cit-process__body h3 { margin: 0 0 4px; }
.cit-process__body p { margin: 0; font-size: .92rem; color: var(--cit-muted); }
.cit-section--navy .cit-process__body p { color: rgba(255, 255, 255, .8); }

/* PROCESS variante "flow": pasos cortos con icono, conectados por una
   linea/timeline (no un simple glifo), pensada para escaneo en un solo
   vistazo (sin parrafos largos, minimo texto por paso). */
.cit-flow {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}
.cit-flow__step {
	flex: 1 1 170px;
	min-width: 140px;
	max-width: 220px;
	text-align: center;
	padding: 12px 10px;
}
.cit-flow__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--cit-warm);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cit-flow__icon-svg {
	font-size: 1.5rem;
	color: var(--cit-teal);
}
.entry-content .cit-flow__step h3 {
	margin: 0 0 2px;
	font-size: 1.05rem;
	color: var(--cit-navy);
}
.entry-content .cit-flow__step p {
	margin: 0;
	font-size: .82rem;
	color: var(--cit-muted);
	line-height: 1.3;
}
.cit-flow__arrow {
	flex: 1 1 32px;
	max-width: 48px;
	min-width: 20px;
	height: 2px;
	background: var(--cit-teal);
	position: relative;
	margin-top: 39px;
	font-size: 0;
}
.cit-flow__arrow::after {
	content: '';
	position: absolute;
	right: -1px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-style: solid;
	border-width: 0 2px 2px 0;
	border-color: var(--cit-teal);
	transform: translateY(-50%) rotate(-45deg);
}
@media (max-width: 680px) {
	.cit-flow { flex-direction: column; align-items: center; gap: 2px; }
	.cit-flow__arrow {
		flex: 0 0 24px;
		width: 2px;
		height: 24px;
		max-width: none;
		min-width: 0;
		margin: 0 auto;
	}
	.cit-flow__arrow::after {
		right: 50%;
		top: auto;
		bottom: -1px;
		transform: translateX(50%) rotate(45deg);
	}
}

/* 5. TRUST — da uso real a --cit-warm, alineado visualmente con .cit-proof-bar */
.cit-trust {
	max-width: 1080px;
	margin-inline: auto;
	background: var(--cit-warm);
	border-radius: 16px;
	padding: clamp(24px, 4vw, 40px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}
p.cit-trust__item { text-align: center; font-size: .92rem; color: var(--cit-ink); font-weight: 600; margin: 0; }

/* 6. FAQ */
.cit-faq { max-width: 780px; margin: 0 auto; padding-inline: 24px; line-height: 1.6; }
.cit-faq h2 { text-align: center; margin-bottom: 28px; }
.cit-faq h3 {
	margin: 0;
	padding: 18px 0 8px;
	font-size: 1.05rem;
	color: var(--cit-navy);
	border-top: 1px solid var(--cit-border);
}
.cit-faq h3:first-of-type { border-top: none; padding-top: 0; }
.cit-faq p { margin: 0 0 4px; font-size: .95rem; color: var(--cit-muted); }

/* Página 89: clusters temáticos siempre visibles + preguntas individuales
   en <details> nativo (progressive disclosure justificada, ninguna respuesta
   individual es necesaria para decidir agendar). */
.cit-faq-cluster { max-width: 780px; margin: 0 auto 40px; padding-inline: 24px; }
.cit-faq-cluster > h2 { text-align: left; margin: 0 0 12px; }
.cit-faq-item { border-top: 1px solid var(--cit-border); padding: 14px 0; }
.cit-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cit-navy);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.cit-faq-item summary::-webkit-details-marker { display: none; }
.cit-faq-item summary::after {
	content: '+';
	flex: none;
	color: var(--cit-teal);
	font-weight: 700;
	display: inline-block;
	transition: transform 220ms var(--cit-ease);
}
.cit-faq-item[open] summary::after { transform: rotate(45deg); }
.cit-faq-item summary:hover { color: var(--cit-teal); }
.cit-faq-item summary:focus-visible { outline: 2px solid var(--cit-blue); outline-offset: 2px; }
.cit-faq-item p {
	margin: 10px 0 0;
	color: var(--cit-muted);
	font-size: .95rem;
	animation: cit-faq-fade 220ms var(--cit-ease);
}
@media (prefers-reduced-motion: reduce) {
	.cit-faq-item summary::after { transition: none; }
	.cit-faq-item p { animation: none; }
}
@keyframes cit-faq-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* 7. CTA-band — un solo botón, reusa .cit-btn.cit-btn--lg de cit-sitio */
.cit-cta-band { max-width: 1080px; margin-inline: auto; padding-inline: 24px; text-align: center; }
.cit-cta-band h2 { margin: 0 0 10px; }
p.cit-cta-band__sub { max-width: 55ch; margin: 0 auto 24px; color: var(--cit-muted); }
.cit-section--navy p.cit-cta-band__sub { color: rgba(255, 255, 255, .85); }
.cit-section--navy .cit-cta-band__sub a { color: #5AA3D8; }

/* Nav: "Agendar cita" como CTA obvio — cubre desktop (.mainnav / #mainnav)
   y el off-canvas móvil real (#mainnav_canvas, confirmado poblado por
   wp_nav_menu('primary') en header-default.php, no el widget vacío de
   aside-toggler-sidebar). #mainnav>ul>li>a:hover ya usa !important arriba
   (Task g) — sin igualarlo aquí el hover del pill quedaría verde-sobre-verde. */
.mainnav .menu > li.cit-nav-cta > a,
#mainnav > ul > li.cit-nav-cta > a,
#mainnav_canvas li.cit-nav-cta > a {
	background: var(--cit-cta);
	color: var(--cit-cta-ink) !important;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 999px;
	margin-left: 12px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.mainnav .menu > li.cit-nav-cta > a:hover,
#mainnav > ul > li.cit-nav-cta > a:hover,
#mainnav_canvas li.cit-nav-cta > a:hover {
	background: var(--cit-cta-hover) !important;
	color: var(--cit-cta-ink) !important;
}
#mainnav_canvas li.cit-nav-cta > a { margin-left: 0; display: inline-flex; }


/* 8. HERO -- apertura del home, variante de .cit-intro con CTA propio */
.cit-hero { max-width: 1180px; margin-inline: auto; padding-inline: 24px; text-align: center; }

/* Fase 9 -- hero a dos columnas estilo Plenna (decision Juan Carlos,
   PENDIENTES-CIT.md cont. 20): texto+CTA a la izquierda, foto a la derecha
   en escritorio; en movil se apilan (texto primero, foto despues) para no
   empujar el CTA fuera del primer scroll. El logo del header no se toca:
   vive en tpl/header/header-default.php (tema padre), fuera de .cit-hero,
   siempre visible arriba de este bloque. */
.cit-hero__grid { display: block; }
.cit-hero__col-img {
	margin-top: 32px;
}
.cit-hero__col-img img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
@media (min-width: 901px) {
	.cit-hero__grid {
		display: grid;
		grid-template-columns: 1.05fr .95fr;
		gap: 56px;
		align-items: center;
		text-align: left;
	}
	.cit-hero__col-img { margin-top: 0; }
	.cit-hero__grid .cit-hero__pills { justify-content: flex-start; }
}
.entry-content .cit-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }

/* Fase 6.3 — display face para titulares (hero h1 + h2 de seccion).
   Montserrat se queda para body/UI; Space Grotesk solo para estos dos casos.
   Necesita !important para ganarle a la regla global "h1,h2,...{!important}". */
.entry-content .cit-hero h1 {
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-weight: 700 !important;
	text-wrap: balance;
}
.entry-content h2 {
	font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-weight: 600 !important;
	text-wrap: balance;
}

/* Fase 8.2 -- acento serif calido, uso quirurgico en spans .cit-accent
   dentro de h1/h2 puntuales (hero, flow, testimonios). No reemplaza
   Space Grotesk como display face, solo marca una palabra clave.
   Fraunces se carga junto con Montserrat/Space Grotesk en functions.php
   (cit_rediseno_assets), no via @import aqui. */
.cit-accent {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 400;
}
.cit-section--navy p.cit-hero__sub { font-size: 1.25rem; color: rgba(255, 255, 255, .85); max-width: 700px; margin: 0 auto 1.5rem; }
.cit-section--navy p.cit-hero__meta { font-size: 1.1rem; color: rgba(255, 255, 255, .7); margin-bottom: 2.5rem; }

/* Fase 8.4 -- pills de acceso directo al embudo bajo el CTA del hero.
   Reemplaza el selector de sede de Plenna (no aplica, CIT es sede unica):
   aqui son 3 accesos a cada etapa (Consulta / Ultrasonido / Biopsia),
   mismo radio pill que .cit-btn (8.3) pero estilo secundario translucido
   para no competir visualmente con el CTA principal. */
.cit-hero__pills {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.cit-hero__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff !important;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 180ms ease, border-color 180ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.cit-hero__pill:hover,
.cit-hero__pill:focus-visible {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .6);
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
@media (prefers-reduced-motion: reduce) {
	.cit-hero__pill:hover,
	.cit-hero__pill:focus-visible {
		transform: none;
	}
}

/* Fase 8.4b -- franja de disponibilidad real bajo el CTA del hero (lookalike
   Plenna). Un solo slot puntual ya resuelto por el sistema de agenda, nunca
   un rango/patron de horario (Regla 34): el texto sale de
   cit_sel_agenda_remota() en cit-selector.php, el mismo puente a Nikolai que
   usa el selector real -- no es un motor paralelo. */
.cit-hero__disponibilidad {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 18px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: rgba(255, 255, 255, .8);
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.5;
}
.cit-hero__disponibilidad strong {
	color: #fff;
	font-weight: 600;
}
.cit-hero__disponibilidad-dot {
	width: 6px;
	height: 6px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--cit-cta-green, #37d67a);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(55, 214, 122, .18);
	animation: cit-disponibilidad-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.cit-hero__disponibilidad-dot { animation: none; }
}
@keyframes cit-disponibilidad-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(55, 214, 122, .18); }
	50% { box-shadow: 0 0 0 6px rgba(55, 214, 122, 0); }
}

/* 9. TESTIMONIOS -- 3 testimonios simultaneos por sesion (Fase 8.5, antes
   1 solo), en cursivas y con comillas, tarjetas redondeadas estilo calido
   (crema + acento teal) en grid de 3 columnas. */
.cit-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1080px;
	margin: 40px auto 0;
	padding-inline: 24px;
}
@media (max-width: 860px) {
	.cit-testi-grid { grid-template-columns: 1fr; max-width: 640px; }
}
.cit-testi-single {
	margin: 0;
	padding: 40px 44px;
	background: var(--cit-warm);
	border-radius: 28px;
	text-align: center;
	position: relative;
}
.cit-testi-single__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 16px;
	display: block;
	object-fit: cover;
	object-position: center;
	flex-shrink: 0;
}
.cit-testi-single__quote {
	margin: 0 0 18px;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--cit-ink);
}
.cit-testi-single__quote::before { content: '\201C'; }
.cit-testi-single__quote::after { content: '\201D'; }
.cit-testi-single__by {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
	color: var(--cit-teal);
}

/* Skip-link + foco visible (a11y teclado) */
.cit-skip-link {
	position: absolute;
	top: -60px;
	left: 8px;
	z-index: 100000;
	background: var(--cit-teal);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 6px 6px;
	text-decoration: none;
	font-weight: 600;
	transition: top .2s ease;
}
.cit-skip-link:focus {
	top: 0;
}
a:focus-visible,
button:focus-visible,
.header-menu a:focus-visible {
	outline: 2px solid var(--cit-teal);
	outline-offset: 2px;
}

/* Fase 6.5 (2026-09-03): el tema labaid renderiza .go-top DOS veces (bug del
   tema: wp_body_open + footer.php, mismo theme option 'go_top') y ademas
   choca con el boton flotante de WhatsApp (#cit-wa) en mobile. Se oculta el
   duplicado (el que cuelga directo de <body>) y se reposiciona el que queda
   a la esquina inferior izquierda para que no compita con WhatsApp. */
body > a.go-top {
	display: none !important;
}
.themesflat-boxed > a.go-top {
	right: auto !important;
	left: 15px;
}

/* Banda CTA (Home + Contacto) -- ver functions.php cit_banda_cta_buffer_start().
   Navy institucional (no verde Plenna) para consistencia de marca. */
.cit-banda-cta {
	background: var(--cit-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 14px 24px;
	text-align: center;
}
.cit-banda-cta__text {
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
}
.cit-banda-cta__btn {
	display: inline-block;
	padding: 8px 20px;
	background: var(--cit-cta-green);
	color: #00305d !important;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
	transition: background .15s;
}
.cit-banda-cta__btn:hover {
	background: var(--cit-cta-green-hover);
}
@media (max-width: 520px) {
	.cit-banda-cta { padding: 12px 16px; }
	.cit-banda-cta__text { font-size: .92rem; }
}

/* 2026-09-05: en desktop (>=992px, cit-header-restructured) el mensaje de la
   banda se sube a .header-menu-right -- misma fila que el logo y el nav --
   en vez de vivir apilado debajo del header. .header-menu-right ya viene
   vacio del tema padre y con margin-left:auto en restructured (linea ~291),
   asi que este bloque queda pegado a la derecha del nav. La banda apilada
   (.cit-banda-cta) se oculta en ese mismo ancho para no duplicar el mensaje;
   sigue visible en mobile/tablet, donde no existe una fila unica con logo+
   nav (el nav vive en el off-canvas). */
.cit-header-promo {
	display: none;
}
@media (min-width: 992px) {
	.cit-banda-cta {
		display: none;
	}
	/* El pill "Agendar cita" del nav queda duplicado con el boton nuevo de
	   .cit-header-promo -- se oculta solo aqui (>=992px); en mobile/tablet
	   sigue en el menu off-canvas, que no tiene el promo inline. */
	#header.cit-header-restructured .mainnav .menu > li.cit-nav-cta,
	#header.cit-header-restructured #mainnav > ul > li.cit-nav-cta {
		display: none;
	}
	#header.cit-header-restructured .header-menu-right {
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
		flex-wrap: wrap;
		row-gap: 6px;
		justify-content: flex-end;
	}
	.cit-header-promo {
		display: flex;
		align-items: center;
		gap: 14px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	.cit-header-promo__text {
		color: #fff;
		font-weight: 600;
		font-size: .85rem;
		line-height: 1;
		white-space: nowrap;
	}
	.cit-header-promo__btn {
		display: inline-block;
		margin: 8px 8px 8px 0;
		padding: 8px 18px;
		background: var(--cit-cta);
		color: var(--cit-cta-ink) !important;
		border-radius: 999px;
		text-decoration: none;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		font-size: .85rem;
		transition: background .15s;
	}
	.cit-header-promo__btn:hover {
		background: var(--cit-cta-hover);
	}
}

/* Fix 2026-09-05: hueco de layout en mobile entre .cit-banda-cta y el hero */
@media (max-width: 991px) {
	/* #themesflat-content trae padding-top:70px desde labaid/css/responsive.css
	   pensado para compensar un header position:fixed. Aqui el header es sticky
	   (ya ocupa su espacio en flujo normal via .cit-banda-cta), asi que ese padding
	   sobra: dejaba una franja del fondo claro del body entre .cit-banda-cta y el
	   hero, aunque ambos bloques usan el mismo navy (rgb(0,48,93)) y deberian
	   fundirse sin corte. .cit-banda-cta no es hermano directo de #themesflat-content
	   (hay un #main-content de por medio), por eso se usa :has() en vez de +/~. */
	body:has(.cit-banda-cta) #themesflat-content {
		padding-top: 0;
	}
}
/* Fix 2026-09-05: .cit-section boxed con gutter de 12px (col-md-12) en mobile */
@media (max-width: 991px) {
	/* Todas las secciones de contenido (.cit-section: hero navy, white, warm...)
	   viven dentro del grid Bootstrap del tema (.row > .col-md-12), que trae un
	   gutter fijo de 12px por lado. La banda de anuncio superior (.cit-banda-cta)
	   vive fuera de ese grid y por eso es full-bleed (edge to edge). Resultado:
	   dos franjas verticales de 12px del fondo del body a los costados de TODA
	   la pagina debajo de la banda, visibles sobre todo en secciones navy -- se
	   ve "descuadrado" frente a la banda superior. El padding propio de cada
	   seccion (24px en .cit-hero, o en sus hijos .cit-intro/.cit-flow/etc en las
	   demas) ya da aire al texto, asi que anular el gutter del grid con margen
	   negativo deja el fondo full-bleed sin tocar el espaciado del contenido. */
	.cit-section {
		margin-left: -12px;
		margin-right: -12px;
	}
}
/* Fix 2026-09-05: .go-top invisible (fondo Y flecha) en cualquier viewport, no
   solo mobile. Root cause confirmado por computed-style en DOM vivo:
   1) background-color: var(--theme-secondary-color) -- esa variable nunca se
      define en ningun CSS del tema, asi que el fondo cae a transparente.
   2) el icon font "labaid" no tiene un glyph mapeado para la clase
      "icon-labaid-arrow-up" (content computado: cadena vacia) -- el icono
      nunca tuvo caracter que mostrar, con o sin fondo.
   Fix: fondo solido con el navy institucional y una flecha real via
   content Unicode en vez de depender del icon font roto. */
.themesflat-boxed > a.go-top {
	background-color: var(--cit-navy);
}
.themesflat-boxed > a.go-top i.icon-labaid-arrow-up::before {
	content: "\2191";
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 50px;
}
/* Fix 2026-09-05 (punto 9): rediseño "Por qué elegir el CIT" -- tratamiento
   visual distinto al de las demas grids de tarjetas del sitio (que comparten
   .cit-icon-card generico: icono a la izquierda, tarjeta blanca plana). Este
   grid usa <div class="cit-icon-grid cit-icon-grid--why"> (clase agregada
   solo en el post 41/home; el resto del sitio sigue con .cit-icon-grid tal
   cual). Centrado, icono en badge circular con acento teal, barra superior
   de acento, mas jerarquia tipografica. */
.cit-icon-grid--why {
	gap: 24px;
}
.cit-icon-grid--why .cit-icon-card {
	text-align: center;
	padding: 32px 24px 28px;
	border-top: 3px solid var(--cit-teal);
}
.cit-icon-grid--why .cit-icon-card__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	border-radius: 50%;
	background: rgba(15, 87, 103, .1);
}
.cit-icon-grid--why .cit-icon-card__t {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--cit-navy);
}
.cit-icon-grid--why p.cit-icon-card__body {
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* Fix 2026-09-07: "Cuando conviene una evaluacion" (post 41/home) pasa de 4
   a 6 tarjetas en desktop (3 columnas fijas, 2 filas). En mobile solo se
   muestran 3 de las 6 (elegidas al azar por el <script> del post, clase
   .cit-show-mobile), y cambian en cada visita para dar variedad. Reusa el
   estilo de icono centrado de --why; solo agrega el layout de columnas y
   la logica de mostrar/ocultar en mobile. */
.cit-icon-grid--cuando {
	grid-template-columns: repeat(3, 1fr);
}

/* Fix 2026-09-05 (punto 9, bug transversal): el boton flotante .go-top en
   mobile (responsive.css del tema, breakpoint max-width:600px) queda fijo a
   bottom:200px -- una altura arbitraria que cae DENTRO del contenido de la
   pagina en vez de quedarse en la esquina inferior, tapando cualquier
   seccion que en ese scroll quede en esa franja (ej. la tarjeta "Resultados
   medibles" en "Por qué elegir el CIT" -- la "mancha gris" reportada). Fix:
   bajarlo a la esquina inferior real (misma altura que el boton de
   WhatsApp, #cit-wa: bottom:24px), quedan en esquinas opuestas (go-top
   left:15px via Fase 6.5, WhatsApp right:24px) sin chocar entre si ni con
   el contenido. */
@media (max-width: 600px) {
	.themesflat-boxed > a.go-top {
		bottom: 24px;
	}
}
/* Fix 2026-09-05 (punto 11): texto del copyright ilegible (fondo oscuro sobre
   oscuro) en la ultima franja del footer. Root cause: .footer_background fija
   background navy (var(--cit-navy)) y .footer_background a a blanco, pero el
   texto plano de .copyright (fuera de los <a>) nunca tiene un color propio
   para ese contexto -- hereda body { color: var(--cit-ink) } (#1e293b), casi
   sin contraste contra el navy (WCAG fail). Los 4 links dentro (SocialBake,
   Aviso Legal, email, telefono) ya se ven bien en verde via la regla de
   accent-color existente -- este fix solo toca el texto plano/separadores. */
.footer_background .copyright,
.footer_background .copyright span {
	color: rgba(255, 255, 255, .75);
}
/* Fase (cont. 38): rediseno visual "como llegar" (shortcode cit_como_llegar,
   usado en Contacto -post 94- y en la pagina dedicada -post 4695-). Agrupa
   el transporte por medio de movilidad en tarjetas, siguiendo el mismo
   patron ya usado en .cit-icon-card/.cit-icon-grid del resto del sitio. */
.cit-llegar { max-width: 900px; margin: 0 auto; padding-inline: 24px; }
.cit-llegar h2 { display: flex; align-items: center; gap: 10px; }
.cit-llegar__h-icon { color: var(--cit-teal); flex: 0 0 auto; width: 1em; height: 1em; }
.cit-llegar__dir { font-size: 1.05rem; }

.cit-llegar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 20px 0 32px;
}
.cit-llegar__card {
	background: #fff;
	border-radius: 4px;
	padding: 18px;
	box-shadow: 0 1px 6px rgba(0, 48, 93, .08);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.cit-llegar__card:hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.cit-llegar__card-icon { display: block; width: 1.8em; height: 1.8em; color: var(--cit-teal); margin-bottom: 10px; }
.cit-llegar__card h4 { margin: 0 0 6px; font-size: 1rem; }
.cit-llegar__card p { margin: 0; font-size: .9rem; color: var(--cit-muted); }

.cit-llegar__info-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 28px 0 12px;
}
.cit-llegar__info-chip {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--cit-bg);
	border-radius: 4px;
	padding: 16px 18px;
}
.cit-llegar__info-chip p.cit-nota { margin: 4px 0 0; font-size: .88rem; }
.cit-llegar__info-icon { flex: 0 0 auto; width: 1.6em; height: 1.6em; color: var(--cit-navy); margin-top: 2px; }
.cit-llegar__info-chip--whatsapp { background: #e9f8f0; text-decoration: none; color: inherit; transition: box-shadow 180ms ease; }
.cit-llegar__info-chip--whatsapp:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.cit-llegar__info-chip--whatsapp .cit-llegar__info-icon { color: var(--cit-whatsapp); }
.cit-llegar .cit-llegar__contact-alt { font-size: .88rem; color: var(--cit-muted); margin-bottom: 15px; }
/* Pendiente 10 / Fase 1 (2026-09-05): footer estilo Plenna -- marca+redes y
   columnas de navegacion reales, reemplazando el bloque de widgets vacio del
   tema padre (ver tpl/footer/footer-widgets.php de labaid-child). La barra de
   credenciales (cedulas/COFEPRIS) queda para Fase 3 cuando haya datos reales. */
.cit-footer-top {
	padding: 56px 0 32px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.cit-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 40px;
}
@media (max-width: 991px) {
	.cit-footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}
	.cit-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
	.cit-footer-grid { grid-template-columns: 1fr; }
}
.cit-footer-logo { height: 40px; width: auto; aspect-ratio: 220 / 58; display: block; margin-bottom: 14px; filter: brightness(0) invert(1); }
.cit-footer-tagline {
	color: rgba(255, 255, 255, .7);
	font-size: .85rem;
	line-height: 1.5;
	max-width: 30ch;
	margin: 0 0 18px;
}
.cit-footer-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.cit-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transition: background 180ms ease;
}
.cit-footer-social a:hover { background: var(--cit-cta-green); }
.cit-footer-social .cit-icon,
.cit-footer-social svg { width: 18px; height: 18px; }
.cit-footer-heading {
	color: #ffffff;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 16px;
}
.cit-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cit-footer-col a {
	font-size: .92rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cit-footer-contact-icon { width: 1em; height: 1em; flex: 0 0 auto; opacity: .8; }

/* Pendiente 12 -- el H1 del hero ("Centro Integral de Tiroides") se
   sustituye visualmente por el logo del CIT. El texto se conserva oculto
   visualmente pero presente para SEO/lectores de pantalla via .sr-only
   (nunca display:none, eso si lo ignoran). El logo reutiliza el activo
   navy 220x58 (mismo que header/footer) con el filtro invert ya usado en
   componentes sobre fondo navy (ver linea ~288, cit-header-restructured). */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.cit-hero__logo-img {
	display: block;
	height: clamp(2.5rem, 6vw, 4.5rem);
	width: auto;
	aspect-ratio: 220 / 58;
	filter: brightness(0) invert(1);
}

/* Fix 2026-09-06: en mobile el logo del H1 (Pendiente 12) queda justo debajo
   del logo del header y de la banda CTA -- se percibe como si todo estuviera
   duplicado (logo dos veces, CTA dos veces seguidas). Solo en mobile se
   oculta el logo del H1 y se muestra el texto real (antes solo sr-only)
   como titulo visible, en vez de un segundo logo. */
@media (max-width: 767px) {
	.cit-hero__logo-img {
		display: none;
	}
	.cit-hero__col-text h1 .sr-only {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		display: block;
		color: #fff;
		font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 1.25;
	}
}

/* =====================================================================
   REDISEÑO APPLE — Fase Wow (2026-09-06)
   Capa visual final: whitespace, elevación, tipografía y motion. No toca
   contenido, IA, ni la paleta/tipografía de marca (navy/Montserrat) — solo
   el tratamiento. Se apoya en orden de cascada (misma especificidad,
   declarado despues) en vez de !important donde es posible, para no sumar
   otra capa a las guerras de especificidad ya documentadas arriba.
   ===================================================================== */

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- Header: nav "glass" al hacer scroll, hairline en vez de bloque solido plano --- */
#header .inner-header-menu {
	background: rgba(0, 32, 61, .82) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: background 300ms var(--cit-ease);
}

/* --- Tipografia: escala mas grande y confiada, propia de Apple, sin cambiar
   de familia (Montserrat/Space Grotesk se quedan, es la regla de marca). --- */
.entry-content .cit-hero h1 {
	font-size: clamp(2.4rem, 6vw, 4.25rem) !important;
	letter-spacing: -0.035em;
	line-height: 1.04;
}
.entry-content h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important;
	letter-spacing: -0.025em;
}
.cit-intro__sub,
p.cit-hero__sub {
	font-weight: 500;
}

/* --- Ritmo entre secciones: mucho mas aire, sello de marca Apple --- */
.entry-content > .wp-block-group.cit-section {
	padding-block: 13px;
}
.entry-content > .wp-block-group.cit-section h2 {
	margin-top: 0;
}
.cit-intro {
	margin-bottom: 8px;
}

/* --- Tarjetas: de caja plana 4px a superficie elevada de gran radio --- */
.cit-icon-card,
.cit-llegar__card {
	border-radius: var(--cit-radius-md);
	padding: 30px 26px;
	box-shadow: var(--cit-shadow-1);
	border: 1px solid rgba(0, 48, 93, .05);
}
.cit-icon-card:hover,
.cit-llegar__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cit-shadow-2);
}
.cit-icon-grid--why .cit-icon-card {
	border-top: none;
	box-shadow: var(--cit-shadow-1);
}
.cit-icon-grid--why .cit-icon-card:hover {
	box-shadow: var(--cit-shadow-2);
}
.cit-icon-card__icon,
.cit-icon-grid--why .cit-icon-card__icon {
	background: rgba(15, 87, 103, .08);
	border-radius: 999px;
}
.cit-testi-single,
.cit-trust {
	box-shadow: var(--cit-shadow-1);
}

/* --- Botones: mas presencia, sombra suave propia, easing consistente --- */
.cit-btn,
a.cit-btn {
	transition: transform 260ms var(--cit-ease), box-shadow 260ms var(--cit-ease) !important;
}
.wp-block-button.cit-btn.cit-btn--lg .wp-block-button__link,
a.cit-btn.cit-btn--lg {
	padding: 18px 38px !important;
	font-size: 1.02rem !important;
	box-shadow: var(--cit-shadow-1);
}
.cit-btn:hover,
a.cit-btn:hover {
	transform: translateY(-3px) !important;
	box-shadow: var(--cit-shadow-2) !important;
}
.cit-btn:active,
a.cit-btn:active {
	transform: translateY(-1px) !important;
}

/* --- Header CTA (pill de la barra superior): mismo lenguaje de sombra suave --- */
.cit-header-promo__btn {
	box-shadow: 0 10px 24px -10px rgba(55, 214, 122, .55);
	transition: transform 220ms var(--cit-ease), box-shadow 220ms var(--cit-ease), background .15s;
}
.cit-header-promo__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -10px rgba(55, 214, 122, .6);
}

/* --- Hero: pills mas discretas (menos "botones", mas etiquetas de apoyo) --- */
.cit-hero__pill {
	padding: 9px 18px;
	font-size: .85rem;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* --- Imagen del hero: marco mas Apple (radio mayor, sombra mas difusa) --- */
.cit-hero__col-img img {
	border-radius: var(--cit-radius-lg);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .35);
}

/* --- Flow (Como funciona tu visita): icono con mas aire y sombra propia --- */
.cit-flow__icon {
	width: 64px;
	height: 64px;
	box-shadow: var(--cit-shadow-1);
}

/* --- Footer: mas aire vertical, mismo contenido --- */
.cit-footer-top {
	padding: 72px 0 40px;
}

/* --- Tarjetas de servicios/precios (.cit-card, /precios/): hover con elevacion --- */
.cit-card {
	transition: transform 220ms var(--cit-ease), box-shadow 220ms var(--cit-ease), border-color 220ms var(--cit-ease);
}
.cit-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cit-shadow-2);
	border-color: rgba(0, 48, 93, .12);
}

/* Fase 7 (2026-09-06): hero full-bleed con foto para paginas de padecimientos/
   servicios (Pendiente 5, PENDIENTES-CIT.md). Ver functions.php
   cit_hero_interna_buffer_start(). Se inserta justo despues de </header>,
   fuera del grid Bootstrap del tema (mismo punto que .cit-banda-cta), por eso
   no necesita el hack de 100vw/margin negativo para ser edge-to-edge. */
.cit-hero-interna {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center 30%;
	text-align: center;
	overflow: hidden;
}
.cit-hero-interna__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,48,93,.72), rgba(0,48,93,.82));
}
.cit-hero-interna__content {
	position: relative;
	z-index: 1;
	max-width: 780px;
	padding: 48px 24px;
}
.cit-hero-interna__content h1 {
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 28px;
	text-wrap: balance;
}
.cit-hero-interna__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 0;
}
@media (max-width: 520px) {
	.cit-hero-interna { min-height: 260px; }
	.cit-hero-interna__content { padding: 36px 20px; }
}

/* Fix Fase 7 (2026-09-06): en las 12 paginas de padecimientos, el tema padre
   (labaid) siempre renderiza su propia banda ".page-title" (parallax, con
   un <h1> duplicado del titulo) justo despues de </header> -- el mismo punto
   donde se inserta .cit-hero-interna. Resultado sin este fix: dos H1 iguales
   apilados. Se oculta via selector de hermano adyacente (nunca se toca el
   tema padre), y por construccion solo aplica en las paginas que si tienen
   .cit-hero-interna. */
.cit-hero-interna + .page-header {
	display: none;
}

/* Fix Fase 7 (2026-09-06): .cit-btn (base) solo existia en el <style> que
   imprime cit-sitio.php via cit_css_once() -- y esa funcion solo se llama
   desde shortcodes especificos (precios, legal, etc.), asi que en paginas
   sin esos shortcodes -- como las 12 de padecimientos/servicios (Fase 3) --
   cualquier ".cit-btn" quedaba sin display/fondo/color, invisible. Se
   replica aqui (mismos valores) para que .cit-btn funcione en TODO el sitio
   via el child theme, que si se carga siempre. No se toca cit-sitio.php:
   ambas copias coexisten sin conflicto (mismos valores). */
.cit-btn {
	display: inline-block;
	margin-top: auto;
	padding: 10px 18px;
	background: var(--cit-cta, #0a4a58);
	color: var(--cit-cta-ink, #fff) !important;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(0,48,93,.18);
	text-decoration: none;
	font-weight: 600;
	text-align: center;
}
.cit-btn:hover {
	background: var(--cit-cta-hover, #0f5767);
}
.cit-btn--ghost {
	background: #fff;
	color: var(--cit-teal, #0f6e6e) !important;
	border: 1px solid var(--cit-teal, #0f6e6e);
}
.cit-btn--ghost:hover {
	background: #f4f8f9;
}

/* Fix 2026-09-08: shape dividers estilo Elementor en cada .cit-section, en
   todas las paginas (36 pages). El <svg> de cada seccion lo inyecta
   cit-shape-dividers.js en runtime -- eligiendo una forma de un pool fijo
   (excluye Pyramids, Waves Pattern, Clouds, Book, Zigzag, Split), aleatoria
   pero estable por seccion (hash de pathname+indice), salvo la seccion de
   opiniones/testimonios que siempre usa "speech". Aqui solo el contenedor:
   position:relative en .cit-section para anclar el <svg> absoluto en su
   borde inferior, sin afectar el truco de fondo full-bleed via box-shadow
   que ya usa esta clase (ver linea ~402). */
.entry-content > .wp-block-group.cit-section {
	position: relative;
}
.cit-shape-divider {
	position: absolute;
	left: 50%;
	right: auto;
	bottom: -1px;
	width: 100vw;
	transform: translateX(-50%);
	height: 64px;
	overflow: hidden;
	line-height: 0;
	pointer-events: none;
	z-index: 1;
}
.cit-shape-divider svg {
	display: block;
	width: 100%;
	height: 100%;
}
@media (max-width: 767px) {
	.cit-shape-divider {
		height: 48px;
	}
}

/* Fix 2026-09-08 (v2): el fix de "ritmo Apple" (padding-block:13px, arriba en
   el archivo) deja solo 13px de aire abajo de cada .cit-section -- menos que
   la altura del shape-divider (56px desktop / 28px mobile), asi que la forma
   pintaba encima de las ultimas ~43px/~15px de contenido (texto o imagen)
   de cada seccion. Reservamos espacio de sobra abajo solo para el divider,
   sin tocar el padding-top (que sigue en 13px via la regla de mas arriba).
   Fix 2026-09-15: 116px excedia el tope de 80px de espacio maximo entre
   texto/boton y el siguiente elemento (pedido de Juan Carlos); se baja a
   80px (divider 64px + 16px de colchon, mismo colchon que ya usaba mobile). */
.entry-content > .wp-block-group.cit-section {
	padding-bottom: 80px;
}
@media (max-width: 767px) {
	.entry-content > .wp-block-group.cit-section {
		padding-bottom: 64px;
	}
}

/* Carousel compartido (Task A/B/C, 2026-09-08): convierte cualquier grid
   marcado con .cit-carousel__track en un carrusel horizontal con
   scroll-snap, flechas y puntos. JS (cit-carousel.js) envuelve el grid en
   .cit-carousel, agrega la clase __track, e inyecta flechas/puntos. Si el
   contenido no desborda (pocas tarjetas, p.ej. equipo filtrado por rol en
   paginas de servicio), JS agrega .cit-carousel--no-nav para ocultarlos. */
.cit-carousel {
	position: relative;
}
.cit-carousel__track {
	display: flex !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 18px;
}
.cit-carousel__track::-webkit-scrollbar {
	display: none;
}
.cit-carousel__track > * {
	flex: 0 0 82%;
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	.cit-carousel__track > * {
		flex-basis: 46%;
	}
}
@media (min-width: 992px) {
	.cit-carousel__track > * {
		flex-basis: 280px;
	}
}
.cit-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: none;
	background: rgba(0, 48, 93, .6);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	line-height: 1;
	z-index: 2;
	transition: background .2s, color .2s;
}
.cit-carousel__btn:hover {
	background: var(--cit-navy);
	color: #fff;
}
.cit-carousel__btn--prev {
	left: -4px;
}
.cit-carousel__btn--next {
	right: -4px;
}
.cit-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}
.cit-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: #d7dee3;
	padding: 0;
	cursor: pointer;
	transition: background .2s, width .2s;
}
.cit-carousel__dot.is-active {
	background: var(--cit-navy);
	width: 22px;
	border-radius: 4px;
}
.cit-carousel--no-nav .cit-carousel__btn,
.cit-carousel--no-nav .cit-carousel__dots {
	display: none;
}

/* Fix 2026-09-08: flechas de carrusel unificadas al estilo go-top (navy translucido, cuadrado redondeado) en base .cit-carousel__btn de arriba */
@media (max-width: 767px) {
	.cit-carousel__btn {
		display: none;
	}
}
/* Equipo medico: dentro del carrusel, .cit-medico traia height:100% (de
   cit_css_once, para el layout de grid original) que no se resuelve contra
   un contenedor flex de alto indefinido -- las tarjetas quedaban de alturas
   distintas segun el largo de cada bio. Se fuerza el estirado real del
   flex item para que las 4 tarjetas midan lo mismo. Ademas, .cit-medico es
   un <article> (cit-sitio.php) y el tema padre (labaid/css/main.css) trae
   una regla generica "article { margin-bottom: 60px }" que se le aplica: ese
   margen entra en la caja del flex item y hace que align-self:stretch calcule
   una altura ~60px menor que la ultima tarjeta (que no tiene ese margen). Se
   anula aqui para que las 4 tarjetas midan exactamente lo mismo.  */
.cit-carousel__track > .cit-medico {
	height: auto;
	align-self: stretch;
	margin-bottom: 0;
}
/* Testimonios: el carrusel (flechas/puntos/scroll horizontal) solo aplica
   en mobile. En escritorio se conserva el grid de 3 columnas original. */
@media (min-width: 768px) {
	.cit-testi-grid.cit-carousel__track {
		display: grid !important;
	}
	.cit-carousel:has(> .cit-testi-grid) .cit-carousel__btn,
	.cit-carousel:has(> .cit-testi-grid) .cit-carousel__dots {
		display: none !important;
	}
}