/* 
El selector universal (*) elimina márgenes y rellenos por defecto de todos los elementos,
asegura que el box-sizing sea border-box (para que padding y border no sumen al ancho/alto),
y define una fuente base para todo el sitio.
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 
El body tiene una imagen de fondo llamada IMG15.jpg, que se ajusta a cubrir toda la pantalla.
Esta imagen debe estar en la misma carpeta que tu archivo CSS o en la ruta especificada.
*/
body {
    background-image: url(IMG15.jpg);
    background-size: cover;
    transition: background-image 1s ease; /* Suaviza el cambio */
}


/* 
Estilos para el título principal (h1): fuente sans-serif, centrado, tamaño grande,
fondo rosa fuerte, texto blanco y espacio superior.
*/
h1{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 54px;
    background-color: rgb(241, 75, 108);
    color: #fff;
    padding-top: 20px;
}

/* 
Contenedor con fondo semitransparente negro, ocupa todo el ancho.
*/
.cont-fond{
    background-color: rgba(0, 0, 0, .6);
    width: 100%;
}

/* 
Barra de navegación: ancho máximo, centrada, fondo blanco, fuente grande.
*/
nav{
    max-width: 100%;
    margin: auto;
    background-color: #ffffff;
    font-size: 25px;
}

/* 
Menú horizontal: elimina viñetas, usa flex para distribuir los elementos equitativamente.
*/
.menu-horizontal{
    list-style: none;
    display: flex;
    justify-content: space-around;
}

/* 
Enlaces del menú: bloque, espacio interior amplio, color negro, sin subrayado, fuente base.
*/
.menu-horizontal>li>a{
    display: block;
    padding: 15px 76px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 
Al pasar el mouse sobre un enlace del menú, el fondo se vuelve rosa y el texto blanco.
*/
.menu-horizontal > li a:hover{
    background-color: rgb(238, 99, 127);
    color: #fff;
}

/* 
Menú vertical (submenú): posición absoluta, oculto por defecto, fondo negro semitransparente.
*/
.menu-vertical{
    position: absolute;
    display: none;
    list-style: none;
    width: 210px;
    background-color: rgba(0, 0, 0, .5);
}

/* 
Al pasar el mouse sobre un elemento del menú horizontal, muestra el submenú.
*/
.menu-horizontal li:hover .menu-vertical{
    display: block;
}

/* 
Al pasar el mouse sobre un enlace del submenú, fondo negro y texto blanco.
*/
.menu-vertical li a:hover{
    background-color: black;
    color: #fff;
}

/* 
Estilo base para enlaces del submenú: texto gris claro, espacio interior, sin subrayado.
*/
.menu-vertical li a{
    display: block;
    color: rgb(189, 186, 186);
    padding: 15px 15px 15px 20px;
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 
Se repite el selector universal para asegurar márgenes y rellenos en cero.
*/
*{
    margin: 0;
    padding: 0;
}

/* 
Sección decorativa con olas animadas (footer visual): posición relativa, alto fijo, fondo transparente.
*/
section{
    position: relative;
    width: 100%;
    height: 150px;
    background: #3586ff00;
    overflow: hidden;
}

/* 
Las olas se logran con varias capas .air, cada una usa una imagen de ola desde una URL externa.
Esta imagen NO está en tu carpeta, sino enlazada desde internet:
https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png
*/
section .air{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png); /* IMAGEN DE OLA */
    background-size: 1000px 100px
}

/* 
Cada capa de ola tiene diferente animación, opacidad y z-index para crear efecto de movimiento.
*/
section .air.air1{
    animation: wave 30s linear infinite;
    z-index: 1000;
    opacity: 1;
    animation-delay: 0s;
    bottom: 0;
}
section .air.air2{
    animation: wave2 15s linear infinite;
    z-index: 999;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10px;
}
section .air.air3{
    animation: wave 30s linear infinite;
    z-index: 998;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 15px;
}
section .air.air4{
    animation: wave2 5s linear infinite;
    z-index: 997;
    opacity: 0.7;
    animation-delay: -5s;
    bottom: 20px;
}

/* 
Animaciones de las olas: mueven la imagen de fondo de izquierda a derecha y viceversa.
*/
@keyframes wave{
    0%{ background-position-x: 0px; }
    100%{ background-position-x: 1000px; }
}
@keyframes wave2{
    0%{ background-position-x: 0px; }
    100%{ background-position-x: -1000px; }
}

/* 
Contenedor para frases: ancho 50%, centrado, altura 80% del viewport, centra contenido vertical y horizontalmente.
*/
.cont-frase{
    width: 50%;
    margin-left: auto;
    margin-right:auto ;
    text-align: center;
    height:80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 
Frase principal: tamaño grande, color blanco, peso normal.
*/
.cont-frase>h2{
    font-size: 80px;
    color: #fff;
    font-weight: 400;
	font-family:"Arial Black", Gadget, sans-serif;
	
}

/* 
Pie de página: ancho completo, fondo blanco, espacio interior, texto centrado.
*/
.cont-footer{
    width: 100%;
    background-color: #fff;
    padding: 20px;
    text-align: center;
}

/* 
Sección de contenido principal: ancho 80%, fondo blanco, centrado.
*/
.cont-section{
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
}

/* 
Título de sección: fondo naranja, ancho 80%, centrado, espacio interior, margen superior grande.
*/
.title-section {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  background-size: 150% 150%;
  animation: gradientMove 8s ease infinite;

  width: 80%;
  margin: 150px auto 0 auto;
  padding: 30px 20px;
  border-radius: 16px;
  box-sizing: border-box;
  text-align: center;

  color: #f0f8ff;
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 0 5px #ffffffaa;

  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInRise 1.3s ease-out forwards, glowPulse 4s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.title-section1 {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  background-size: 150% 150%;
  animation: gradientMove 8s ease infinite;

  width: 68%;
  margin: 150px auto 0 auto;
  padding: 30px 20px;
  border-radius: 16px;
  box-sizing: border-box;
  text-align: center;

  color: #f0f8ff;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 0 5px #ffffffaa;

  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInRise 1.3s ease-out forwards, glowPulse 4s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.title-section:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 170, 255, 0.4);
  cursor: pointer;
}

/* Fondo animado más lento */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Entrada suave */
@keyframes fadeInRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulso de brillo suave */
@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 5px #ffffffaa, 0 0 10px #00c6ff66;
  }
  50% {
    text-shadow: 0 0 8px #ffffffcc, 0 0 14px #00d6ff88;
  }
}



