:root {
    --fondo1: #354984;
    --fondo2: #b6d9f4;
    --fondo3: #a4c3d6;
    --info: #303a37;
    --verde : #447959;
    --midBlanco: #f8f2ed;
    --rojo: #9b1128;
    --azulUsa: #2c286b;
    --rojoUsa: #991128;
    --wpp: #25D366;
    --telegram: #04608B;
}

.alert-dark {
    background: var(--azulUsa) !important;
    color: var(--midBlanco) !important;
    border-radius: 20px !important;
}
/* TIPOGRAFIAS */
/*
    font-family: "Poppins", sans-serif;
    font-family: "Roboto", sans-serif;
    font-family: "Inter", sans-serif;
    font-family: "Ubuntu", sans-serif;
    font-family: "Rubik", sans-serif;
    font-family: "Manrope", sans-serif;
    font-family: "Space Mono", monospace;
    font-family: "Sintony", sans-serif;
    font-family: "Onest", sans-serif;
    font-family: "Sono", monospace;
    font-family: "Unbounded", sans-serif;
    font-family: "Wix Madefor Text", sans-serif;
    font-family: "DM Sans", sans-serif;
    font-family: "Carrois Gothic SC", sans-serif;
    font-family: "Sofia Sans", sans-serif;
*/
/* TIPOGRAFIAS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    scroll-behavior: smooth;
}

header {
    width: 100%;
    min-height: auto;
    background: var(--midBlanco);
    position: sticky;
    top: 0;
    z-index: 99;
}

.logoInicio {
    width: 200px;
}
.logo {
    width: 200px;
}
nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all .3s ease;
}
nav ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: var(--azulUsa);
    font-size: 1.5rem;
    font-weight: bold;
    font-family: "Inter", sans-serif;
}
section {
    min-height: 50vh;
}
.miniDivision { min-height: 5vh;}
.ivision { min-height: 15vh;}
.fondoFixed {
    background: url('../media/bg02.webp') no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
.hero {
    background: url('../media/bg02.webp') no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: white;
    text-align: center;
    padding: 100px 20px;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.social {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 20px;
    padding: 20px;
    transition: all .3s ease;
}

.social i {
    font-size: 3.5rem;
    color: var(--midBlanco);
    transition: all .3s ease;
    filter: drop-shadow(0px 0px 5px var(--info));
    padding: 10px;
}
.social i:hover {
    color: var(--rojoUsa);
    filter: drop-shadow(0px 0px 7px var(--midBlanco));


}
.btnMenu {

    padding: 0px 10px;
    text-decoration: none;
    transition: all 0.3s; 
}
.btnMenu:hover {
    border-radius: 5px;
    background: var(--azulUsa); 
    color: white;
    padding: 20px 10px;

}
.cta-button {
    background: var(--rojoUsa); 
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    font-family: "Carrois Gothic SC", sans-serif;

    font-size: 1.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cta-button2 {
    width: 50%;
    margin: 0 auto;
    background: var(--wpp); 
    color: #123;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    font-family: "Carrois Gothic SC", sans-serif;

    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cta-button3 {
    background: var(--rojoUsa); 
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;


    font-size: 1.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cta-button3:link {
    color: white;

}
.cta-button4 {
    background: var(--wpp); 
    color: white !important;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 75%;
    margin: 0 auto;
}


.fa-hand-pointer {
    position: relative;
    top: 10px;
}
.cta-button4 i {
    font-size: 2.3rem;
}

.alert-info2 {
    background: var(--azulUsa) !important;
    color: var(--midBlanco) !important;
    text-decoration: none !important;
}
.alert-info2 a {
    text-decoration: none !important;
    color: var(--midBlanco) !important;

}

.success2 {
    background: #04608B !important;

}


.cta-button:hover {
    background: var(--midBlanco);
    color: var(--rojoUsa);
}
.cta-button2:hover {
    background: var(--midBlanco);
    color: var(--rojoUsa);
}
.seccion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-height: 70vh;
}
.servicios, .testimoniales, .contacto {
    padding: 50px 20px;
    text-align: center;
}

.servicios h2, .testimoniales h2, .contacto h2 {
    margin-bottom: 20px;
}

.pointer {
    cursor: pointer;
}

.pointer span {
    font-size: 1rem;
}
.servicio-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.intro {
    background: url(../media/bg07.webp);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: #123;
    text-shadow: 0px 0px 1px var(--midBlanco);


}
.intro .subtituloP {
    text-shadow: 0px 0px 1px var(--midBlanco);
    font-size: 1.5rem !important;
}
.servicio {
    background: var(--fondo1);
    color: var(--midBlanco);
    border-radius: 5px;
    padding: 20px;
    margin: 10px;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    align-self: stretch;
}
.subtituloP {
    font-size: 1.2rem;
}
.testimoniales {
    /* background: var(--azulUsa); */
    color: var(--midBlanco);
    display: flex;
    flex-direction: column;
    justify-content:  center;
    
}
.testimonial {
    background: var(--midBlanco);
    box-shadow: 0px 0px 5px #333;
    color: #333;
    border-radius: 5px;
    padding: 15px;
    margin: 10px;
}

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

