@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
* {
	margin: 0;
	box-sizing: border-box;
}

:root {
    scroll-behavior: smooth;
    --morado: #080708;
    --color--principal: #701890;
    --morado_claro: #f9f8fe;
    --background: #f9f8fe;
    --menu-text-color: #ffffff; /* Color del texto del menú */
    --footer-text-color: #ffffff; 
	--footer-backgraound : #C67DFF;/* Color del texto del footer */
}
html {
	scroll-behavior: smooth;
}
body {
    font-family: 'Archivo', sans-serif;
    background: #F3D9FF;
}
.nav__logo-text {
	font-family: "Shrikhand", serif;
	font-weight: 400;
	font-style: normal;
}
.nav__link__logo{
	width: 100%;
	height: 100%;
	display:flex;
	align-items: center;
	/* espacio entre los SVGs */
}
.nav__link__logo:hover svg path {
	fill: var(--footer-backgraound);
	/* Texto más claro al pasar el mouse */

}
/* Contenedor del botón de país */
.dropdown {
	margin: 0;
}
.dropdown .btn {
	background-color: var(--color--principal);
	color: var(--morado_claro);
	border: none;
	border-radius: 2px;
	width: 190px;
	padding: 8px 16px;
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.dropdown .btn:hover {
	color: var(--color--principal);
	background-color: var(--morado_claro);
}

/* Estilos del menú */
.dropdown-menu {
	display: none;
	position: absolute;
	background-color: var(--background);
	min-width: 180px;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	margin-top: 8px;
	z-index: 999;
	padding: 10px 0;
}

/* Mostrar el menú con clase .show */
.dropdown-menu.show {
	display: block;
}

/* Items del dropdown */
.dropdown-menu .dropdown-item {
	padding: 10px 16px;
	font-size: 0.9rem;
	color: var(--morado);
	text-decoration: none;
	display: block;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu .dropdown-item:hover {
	background-color: var(--color--principal);
	color: white;
	cursor: pointer;
	border-left: 4px solid var(--morado_claro);
}
.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	padding: 80px 0;
}

.container--hero {
	padding: 0;
}


/* contenido de el header*/
.header-content {
	align-items: center;
	text-align: center;
}

/* contenido de el header*/
.header-content {
	align-items: center;
	text-align: center;
}
.header-content h1 {
	font-family: 'Poppins';
	font-weight: 600;
	font-size: 75px;
	line-height: 80px;
	color: #F9FAFC;
	text-transform: uppercase;
	margin-bottom: 35px;
	margin-top: 30px;
}
.header-content p {
	font-size: 18px;
	color: #C5C5C5;
	padding: 0 250px;
	margin-bottom: 25px;
}
.btn-not-fount {
	display: inline-block;
	background-color: #701890;
	color: #fff;
	padding: 10px 18px;
	border: none;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-not-fount:hover {
	background-color: #5a126f;
	transform: scale(1.03);
	text-decoration: none;
	color: #fff;
}

/* Menú */
.nav {
	background: var(--color--principal);
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav__menu {
	background-color: var(--morado);
	width: 35px;
	cursor: pointer;
	z-index: 100;
	border-radius: 5px;
}

.nav__logo {
	width: 200px;
	height: 100%;
	color: var(--morado);
}

.nav__list {
	z-index: 100;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--color--principal);
	padding: 80px 0;
	display: grid;
	place-content: center;
	text-align: center;
	gap: 2.5rem;
	list-style: none;
	transform: translate(-100%);
	transition: transform 0.3s;
}

.nav__list--show {
	transform: translate(0);
}
.nav__link {
	text-decoration: none;
	color: var(--menu-text-color);
	/* Texto blanco */
	font-weight: 500;
}

.nav__link:hover {
	color: var(--morado_claro);
	/* Texto más claro al pasar el mouse */
}


/* Estilos para el submenú */
.nav__dropdown {
	position: relative;
}

.nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color--principal);
	/* Fondo morado */
	border-radius: 5px;
	width: 150px;
	display: none;
	flex-direction: column;
	text-align: left;
}

