:root {
	/* Colores base */
	--color-blanco: #fff;
	--color-negro: #000;
	--color-cafe: #333;
	--color-negro-claro: #383838;
	--color-gris-medio: #4d4d4d;
	--color-gris-claro: #6c757d8a;
	--color-gris-obscuro: #6567698a;
	--color-fondo: #f8f9fa;

	--color-verde: #a3d92b;
	--color-naranja: #ff6600;
	--color-exito: #28a745;
	--color-naranja-claro: #f0661f;
	--color-naranja-obscuro: #db5918;
	--color-morado: #8391e2;
	--color-morado-obscuro: #636ed3;
	--color-azul: #0bb2ff;

	--color-amarillo: #fff3cd;
	--color-amarillo-obscuro: #ffe69c;
	--color-fondo-claro: #f1f2f4;

	--gradiente-azul: linear-gradient(to right, #0d6efd, #0bb2ff, #00d1ff);
	--overlay-oscuro: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	--gradiente-azul-claro: linear-gradient(45deg, #2dcef2, #0aaee4);
	--gradiente-verde-claro: linear-gradient(45deg, #a3d92b, #28a745);
	--gradiente-naranja-claro: linear-gradient(45deg, #fe934b, #ff6600);
	--gradiente-gris-claro: linear-gradient(45deg, #dde1e68a, #7d7e7f8a);
}

/* ============ FUENTES ============ */
@font-face {
	font-family: "TommySoftBold";
	src: url("fonts/Tommy-Soft-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "TommySoftLight";
	src: url("fonts/Tommy-Soft-Light.otf") format("opentype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "TommySoftRegular";
	src: url("fonts/Tommy-Soft-Regular.otf") format("opentype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PoppinsRegular";
	src: url("fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PoppinsBold";
	src: url("fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: "PoppinsRegular", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-gris-medio);
	background-color: var(--color-blanco);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "TommySoftBold", Arial, sans-serif;
	color: var(--color-cafe);
	margin-bottom: 1rem;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	color: var(--color-negro-claro);
}

p {
	margin-bottom: 1rem;
}

/* Enlaces */
a {
	color: var(--color-blanco);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.enlace-naranja {
	color: var(--color-naranja);
	text-decoration: none;
	font-weight: bold;
}

.enlace-naranja:hover {
	text-decoration: underline;
	color: var(--color-blanco);
	background-color: var(--color-naranja-obscuro);
	border-color: var(--bs-btn-hover-border-color);
}

/* Botones */
.boton-primario {
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--color-naranja);
	color: var(--color-blanco);
	text-decoration: none;
	border-radius: 5px;
	margin-top: 1rem;
	font-weight: bold;
}

.boton-primario:hover {
	color: var(--color-blanco);
	background-color: var(--color-naranja-obscuro);
	border-color: var(--bs-btn-hover-border-color);
	text-decoration: underline;
}
/* Resaltado */
.resaltado {
	background-color: var(--color-verde);
	color: var(--color-blanco);
	padding: 0.1rem 0.6rem;
	display: inline;
	text-shadow: none;
	line-height: 1.8;
	border-radius: 4px;
}

/*PDF*/
.modal-dialog {
	max-width: 100vw !important;
	margin: 0 !important;
	height: 100vh;
	max-height: 100vh !important;
}

.modal-content {
	height: 100vh !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.modal-body {
	height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

#modalPDF .btn-close-custom {
	position: fixed !important;
	top: 20px !important;
	right: 20px !important;
	z-index: 1060 !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border-radius: 50% !important;
	width: 45px !important;
	height: 45px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
	transition: all 0.3s ease !important;
}

#modalPDF .btn-close-custom:hover {
	background: rgba(255, 255, 255, 1) !important;
	transform: scale(1.15) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

#modalPDF .btn-close-custom svg {
	width: 20px;
	height: 20px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

#modalPDF #pdfContainer {
	width: 100vw !important;
	height: 100vh !important;
	max-height: 100vh !important;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #f8f9fa;
	padding: 0 !important;
	margin: 0 !important;
}

#modalPDF #pdfContainer .spinner-border {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 1050 !important;
}

#modalPDF .pdf-pages-container {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#modalPDF .pdf-page {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

#modalImagen .modal-dialog {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 100vh !important;
	margin: 0 !important;
	max-width: none !important;
	z-index: 1051;
}

#modalImagen .modal-content {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	z-index: 1052;
}

#modalImagen .btn-close {
	background: rgba(255, 255, 255, 0.9) !important;
	border-radius: 50% !important;
	padding: 10px !important;
	background-size: 60% !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	transition: all 0.3s ease !important;
	z-index: 1053;
}

#modalImagen .btn-close:hover {
	background: rgba(255, 255, 255, 1) !important;
	transform: scale(1.1) !important;
}

#modalImagen #imagenModal {
	/* Estilos de la imagen */
	max-height: 90vh !important;
	max-width: 90vw !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
/* ===== ESTILOS PARA MODAL ERROR ===== */
#modalError .modal-dialog {
	max-width: 500px;
}

#modalError .modal-content {
	min-height: 200px;
	border-radius: 0.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#modalError .modal-body {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	flex-direction: column;
	background: var(--color-blanco);
}

#modalError .modal-header {
	background: var(--color-gris-claro);
	color: var(--color-blanco) !important;
	border-bottom: none;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

#modalError .modal-header .btn-close {
	filter: invert(1);
	opacity: 0.8;
}

#modalError .modal-header .btn-close:hover {
	opacity: 1;
}

#mensajeError {
	font-size: 1.1rem;
	margin: 0 0 1rem;
	width: 100%;
	color: #495057;
	font-weight: 500;
}

