/* ==========================================================================
   Bio-Tech v2.0 — identidad institucional DI/FacMed sobre Divi
   Paleta y tipografía tomadas del sitio hermano CIDI 2026
   (azul marino #013B78 + dorado #C8A70E, Montserrat).
   Todo cuelga de body.tk-on, que sólo existe en el frontend (ver functions.php),
   de modo que el Visual Builder nunca se ve afectado.
   ========================================================================== */

body.tk-on {
	--tk-navy:      #013b78;
	--tk-navy-deep: #001f3f;
	--tk-navy-soft: #223575;
	--tk-gold:      #c8a70e;
	--tk-ink:       #264266;
	--tk-grey:      #f2f2f0;
	--tk-mist:      #f0f4f8;
	--tk-bg:        #f6f8fc;
	--tk-bg-deep:   #e9eff7;
	--tk-glass:     rgba(255, 255, 255, 0.74);
	--tk-line:      rgba(1, 59, 120, 0.16);
	--tk-shadow:    0 10px 30px -16px rgba(0, 31, 63, 0.4);
	--tk-shadow-lg: 0 20px 46px -20px rgba(0, 31, 63, 0.45);
	--tk-ease:      cubic-bezier(0.22, 1, 0.36, 1);
	--tk-radius:    12px;
	--tk-font:      'Montserrat', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html {
	background: var(--tk-bg);
	scroll-behavior: smooth;
	/* El encabezado es fijo: los anclajes deben quedar por debajo de él. */
	scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   1. Lienzo — un lavado azul muy tenue, sin retícula ni red de nodos
   -------------------------------------------------------------------------- */

/* Sólo los contenedores estructurales. Las filas y columnas NO se tocan: en
   este sitio varias llevan fondo intencional (la tarjeta translúcida del home
   y las bandas del pie), y vaciarlas rompería el diseño. */
body.tk-on,
body.tk-on #page-container,
body.tk-on #et-boc,
body.tk-on #et-main-area,
body.tk-on #main-content,
body.tk-on .et-l--post {
	background-color: transparent !important;
}

/* z-index muy bajo: el pie del Theme Builder usa valores negativos (-116, -53)
   y con -1 la capa de fondo quedaría encima de él. */
#tk-bg {
	position: fixed;
	inset: 0;
	z-index: -1000;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, var(--tk-bg) 0%, var(--tk-bg-deep) 100%);
}

/* Tres manchas azules muy apagadas que derivan despacio. Nada de virajes de
   tono ni barridos: el fondo debe leerse como papel, no como pantalla. */
.tk-aurora {
	position: absolute;
	inset: -20%;
	filter: blur(90px);
	opacity: 0.55;
}

.tk-aurora i {
	position: absolute;
	display: block;
	border-radius: 50%;
	mix-blend-mode: multiply;
	will-change: transform;
}

.tk-aurora i:nth-child(1) {
	width: 46vw;
	height: 46vw;
	top: 0%;
	left: 2%;
	background: radial-gradient(circle at 40% 40%, rgba(1, 59, 120, 0.4), rgba(1, 59, 120, 0) 68%);
	animation: tk-drift-a 46s ease-in-out infinite;
}

.tk-aurora i:nth-child(2) {
	width: 40vw;
	height: 40vw;
	top: 30%;
	right: 0%;
	background: radial-gradient(circle at 55% 45%, rgba(34, 53, 117, 0.34), rgba(34, 53, 117, 0) 68%);
	animation: tk-drift-b 54s ease-in-out infinite;
}

.tk-aurora i:nth-child(3) {
	width: 34vw;
	height: 34vw;
	bottom: 2%;
	left: 32%;
	background: radial-gradient(circle at 50% 50%, rgba(200, 167, 14, 0.18), rgba(200, 167, 14, 0) 68%);
	animation: tk-drift-a 62s ease-in-out infinite reverse;
}

@keyframes tk-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(8vw, 6vh, 0) scale(1.12); }
}

@keyframes tk-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
	50%      { transform: translate3d(-7vw, 8vh, 0) scale(0.94); }
}

/* Barra de progreso de lectura, en dorado institucional. */
#tk-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	z-index: 100000;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--tk-gold);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Secciones
   -------------------------------------------------------------------------- */

body.tk-on .et_pb_section.tk-sec-glass {
	position: relative;
	background-color: var(--tk-glass) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

body.tk-on .et_pb_section.tk-sec-media {
	position: relative;
}

body.tk-on .et_pb_section > .tk-fx {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

/* Filete inferior en dorado, discreto. */
body.tk-on .tk-sec-glass > .tk-fx {
	inset: auto 0 0 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tk-gold) 50%, transparent);
	opacity: 0.5;
}

/* Velo azul marino sobre las secciones con fotografía. */
body.tk-on .tk-sec-media > .tk-fx {
	background: linear-gradient(180deg, rgba(0, 31, 63, 0.5) 0%, rgba(1, 59, 120, 0.34) 100%);
	mix-blend-mode: multiply;
}

/* Las filas que ya eran translúcidas por diseño se refuerzan discretamente. */
body.tk-on .tk-main .et_pb_row.tk-row-glass {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--tk-shadow);
}