.nav__submenu li {
	padding: 10px;
}

.nav__submenu-link {
	text-decoration: none;
	color: var(--menu-text-color); /* Texto blanco */
	display: block;
	padding: 8px 12px;

	/* 🌟 Transición suave agregada */
	transition: background-color 0.5s ease, color 0.5s ease, border-radius 0.5s ease;
}

.nav__submenu-link:hover {
	background: var(--morado_claro); /* Fondo más claro */
	color: var(--color--principal);   /* Texto morado */
	border-radius: 5px;
}


/* Mostrar el submenú cuando el mouse pase sobre "Registrarme" */
.nav__dropdown:hover .nav__submenu {
	display: flex;
}
/* hero-main */
 
.hero__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hero__figure {
	order: -1;
	padding: 20px 0;
}

.hero__img {
	width: 100%;
	display: block;
	max-width: 400px;
	margin: 0 auto;
}

.hero__texts {
	display: grid;
	gap: 1.5rem;
	text-align: center;
	padding-bottom: 50px;
}

.hero__title {
	padding-top: 10px;
	font-size: 1.5rem;
	color: var(--morado);
}
.hero__subtitle {
	padding-top: 5px;
	font-size: 1rem;
	color: var(--morado);
}
.hero__title__v2 {
	padding-top: 10px;
	font-size: 25px;
	color: var(--morado);
}
.hero__subtitle__v2 {
	padding-top: 5px;
	font-size: 30px;
	color: var(--morado);
}

.hero__paragraph {
	line-height: 1.5;
	font-weight: 300;
	margin-bottom: 0.5rem;
	text-align: justify;
}
.paragraph_cta {
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
	font-family: 'Cursive';
	color: black;
}
.hero__cta {
	background-color: var(--morado);
	color: #fff;
	text-decoration: none;
	margin-top: 0;
	padding: 1em 3em;

	justify-self: center;
	border-radius: 6px;
}
/* Ajustamos el contenedor principal */
.category-section {
	margin-top: 30px;
	min-height: auto;
	text-align: center;
	display: flex;
	justify-content: center;
}

/* Nuevo contenedor interno */
.category-wrapper {
	width: 100%;
	max-width: 1200px;
}


.category-title {
	padding: 0;
	margin: 0 0 20px 0;
	font-size: 28px;
	font-weight: bold;
}

/* Contenedor de tarjetas */
.category-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 10px;
}
/* Tarjetas */
.category-card {
	width: 200px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	font-size: 18px;
	font-weight: bold;
	color: white;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	background-color: #333;
	/* O cualquier color dinámico */
}

/* Enlace interior */
.category-card-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: white;
	text-decoration: none;
	position: relative;
	transition: all 3s ease;
}

/* Hover efecto */
.category-card:hover {
	border: 2px solid var(--color--principal);
	transform: scale(1.02);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Título arriba a la izquierda */
.category-card-title {
	position: absolute;
	top: 8px;
	left: 10px;
	font-size: 14px;
	font-weight: bold;
	color: white;
	z-index: 2;
}

/* Imagen grande abajo a la derecha */
.category-card-img {
	position: absolute;
	bottom: -15px;
	/* sobresale un poco visualmente */
	right: -10px;
	width: 110px;
	height: auto;
	opacity: 0.85;
	pointer-events: none;
	z-index: 1;
}

/* Sección de servicio */
.services-section, .team-section{
	margin-top: 30px;
	min-height: auto;
	/* Ajusta la altura según el contenido */
	text-align: center;
	padding: 50px 20px;
	background-color: #F3D9FF;
	overflow: hidden;
	/* Evita que se desborde */
}
.services-title, .team-title{
	margin-bottom: 30px;
	font-size: 2rem;
	font-family: 'Poppins', Geneva, Tahoma, sans-serif;
	font-weight: 600;
}
/* Contenedor de tarjetas */
.services-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	/* Permite que las tarjetas bajen en pantallas pequeñas */
}