/* 
Texto del título de sección: tamaño grande, peso medio, color blanco.
*/
.title-section>h2{
    font-size: 32px;
    font-weight: 500;
    color: #fff;
}

/* 
Contenedor de niveles: usa flex para poner dos columnas.
*/
.cont-level{
    width: 100%;
    display: flex;
}

/* 
Cada nivel: ancho 50%, texto justificado, margen, tamaño de fuente medio, color gris oscuro.
*/
.level{
    width: 50%;
    font-size: 18px;
    color: #414040;
    text-align: justify;
    margin: 30px;
}

/* 
Título de cada nivel: tamaño medio, peso normal, margen inferior.
*/
.level>h3{
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 10px;
}

/* 
Imagen histórica: ancho 95%, centrada.
*/
.img-hist{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* 
Contenedor principal con fondo en gradiente y una imagen de fondo:
La imagen de fondo es INFRAESTRUCTURA/IMG28.jpg (debe estar en la carpeta INFRAESTRUCTURA).
Se ajusta centrada, cubre todo el contenedor, no se repite.
*/
.contenedor {
    background:linear-gradient(
    50deg,
    rgb(40, 42, 55)30%,
    rgba(40,42,55,0.4)
    ),url(INFRAESTRUCTURA/IMG28.jpg); /* IMAGEN DE FONDO DE INFRAESTRUCTURA */
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    padding:50px;
    width:1000px;
    border-radius:10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 
Título dentro del contenedor: color blanco, tamaño grande, margen inferior, peso normal.
*/
.contenedor h2{
    color:#FFFFFF;
    font-size:36px;
    margin-bottom:25px;
    font-weight: 400;
}

/* 
Formulario: disposición en columna, ancho 50%.
*/
form {
    display:flex;
    flex-direction:column;
    width:50%;
}

/* 
Etiquetas del formulario: tamaño medio, color blanco, margen inferior.
*/
label{
    font-size:16px;
    color:#FFFFFF;
    margin-bottom:10px;
}

/* 
Campos de entrada y área de texto: espacio interior, fondo gris claro, sin borde, tamaño medio,
color gris oscuro, margen inferior, bordes redondeados.
*/
input,textarea{
    padding:10px 14px;
    background-color:#ebebeb;
    border:0;
    font-size:16px;
    color:#323233;
    margin-bottom:20px;
    border-radius:5px;
}

/* 
Cuando un campo está enfocado, muestra un borde rosa.
*/
:focus{
    outline:2px solid rgb(241, 75, 108);
}

/* 
Botón principal: fondo rosa, ancho fijo, texto blanco.
*/
.boton1 {
    background-color:#fa52a6;
    width:150px;
    color:#FFFFFF
}

/* 
Al pasar el mouse sobre el botón, fondo rosa más oscuro.
*/
.boton1:hover {
    background-color:rgb(241, 75, 108);
}
#img-especial {
    width: 1000px;      /* ancho fijo */
    height: auto;       /* altura proporcional */
    display: block;     /* elimina espacio en línea */
    margin: 0 auto;     /* centra la imagen */
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* transición suave para transformaciones */
    cursor: pointer;    /* cambia el cursor para indicar interactividad */
}
#img-especial1 {
   
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* transición suave para transformaciones */
    cursor: pointer;    /* cambia el cursor para indicar interactividad */
}
/* Al pasar el mouse, la imagen hace zoom y agrega sombra */
#img-especial1:hover {
    transform: scale(1.05);      /* agranda la imagen un 5% */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* sombra suave */
}

/* Al pasar el mouse, la imagen hace zoom y agrega sombra */
#img-especial:hover {
    transform: scale(1.05);      /* agranda la imagen un 5% */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* sombra suave */
}


#img-especial2 {
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* transición suave para transformaciones */
    cursor: pointer;    /* cambia el cursor para indicar interactividad */
}
#img-especial2:hover {
    transform: scale(1.02);      /* agranda la imagen un 5% */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* sombra suave */
}

#img-especial3 {
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* transición suave para transformaciones */
    cursor: pointer;    /* cambia el cursor para indicar interactividad */
}
#img-especial3:hover {
    transform: scale(1.05);      /* agranda la imagen un 5% */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* sombra suave */
}
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 700px; /* puedes ajustar el tamaño */
  margin: auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carousel-track-container {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0;
  margin: 0;
  list-style: none;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-slide img {
  width: 100%;
  height: 400px; /* puedes ajustar este valor */
  object-fit: cover;
  display: block;
}

/* Botones de navegación */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 2rem;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 1;
  transition: background 0.3s ease;
  border-radius: 50%;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}