/* El contenido debe quedar por encima del velo. */
body.tk-on .et_pb_section > .et_pb_row,
body.tk-on .et_pb_section > .et_pb_row_inner,
body.tk-on .et_pb_section > .et_pb_with_border {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   3. Encabezado azul marino fijo
   -------------------------------------------------------------------------- */

body.tk-on .et-l--header .et_pb_section--fixed {
	background-color: var(--tk-navy) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.35s var(--tk-ease);
}

body.tk-on.tk-scrolled .et-l--header .et_pb_section--fixed {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

body.tk-on .et-l--header .et_pb_menu,
body.tk-on .et-l--header .et_pb_row,
body.tk-on .et-l--header .et_pb_menu__wrap {
	background-color: transparent !important;
}

/* Enlaces del menú en blanco, dorado al pasar el cursor. */
body.tk-on .et-l--header .et_pb_menu .et-menu > li > a,
body.tk-on .et-l--header .et_pb_menu .et-menu > li > a:visited {
	color: #ffffff !important;
	font-family: var(--tk-font);
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.3s var(--tk-ease);
}

body.tk-on .et-l--header .et_pb_menu .et-menu > li > a:hover,
body.tk-on .et-l--header .et_pb_menu .et-menu > li.current-menu-item > a {
	color: var(--tk-gold) !important;
	opacity: 1;
}

/* Subrayado dorado, sin degradados ni destellos. Se excluyen los ítems con
   submenú porque Divi ya usa ::after ahí para la flecha. */
body.tk-on .et-l--header .et_pb_menu .et-menu > li:not(.menu-item-has-children) > a {
	position: relative;
}

body.tk-on .et-l--header .et_pb_menu .et-menu > li:not(.menu-item-has-children) > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--tk-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--tk-ease);
}

body.tk-on .et-l--header .et_pb_menu .et-menu > li:not(.menu-item-has-children) > a:hover::after,
body.tk-on .et-l--header .et_pb_menu .et-menu > li.current-menu-item:not(.menu-item-has-children) > a::after {
	transform: scaleX(1);
}

/* Menú desplegable y menú móvil sobre fondo azul. */
body.tk-on .et-l--header .et_pb_menu .et-menu li ul,
body.tk-on .et-l--header .et_mobile_menu {
	background-color: var(--tk-navy) !important;
	border-color: var(--tk-gold) !important;
}

body.tk-on .et-l--header .et_mobile_menu a {
	color: #ffffff !important;
}

body.tk-on .et-l--header .et_mobile_menu a:hover {
	color: var(--tk-gold) !important;
}