.contacto input, .contacto textarea {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contacto button {
    background: var(--azulUsa);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.contacto button:hover {
    background: var(--azulUsa);
}

.social-media {
    margin-top: 20px;
}
.social-media a:hover {
    text-decoration: none;
    color: var(--midBlanco);
    
}

.social-media a {
    margin: 0 10px;
    text-decoration: none;
    color: var(--midBlanco);
    background: var(--rojoUsa);
    padding: 10px 20px;
    margin: 10px;
    border-radius: 10px;
    font-size: 1.3rem;
}
.btnEnviar {
    margin: 0 10px;
    text-decoration: none;
    color: var(--midBlanco);
    padding: 10px 20px;
    margin: 10px;
    border-radius: 10px;
    font-size: 1.3rem;
}
footer {
    text-align: center;
    padding: 20px;
    background: var(--midBlanco);
}

footer a {
    text-decoration: none;
    color: var(--azulUsa);
}

input, textarea {
    padding: 10px;
    font-size: 1.2rem;
}
.h21 {
    text-align: center;
}
.h1, .h2, .h3, .h4, .h5 {
    font-family: "Carrois Gothic SC", sans-serif;
}

.uls {
    text-align: left;
}


.barba {
    font-weight: bold;
    font-family: "Carrois Gothic SC", sans-serif;
}

.menu-toggle {
   display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 25px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}



@media screen and (max-width: 700px) {
    .class1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between !important;
        align-items: center;
    }
    .formularioComent {
        width: 100%;
        display:flex;
        flex-direction: column;
        gap: 20px;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
    }
    #comentarios2 {
        height: 70vh !important;
        overflow-y: scroll;
    }
    .comentarios {
        flex-direction: column;
        gap: 30px;
    }
    nav ul {
        width: 100%;
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .btnMenu {
        padding: 0px !important;
        text-decoration: none;
        transition: all 0.3s; 
    }
    .btnMenu:hover {
        border-radius: 5px;
        background: var(--midBlanco); 
        color: var(--azulUsa);
        /* padding: 20px 10px; */
    
    }
    .social-media {
        display: flex;
        flex-direction: column;
    }
    .social-media i {
        font-size: 1.3rem;
    }

    .servicio {
        background: var(--fondo1);
        color: var(--midBlanco);
        border-radius: 5px;
        padding: 20px;
        margin: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
    }

    .logoInicio {
        width: 150px;
    }
    .navbar-nav {
        margin: 0 auto !important;
        text-align: center !important;
    }
    .social {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 5px;
        padding: 5px;
        transition: all .3s ease;
    }

    .iconoWa  {
        position: relative;
        right: -50px !important;
        margin: 10px !important;
    }
    
}

.iconoWa {
    width: 100%;
    position: absolute;
    right: 0;

}
.iconoTel {
    width: 100%;
    position: absolute;
    right: 70px;
}
.iconoWa div {
    text-align: right;
    margin: 50px;
    cursor: pointer;
    
}
.iconoTel div {
    text-align: right;
    margin: 50px;
    cursor: pointer;
    
}
.iconoWa i {
    font-size: 3rem;
}
.iconoTel i {
    font-size: 3rem;


}
.iconoTel i {
    border: 0px solid #123;
    border-radius: 50%;
    margin: 5px;
    padding: 5px;
    color: var(--fondo1);
    background: var(--midBlanco);
    width: 55px;
    height: 55px;
    text-align: center;
}
.iconoWa i {
    border: 0px solid #123;
    border-radius: 50%;
    margin: 5px;
    padding: 5px;
    color: var(--midBlanco);
    background: var(--wpp);
    width: 55px;
    height: 55px;
    text-align: center;
}
.scroll {
    transition: all .3s ease;
    background: #123 !important;
    height: 100px;
}

.tele i {
    font-size: 3rem;
}
#pie {
    position: absolute;
    width: 330px;
    display: flex;
    flex-direction: column;
    right: 0;
    gap: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 99;
}