#modalError .modal-body svg {
	margin-right: 8px;
	color: #f5edee;
}

#modalError a {
	color: #0d6efd;
	transition: color 0.2s;
	font-weight: 500;
}

#modalError a:hover {
	color: #0a58ca;
	text-decoration: underline;
}

#modalError .modal-footer {
	border-top: 1px solid #dee2e6;
	padding: 1rem;
	justify-content: flex-end;
}

#modalError .btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
}

#modalError .btn-secondary:hover {
	background-color: #5a6268;
	border-color: #545b62;
}
/*PDF*/

/* Nombre y subtítulo */
.nombre {
	font-family: "TommySoftBold", Arial, sans-serif;
	color: var(--color-gris-medio);
}

.nombre .principal {
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1;
}

.nombre span {
	font-family: "TommySoftLight", Arial, sans-serif !important;
	color: var(--color-gris-medio);
}

.subtitulo {
	font-family: "PoppinsRegular", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.1;
	color: var(--color-naranja-claro);
	max-width: 250px;
	margin-left: 5px;
}

/* Espaciados */
.py-9rem {
	padding-top: 9rem;
	padding-bottom: 3rem;
}
.py-4rem {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.pt-4rem {
	padding-top: 4rem;
}

.pb-4rem {
	padding-bottom: 4rem;
}

/* Secciones */
.seccion-info {
	background-color: var(--color-fondo);
	color: var(--color-cafe);
}

.titulo-seccion {
	font-family: "Arial", sans-serif;
	font-size: clamp(1.9rem, 2.5vw, 2rem);
	font-weight: bold;
	background: var(--gradiente-azul);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	position: relative;
}

.titulo-contenedor {
	text-align: center;
	margin: 30px 0;
	position: relative;
}

.texto-seccion {
	font-family: "PoppinsRegular", Arial, sans-serif;
	margin: 0 auto;
	line-height: 1.7;
	text-align: justify;
}

/* SVG */
.svg-responsive {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
}

/* ============ MENÚ ============ */

.bg-verde {
	background-color: var(--color-verde);
}

.bg-fondoclaro {
	background: var(--color-fondo-claro);
}
.menuletra {
	font-family: "TommySoftBold", Arial, sans-serif;
	font-weight: bold !important;
}

.navbar-light.bg-light {
	transition: background-color 0.3s ease-in-out;
}

.navbar-light.bg-scroll {
	background-color: var(--color-gris-claro);
	backdrop-filter: blur(49px);
	box-shadow: rgb(0 0 0 / 30%) 0px 5px 20px 0px;
	opacity: 1;
}

.navbar-light.bg-scroll .nav-link,
.navbar-light.bg-scroll .nombre span,
.navbar-light.bg-scroll .principal {
	color: var(--color-blanco);
}

/* ============ ANIMACIONES ============ */
.animarAlScroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animarAlScroll.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============ ICONOS ============ */
.icon-darkgray {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%);
}

