:root{
    --color-sunners: #BB3615;
    --color-dark: #252627;
    --color-light: #fff;
    --nav-size:10vh;
}

*{
    margin: 0;
    border: 0;
}


body{
    color: var(--color-dark);
    font-size: medium;
    font-family: "Abadi", Sans-serif;
}
@media(min-width:992px) {
    body{
        font-size:x-large;

    }
}

/*Elementos HTML*/

span{
    color: var(--color-sunners);
    font-weight: bold;
}

h2{
    color: var(--color-sunners);
    font-weight: bold;
    margin-bottom: 2%;
}

/*NAVBAR*/
nav{
    min-height: var(--nav-size);
}
.nav-scrolled{
    background-color: var(--color-light);
    transition: background-color 0.2s ease-in-out;
}

li a{
    text-decoration: none;
    color: var(--color-sunners); 
}
li a:hover{
    color: var(--color-dark);
}

.contactButton{
    background-color: var(--color-sunners);
    color: var(--color-light);
    border-radius: 7px;
}
.contactButton:hover{
    background-color: var(--color-dark);
    color: var(--color-light);
    transition: background-color 0.4s ease-in-out;
}

/*nav bar dispositivos moviles*/
/* Botón de la hamburguesa */
.menu-hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 48px;
    height: 48px;
    padding: 6px;

    background-color: transparent;
    border: 2px solid var(--color-sunners);
    border-radius: 8px;

    gap: 4px;
}

/* Eliminar el contorno predeterminado de Bootstrap */
.menu-hamburguesa:focus {
    box-shadow: none;
}

/* Líneas de la hamburguesa */
.linea-hamburguesa {
    display: block;
    width: 26px;
    height: 2.5px;

    background-color: var(--color-sunners);
    border-radius: 20px;

    transition:
        transform 0.3s ease,
        opacity 0.2s ease,
        background-color 0.3s ease;
}
.menu-hamburguesa:hover {
    background-color: var(--color-sunners);
}

.menu-hamburguesa:hover .linea-hamburguesa {
    background-color: var(--color-light);
}

/*efceto transformar cruz*/
.menu-hamburguesa[aria-expanded="true"] .linea-hamburguesa:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-hamburguesa[aria-expanded="true"] .linea-hamburguesa:nth-child(2) {
    opacity: 0;
}

.menu-hamburguesa[aria-expanded="true"] .linea-hamburguesa:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/*MAIN*/
/*Portada*/
#inicio{
    padding-top: var(--nav-size);
    min-height: 85vh;
    display: flex;
    justify-content:center ;
    align-items: center;
    background-image:linear-gradient(#00000015, #00000010, #0000, var(--color-light)),url(/multimedia/portada-panales.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portada{
    background-color: #ffffff80;
    border-radius: 10px;
    min-height: 30vh;
    max-width: 70vh;
    padding: 3%;

    /* El filtro clave que desenfoca la imagen detrás, efecto cristal */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); /* Compatibilidad con Safari */
    border: 1px solid #ffffff90;

    animation: fadeIn 1.5s ease;
}
@media(max-width:992px) {
    .portada{
        min-height: 10vh;
    }
}

@keyframes fadeIn{
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#inicio img{
    width: 100vh;
    height:max-content;
}

/*Seccion Intalaciones*/
.card-title{
    color: var(--color-sunners);
    font-weight: bold;
}

.card-text{
    color: var(--color-dark);
}

#instalaciones .card:hover{
    transform: scale(0.95);
    background-color: #BB361530; /*pongo el color d fondo de la tarjeta al seleccionarse algo tranparente*/
    cursor: pointer;
}

#instalaciones .card:hover img{
    opacity: 0.8;
}

