/* ==========================================
   VARIABLES GLOBALES
   ========================================== */
:root {
    --color-principal: #07a585; /* turquesa */
    --color-negro: #000000; /* negro */
    --color-blanco: #ffffff; /* blanco */
    --fuente-principal: 'Helvetica', sans-serif;
}

/* ==========================================
   ESTILOS GENERALES
   ========================================== */
* {
    box-sizing: border-box; /* incluye el relleno y el borde dentro del ancho y alto total del elemento */
}

body {
    margin: 0; /* elimina los margenes exteriores predeterminados de la pagina */
    padding: 0; /* elimina el relleno interior predeterminado del cuerpo */
    overflow-x: hidden; /* oculta la barra de desplazamiento horizontal */
    font-family: var(--fuente-principal); /* define la fuente principal */
    background-color: var(--color-principal); /* establece el color de fondo */
}

a {
    text-decoration: none; /* elimina el subrayado de los enlaces */
}

img {
    max-width: 100%; /* evita que la imagen desborde su contenedor */
    display: block; /* convierte la imagen en elemento de bloque */
}


/* ==========================================
   MENU DE NAVEGACION
   ========================================== */

.navbar {
    display: flex; /* activa flexbox */
    align-items: center; /* centra verticalmente */
    justify-content: space-between; /* separa los elementos */
    padding: 10px 30px; /* agrega espacio interno */
    background-color: var(--color-negro); /* fondo negro */
    position: sticky; /* mantiene el menu fijo al hacer scroll */
    top: 0; /* fija el menu arriba */
    z-index: 1000; /* mantiene el menu por encima del contenido */
}


/* ==========================================
   LOGO
   ========================================== */

.navbar > a img {
    height: 45px; /* define la altura del logo */
    width: auto; /* mantiene la proporcion */
}


/* ==========================================
   MENU SUPERIOR
   ========================================== */

.navegacion-superior {
    display: flex; /* coloca los elementos en fila */
    flex-direction: row; /* mantiene los botones en una sola fila */
    align-items: center; /* centra verticalmente */
    justify-content: flex-end; /* mantiene los botones a la derecha */
    gap: 10px; /* separa los botones */
    margin: 0; /* elimina el margen */
    padding: 0; /* elimina el relleno */
    list-style: none; /* elimina las viñetas */
    flex-wrap: nowrap; /* evita que WEBAPP baje */
}


/* ==========================================
   BOTONES DEL MENU
   ========================================== */

.navegacion-superior a {
    display: inline-block; /* permite controlar el enlace como bloque */
    padding: 8px 14px; /* reduce el ancho de los botones */
    background-color: #ffffff; /* fondo blanco */
    color: #07a585; /* texto turquesa */
    font-family: Arial, sans-serif; /* tipografia de los botones */
    font-weight: 500; /* grosor del texto */
    white-space: nowrap; /* evita que el texto se corte */
    border-radius: 6px; /* redondea los botones */
    box-shadow: 0 2px 5px #00000020; /* agrega sombra */
    transition: 0.3s; /* suaviza los cambios */
}


/* ==========================================
   BOTON ACTIVO
   ========================================== */

.navegacion-superior .activo {
    background-color: #07a585; /* fondo turquesa */
    color: #ffffff; /* texto blanco */
}


/* ==========================================
   EFECTO HOVER DEL MENU
   ========================================== */

.navegacion-superior a:hover {
    background-color: #c4fdf2; /* fondo turquesa claro */
    color: #07a585; /* texto turquesa */
    transform: translateY(-2px); /* eleva el boton */
}


/* ==========================================
   HOVER DEL BOTON ACTIVO
   ========================================== */

.navegacion-superior .activo:hover {
    background-color: #fcfafc; /* fondo blanco suave */
    color: #000000; /* texto negro */
}

/* ==========================================
   COMITENTE
   ========================================== */

.comitente {
    width: 100%; /* ocupa todo el ancho disponible */
    max-width: 900px; /* limita el ancho en pantallas grandes */
    box-sizing: border-box; /* incluye el padding dentro del ancho */
    margin: auto; /* centra el contenedor */
    padding: 40px 5%; /* agrega espacio interno sin desbordar */
    color: #ffffff; /* texto blanco */
    text-align: center; /* centra el texto */
    display: flex; /* activa flexbox */
    flex-direction: column; /* coloca los elementos en columna */
    align-items: center; /* centra los elementos */
    gap: 30px; /* separa los elementos */
    min-width: 0; /* permite que el contenido se reduzca */
}

.comitente figure {
    margin: 0; /* elimina el margen */
    width: 60%; /* define el ancho de la imagen */
    max-width: 100%; /* evita que se salga */
}