/* Tarjetas */
.service-card {
	width: 280px;
	height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	font-size: 18px;
	font-weight: bold;
	color: white;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
}

/* Efecto hover */
.service-card:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Iconos */
.service-card-img {
	width: 100%;
	height: 150px;
	margin-bottom: 10px;
}

/* Colores de las tarjetas */
.service-taxi {
	background-color: #ffc107;
	/* Amarillo */
}

.service-delivery {
	background-color: #dc3545;
	/* Rojo */
}

.service-mandaditos {
	background-color: #17a2b8;
	/* Azul Turquesa */
}

.service-mototaxi {
	background-color: #d8cb1c;
	/* Amarillo */
}


/* Contenedor de las cards */
.cards-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	
}

/* Estilos de las tarjetas */
.team-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	max-width: 18rem;
	width: 100%;
	min-height: 400px;
	/* Tamaño fijo para todas */
	overflow: hidden;
	text-align: center;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
}

.team-card:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 14px rgba(138, 10, 163, 0.7);
}

/* Imagen */
.team-card-img {
	width: 100%;
	height: 150px;
	/* Altura fija para todas las imágenes */
	object-fit: cover;
}

/* Cuerpo de la tarjeta */
.team-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 15px;
}

/* Título */
.team-card-title {
	font-size: 20px;
	margin-bottom: 10px;
}

/* Texto con altura fija y scroll si es muy largo */
.team-card-text {
	font-size: 14px;
	max-height: 100px;
	overflow-y: auto;
	text-align: justify;
	padding-right: 5px;
}

/* Botón alineado al final */
.team-btn {
	display: block;
	padding: 10px 20px;
	background: #9D4EDD;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	transition: background 0.3s;
	margin-top: auto;
	/* Lo empuja al fondo */
}

.team-btn:hover {
	background: #11002C;
}
/*section carrusel*/
/* styles.css */
.carousel-section{
	margin-top: 35px;
	padding: 40px 0;
	text-align: center;
	background-color: #9A2EDA;
}

.carousel-title {
	color: #000000;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 20px;
}
.carousel-container {
	background-color: #9A2EDA;
	padding: 20px;
	position: relative;
	overflow: hidden;
}

.swiper {
	width: 90%;
	margin: auto;
}

.swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	background: rgba(255, 255, 255, 0.1);
	
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	text-align: center;
}
.swiper-button-next,
.swiper-button-prev {
	color: white;
	
}
/* Limpia cualquier contenido no deseado */
/* Eliminar COMPLETAMENTE el pseudo-elemento */
.swiper-button-next::after,
.swiper-button-prev::after {
    content: none !important;
    display: none !important;
}

/* Corrección: girar la flecha izquierda */
.swiper-button-prev svg {
    transform: rotate(180deg);
}

.swiper-pagination-bullet-active{
	background: white;
}


.restaurant-header {
	position: relative;
	background-color: rgba(0, 0, 0, 0.5);
	/* Fallback */
}

.restaurant-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

.restaurant-title {
	position: relative;
	z-index: 2;
	font-size: 2rem;
	font-weight: bold;
}
/* Contenedor de la categoría: grid horizontal con scroll */
.category-products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	max-height: 400px;
	/* o la altura que necesites */
	overflow-y: auto;
	padding-right: 10px;
	border: var(--color--principal) 1px solid;
	border-radius: 8px;
	/* espacio para la scrollbar */
}

.category-products::-webkit-scrollbar {
	width: 8px;
}

.category-products::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

/* Tu CSS de tarjetas de producto (sin cambios en estructura) */
.product-card {
	width: 260px;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	font-family: sans-serif;
	transition: transform 0.3s;
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	transform: scale(1.02);
}

.product-image {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.product-info {
	padding: 10px;
}

.product-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1.1em;
	margin: 0 0 5px;
}

