@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Open Sans', sans-serif;
}

:root {
    --bg-color: #fdfdfd;
    --text-color: #fdfdfd;
    --main-color: #007A6E;
    --white-color: #fdfdfd;
    --shadow-color: rgba(0, 0, 0, 0.2);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fdfdfd; /* Asegúrate de tener un fondo para que el contenido debajo no se muestre a través */
    z-index: 1000; /* Esto coloca el header sobre otros elementos */
    padding: 2rem;
}

.logo {
    max-width: 15%;
}

.nav-list {
    list-style-type: none;
    display: flex;
    gap: 2rem;
}

.nav-list a {
    color: #5a3e3e;
    font-size: 1.6rem;
    font-weight: 600;
}


.nav-list li a {
    text-decoration: none;
    color: #5a3e3e;
}

.abrir-menu,
.cerrar-menu {
    display: none;
}

section {
    min-height: 100vh;
    padding: 10rem 7% 2rem;
}

.home {
    display: flex;
    align-items: center;
    background-color: #007A6E; /* Color de respaldo */
    background: linear-gradient(to top right, #004f2d, #00a99d);
    justify-content: space-between;
}

.contenido-home {
    flex: 3; /* Ocupa 3 veces más espacio que el contenedor de la comunidad */
    max-width: 70rem; /* Ajusta o elimina según sea necesario para controlar el ancho máximo */
}

.contenido-home h1 {
    font-size: 6rem;
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1;
}


.contenido-home .texto-titulo {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contenido-home .texto-subtitulo {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contenido-home .texto-texto {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.6;
}

.contenedor-comunidad {
    flex: 1; /* Menor espacio relativo comparado con contenido-home */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.imagen-comunidad {
    max-width: 30%; /* O un valor específico */
    height: auto; /* Mantén la proporción */
}

.imagen-comunidad2 {
    border-radius: 50%;
    object-fit: cover;
    width: 70%; /* Ajusta el tamaño según necesites */
    height: auto; /* Mantén el mismo valor que el width para conservar la forma circular */
    margin: 0 auto; /* Continúa centrando la imagen */
}

.capacitacion {    
    background-color: #ffffff;
    align-items: start;
}

.capacitacion-contenido {
    display: flex;
    align-items: start; /* Alinea verticalmente los elementos al centro */
    justify-content: center; /* Espacia los elementos uniformemente */
    gap: 20px; /* Espacio entre la imagen y el texto */
}

.capacitacion-contenido h2 {
    color: #0d5431ff;
    text-align: center;
    font-size: 5.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.capacitacion-apartados {
    display: flex; /* Posiciona los apartados horizontalmente */
    justify-content: space-between; /* Espacia los apartados uniformemente */
    gap: 20px; /* Espacio entre los apartados */
    margin-top: 2rem;
}

.apartado-izquierdo-capacitacion {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto centrará los elementos hijos horizontalmente */
    justify-content: center; /* Esto centrará los elementos hijos verticalmente si es necesario */ 
}
.apartado-derecho-capacitacion {
    flex: 1.5; /* Reducir el espacio asignado al derecho */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el contenido a la izquierda */
    padding-top: 5rem;
}

.apartado-derecho-capacitacion h3 {
    color: #000;
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1;
    margin-bottom: 3.2rem;
}

.apartado-derecho-capacitacion .texto-normal-capacitacion {
    color: #000000;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1.6;
}

.apartado-derecho-capacitacion .texto-negrita-capacitacion {
    color: #000000;
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.6;
}

.apartado-izquierdo-capacitacion .imagen-capacitacion{
    width: auto; /* Cambia a auto o un porcentaje menor para que no se exceda */
    max-width: 50%; /* Asegura que la imagen no exceda el ancho de su contenedor */
    border-radius: 50%;
    height: auto;
    margin: 0 auto; /* Centra la imagen horizontalmente */
}

.boton-capacitacion {
    background-color: #1e8875ff; 
    color: #fff;
    font-weight: 900; 
    border: none; 
    padding: 1rem 2rem; /* Ajusta el espaciado interno del botón para dar espacio al texto */
    border-radius: 5rem; /* Ajusta para obtener esquinas redondeadas */
    font-size: 1.5rem; /* Ajusta el tamaño del texto dentro del botón */
    cursor: pointer; /* Cambia el cursor a mano cuando se pasa sobre el botón */
    text-decoration: none; /* Si es un enlace disfrazado de botón, quita el subrayado */
    margin-top: 1rem; /* Ajusta esto para que coincida con el espaciado de tu diseño */
    margin-left: auto; /* Centra el botón horizontalmente */
    margin-right: auto; /* Centra el botón horizontalmente */
    width: auto; /* El ancho del botón se ajustará al contenido */
    max-width: 55%; /* Evita que el botón sea demasiado ancho */
    display: block; /* Hace que el margen auto funcione para centrar el botón */
    text-align: center; /* Asegura que el texto esté centrado dentro del botón */
}

.apartado-izquierdo-capacitacion .imagen-capacitacion {
    /* Tus estilos existentes aquí */
    display: block; /* Esto asegura que la imagen sea tratada como un bloque para centrado */
    margin: 0 auto; /* Esto centrará la imagen horizontalmente dentro de su contenedor */
}

.capacitacion-footer {
    display: flex;
    align-items: start; /* Alinea verticalmente los elementos al centro */
    justify-content: center; /* Espacia los elementos uniformemente */
    gap: 20px; /* Espacio entre la imagen y el texto */
    margin-top: 2rem;
}

.capacitacion-footer h2 {
    color: #fdfdfd;
    text-align: center;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.3;
}

.capacitacion-footer-boton {
    display: flex;
    align-items: start; /* Alinea verticalmente los elementos al centro */
    justify-content: center; /* Espacia los elementos uniformemente */
    gap: 20px; /* Espacio entre la imagen y el texto */
    margin-top: 1rem;
}

.boton-capacitacion-footer {
    background-color: #1e8875ff; 
    color: #fff;
    font-weight: 900; 
    border-radius: 5rem; /* Esquinas redondeadas */
    font-size: 1.8rem; /* Tamaño del texto */
    cursor: pointer; /* Cambia el cursor a mano cuando se pasa sobre el botón */
    text-decoration: none; /* Si es un enlace disfrazado de botón, quita el subrayado */
    margin-top: 0.3rem; /* Espaciado superior */
    margin-bottom: 2rem;
    margin-left: auto; /* Centra el botón horizontalmente */
    margin-right: auto; /* Centra el botón horizontalmente */
    width: 20%; /* Ancho del botón como un porcentaje del contenedor padre */
    max-width: none; /* Sin restricción de ancho máximo */
    padding: 1rem 2rem; /* Espaciado interno para texto */
    display: block; /* Hace que el margen auto funcione para centrar el botón */
    text-align: center; /* Texto centrado dentro del botón */
    white-space: normal; /* Permite que el texto ocupe múltiples líneas */
}


/* Inicio de todos los media querys */
/* Pantallas mediana-grande */
@media (max-width: 1200px) {  

    .home .contenedor-comunidad{
        flex: 2;
    }
  
    /* Ajustar tamaños de texto para mejorar la legibilidad en pantallas más pequeñas */
    .contenido-home h1 {
      font-size: 4rem; /* Ajusta según sea necesario */
    }
    .contenido-home .texto-texto {
        font-size: 1.8rem;
    }
    .contenido-home .texto-titulo {
        font-size: 2rem;
    }

    .contenido-home .texto-subtitulo {
        font-size: 1.8rem;
    }

    .contenedor-comunidad .imagen-comunidad {
        max-width: 40%; /* O un valor específico */
        height: auto; /* Mantén la proporción */
    }
    
     .contenedor-comunidad .imagen-comunidad2 {
        width: 80%; /* Ajusta el tamaño según necesites */
        height: auto; /* Mantén el mismo valor que el width para conservar la forma circular */
        margin-top: -2rem;
    }

    .capacitacion-apartados .apartado-izquierdo-capacitacion {
        flex: 1.5;
    }

    .capacitacion-contenido .titulo-capacitacion{
        font-size: 4rem;
    }

    .capacitacion-apartados .imagen-capacitacion {
        width: 100%; /* Ajusta el tamaño según necesites */
        max-width: 70%; /* Asegura que la imagen no exceda el ancho de su contenedor */
        height: auto;
        margin: 0 auto; /* Centra la imagen horizontalmente */
    }

    .capacitacion-apartados .boton-capacitacion {
        font-size: 1.5rem;
        width: 100%;
        max-width: 70%;
        padding: 1rem 3rem;
    }

    .capacitacion-footer .titulo-capacitacion-footer{
        font-size: 2.5rem;
    }

    .capacitacion-footer .boton-capacitacion-footer {
        font-size: 2rem;
        width: 100%;
        max-width: 40%;
        padding: 1rem 3rem;
    }

}

/* Pantallas medianas */
@media (max-width: 1024px) {  

    .abrir-menu,
    .cerrar-menu {
        display: block;
        border: 0;
        font-size: 3rem;
        background-color: transparent;
        cursor: pointer;
    }

    .abrir-menu {
        color: #5a3e3e;
    }

    .cerrar-menu {
        color: #5a3e3e;
    }

    .nav {
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 1rem;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #fdfdfd;
        padding: 2rem;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    }

    .nav.visible {
        opacity: 1;
        visibility: visible;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: end;
    }

    .nav-list li a {
        color: #fdfdfd;
    }

    .home {
        flex-direction: column; /* Cambia los elementos a una columna en pantallas más pequeñas */
        align-items: center; /* Centra los elementos horizontalmente */
    }
  
    /* Ajustar tamaños de texto para mejorar la legibilidad en pantallas más pequeñas */
    .contenido-home h1 {
      font-size: 3rem; /* Ajusta según sea necesario */
    }

    .contenido-home .texto-texto {
        font-size: 2rem;
    }

    .contenido-home .texto-titulo {
        font-size: 2rem;
    }

    .contenido-home .texto-subtitulo {
        font-size: 2rem;
    }


    .contenedor-comunidad .imagen-comunidad {
        max-width: 60%; /* O un valor específico */
        height: auto; /* Mantén la proporción */
    }
    
    .contenedor-comunidad .imagen-comunidad2 {
        width: 90%; /* Ajusta el tamaño según necesites */
        height: auto; /* Mantén el mismo valor que el width para conservar la forma circular */
        margin-top: -2rem;
    }

    .capacitacion {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .capacitacion-contenido,
    .capacitacion-apartados,
    .apartado-izquierdo-capacitacion,
    .apartado-derecho-capacitacion {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%; /* Asegura que ocupen el ancho completo del contenedor padre */
    }

    .capacitacion-contenido .titulo-capacitacion{
        font-size: 3.5rem;
    }

    .capacitacion-apartados .imagen-capacitacion {
        width: 100%; /* Ajusta el tamaño según necesites */
        max-width: 40%; /* Asegura que la imagen no exceda el ancho de su contenedor */
        height: auto;
        margin: 0 auto; /* Centra la imagen horizontalmente */
    }

    .capacitacion-apartados .boton-capacitacion {
        font-size: 1.4rem;
        width: 100%;
        max-width: 55%;
        padding: 1rem 3rem;
    }

    .capacitacion-footer .titulo-capacitacion-footer{
        font-size: 2.5rem;
    }

    .capacitacion-footer .boton-capacitacion-footer {
        font-size: 2rem;
        width: 100%;
        max-width: 100%;
        padding: 1rem 3rem;
    }

    .capacitacion-footer .titulo-capacitacion-footer{
        font-size: 2.2rem;
    }
}

/* Pantallas pequeña-mediana */
@media (max-width: 790px) {

    .home {
        flex-direction: column; /* Cambia los elementos a una columna en pantallas más pequeñas */
        align-items: center; /* Centra los elementos horizontalmente */
    }
    
    .contenido-home h1 {
        font-size: 2.5rem; /* Ajusta según sea necesario */
        margin-top: 3rem;
    }
    
    .contenido-home .texto-texto {
        font-size: 1.5rem;
    }
  
    .contenido-home .texto-titulo {
        font-size: 1.5rem;
    }

    .contenido-home .texto-subtitulo {
        font-size: 1.5rem;
    }
    
    .contenedor-comunidad .imagen-comunidad {
        max-width: 60%; /* O un valor específico */
        height: auto; /* Mantén la proporción */
    }

    .contenedor-comunidad .imagen-comunidad2 {
        width: 100%; /* Ajusta el tamaño según necesites */
        height: auto; /* Mantén el mismo valor que el width para conservar la forma circular */
    }
    
    .capacitacion-apartados .boton-capacitacion {
        font-size: 1.2rem;
        width: 100%;
        max-width: 65%;
        padding: 1rem 3rem;
    }

    .capacitacion-footer .titulo-capacitacion-footer{
        font-size: 2rem;
    }
}

/* Pantallas pequeñas */
@media (max-width: 480px) {

    .home .contenido-home h1 {
        font-size: 2rem; /* Ajusta según sea necesario */
        margin-top: 5.5rem;
    }

    .home .contenido-home .texto-texto {
        font-size: 2rem;
    }
    .home .contenido-home .texto-titulo {
        font-size: 2rem;
    }

    .home .contenido-home .texto-subtitulo {
        font-size: 2rem;
    }

    .contenedor-comunidad .imagen-comunidad {
        max-width: 40%; /* O un valor específico */
        height: auto; /* Mantén la proporción */
    }
    
    .contenedor-comunidad .imagen-comunidad2 {
        width: 60%; /* Ajusta el tamaño según necesites */
        height: auto; /* Mantén el mismo valor que el width para conservar la forma circular */
        margin-top: -2rem;
    }

    .boton-certificacion {
        font-size: 1rem;
        width: 70%;
        padding: 1rem 3rem;
    }

    .capacitacion-apartados .boton-capacitacion {
        font-size: 1rem;
        width: 100%;
        max-width: 75%;
        padding: 1rem 3rem;
    }
}