.comitente img {
    width: 100%; /* ocupa todo el ancho */
    max-width: 100%; /* evita que se salga */
    height: auto; /* mantiene la proporcion */
}

.comitente figcaption {
    margin-top: 10px; /* separa el texto de la imagen */
    max-width: 100%; /* evita que el texto se salga */
    overflow-wrap: break-word; /* permite cortar palabras si es necesario */
}

.onu {
    width: 100%; /* ocupa todo el ancho disponible */
    max-width: 100%; /* evita que se salga del contenedor */
    min-width: 0; /* permite que flex reduzca el ancho */
    box-sizing: border-box; /* incluye el ancho correctamente */
    display: flex; /* activa flexbox */
    flex-direction: column; /* coloca los textos en columna */
    align-items: center; /* centra los textos */
    gap: 10px; /* separa los textos */
}

.onu h2 {
    width: 100%; /* ocupa el ancho disponible */
    max-width: 100%; /* evita que se salga */
    margin: 0; /* elimina el margen */
    overflow-wrap: break-word; /* permite cortar palabras */
    word-wrap: break-word; /* permite adaptar palabras largas */
}

.onu h2 span {
    display: block; /* coloca cada parte en una linea */
    white-space: normal; /* permite varias lineas */
    max-width: 100%; /* evita que se salga */
    overflow-wrap: break-word; /* permite cortar palabras */
}

.onu p {
    width: 100%; /* ocupa el ancho disponible */
    max-width: 100%; /* evita que se salga */
    margin: 0; /* elimina los margenes */
    overflow-wrap: break-word; /* permite cortar palabras */
    word-wrap: break-word; /* permite adaptar palabras largas */
}

.onu p span {
    display: block; /* coloca cada parte en una linea */
    white-space: normal; /* permite varias lineas */
    max-width: 100%; /* evita que se salga */
    overflow-wrap: break-word; /* permite cortar palabras */
}


/* ==========================================
   INTEGRANTES DEL ROTULO GRUPAL
   ========================================== */

.integrantes {
    padding: 5rem 2rem; /* agrega espacio interno */
    background-color: #000000; /* fondo negro */
    text-align: center; /* centra el contenido */
}

.integrantes h2 {
    margin: 0 0 20px; /* separa el titulo */
    color: #ffffff; /* color blanco */
    font-size: 1.6rem; /* tamano del titulo */
}

.integrantes article {
    display: flex; /* activa flexbox */
    flex-wrap: wrap; /* permite pasar a otra linea */
    justify-content: center; /* centra las tarjetas */
    gap: 2rem; /* separa las tarjetas */
    max-width: 1000px; /* limita el ancho */
    margin: auto; /* centra el contenedor */
}

.integrantes article a {
    flex: 0 1 220px; /* define el tamano de cada tarjeta */
    color: inherit; /* hereda el color */
    display: block; /* convierte el enlace en bloque */
    border: 1px solid #07a585; /* agrega borde turquesa */
    text-align: center; /* centra el contenido */
    transition: 0.5s; /* suaviza los cambios */
}

.integrantes article a:hover {
    transform: scale(1.04); /* aumenta la tarjeta */
}

.integrantes article img {
    width: 150px; /* define el ancho de la foto */
    height: 150px; /* define el alto de la foto */
    object-fit: cover; /* evita deformar la imagen */
    margin: 8px auto; /* centra la imagen */
}

.integrantes h3 {
    margin: 0 0 5px; /* separa el nombre */
    color: #f5f7f9; /* color del nombre */
    font-size: 1.05rem; /* tamano del nombre */
}

.integrantes p {
    margin: 0 0 10px; /* separa el rol */
    color: #07a585; /* color turquesa */
    font-size: 0.7rem; /* tamano del rol */
}

.integrantes span {
    display: flex; /* activa flexbox */
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra horizontalmente */
    width: 26px; /* ancho del circulo */
    height: 26px; /* alto del circulo */
    margin: 10px auto; /* centra el circulo */
    border: 2px solid #07a585; /* borde turquesa */
    border-radius: 50%; /* convierte en circulo */
    color: #07a585; /* color del simbolo */
    font-weight: bold; /* texto en negrita */
}

.integrantes article a:hover span {
    background-color: #07a585; /* rellena el circulo */
    color: #000000; /* cambia el simbolo a negro */
}


/* ==========================================
   MAPA DE CONTENIDOS
   ========================================== */

.mapa {
    background-color: #07a585; /* fondo negro */
    
}

header figure {
    margin: 50px auto 30px; /* centra y separa las figuras */
    text-align: center; /* centra el texto */
}