.product-description {
	font-size: 0.9em;
	color: #555;
	margin: 0 0 10px;
}

.product-price {
	color: #27ae60;
	font-weight: bold;
	margin: 0 0 5px;
}

.product-status {
	display: inline-block;
	padding: 2px 8px;
	font-size: 0.75em;
	border-radius: 6px;
	color: #fff;
	margin-bottom: 10px;
}

.product-status.available {
	background-color: #28a745;
}

.product-status.unavailable {
	background-color: #dc3545;
}

.product-actions {
	display: flex;
	justify-content: space-between;
}
.btn-add-carrito {
	background-color: #198754;
	/* verde tipo Bootstrap */
	color: #fff;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.btn-add-carrito:hover {
	background-color: #157347;
}
.restaurant-logo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.restaurant-name {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 12px;
	background: #240046;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	transition: 0.3s;
}

.restaurant-name:hover {
	background: #5A199B;
}


/* about */

.about {
	background-color: var(--background);
}

.about__container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.about__img {
	display: block;
	margin: 0 auto;
	width: 90%;
	aspect-ratio: 1/1;
	max-width: 280px;
	object-fit: cover;
	object-position: top;
	border-radius: 50%;
}

.about__texts {
	text-align: center;
	display: grid;
	gap: 1.5rem;
}

.subtitle__footer{
	color: #000000;
	text-align: center;
	font-size: 1.1rem;
}

.paragraph {
	line-height: 1.5;
	font-weight: 300;
}
/* Footer pagina*/
.footer1 {
	background-color: var(--color--principal);
	padding: 2rem 0;
}

.footer__container1 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	/* 4 columnas */
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.footer__column1 {
	text-align: left;
}

.footer__title1 {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--morado_claro);
	margin-bottom: 1rem;
}

.footer__list1 {
	list-style: none;
	padding: 0;
}
.footer__list1 > li {
	display: flex;
	
}
.footer__list1>li >a {
	margin-left: 5px;
	margin-top: 10px;
}

.footer__link1 {
	text-decoration: none;
	color: var(--morado_claro);
	font-size: 1rem;
	display: block;
	margin-bottom: 0.5rem;
}

.footer__link1:hover {
	color: var(--footer-backgraound)
}
/* Cambiar el color del path dentro del SVG al pasar el mouse */
.footer__link1:hover svg path {
	fill: var(--footer-backgraound);
	/* Cambiar el color al pasar el mouse */
}
/* Footer creador*/
.footer {
	background-color: var(--background);
	display: flex;
	justify-content: center;
	padding: 5px 0;
}

.footer__container {
	display: flex;
	align-items: center;
	/* Alinea verticalmente */
	justify-content: center;
	gap: 2rem;
	/* Espaciado entre elementos */
	flex-wrap: wrap;
	/* Permite que se ajuste en pantallas pequeñas */
}

.subtitle__footer {
	font-size: 0.7rem;
	color: #000000; /* Usar la variable para el color del texto */
	white-space: nowrap;
	/* Evita salto de línea en el texto */
}

.footer__contact {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
	/* Elimina margen para evitar desplazamiento */
}

.footer__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--color);
}

.footer__item:nth-of-type(1) {
	--color: #1da1f2;
}

.footer__item:nth-of-type(2) {
	--color: #c32aa3;
}

.footer__item:nth-of-type(3) {
	--color: #ff0000;
}

.footer__item:nth-of-type(4) {
	--color: #1877f2;
}
.footer__item:nth-of-type(5) {
	--color: #42e468;
}
.footer__img {
	width: 28px;
}