.wa a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--midBlanco);
    gap: 10px;
    transition: color .3s ease;
}
.wa a span {
    color: #123; 
}
.wa a:hover {
    color: var(--midBlanco);
}
.wa i {
    font-size: 3rem;
}

.alert-success, .btn-success {
    background: var(--wpp) !important;
    border: 0 !important;
}

.modal-img {
    width: 100%;
    height: auto;
    z-index: 0;
    position: absolute;
    top: 0;

    
}
.modal-img img {
    width: 100%;
}
.modal-body {
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
}

.modal-footer, .btn-close {
    position: relative;
    z-index: 99 !important;
}

.visitas {
    font-size: .8rem;
}



.mostrarComentarios {
    margin: 10px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgba(17, 34, 51, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
}

.coment1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 1px solid rgba(17, 34, 51, 0.2);
    padding: 20px;
    border-radius: 10px;
}
.coment1 div {
    width: 50%;
}
.coment2 {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid rgba(17, 34, 51, 0.2);

}
.select-content {
    font-size: 1.3rem;
    width: 100px;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid 1px solid rgba(17, 34, 51, 0.2) !important;
}


.boton {
    width: auto;
    font-size: .9rem;
    background: var(--telegram) !important;
    font-weight: bold !important;
    color: var(--midBlanco) !important;
    padding: 10px;
    /* margin: 0 auto; */
}
.select {
    width:  auto;
    padding: 10px;
    /* margin: 0 auto; */
}
.btn-info {
    background: var(--telegram) !important;
    font-weight: bold !important;
    color: var(--midBlanco) !important;
}
.class1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
input, select, button {
    border: 1px solid rgba(17, 17, 17, 0.3) !important;
    border-radius: 10px !important;
}
.formularioComent {
    width: auto;
    display:flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}
.formularioInp {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.formularioInp input {
    width: 100%;
}
.coments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.comentarios {
    width: 100%;
    display: flex;

}
.comentarios div {
    width: 90%;
    margin: 0 auto;
    gap: 15px;
}
#comentarios2 {
    text-align: center;
    justify-content: center;
    height: 50vh !important;
    overflow-y: scroll;
    /* margin: 20px; */
    margin-bottom: 75px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.btnSolo {
    background: var(--azulUsa) !important;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    text-decoration: none;
    margin: 10px;

}
.btnSolo:hover {
    background: var(--azulUsa) !important;
    color: var(--fondo1);
}
.bodyRegistro {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.bodyLogin {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.registro {
    min-height: 20vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 40px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);

}

.registro input {
    border: 1px solid rgba(99, 99, 99, 0.3);
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 1.3rem;
}
.registro input[type=text]:focus   {
    border: 3px solid #555 !important;
}

.sesionIniciada {
    margin: 0 auto;
    width: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.btn-danger {
    background: var(--rojo) !important;
}
.btn-danger:hover {
    background: rgba(153, 17, 40, 0.9) !important;
    box-shadow: 2px 2px 3px var(--info);

}


.imgComents {
    width: 150px;
    object-fit: cover;
}


.fotografias {
    padding: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.fotoImg {
    object-fit: cover;
    width: 200px;
    height: 250px;
    border-radius: 10px;
}
.videos {
    padding: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    overflow-x: scroll;
}
.videoImg {
    object-fit: cover;
    width: 300px;
    height: 350px;
}