/* Reset / estilos globales        */
/* Uso: normalizar paddings/margins y definir la fuente base */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Trebuchet MS;
}

/* Header / navegación principal  */
/* Uso: barra superior, contiene logo y enlaces de navegación */
header {
	background-color: #ffd66b;
	width: 100%;
	height: 60px;
	text-align: center;
}

.cabecera {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	padding: 0 20px;
	gap: 20px;
}

.logo {
	/* Logo del sitio: tamaño y comportamiento */
	height: 40px;
	width: 40px;
	object-fit: contain;
}

.items-cabecera {
	/* Contenedor de enlaces de navegación */
	display: flex;
	gap: 30px;
	align-items: center;
}

.items-cabecera a {
	/* Estilo de los enlaces en la cabecera */
	font-weight: bold;
	color: black;
	text-decoration: none;
	transition: background-color 0.3s;
	/* Mismo tamaño que el botón 'Más' */
	font-size: 1rem;
}

.items-cabecera a:hover {
	/* Efecto hover para enlaces de cabecera */
	background-color: #5b7feb;
}

/* Menu Desplegable "Más"*/
.dropdown{position:relative}
.drop-btn{
	background: transparent;
	border: none;
	color: #000;
	font-weight: 700;
	cursor: pointer;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 1rem;
}
.drop-btn:focus{outline:2px solid rgba(0,0,0,0.12)}
.drop-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.18);display:none;flex-direction:column;padding:6px 6px;list-style:none;z-index:50}
.drop-menu li{margin:0}
.drop-menu a{display:block;padding:8px 12px;color:#000;text-decoration:none;border-radius:6px}
.drop-menu a:hover{background:rgba(91,127,235,0.08)}
/* Mostrar en hover (PC) o cuando el dropdown tiene foco interno (teclado) */
.dropdown:hover .drop-menu,.dropdown:focus-within .drop-menu{display:flex}

/* En pantallas pequeñas, evitar absolute para que sea fácilmente táctil */
@media (max-width:700px){
	/* En móvil: mostrar el menú encima de todo al activarlo.
		 Usamos position:fixed para garantizar que quede por encima del contenido
		 y un z-index alto. Mantener display:none por defecto y mostrar con
		 :focus-within / :hover tal como en escritorio. */
	.drop-menu{
		position: fixed;
		top: 70px; /* justo debajo de la cabecera (ajusta si tu header cambia) */
		right: 12px;
		min-width: 200px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 14px 40px rgba(0,0,0,0.2);
		display: none;
		flex-direction: column;
		padding: 6px;
		list-style: none;
		z-index: 9999;
	}

	/* Mejor padding para enlaces en móvil */
	.drop-menu a{
		padding: 10px 12px;
	}
}

/* ------------------------------- */
/* Sección HERO / inicio principal */
/* Uso: portada grande con título, subtítulo y CTA */
/* ------------------------------- */
.inicio {
	/* Fondo con degradado y tamaño del bloque hero */
	background: linear-gradient(180deg, #fff6c8 0%, #fce98b 50%, #f5d467 100%);
	color: #fff;
	min-height: 80vh;
	display: flex;
	align-items: center;
	padding: 60px 6%;
}

.inicio-inner {
	/* Contenedor interno centrado y con máximo ancho */
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	gap: 30px;
}

.i-left {
	/* Columna izquierda del hero (texto) */
	flex: 1 1 60%;
	max-width: 65%;
	text-align: left;
}

.hero-title {
	/* Título principal grande del hero */
	font-size: 4rem;
	line-height: 0.95;
	font-weight: 800;
	margin-bottom: 18px;
	color: #fff;
	text-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.hero-sub {
	/* Subtítulo o descripción breve bajo el título */
	font-size: 1.125rem;
	margin-bottom: 26px;
	max-width: 520px;
	opacity: 0.95;
}

.cta-btn {
	/* Botón principal de llamada a la acción en el hero */
	display: inline-block;
	background: #fff;
	color: #9e9b00;
	padding: 14px 26px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 10px 30px rgba(0,0,0,0.18);
	transition: transform .15s ease, box-shadow .15s ease;
}

.cta-btn:hover,
.cta-btn:focus {
	/* Interacción del botón CTA */
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}

.i-right {
	/* Columna derecha del hero (imagen o mockup) */
	flex: 0 0 360px;
	height: 620px;
	background-image: url('../imgs/aula02.jpg');
	background-size: cover;
	background-position: center;
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.25);
	transform: translateY(6px);
}

/* Sección Nosotros / Historia / Misión y Vision   */
/* Uso: bloque con imagen a la derecha/izquierda y tarjeta de texto */
.Nosotros {
	padding: 60px 6%;
	/* Fondo sutil para separar visualmente la sección */
	background: linear-gradient(180deg, rgba(143, 204, 245, 0.753) 0%, rgba(75, 233, 245, 0.781) 30%);
}

.nosotros-inner {
	/* Layout en dos columnas para la sección Historia */
	display: flex;
	align-items: center;
	gap: 36px;
	max-width: 1200px;
	margin: 0 auto;
}

.n-left { flex: 0 0 48%; }

.n-right { flex: 1 1 52%; }

.imagen-01 {
	/* Imagen destacada dentro de la sección Nosotros */
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(27, 162, 216, 0.15);
	border: 6px solid rgba(255, 255, 255, 0.06);
	transform: translateY(0);
}

.n-card {
	/* Tarjeta blanca con el texto de la historia */
	position: relative;
	padding: 34px 34px 28px 34px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88));
	box-shadow: 0 18px 50px rgba(27, 156, 216, 0.12);
	border-left: 8px solid rgba(46, 27, 216, 0.18);
}

