@charset "utf-8";
/* CSS Document */
@layer components {
	:root {
		--header-h: 7.5rem;
	}

	.barra_logo {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;

		min-height: 7.5rem;
		height: auto;
		z-index: 1000;

		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;

		padding: 0 2rem;
		background: rgba(184, 184, 184, 1);
		z-index: 1000;
	}
	.logo_cmmi_sup {
		width: 317px;
		height: 7rem;

		background: url(../img/logo-CMMI-2246x636.svg) left center / contain no-repeat;
	}

	.datos_contacto {
		justify-self: end; /* clave en grid */
		text-align: right;
		max-width: 320px;
	}
	.contacto_sup {
		border: 0px solid rgba(255, 0, 0, 1);
		height: 5rem;
		width: 250px;
		margin-top: -1.7rem;
	}

	.contacto_sup p {
		font-size: var(--fs-xs);
		color: #002855;
		line-height: 1.4;
	}

	/********************************************************************
			Para paginas de contenido, con sticky footer
	********************************************************************/
	.titulo {
		font-family: "Montserrat", sans-serif;
		font-size: 1.5rem;
		font-weight: 500;
		color: #000;
	}
	.subtitulo {
		font-family: "Montserrat", sans-serif;
		font-size: 1rem;
		font-weight: 500;
		color: #fff;
		letter-spacing: 1px;
		margin-top: 0;
	}
	.encabezados {
		margin: 1.5rem 0 0 8rem;
	}
	main {
	    border: 0px solid rgba(93, 121, 192, 1);
		display: block;
		padding: 1rem;
	}
	.content {
		border: 0px solid rgba(187, 0, 3, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		width: min(100% - 2rem, 1200px);
		font-size: var(--fs-md);
		color: #3f3f3f;
		font-weight: 400;
		/*text-align: justify;*/
		margin: 2rem auto;
		z-index: 1;
	}
	.content h2 {
		font-size: 1.5rem;
		font-weight: 500;
		text-align: left;
		padding: 1rem 0 1.2rem 0;
	}
	.content h3 {
		font-size: 1rem;
		font-weight: 500;
		padding: 1.2rem 0 0 0;
	}
	.content p {
		padding: 1rem 0 1rem 0;
	}
	.content a,
	a:active,
	a:visited {
		text-decoration: none;
		color: #063f66;
	}
	.content a:hover {
		color: #79abff;
	}
    .justificado{
        text-align: justify;
    }

	/* ----------------------------------------------*/
	.sol-ext {
		margin: 3rem auto -1rem auto;
		text-align: center;
		font-weight: 600;
		font-size: var(--fs-lg);
		/* opcional */
		z-index: 2;
	}	
	
	.sol-reg {
		margin: 2rem auto -2rem auto;
		text-align: center;
		font-weight: 600;
		font-size: var(--fs-md);
		/* opcional */
		z-index: 3;
	}
	/********************************************************************
			Pie de pagina
	********************************************************************/
	footer {
		padding: 2rem 1rem;
		background: #002855;
		color: #d6d6d6;
		font-size: var(--fs-sm);
	}

	.redes_soc,
	.legal {
		text-align: center;
		max-width: 900px;
		margin: auto;
	}

	.redes_soc ul {
		padding: 0;
		margin: 1rem 0;
	}

	.redes_soc li {
		display: inline-flex;
		margin: 0 1rem;
	}

	.redes_soc img {
		width: 40px;
		height: auto;
	}

	/********************************************************************
			Boton subir
	********************************************************************/
	#backToTop {
		position: fixed;
		bottom: 2rem;
		right: 2rem;

		width: 56px;
		height: 56px;

		border-radius: 50%;
		border: none;

		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(4px);

		display: flex;
		align-items: center;
		justify-content: center;

		cursor: pointer;

		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

		opacity: 0;
		transform: translateY(12px);

		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			box-shadow 0.2s ease;

		z-index: 999;
	}

	/* visible */

	#backToTop.show {
		opacity: 1;
		transform: translateY(0);
	}

	/* hover elegante */

	#backToTop:hover {
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	}

	/* flecha */

	.arrow {
		width: 22px;
		height: 22px;
		fill: #007377;

		transition: transform 0.2s ease;
	}

	#backToTop:hover .arrow {
		transform: translateY(-2px);
	}

	/* progreso */

	.progress-ring {
		position: absolute;
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
	}

	.progress-ring-bg {
		fill: none;
		stroke: #e8e8e8;
		stroke-width: 4;
	}

	.progress-ring-progress {
		fill: none;
		stroke: #007377;
		stroke-width: 4;

		stroke-linecap: round;

		stroke-dasharray: 163;
		stroke-dashoffset: 163;

		transition: stroke-dashoffset 0.1s linear;
	}

	/* móvil */

	@media (max-width: 768px) {
		#backToTop {
			width: 42px;
			height: 42px;
			bottom: 1.2rem;
			right: 1.2rem;
		}

		.arrow {
			width: 18px;
			height: 18px;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		#backToTop,
		.arrow,
		.progress-ring-progress {
			transition: none;
		}
	}

	/********************************************************************
			Clases para AvidoCert
	********************************************************************/
	.aviso {
		border-left: 4px solid rgb(0, 76, 151);
		background: rgb(208 211 212/0.25);
		padding: 1rem;
		margin-bottom: 1.5rem;
		border-radius: 0.4rem;
        text-align: justify;
	}

	.aviso h3 {
		margin: 0 0 0.5rem;
		color: rgb(0, 76, 151);
		font-size: 1.2rem;
		font-weight:700;
	}

	.nota {
		border: 1px solid rgb(0, 76, 151);
		padding: 1rem;
		margin-bottom: 1.5rem;
		border-radius: 0.4rem;
		background: #fff;
        text-align: justify;
	}
	
	.ejemplos {
		display: grid;
		gap: 1rem;
		justify-content: center;
		margin-bottom: 1.5rem;
	}

	.ejemplo-item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 0.95rem;
		color: rgb(0, 40, 85);
	}

	/* Botón estilo "IA moderno" */

	.btn-ia {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.45rem 0.9rem;
		border-radius: 999px;
		font-size: 0.8rem;
		font-weight: 600;
		text-decoration: none;

		/* gradiente institucional */
		background: linear-gradient(135deg, rgb(0, 76, 151), rgb(0, 115, 119));

		/* glow suave */
		box-shadow:
			0 2px 6px rgb(0 0 0/0.1),
			0 0 0 0 rgb(0 115 119/0.4);

		transition:
			transform 0.15s ease,
			box-shadow 0.2s ease,
			filter 0.2s ease;
	}
	.btn-ia,
	.btn-ia:link,
	.btn-ia:visited{
		color:#fff;
		text-decoration:none;
	}
	/* efecto brillo tipo IA */
	.btn-ia::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.4) 50%, transparent 80%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	/* hover */
	.btn-ia:hover {
		transform: translateY(-1px);
		box-shadow:
			0 4px 12px rgb(0 0 0/0.15),
			0 0 12px rgb(0 115 119/0.35);
	}

	.btn-ia:hover::before {
		opacity: 1;
		animation: shine 0.8s ease;
	}

	/* active */
	.btn-ia:active {
		transform: translateY(0);
		box-shadow: 0 2px 6px rgb(0 0 0/0.12);
	}

	/* animación brillo */
	@keyframes shine {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}
/* Termina Ejemplos */

	.requisitos {
		display: grid;
		gap: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.requisitos article h3 {
		color: rgb(0, 40, 85);
		font-size: 1rem;
		margin-bottom: 0.5rem;
	}

	.requisitos ul {
		padding-left: 1.2rem;
	}

	.requisitos li {
		margin-bottom: 0.3rem;
	}

	.confirmacion {
		text-align: left;
		margin-top: 1rem;
	}

	.check {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		cursor: pointer;
		font-weight: 500;
		color: rgb(0, 76, 151);
	}

	.check input {
		width: auto;
		height: auto;
		margin: 0;
	}
	
	/********************************************************************
			Modo Responsivo
	********************************************************************/
	@media (max-width: 768px) {
		.barra_logo {
			grid-template-columns: auto 1fr; /* se mantiene */
			padding: 0 1rem;
		}

		.logo_cmmi_sup {
			width: 144px;
			height: 113px;

			background: url(../img/logo-CMMI-1373x1129.svg) left center / contain no-repeat;
		}

		.datos_contacto {
			margin-top: 10px;
			font-size: 0.7rem;
		}
		.sol-ext {
			margin-top:-1rem;
		}
	}
}