:root {
    --gray-hover: #e4e4e4;
    --gold: #FBEBCB;
    --dark-gold: #B6896A;
    --blue: #2E3F4F;
    --dark-blue: #0D1016;
    --red-hover: #AC273A;
    --red: #D6002A;
    --info-background: #f0f0f0;
    --infor-text: #333;

}
.contenedor {
    min-height: 70vh;
    background-color: var(--thirth);
    width: 100%;
  }
.headers-container {
    width: 100%;
}

.nav-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%;
    background-color: white;
}

.nav-img {
    margin-left: .5rem;
    height: 3.5rem;
}

.nav-ul {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-right: 1rem;
    
}

.nav-li {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    width: auto;
    transition: all .4s;
    padding: 0.5rem;
    margin-top: 0.5rem;

    a {
        text-decoration: none;
        color: black;
    }
}

.nav-li:hover {
    background-color: var(--gray-hover);
}

.nav-icon {
    height: 1.2rem;
    margin-right: .25rem;
}

.banner-container {
    width: 100%;

    height: calc(100vh - 4rem);  
    overflow: hidden;
}

.banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.containerFormRegistro {
    margin-top: 1,5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 97%;
    max-width: 900px; 
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.9); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: flex;
    flex-direction: column; 
    gap: 15px; 
}



/* Otros ajustes */
h2 {
    color: var(--green);
    text-align: center;
}

input,
select {
    background-color: #f8f9fa; 
    border: 1px solid #ced4da; 
    padding: 10px;
    border-radius: 5px; 
    font-size: 1rem;
}

input::placeholder {
    color: black;
}

input:focus,
select:focus {
    border: 1px solid var(--green);
    box-shadow: none;
}

.btn-success {
    background-color: var(--green);
    border: none;
    width: 100%;
}

.btn-success:hover {
    background-color: #28a745;
}

/* Footer */
.footer {

    background-color: var(--dark-blue);
    color: white;
    width: 100%;
    padding: 4rem 0;
}

.footer-container{

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));;
    gap: 1.5rem;
    width: 95%;
    height: 40%;
    margin: auto;

}

.item-footer{

    display: flex;
    flex-direction: column;
    width: 95%;
    padding: 2rem 0;
    margin: auto;
}

.link-icon{
    margin-top: 4rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.img-icon{
    height: 3rem;
}

.qr{
    height: 22rem;
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .nav-ul {
        flex-direction: column;
        align-items: flex-start;
    }

    .containerFormRegistro {
        padding: 1rem;
    }

    .banner-container {
        height: auto;
      
    }

    h2 {
        font-size: 1.5rem;
    }
}


/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
    .nav-img {
        height: 2.5rem;
        /* Reduce la imagen del logo */
    }

    .nav-icon {
        height: 1rem;
        /* Iconos más pequeños */
        margin-right: 0.2rem;
    }

    .btn-success {
        font-size: 0.9rem;
        /* Botón más compacto */
    }
}
@media (max-width: 500px) {
    .containerFormRegistro {
        width: 100%; 
        padding: 1rem;
    }

    input,
    select {
        font-size: 0.9rem; /* Texto más compacto */
    }

    .btn-success {
        font-size: 0.9rem;
    }
}

@media (max-width: 750px) {
    .footer {
        padding: 2rem 1rem; /* Ajusta los márgenes y padding */
    }

    .item-footer {
        margin: 1rem auto; /* Reduce los márgenes */
        text-align: center; /* Centra el texto */
    }

    .link-icon {
        flex-direction: column; /* Coloca los íconos en vertical */
        gap: 1rem; /* Aumenta el espacio entre íconos */
    }

    .qr {
        height: 18rem; /* Ajusta el tamaño del QR */
    }
}