.n-accent {
	/* Barra vertical de acento para la tarjeta de historia */
	position: absolute;
	left: -28px;
	top: 18px;
	width: 12px;
	height: 72%;
	background: linear-gradient(180deg, #cfeefd, #8096f8);
	border-radius: 8px;
}

.n-titulo {
	/* Título de la sección Historia con degradado text-clip */
	font-size: 2.25rem;
	margin: 6px 0 12px 0;
	font-weight: 800;
	background: linear-gradient(90deg, #7fbbe8, #4a9ddd);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.n-info {
	/* Párrafo principal de la historia */
	font-size: 1.05rem;
	color: #333;
	line-height: 1.55;
	margin-bottom: 18px;
}

.cta-small { display: none; }

/* Footer / pie de página         */
/* Uso: información de contacto y enlaces sociales */
footer {
	background-color: #ffd66b;
	color: black;
	margin-top: 40px;
}

/* Footer inferior */

.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 30px;
	background-color: rgba(0,0,0,0.05);
	font-size: 14px;
}

.footer-logo {
	height: 40px;
	width: 40px;
	object-fit: contain;
}

.footer-left,
.footer-center,
.footer-right {
	display: flex;
	align-items: center;
}

.footer-center {
	flex: 1 1 auto;
	justify-content: center;
}

.facebook-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: black;
	background-color: rgba(255,255,255,0.6);
	padding: 6px 10px;
	border-radius: 8px;
	transition: background-color 0.2s, transform 0.15s;
}

.facebook-link:hover,
.facebook-link:focus {
	background-color: rgba(255,255,255,0.85);
	transform: translateY(-2px);
}

.facebook-link svg { display: block; }

/* ------------------------------- */
/* Media queries / Responsividad   */
/* Ajustes para pantallas pequeñas */
/* ------------------------------- */
@media (max-width: 700px) {
	.cabecera { gap: 20px; }
	.items-cabecera { gap: 16px; }
	.imagen-01 { width: 90%; height: auto; margin: 20px auto; float: none; }

	/* Evitar overflow horizontal y columnas laterales raras en móviles */
	html, body {
		width: 100%;
		overflow-x: hidden;
	}

	/* Colapsar el hero y la columna derecha a una sola columna */
	.inicio-inner {
		flex-direction: column !important;
		gap: 18px;
		align-items: stretch;
	}

	.i-right {
		width: 100% !important;
		height: auto !important;
		min-height: 220px;
		background-position: center;
		background-size: cover;
		transform: none !important;
		box-shadow: 0 12px 36px rgba(0,0,0,0.18);
		border-radius: 14px;
	}

	/* Ajustes para la galería: reducir padding lateral que puede crear bandas de color */
	.galeria-grid {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	/* Tipografía más legible en móviles: escalado suave */
	.hero-title {
		font-size: 2.1rem;
		line-height: 1.05;
	}

	.n-info, .g-sub, .m-sub {
		font-size: 0.98rem;
	}
}

@media (max-width: 900px) {
	.inicio-inner { flex-direction: column-reverse; gap: 20px; }
	.i-left { max-width: 100%; text-align: center; }
	/* En móvil el footer se apila en una sola columna */
	.footer {
		flex-direction: column;
		gap: 8px;
		align-items: center;
		text-align: center;
	}
	.i-right { width: 80%; height: 420px; max-width: 420px; }
}

@media (max-width: 760px) {
	.nosotros-inner { flex-direction: column; }
	.n-left, .n-right { width: 100%; }
	.imagen-01 { height: 300px; }
	.n-card { padding: 22px; }
	.n-titulo { font-size: 1.75rem; }
}

/* ------------------------------- */
/* Sección Galería                */
/* Uso: cuadrícula de imágenes destacadas, contraste oscuro para resaltar fotos */
/* ------------------------------- */
.galeria {
	padding: 60px 6%;
	background: linear-gradient(180deg, #fa9191 0%, #f78484 100%); /* fondo rojo pastel (más oscuro) */
	color: #fff;
}

.galeria-inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	position: relative; /* permitir posicionamiento absoluto de controles globales */
}

.g-title {
	font-size: 2.25rem;
	margin-bottom: 8px;
	font-weight: 800;
	color: #fff;
}

.g-sub {
	color: rgba(255,255,255,0.85);
	margin-bottom: 24px;
}

.galeria-grid {
	/* Pista horizontal desplazable (sin JS): miniaturas en fila */
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	/* espacio lateral para que las flechas posicionadas "fuera" no se recorten */
	padding-left: 56px;
	padding-right: 56px;
	scroll-snap-type: x mandatory;
	position: relative;
}

.g-item {
	display: block;
	/* Permitimos overflow visible para que las flechas posicionadas "fuera"
	   no queden recortadas. Mantendremos el recorte visual aplicando
	   border-radius directamente a la imagen. */
	overflow: visible;
	border-radius: 12px;
	box-shadow: 0 14px 40px rgba(2,9,23,0.6);
	transition: transform .25s ease, box-shadow .25s ease;
	border: 3px solid rgba(255,255,255,0.03);
	flex: 0 0 calc(33.333% - 12px);
	scroll-snap-align: center;
	position: relative; /* para posicionar las flechas relativas al item */
}

.g-item img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
	/* Aplicar border-radius a la imagen para mantener el recorte visual */
	border-radius: 12px;
}