.icon-black {
	filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%);
}

.icon-white {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1000%);
}
.icon-morado {
	filter: invert(57%) sepia(33%) saturate(1018%) hue-rotate(195deg)
		brightness(93%) contrast(88%);
}
.icon-morado-claro {
	filter: invert(47%) sepia(30%) saturate(1200%) hue-rotate(240deg)
		brightness(95%) contrast(85%);
}

/* ============ FOOTER ============ */
.footer {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-image: var(--overlay-oscuro);
	color: var(--color-blanco);
	padding-top: 30px;
	display: flex;
	flex-direction: column;
}

.footer h4 {
	color: var(--color-blanco);
}

.footer-contenido {
	padding: 2rem 0;
}

.info-footer {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.descripcion,
.contacto,
.enlaces {
	flex: 1 1 30%;
	min-width: 250px;
}

.nombref {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: nowrap;
}

.principalf {
	font-weight: bold;
	font-size: 1.2rem;
}

.subtitulof {
	font-size: 1rem;
	white-space: nowrap;
}

.contacto ul,
.enlaces ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.contacto li,
.enlaces li {
	margin-bottom: 10px;
}

.contacto i {
	margin-right: 10px;
}

.enlaces a {
	color: var(--color-blanco);
	text-decoration: none;
}

.enlaces a:hover {
	text-decoration: underline;
}

.derechos {
	text-align: center;
	padding: 10px 0;
	background-color: var(--color-gris-oscuro);
	margin-top: auto;
}

.logof {
	width: 80px;
	height: auto;
}

.referencias {
	background: var(--color-fondo-claro);
}

.referencias ul {
	font-size: 0.8rem;
}
.referencias .col-md-4 .d-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.logos-container {
	background-color: #dee2e6 !important;
}

.logo-footer {
	max-width: 200px;
	height: auto;
	margin: 8px;
}
.logo-90 {
	max-width: 90px;
}
.logo-240 {
	max-width: 240px;
}
/*colores por letra*/

.w {
	background-image: var(--gradiente-azul-claro) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}
.m {
	background-image: var(--gradiente-verde-claro) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}
.r {
	background-image: var(--gradiente-naranja-claro) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

.w-menu {
	background-image: var(--gradiente-azul-claro) !important;
}
.m-menu {
	background-image: var(--gradiente-verde-claro) !important;
}
.r-menu {
	background-image: var(--gradiente-naranja-claro) !important;
}
.repositorio-menu {
	background-image: var(--gradiente-gris-claro) !important;
}

/* ============ MEDIA QUERIES ============ */
@media (max-width: 768px) {
	body {
		font-size: 0.875rem;
	}
	h1 {
		font-size: 1.5rem;
	}
	.info-footer {
		display: block;
		text-align: left !important;
	}

	.descripcion,
	.contacto,
	.enlaces {
		flex: 1 1 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}

	.nombref {
		align-items: center;
	}
	/*MOVERLA A CONTENIDO INTERNO DE R*/
	.contenidomexico {
		width: 95% !important;
		text-align: center;
	}
	.logo-footer {
		max-width: 120px;
	}

	.descripcion,
	.contacto,
	.enlaces {
		flex: 1 1 100%;
		max-width: 100%;
		margin-bottom: 1.5rem;
	}

	.nombref {
		flex-direction: column;
		align-items: center;
	}

	.principalf {
		font-size: 1.4rem;
	}

	.subtitulof {
		font-size: 1.1rem;
	}

	.logof {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	/*footer*/
}