/*Seccion About us*/
.especialidades{
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.especialidades li{
    min-height: 21px;
    padding-left: 6%;

    background-image: url("/multimedia/Sunners\ logo\ simple.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left 2px;
}

/*Certificaciones*/
.img-certificado{
    max-width: 120px;
}


/*FOOTER*/
footer{
    min-height: 20vh;
    width: 100%;
    background-color: var(--color-sunners);
    color: var(--color-light);
    padding-top: 1%;
}

.div-contact{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer img{
    width: 3%;
}

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

.avisos a{
    text-decoration: none;
    text-align: center;
    color: var(--color-dark);
}

.avisos a:hover{
    color: var(--color-light);
}

/*modal de contacto */
#modal-contacto{
    border: 0;
    padding: 0;
    margin:0;
    overflow: hidden;
    background-color: #BB361520;
}

#modal-contacto .modal-content{
    border:solid 3px var(--color-sunners);
    border-radius: 20px;
    overflow: hidden;
}

#modal-contacto .modal-header{
    align-items: center;
    border: 0;
    color: var(--color-light);
    background-color: var(--color-sunners);
}

#modal-contacto .modal-body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#modal-contacto .modal-body button{
    color: var(--color-light);
    background-color: var(--color-sunners);
    border-radius: 5px;
    max-width: 25vh;
}
#modal-contacto .modal-body button:hover{
    background-color: var(--color-dark);
    color: var(--color-light);
    transition: background-color 0.4s ease-in;
}

.btn-enviando{
    background-color: var(--color-dark);
    color: var(--color-sunners);
    max-width: 30vh;
}

#form-contacto label{
    color: var(--color-sunners);
}

#form-contacto input{
    border:1px solid var(--color-sunners);
    border-radius: 20px;
    width: 100%;
    margin-bottom: 2vh;
    padding-left: 3%;
}

#form-contacto select{
    width: 100%;
    border: 1px solid var(--color-sunners);
    border-radius: 5px;
    padding-left: 3%;
    margin-bottom: 2vh;
}

#form-contacto #tipo-proyecto:focus {
    border-color: var(--color-sunners);
    box-shadow: 0 0 0 3px #BB361525;
}


#form-contacto #consumo{
    border: 0;
    margin-bottom: 1vh;
    margin-top: 0.5vh;
    color: var(--color-sunners);
    font-style: italic;
}

#form-contacto #consumo::file-selector-button{
    font-style: normal;
    background-color: var(--color-sunners);
    color: var(--color-light);
    border-radius: 5px;
    border: 0;
}
#form-contacto #consumo::file-selector-button:hover{
    background-color: var(--color-dark);
    color: var(--color-light);
    cursor: pointer;
    transition: background-color 0.4s ease-in;
}

.ad-consumo{
    font-size:medium ;
    color:#444546;
    font-style: italic;
}


/*modal de instalaciones*/
#modal-instalaciones{
    background-color: #BB361520; /*para que el fondo se vea un poco naranja en el modal*/
}

#titulo-instalaciones{
    font-weight: bold;
    color: var(--color-sunners);
}

#modal-instalaciones .modal-content{
   max-height:fit-content;
   overflow: hidden;
   overflow-y: auto;
   scrollbar-width: none;
}

/*reseñas*/
.review-slider{
    display: flex;
    align-items: center;
    gap:30px;
    width: 100%;
}

.vista-review{
    width: 100%;
    overflow: hidden;
}

.review-container{
   width: 100%;
   flex-wrap: nowrap;
   transition: transform 0.4s ease; 
}

.review{
    border: 1.5px solid var(--color-sunners);
    flex: 0 0 calc((100% - 2rem) / 3);/*para caluclar que solo aparezcan 3*/
    height: 35vh;
    overflow: scroll;
    scrollbar-width: none;
}
@media (max-width: 992px) { /*calculo para tablet md*/
    .review{
        flex: 0 0 calc((100% - 1rem) / 2); /*salen 2*/
    }
}
@media (max-width: 768px) { /*calculo para movil sm*/
    .review{
        flex: 0 0 100%; /*sale solo 1*/
    }
}

.flecha-review{
    color: var(--color-sunners);
    background-color: var(--color-light);
    border: 1.6px solid var(--color-sunners);
    border-radius: 20px;
    margin: 1%;
}