body.tk-on .et-l--header .mobile_menu_bar:before {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4. Tipografía
   -------------------------------------------------------------------------- */

body.tk-on .tk-main h1,
body.tk-on .tk-main h2,
body.tk-on .tk-main h3,
body.tk-on .tk-main h4,
body.tk-on .tk-main h5,
body.tk-on .tk-main h6,
body.tk-on .et-l--footer h1,
body.tk-on .et-l--footer h2,
body.tk-on .et-l--footer h3,
body.tk-on .et-l--footer h4 {
	font-family: var(--tk-font);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Títulos en azul marino sólido, sólo dentro de secciones claras: sobre
   fotografía conservan el color que les puso Divi. */
body.tk-on .tk-sec-glass h1,
body.tk-on .tk-sec-glass h2,
body.tk-on .tk-sec-glass h3 {
	color: var(--tk-navy) !important;
}

body.tk-on .tk-sec-glass p,
body.tk-on .tk-sec-glass li {
	color: var(--tk-ink);
}

body.tk-on .tk-main p,
body.tk-on .tk-main li {
	line-height: 1.75;
}

body.tk-on .tk-main a:not(.et_pb_button) {
	color: var(--tk-navy);
	transition: color 0.3s var(--tk-ease);
}

body.tk-on .tk-main a:not(.et_pb_button):hover {
	color: var(--tk-gold);
}

/* --------------------------------------------------------------------------
   5. Botones — planos, azul institucional con dorado al pasar el cursor
   -------------------------------------------------------------------------- */

body.tk-on .tk-main .et_pb_button,
body.tk-on .et-l--header .et_pb_button {
	font-family: var(--tk-font);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #ffffff !important;
	background-color: var(--tk-navy-soft) !important;
	background-image: none !important;
	border: 1px solid var(--tk-navy-soft) !important;
	border-radius: 6px !important;
	padding: 0.7em 1.9em !important;
	box-shadow: none;
	transition: background-color 0.3s var(--tk-ease), border-color 0.3s var(--tk-ease),
		color 0.3s var(--tk-ease), transform 0.3s var(--tk-ease);
}

body.tk-on .tk-main .et_pb_button:hover,
body.tk-on .et-l--header .et_pb_button:hover {
	color: var(--tk-navy) !important;
	background-color: var(--tk-gold) !important;
	border-color: var(--tk-gold) !important;
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. Tarjetas e imágenes — elevación suave, sin 3D
   -------------------------------------------------------------------------- */

body.tk-on .tk-main .et_pb_blurb,
body.tk-on .tk-main .et_pb_toggle,
body.tk-on .tk-main .et_pb_tabs {
	background-color: var(--tk-mist);
	border: 1px solid var(--tk-line);
	border-radius: var(--tk-radius);
	padding: 26px 24px;
	box-shadow: var(--tk-shadow);
	transition: transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease),
		border-color 0.35s var(--tk-ease);
}

body.tk-on .tk-main .et_pb_blurb:hover,
body.tk-on .tk-main .et_pb_toggle:hover {
	transform: translateY(-4px);
	border-color: var(--tk-gold);
	box-shadow: var(--tk-shadow-lg);
}

body.tk-on .tk-main .et_pb_blurb .et-pb-icon {
	color: var(--tk-navy);
}

body.tk-on .tk-main .et_pb_image .et_pb_image_wrap {
	display: block;
	overflow: hidden;
	border-radius: var(--tk-radius);
	box-shadow: var(--tk-shadow);
	transition: transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease);
}

body.tk-on .tk-main .et_pb_image:hover .et_pb_image_wrap {
	transform: translateY(-4px);
	box-shadow: var(--tk-shadow-lg);
}

/* Los logotipos y sellos institucionales se dejan sin marco ni sombra. */
body.tk-on .tk-main .et_pb_image.tk-plain .et_pb_image_wrap {
	border-radius: 0;
	box-shadow: none;
}

body.tk-on .tk-main .et_pb_image.tk-plain:hover .et_pb_image_wrap {
	transform: none;
	box-shadow: none;
}

body.tk-on .et_pb_social_media_follow li a.icon {
	border-radius: 8px !important;
	transition: transform 0.3s var(--tk-ease);
}

body.tk-on .et_pb_social_media_follow li a.icon:hover {
	transform: translateY(-3px);
}

body.tk-on .tk-main hr,
body.tk-on .tk-main .et_pb_divider:before {
	border-top-color: var(--tk-line) !important;
}

/* --------------------------------------------------------------------------
   7. Pie de página — azul marino con enlaces dorados al hover
   -------------------------------------------------------------------------- */

body.tk-on .et-l--footer .tk-navy-band {
	background-color: var(--tk-navy) !important;
}

body.tk-on .et-l--footer a,
body.tk-on .et-l--footer a:visited {
	transition: color 0.3s var(--tk-ease);
}

body.tk-on .et-l--footer .tk-navy-band a:hover,
body.tk-on .et-l--footer a:hover {
	color: var(--tk-gold) !important;
}

/* --------------------------------------------------------------------------
   8. Contador regresivo (mismo patrón que CIDI 2026)
   -------------------------------------------------------------------------- */

.tk-countdown[hidden] {
	display: none;
}

.tk-countdown {
	padding: 34px 20px;
	text-align: center;
}

.tk-cd-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.tk-cd-item {
	background: var(--tk-mist, #f0f4f8);
	border: 1px solid var(--tk-navy, #013b78);
	border-radius: 12px;
	min-width: 85px;
	padding: 15px;
	text-align: center;
}

.tk-cd-number {
	display: block;
	font-family: var(--tk-font);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--tk-navy, #013b78);
	font-variant-numeric: tabular-nums;
}

.tk-cd-label {
	display: block;
	margin-top: 4px;
	font-family: var(--tk-font);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #6c757d;
}

/* --------------------------------------------------------------------------
   9. Aparición al hacer scroll — sobria: sólo desplazamiento y opacidad
   -------------------------------------------------------------------------- */

body.tk-on .tk-rise {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 0.7s var(--tk-ease), transform 0.7s var(--tk-ease);
	transition-delay: var(--tk-delay, 0ms);
	will-change: opacity, transform;
}

body.tk-on .tk-rise.tk-in {
	opacity: 1;
	transform: none;
}

body.tk-on .tk-rise.tk-done {
	will-change: auto;
	transition: transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease),
		border-color 0.35s var(--tk-ease);
}

/* --------------------------------------------------------------------------
   10. Responsivo y accesibilidad
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	body.tk-on .et_pb_section.tk-sec-glass {
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
	}

	.tk-aurora {
		filter: blur(60px);
		animation: none;
	}

	body.tk-on .tk-main .et_pb_blurb,
	body.tk-on .tk-main .et_pb_toggle,
	body.tk-on .tk-main .et_pb_tabs {
		padding: 20px 18px;
	}

	.tk-cd-item {
		min-width: 70px;
		padding: 12px 10px;
	}

	.tk-cd-number {
		font-size: 1.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.tk-on .tk-aurora i {
		animation: none !important;
	}

	body.tk-on .tk-rise {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	body.tk-on .tk-main .et_pb_button:hover,
	body.tk-on .tk-main .et_pb_blurb:hover,
	body.tk-on .tk-main .et_pb_image:hover .et_pb_image_wrap {
		transform: none;
	}
}

/* Foco visible. */
body.tk-on a:focus-visible,
body.tk-on button:focus-visible,
body.tk-on .et_pb_button:focus-visible {
	outline: 2px solid var(--tk-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

@media print {
	#tk-bg,
	#tk-progress {
		display: none !important;
	}
}