/* Formularios de Entrada al Sistema. */
	/*Formulario de Registro*/
	/*Formulario de Registro*/

	.register-section{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 30px;
	}
	.view-text{
		background-image: linear-gradient(rgba(0, 0, 0, 0.7),
					rgba(0, 0, 0, 0.7)),
				url(../assets/fondo-registro.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			min-height: 70vh;
			display: flex;
			align-items: center;
			background-attachment: fixed;
	}
	
	.form {
		background: #fff;
		margin: auto;
		margin-top: 30px;
		margin-bottom: 30px;
		width: 95%;
		max-width: 700px;
		padding: 4.5em 3em;
		border-radius: 10px;
		box-shadow: 0 10px 10px 10px rgba(174 61 255/ 60%);
		text-align: center;
	}
	

	.form__title {
		font-size: 2rem;
		margin-bottom: 0.5em;
	}

	.form__paragraph {
		margin-top: 10px;
		font-weight: 300px;
	}

	.form__link {
		font-weight: 400px;
		color: var(--morado);
		text-decoration: none;
	}
	.form_container {
		margin-top: 3em;
		display: grid;
		gap: 2.5em;
	}

	.form__group {
		position: relative;
		--color: #5757577e;
	}
		/* Ocultar el radio button */
		.hidden-radio {
			display: none;
		}
	
		/* Estilos para el subtítulo */
		.subtitle-container {
			margin-bottom: 15px;
		}
	
		.subtitle {
			font-size: 20px;
			font-weight: bold;
			color: #333;
			border-bottom: 2px solid var(--color--principal);
			display: inline-block;
			padding-bottom: 5px;
		}
	
		/* Estilizar las opciones */
		.option-label {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 2px solid transparent;
			border-radius: 10px;
			padding: 15px;
			cursor: pointer;
			transition: all 0.3s ease;
			width: 120px;
			text-align: center;
		}
	
		/* Texto de la opción */
		.option-label span {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
	
		/* Hover */
		.option-label:hover {
			border-color: var(--color--principal);
			background-color: rgba(174, 61, 255, 0.3);
		}
	
		/* Estilo cuando la opción está seleccionada */
		.hidden-radio:checked+.option-label {
			border-color: var(--color--principal);
			background-color: var(--color--principal);
			color: white;
		}
	
		/* Cambiar color del texto cuando está seleccionado */
		.hidden-radio:checked+.option-label span {
			color: white;
		}
	.form__input {
		width: 100%;
		background: none;
		color: var(--color--principal);
		font-size: 1rem;
		padding: 0.9em 0.3em;
		border: none;
		outline: none;
		border-bottom: 1px solid var(--color--principal);
		font-family: 'Roboto', sans-serif;
	}
	.form__input:focus,
	.form__input:not(:placeholder-shown) {
		color: var(--color--principal);
	}

	.form__input:focus + .form__label,
	.form__input:not(:placeholder-shown) + .form__label {
		transform: translateY(-2px) scale(0.7);
		transform-origin: left top;
		color: var(--morado);
	}
	.form__label {
		color: var(--color);
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 5px;
		transform: translateY(10px);
		transition: transform 0.5s, color 0.3s;
	}

	.form__submit {
		width: 100%;
		margin-top: 10px;
		background: var(--morado);
		color: #fff;
		font-family: 'Roboto', sans-serif;
		font-weight: 500;
		font-size: 1.2rem;
		padding: 0.8em 0;
		border: none;
		border-radius: 0.5em;
		transition: all 0.5s ease;
	}
	.form__submit:hover{
		background:var(--color--principal);
		color: var(--menu-text-color);
		border: 1px solid var(--morado);
	}
	.form__line {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: var(--morado);
		transform: scale(0);
		transform: left bottom;
		transition: transform 0.4s;
	}
	
	.form__input:focus ~ .form__line,
	.form__input:not(:placeholder-shown) ~ .form__line {
		transform: scale(1);
	}

	.success,
	.exito {
		width: 100%;
		margin-top: 10px;
		display: none;
		background-color: #4caf50; /* Color de fondo verde */
		color: #fff; /* Color del texto en blanco */
		padding: 10px; /* Espaciado interno */
		border-radius: 5px; /* Bordes redondeados */
		text-align: center; /* Centrar el texto */
		font-weight: bold; /* Texto en negrita */
		margin-top: 20px;
		margin-bottom: 10px; /* Margen inferior para separar mensajes */
	}

	.error {
		width: 100%;
		margin-top: 10px;
		display: block;
		background: crimson; /* Color de fondo rojo */
		color: white; /* Color del texto en blanco */
		padding: 10px; /* Espaciado interno */
		border-radius: 5px; /* Bordes redondeados */
		text-align: center; /* Centrar el texto */
		font-weight: bold; /* Texto en negrita */
		margin-bottom: 10px; /* Margen inferior para separar mensajes */
	}
/* FIN Formularios de Entrada al Sistema. */

/*Nuestros Servicios */
.our__service_title {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 2rem;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

/* Diseño de los servicios */
	.our__service {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 3rem;
		
	}

	.our__service__content {
		margin-top: 30px;
		flex: 1;
		text-align: left;
	}

	.our__service__content h3 {
		font-size: 1.8rem;
		color: #333;
		margin-bottom: 1rem;
		font-weight: bold;
		
	}

	.our__service__content p {
		font-size: 1.1rem;
		color: #555;
		line-height: 1.6;
		text-align: justify;
	}

	.our__service__image {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.our__service__image img {
		width: 50%;
		height: auto;
		border-radius: 10px;
	}

	/* Alternar Diseño */
	.our__service--reverse {
		flex-direction: row-reverse;
	}
/*Fin de Nuestros Servicios*/

/*Terminos Y condiciones*/
.header__terminos{
	margin: 20px auto;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
	font-weight: 900;
}

.terms-container {
	max-width: 800px;
	margin: 20px auto;
	background: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	font-family: Arial, Helvetica, sans-serif;
}

.section__terminos >h2 {
	font-weight: bold;
}
.section__terminos >p, .section__terminos> ul, .section__terminos > ol{
	text-align: justify;
}
.section__terminos>p > span {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-style: italic;
	font-weight: 800;
}
.footer__terminos{
	text-align: center;
}


@media (min-width: 0px) and (max-width: 425px) {
	.category-container {
		grid-template-columns: repeat(2, 1fr); /* 2 columnas */
		gap: 5px;
		justify-items: center;
	}

	.category-card {
		width: 100%;
		max-width: 160px; /* para mantener proporción */
	}
	.register-section {
			margin: 0 auto;
			padding-top: 0%;
			width: 100%;
			display: flex;
			/* Asegurar que es un contenedor flexbox */
			flex-direction: column;
			/* Alinear los elementos en columna */
			align-items: center;
			/* Centrar los elementos horizontalmente */
			justify-content: center;
			background: #F8F8F8;
			/* Centrar los elementos verticalmente (si es necesario) */
	
		}
	
		.view-text {
			background-image: none;
			min-height: max-content;
			/* Quitar el fondo */
			height: auto;
			/* Ajustar la altura automáticamente */
			padding: 10px;
			/* Reducir el padding */
		}
	
		.header-content h1 {
			margin-bottom: 0;
			font-size: 2rem;
			font-family: 'Poppins', Courier, monospace;
			/* Reducir tamaño del título */
			color: #1a1616;
			font-weight: 800;
			/* Reducir el grosor de la letra */
		} 
	
		.header-content p {
			display: none;
		}
	.form__title {
		font-size: 1.8rem;
		text-align: center;
		/* Asegura que el título esté centrado */
	}

	.services-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		/* Centra el texto dentro de los servicios */
	}

	.footer__container1 {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem;
		text-align: center;
		/* Centra el contenido del footer */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer__column1 {
		text-align: center;
		width: 100%;
		/* Asegura que ocupe todo el ancho disponible */
	}

	.footer__title1 {
		text-align: center;
		/* Centra los títulos */
	}

	.footer__list1 {
		text-align: center;
		padding: 0;
	}

	.footer__list1>li {
		text-align: center;
		display: flex;
		justify-content: center;
		/* Centra los elementos dentro de la lista */
	}

	.footer__list1>li>a {
		text-align: center;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.footer__list1 img {
		margin: 0 auto;
		/* Centra las imágenes dentro de los enlaces */
		display: block;
	}
}
/* Media Queries para pantallas pequeñas */
@media (min-width: 426px) and (max-width: 951px) {
	.category-container {
		grid-template-columns: repeat(2, 1fr); /* 2 columnas */
		gap: 5px;
		justify-items: center;
	}

	.category-card {
		width: 100%;
		max-width: 160px; /* para mantener proporción */
	}
	.register-section {
		margin: 0 auto;
		padding-top: 0%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F8F8F8;
	}

	.view-text {
		background-image: none;
		min-height: max-content;
		height: auto;
		padding: 10px;
	}

	.header-content h1 {
		margin-bottom: 0;
		font-size: 2rem;
		font-family: 'Poppins', Courier, monospace;
		color: #1a1616;
		font-weight: 800;
	}

	.header-content p {
		font-size: 18px;
		color: var(--color--principal);
		padding: 0;
		margin-bottom: 0;
	}

	.category-card {
		z-index: 10;
	}

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

	.service-card {
		width: 90%;
		height: auto;
		padding: 20px;
	}

	.footer__container1 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Estilos del submenú */
	.nav__submenu {
		display: none;
		flex-direction: column;
		position: static;
		/* Para evitar problemas con el flujo del documento */
		background: var(--color--principal);
		padding: 0;
		border-radius: 5px;
		width: 100%;
		text-align: center;
	}

	.nav__submenu li {
		padding: 10px;
	}

	.nav__submenu-link {
		text-decoration: none;
		color: #fff;
		display: block;
		padding: 8px 12px;
	}

	.nav__submenu-link:hover {
		background: white;
		color: var(--footer-backgraound);
		border-radius: 5px;

	}

	/* Clase para mostrar el submenú cuando se haga clic */
	.nav__submenu--show {
		display: flex;
	}
}

@media (min-width: 952px) {

	
	.nav__menu {
		display: none;
	}

	.nav__list {
		background: var(--color--principal);
		position: static;
		background-color: var(--color--principal);
		padding: 0;
		display: flex;
		gap: 2rem;
		list-style: none;
		transform: unset;
		transition: none;
	}

	.nav__list--show {
		transform: unset;
	}

	.nav__link {
		color: var(--menu-text-color);
	}

	.nav__link::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 2px;
		transform: scaleX(0);
		transition: all 3s ease;
	}
	.nav__link:hover {
		color: var(--background);
		border-bottom: 2px solid var(--background);
	}

	.nav__link:hover::after {
		transform: scaleX(40);
	}


	/* hero-main */

	.hero__main {
		flex-direction: row;
		gap: 40px;
		min-height: 550px;
		align-items: center;
	}

	.hero__figure {
		order: 0;
		padding: 0;
		width: 46%;
	}

	.hero__img {
		max-width: 450px;
	}

	.hero__texts {
		width: 54%;
		text-align: start;
		gap: 2rem;
		padding-bottom: 0;
	}

	.hero__title {
		font-size: 3rem;
	}

	.hero__paragraph {
		margin-bottom: 0;
	}

	.hero__cta {
		justify-self: start;
	}
	.hero__cta:hover {
		background: var(--color--principal);
		color: #000000;
		border: 1px solid #027B86;
	}

	/* about */

	.about__container {
		flex-direction: row;
	}

	.about__figure {
		width: 30%;
	}

	.about__img {
		width: 100%;
	}

	.about__texts {
		width: 70%;
		text-align: start;
		place-content: center;
	}

	.subtitle {
		text-align: inherit;
		font-size: 2.5rem;
	}

	/* learn */

	.learn {
		text-align: center;
	}

	.learn__articles {
		gap: 2rem;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.learn__article {
		gap: 1.5rem;
	}


	/* statistics */

	.statistics__title {
		font-size: 4.5rem;
	}

	/* footer */

	.footer {
		text-align: center;
	}
}