/*Inicio*/
html {
    box-sizing: border-box;
    font-size: 50%;
    margin: 0;
    overflow-x: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    overflow-x: hidden;
}

.simple-linear{
    background: linear-gradient( aquamarine, rgb(108, 243, 202), #40A050);
}

/*Header del Sitio web*/
header {
    width: 100%;
    max-width: 100%;
    background-color: black;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  header nav ul {
    flex-direction: column;
    gap: 10px;
  }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/*Logotipo Sitio web*/
.logo img {
    height: 100px;
    width: auto;
}
.logo {
    
}
/*img{
    margin: 5px 5px;
}*/
header {
    background-color: black;
}

/*NAVEGACIÓN*/
nav {
    width: 100%;
    display: flex;
    align-items: left;
    justify-content: space-between;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.navbar-brand img {
    height: 150px; /* ajusta el tamaño del logo */
    width: auto;
}

/*Esta clase cambia el color del texto y el ícono hamburguesa del navbar-toggler*/
.navbar-toggler {
    border-color: #fff; /*Color del borde del botón hamburguesa*/
}

.navbar-toggler-icon {
    background-color: #fff; /*Cambiamos el color del ícono del menú hamburguesa*/
}

/*Con estilos responsivos: las imágenes se escalan según el tamaño del dispositivo*/
@media (max-width: 768px) {
    .banner-img img {
        max-height: 400px;  /*Reducimos el tamaño máximo en pantallas más pequeñas*/
    }
}

@media (max-width: 480px) {
    .banner-img img {
        max-height: 300px;  /*Este es el tamaño máximo para dispositivos móviles*/
    }
}

.navbar-toggler {
    margin-left: auto;
}

a:hover {
    color: rgb(180, 245, 164);
    font-size: 18px;
}

.logo img {
    height: 200px;
    width: auto;
}

.login {
    margin-right: 20px; /*Se asigna un espacio a la derecha del ícono*/
    color: black;
}
.login:hover {
    color: rgb(180, 245, 164);
    font-size: 18px;
}

/*Colocamos los iconos separados*/
@media (max-width: 768px) {
    .navbar-toggler {
        order: 1;
        }
        .login {
        order: 2;
    }
}

.login i {
    font-size: 24px;
    color: #fff; /*Ajustamo el color del icono según sea conveniente*/
}
/*.input-group-text {
    cursor: pointer; /* Cambia el cursor a mano cuando se pase sobre el icono */
/*}*/

/*SECCIONES TALLERES Y EVENTOS*/
.contenedor_secciones,
.contenedor_seccion{
    max-width: 1200%;
}

p {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: left; /* Alineación inicial para resoluciones mayores */
}

/* Párrafos justificados en pantallas de hasta 768px */
@media (max-width: 768px) {
    .parrafo {
        text-align: justify;
        font-size: 10px; /*Se realiza un ajuste si se requiere del tamaño del texto */
    }
}

.contenedor_secciones {
    display: flex;
    flex-direction: column;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    max-width: 1200px;
    padding: 3rem;
    background-color: rgb(200, 238, 225);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    /*margin-bottom: 30px; /* Aumenta el espacio entre las secciones */
    border-radius: 10px;
    text-align: justify;
    height: 50%;
}

.contenedor_seccion {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 1200px;
    padding: 3rem;
    background-color: rgb(230, 75, 140);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    border-radius: 10px;
    text-align: justify;
    height: 50%;
}

.secciones {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem; /* Espacio entre la sección y el botón */
    align-items: flex-start;
    border-radius: 10px;
    text-align: justify;
    height: 90%;
    margin: 1rem;
}

.contenido{
    display: flex;
    align-items: center;
    padding: 20px;
}

.parrafo-section {
    font-size: 2rem;
    text-align: justify;
}

.contenido img.circular {
    width: 300px; /* Aumenta el tamaño de las imágenes */
    height: 300px; /* Asegura que sean proporcionales */
}

/* Se ajustar imagen para las pantallas pequeñas */
@media (max-width: 768px) {
    img {
       width: 100px;
       height: 100px;
    }
}

/* Ajustar el tamaño del texto en pantallas pequeñas */
@media (max-width: 768px) {
    .parrafo {
        font-size: 0.5rem;
    }
}

.button-wrapper{
    text-align: right;
    width: 100%;
}

.secciones img {
    max-width: 300px;
    margin-right: 5px;
    border-radius: 50%;
}

.secciones p {
    margin: 0;
    color: #333;
    text-align: justify;
    text-transform: uppercase;
    font-size: larger;
    font-weight: 500;
    flex-grow: 1;
}

.btn-section {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
}
.btn-section:hover{
    background-color: #137523;
    color: white;
    font-weight: bold;
}

/*SECCIONES RESPONSIVAS*/
.contenido {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre la imagen y el texto */
}

.circular {
    width: 150px; /* Tamaño de la imagen en pantallas grandes */
    height: 150px;
    border-radius: 50%; /* Hace la imagen circular */
    object-fit: cover; /* Ajusta la imagen dentro del contenedor */
}

.parrafo {
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsividad */
@media (max-width: 768px) {
    .contenido {
        flex-direction: column; /*Cambia a columna en pantallas pequeñas*/
        text-align: center; /*Centra el texto */
    }

    .circular {
        width: 100px; /*Reduce el tamaño de la imagen en pantallas pequeñas*/
        height: 100px;
    }

    .parrafo {
        font-size: 0.9rem; /*Reduce el tamaño de la fuente en pantallas pequeñas*/
    }
}

/*AjustaMOS aún más para pantallas muy pequeñas*/
@media (max-width: 480px) {
    .circular {
        width: 80px;
        height: 80px;
    }

    .parrafo {
        font-size: 0.8rem;
    }
}

.down {
    transform: rotate(-90deg);
}

#header {
    background-color: aquamarine;
}

img {
    height: 500px;
    width: 600px;
    padding: 4rem;
    margin: 2rem;
}

/*TAMAÑO DEL ENCABEZADO*/
h1 {
    font-size: 3.8rem;
    margin: auto;
    text-align: center;
    font-weight: bold;
}

h2 {
    font-size: 3rem;
    margin: 0 auto;
    font-weight: bold;
}

h3 {
    font-size: 2.5rem;
    font-weight: bold;
}

h4 {
    font-size: 2rem;
}

a {
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0; /*Elimina el margen predeterminado*/
  padding: 0; /*Elimina cualquier relleno que pueda existir*/
  line-height: 1.2;/* Ajusta la altura de línea si el texto está muy separado*/
}

/*SECTION CARD*/
.contenedor {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se muevan a una nueva línea si no hay espacio */
    justify-content: space-around;
}

.card {
    width: 30%; /* Ajusta el ancho de las tarjetas en pantallas grandes */
    background-color: #f0f0f0;
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .card {
        width: 80%; /* Tarjetas más anchas en pantallas pequeñas */
    }
}

.banner {
    text-align: center;
}

.banner-img {
    display: flex;
    justify-content: center;
}

.banner-img {
    width: 700%; /*Ajustamos el ancho al 100% del contenedor*/
    max-width: 350px; /*Se establece un tamaño máximo*/
    height: auto; /*Se mantiene la relación de aspecto*/
    margin: 10px;
}

.barra {
    display: flex;
    justify-content: space-between;
    padding-top: 3rem;
}

.navegacion a {
    color: white;
    text-decoration: none;
    font-size: 1.8rem;
    margin-right: 2rem;
    font-family: Arial, Helvetica, sans-serif;
}

.navegacion a:hover {
    background-color: #71B100;
}

.titulo {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 2rem;
}

p, .parrafo {
    justify-content: space-around;
    margin: 0 5px;
    text-align: justify;
    font-size: 16px;
    padding: 2rem;
    text-transform: lowercase;
}

p, .parrafo::first-letter {
    text-transform: uppercase; /* La primera letra en mayúscula */
}

.container {
    display: flex;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.simple-linear{
    background: linear-gradient( aquamarine, rgb(108, 243, 202), #40A050);
}
.grid {
    display: grid;
    grid-template-columns: 4, 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*TESTIMONIOS*/
.contenedor{
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.imagen{
    max-width: 70%;
    border-radius: 50%;
}

.contenedor-testimoniales {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    gap: 2rem;
    border-radius: 10px;
    flex-wrap: wrap;
}

.testimonio {
    background-color: beige;
    border-radius: 10px;
    flex: 1; /* Permite que los testimonios ocupen el mismo espacio */
    min-width: 300px; /* Establece un ancho mínimo para mantener un diseño adecuado en pantallas pequeñas */
    display: flex;
    flex-direction: column; /* Asegura que el contenido del testimonio se mantenga vertical */
    align-items: center;
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
}

.contenido-testimonio{
    padding: 4rem;
}

.testimonio h3,
.testimonio p{
    margin: 0;
}
.nombre{
    font-weight: bold;
    color: #3b9249;
    text-align: center;
    text-transform: uppercase;
}

p {
    text-align: justify;
    color: black;
}

/* Estilos para diseño responsivo */
@media (max-width: 768px) {
    .contenedor-testimoniales {
        flex-direction: column; /*Los testimonios se vuelven a una columna en dispositivos pequeños*/
        padding: 1rem;
    }

    .testimonio {
        margin-bottom: 2rem; /* Aqui se agrega un espacio entre testimonios */
        padding: 1rem;
    }

    .contenido-testimonio {
        padding: 1rem;
    }

    .imagen {
        width: 120px; /*Se ajusta el tamaño de la imagen en pantallas de dispositivos moviles*/
    }

    .testimonio h3 {
        font-size: 1.5rem;
    }

    .testimonio p {
        font-size: 1rem;
    }

    .nombre {
        font-size: 1.2rem;
    }
}

/*NOSOTROS*/
.contenedor_nosotros {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

.card {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: justify;
    color: #555555;
    background-color: beige;
    color: #ffffff;
    flex-grow: 1;
    text-align: center;
    padding: 20px;
    max-width: 600px;/*Esta clase limita el limite maximo del card*/
    box-shadow: 0px 0px 10px rgb(0,0,0,0.1);
}

.titulo {
    text-align: center;
    margin-bottom: 20px;
}

.contenedor_nosotros {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.img-left, .img-right {
    width: 300px; /* Ajusta el tamaño según sea necesario */
    height: auto;
    max-width: 100%;/*Nos aseguramos que las imagenes sean responsivas*/
}

/* Utilizamos los Media queries para hacer el sitio responsivo */
@media screen and (max-width: 768px) {
    .contenedor_nosotros {
        /* Cambia el diseño a columna */
        flex-direction: column; 
        text-align: center;
        gap: 20px;
    }
    /*Asignamos los valores a las imagenes*/
    .img-left, .img-right {
        width: 100%; /*Las imágenes ocupan todo el ancho de la pantalla*/
        max-width: 400px; /*Tamaño máximo de las imágenes en móviles*/
        margin-bottom: 20px; /*Espacio entre los elementos*/
    }

    .card {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .contenedor_nosotros {
        flex-direction: column; /* También cambia a columna en tablets */
        text-align: center;
        gap: 20px;
    }

    .img-left, .img-right {
        width: 100%; /* Las imágenes se ajustan al ancho de la pantalla */
        max-width: 500px;
    }

    .card {
        width: 100%;
    }
}

/* Estilos de la lista desplegable*/

.dropdown {
    /* Ancho de la lista desplegable */
    width: 200px;
}

/* Estilos para las opciones de la lista */

.dropdown option {
    /* Le damos el espaciado interno a las opciones */
    padding: 10px;
}

/* Estilos cuando se pasa el cursor sobre las opciones */
.dropdown option:hover {
    /* Cambiar el color de fondo al pasar el cursor */
    background-color: lightblue;
}

.columna {
    width: 33.3%;
    margin-right: 40px;
}

/* DROPWOWN PARA EL SELECT */
#sexo {
    color: black;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cambia el color de fondo y el texto cuando el puntero pasa sobre el select */
#sexo:hover {
    background-color: rgb(191, 191, 191); /* Cambia el color de fondo al pasar el ratón */
    color: white; /* Cambia el color del texto al pasar el ratón */
}

/* Estilo para las opciones seleccionadas */
#sexo:focus {
    border-color: #007bff;
    outline: none;
}

/**Footer**/
.footer {
    background-color: #222121;
    color: #fff;
    padding: 5px 0px 0px 0px;
    bottom: 0;
    margin-top: 20px;
}

.footer {
    margin: 0px auto;
    max-width: 50%;
    text-align: center;
}

.footer h2 {
    font-size: 15px;
    margin-bottom: 20px;
}

.social {
    margin: 40px auto;
    max-width: 45%;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.social a {
    color: #fff;
    text-decoration: none;
    font-size: 42px;
}

.footer-bottom {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
}

/*Formularios*/
.formularios {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

form {
    display: flex;
    width: 100%;
    height: auto;
    max-width: 600px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    flex-direction: column;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

form input, form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    MARGIN: 10PX 0;
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
    form {
        width: 90%;
    }

    form input, form select {
        font-size: 16px;
    }

    form .btn {
        font-size: 18px;
    }
}

label {
    display: inline-block;
    width: 100%;
    font-family: arial;
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
    padding: .5rem;
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="time"],
textarea {
    width: 50%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn {
    padding: 2rem;
    background-color: #04d50b;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
}

.formulario_inv .btn:hover {
    background-color: #45a049;
    padding: 1rem;
}

.btn:hover{
    background-color: #3b8e3f;
    color: white;
    font-weight: bold;
}

.tablas {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
}

table th {
    background-color: #f2f2f2;
}

.btn {
    padding: 6px 12px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.btn-update {
    background-color: #4CAF50;
    color: white;
}

.btn-delete {
    background-color: #f44336;
    color: white;
}

.btn-edit {
    background-color: #008CBA;
    color: white;
}

.btn-secc {
    background-color: #008CBA;
    color: white;
    padding: 12px 24px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin: 0 auto;
}

/**Contacto**/
fieldset{
    margin: 2rem;
}
.contacto p {
    font-size: 1.6rem;
    color: #333333;
    margin: 2rem 0 2rem 0;
}

legend {
    font-size: 2.4rem;
    color: #4f4f4f4f;
    margin:2 rem;
}

label {
    font-weight: 500;
    text-transform: uppercase;
    display: block;
}

input:not([type="submit"]),
textarea,
select {
    padding: 1rem;
    display: block;
    width: 100%;
    background-color: #e1e1e1;
    margin-bottom: 2rem;
    border: none;
    border-radius: 1rem;
}

input[type="radio"] {
    width: auto;
    margin: 0;
}

select {
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    height: 20rem;
}

.forma-contacto {
    max-width: 30rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*TALLERES*/
/*SECCIÓN TALLER RESPONSIVA*/
/* Estilos generales */
.taller {
    max-width: 580px; /*Ajusta según el diseño deseado*/
    margin: 0 auto; /*Centra horizontalmente*/
    padding: 10px; /*Espaciado interno*/
    box-sizing: border-box; /*Considera padding dentro del ancho total*/
    border-radius: 10px; /*Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*Sombra para destacar*/
    text-align: left; /*Alineación del texto*/
    padding: 20px;
    background-color: rgb(118, 235, 200);
}

.evento {
    max-width: 580px; /*Ajusta según el diseño deseado*/
    margin: 0 auto; /*Centra horizontalmente*/
    padding: 10px; /*Espaciado interno*/
    box-sizing: border-box; /*Considera padding dentro del ancho total*/
    border-radius: 10px; /*Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*Sombra para destacar*/
    text-align: left; /*Alineación del texto*/
    padding: 20px;
    background-color: rgb(118, 235, 200);
}
.titulo {
    text-align: center;
    margin-bottom: 20px;
}

.taller-contenido,
.evento-contenido {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.imagen-taller img,
.imagen-evento img {
    display: block;
    max-width: 500px;
    width: 100%;
    height: 300px;
    objet-fit: cover;
    margin: 0 60px;
    text-align: center;
}

/*.imagen-evento img {
    display: block;
    width: 100%;
    height: 300px;
    objet-fit: cover;
    margin: 0 60px;
}*/

.detalles-taller{
    margin-top: 20px;
}

.taller-informacion {
    flex-grow: 1;
    padding: 10px;
}

.taller-informacion h4 {
    margin-bottom: 10px;
}

/* @MEDIA QUERIES PARA DIAPOSITIVOS MOVILES*/
@media screen and (max-width: 768px) {
    .taller-contenido {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .taller-imagen img {
        max-width: 100%; /*Aqui la imagen ocupa todo el espacio del contenedor*/
    }

    .taller-informacion {
        padding: 0;
    }
}

/* @MEDIA QUERY PARA SER RESPONSIVO */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .taller-contenido {
        flex-direction: column;
        align-items: center;
    }

    .taller-imagen img {
        max-width: 80%;
    }

    .taller-informacion {
        padding: 10px;
    }
}

/*BLOG*/
.entrada-blog {
    display: flex;
    align-items: center; /*Centra verticalmente el contenido*/
    margin-bottom: 20px;
}

.imagen {
    flex: 1; /*La imagen ocupa una parte proporcional del espacio*/
    margin-right: 10px; /* Añade espacio entre la imagen y el texto*/
}

.imagen img {
    max-width: 100%;
    height: auto;
}
/*El texto ocupará el doble del espacio de la imagen*/
.texto-entrada {
    flex: 2;
    text-align: center;
}

/* La imagen queda encima del texto en pantallas pequeñas y se centr el contenido*/
@media (max-width: 768px) {
    .entrada-blog {
        flex-direction: column; 
        text-align: center;
    }
/*Se elimina el margen derecho y se añade el margen inferior*/
    .imagen {
        margin: 0 0 10px 0;
    }
}
.text-center{
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
}