/* Ocultar scrollbar visualmente pero permitir scroll (estética) */
.galeria-grid::-webkit-scrollbar { height: 8px; display: none; }
.galeria-grid { -ms-overflow-style: none; scrollbar-width: none; }

.g-item .g-prev, .g-item .g-next { display: none; }

/* Controles globales colocados fuera de la pista */
.g-prev-global, .g-next-global {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.09);
    color: #05233b;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 28px;
    box-shadow: 0 10px 28px rgba(2,9,23,0.45);
    cursor: pointer;
    z-index: 20;
}
.g-prev-global { left: 6px; }
.g-next-global { right: 6px; }
.g-prev-global:focus, .g-next-global:focus { outline: 3px solid rgba(255,255,255,0.18); }
/* Colocar las flechas justo fuera de la miniatura para que parezcan globales */
.g-prev { left: -48px; }
.g-next { right: -48px; }
.g-prev:hover, .g-next:hover { transform: translateY(-50%) scale(1.05); background: rgba(255,255,255,0.12); }

.g-item:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 24px 60px rgba(2,9,23,0.75);
}

.g-item:hover img { transform: scale(1.08); }

/* Ajustes responsivos para la galería */
@media (max-width: 900px) {
	.galeria-grid { grid-template-columns: repeat(2, 1fr); }
	.g-item img { height: 200px; }
}

@media (max-width: 520px) {
	.galeria-grid { grid-template-columns: 1fr; }
	.g-item img { height: 260px; }
}

/* Ajustes para mostrar las flechas fuera pero sin recortes en móviles */
@media (max-width: 720px) {
	.galeria-grid { padding-left: 18px; padding-right: 18px; }
	.g-prev { left: 6px; }
	.g-next { right: 6px; }
	.g-item img { height: 160px; }
}

/* Sección Ubicación             */
.ubicacion {
	padding: 60px 6%;
	background: linear-gradient(180deg, #fa9191 0%, #f86868 100%);
	color: #ffffff; /* texto UBICACION */
}
.ubicacion-inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.u-title {
	font-size: 2rem;
	margin-bottom: 8px;
	font-weight: 800;
	/* degradado de texto acorde a otros títulos */
	background: linear-gradient(180deg, #fff 0%, #ffffff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.u-sub {
	color: #fff(102, 0, 0, 0.85);
	margin-bottom: 18px;
	font-size: 1rem;
}
.map-placeholder {
	min-height: 260px;
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid rgba(5,35,59,0.06);
	box-shadow: 0 12px 30px rgba(27,156,216,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	padding: 18px;
	margin-top: 10px;
}

body{
	background: linear-gradient(180deg, #fa9191 0%, #f86868 100%);
}
@media (max-width: 900px) {
	.u-title { font-size: 1.6rem; }
	.map-placeholder { min-height: 200px; }
}

@media (max-width: 520px) {
	.u-title { font-size: 1.25rem; }
	.map-placeholder { min-height: 160px; }
}