header figure img {
    display: block; /* permite controlar la imagen */
    width: 90%; /* define el ancho */
    max-width: 500px; /* limita el ancho */
    height: auto; /* mantiene la proporcion */
    margin: auto; /* centra la imagen */
}

header figcaption {
    margin-top: 10px; /* separa el texto */
    color: #ffffff; /* color blanco */
}


/* ==========================================
   FOOTER
   ========================================== */

.footer {
    padding: 4rem 2rem 2rem; /* agrega espacio interno */
    background-color: #000000; /* fondo negro */
    color: #ffffff; /* texto blanco */
}


/* ==========================================
   DATOS ACADEMICOS DEL ROTULO GRUPAL
   ========================================== */

.datos-academicos {
    padding: 2rem 0; /* agrega espacio vertical */
    border-top: 1px solid #07a585; /* linea superior */
    border-bottom: 1px solid #07a585; /* linea inferior */
}

.datos-academicos h2 {
    margin: 0 0 2rem; /* separa el titulo */
    color: #07a585; /* color turquesa */
    font-size: 1.4rem; /* tamano del titulo */
    text-align: center; /* centra el titulo */
}

.footer-columns {
    display: flex; /* organiza las columnas */
    justify-content: center; /* centra las columnas */
    gap: 3rem; /* separa las columnas */
}

.dato-academico {
    width: 280px;
    text-align: left;
}

.footer-columns h3 {
    margin: 0 0 10px; /* separa el subtitulo */
    color: #07a585; /* color turquesa */
    font-size: 0.95rem; /* tamano del subtitulo */
}

.footer-columns p {
    margin: 0; /* elimina el margen */
    color: #ffffff; /* color blanco */
    font-size: 0.6rem; /* tamano del texto */
    line-height: 1.6; /* separa las lineas */
}

/* ==========================================
   DISCLAIMER
   ========================================== */

.footer-disclaimer {
    max-width: 1000px; /* limita el ancho */
    margin: 2rem auto 0; /* centra el bloque */
    text-align: left; /* alinea el texto a la izquierda */
}

.footer-disclaimer p {
    margin: 0; /* elimina los margenes */
    color: #ffffff; /* texto blanco */
    font-size: 0.65rem; /* tamano pequeno */
    line-height: 1.6; /* ajusta el interlineado */
    opacity: 0.75; /* reduce la opacidad */
}


/* ==========================================
   PLAN
   ========================================== */

.introduccion-plan {
    max-width: 900px; /* limita el ancho */
    margin: auto; /* centra la seccion */
    padding: 50px 30px 30px; /* agrega espacio */
    text-align: center; /* centra el texto */
    color: #ffffff; /* color blanco */
}

.introduccion-plan h1 {
    margin: 0 0 20px; /* separa el titulo */
    font-size: 2rem; /* tamano del titulo */
}

.introduccion-plan p {
    margin: 0 auto; /* centra el parrafo */
    max-width: 600px; /* limita el ancho */
    line-height: 1.6; /* aumenta el interlineado */
    font-size: 1rem
}


/* ==========================================
   IMAGENES DEL PLAN
   ========================================== */

.imagenes-plan {
    display: flex; /* activa flexbox */
    justify-content: center; /* centra las imagenes */
    gap: 40px; /* separa las imagenes */
}

.imagenes-plan figure {
    width: 40%; /* define el ancho */
    margin: 0; /* elimina el margen */
}

.imagenes-plan img {
    width: 100%; /* ocupa todo el ancho */
    height: auto; /* mantiene la proporcion */
}

.plan figcaption {
    margin-top: 10px; /* separa el texto */
    color: #ffffff; /* color blanco */
    margin-bottom: 40px; /* agrega espacio abajo */
}


/* ==========================================
   RESPONSIVE - ADAPTACION A PANTALLAS CHICAS
   ========================================== */

@media (max-width: 700px) {

    .navbar {
        flex-direction: column; /* coloca el menu en columna */
        gap: 15px; /* separa los elementos */
    }


    .integrantes article {
        flex-direction: column; /* apila las tarjetas */
        align-items: center; /* centra las tarjetas */
    }

    .imagenes-plan {
        flex-direction: column; /* apila las imagenes */
        align-items: center; /* centra las imagenes */
    }

    .imagenes-plan figure {
        width: 100%; /* ocupa todo el ancho */
    }

    .footer {
        padding: 3rem 1.5rem 1.5rem; /* reduce el espacio del footer */
    }

    .footer-columns {
        grid-template-columns: 1fr; /* crea una sola columna */
        gap: 1.5rem; /* reduce la separacion */
        text-align: center; /* centra el contenido */
    }
}