@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }
html{font-size: 12px; /* Tamaño base de la fuente */ background-color: #232323;}

#fondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: space-between; /* se asegura de empujar izq y der a sus lados */
    z-index: 0; /* Al fondo. CAPA 0 */
  }
  #fondo #bg-drch{ width: 50%; display: flex;
  align-items: flex-end; justify-content: flex-end; padding-right: 5%;
visibility: visible;}

  #fondo #bg-izq{ width: 50%; display: flex;
  align-items: flex-end; padding-left: 5%;
visibility: visible;}

  #bg-drch img, #bg-izq img{width: 60%;}

  #fondo #bg-responsive{ display: none; visibility: hidden;}



section{
    position: relative;
    z-index: 1; /* Al fondo. CAPA 0 */
}

#contenido{
    max-width: 850px;
    height: 100%;
    margin: auto;
}

#rrss{
    width: 100%;
    padding-top: 50px;
    text-align: right;
    }
.btn-rrss {
        background: none; /* Elimina el fondo del botón */
        border: none; /* Elimina el borde del botón */
        cursor: pointer; /* Muestra el puntero al pasar sobre el botón */
    }
.btn-rrss img{
        height: 50px;
        }

#informacion{
    width: 100%;
padding-top: 100px;
    

}
#logo img{
    width: 100%;
}
#textos{

  width: 100%;
  padding-top: 50px;
  margin-top: 50px;
  text-align: center;
  background-color: rgba(55, 55, 55, 0.6);
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  padding-left: 0;
  padding-right: 0;

}
h1{
    font-size: 1.6rem;
    color: white;
    font-weight: 600;
}
h2{
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 600;
    color: #CC3738;
}
p{font-size: 1.1rem;
    color: white;
    font-weight: 300;
line-height: 1.5rem;}

span.grande{font-size: 1.6rem; font-weight: 300;}
span.negrita{font-weight: 600;}
span.grande-negrita{font-size: 1.6rem; font-weight: 600;}
span.legal{font-size: 0.7rem; font-weight: 300;}


    .btn-contacto{
        text-decoration: none;
        font-weight: 600;
        font-size: 3rem;
        color: #CC3738;
        cursor: pointer;
        transition: color 0.3s ease-in-out;
        }
        .btn-contacto:hover{
        color: white;
        }
    .btn-legal{
        text-decoration: none;
        font-weight: 300;
        font-size: 0.7rem;
        color: white;
        cursor: pointer;
        transition: color 0.3s ease-in-out;
        }
        .btn-legal:hover{
        color: #CC3738;
        }

@media (max-width: 1440px) {  #bg-drch img, #bg-izq img{width: 90%;}}


/* Teléfonos grandes o tablets pequeñas */
@media (max-width: 850px) {
      #fondo #bg-drch{display: none; visibility:hidden;}

  #fondo #bg-izq{display: none; visibility: hidden;}

  #fondo #bg-responsive{ width: 100%; display: flex;
  align-items: flex-end; visibility: visible;}

        #contenido{
    width: 80%;
}
#textos{
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(55, 55, 55, 0.8);
}
h2{
    font-size: 3rem;/* original 3.5 */
}
  /* Ajustes para tablets verticales y móviles grandes */
}
/* Teléfonos (modo retrato) */
@media (max-width: 480px) {
      #contenido{
    width: 90%;
}
h1{
    font-size: 1.4rem;/* original 1.6 */
}

p{font-size: 1rem;/* original 1.1 */}

span.grande{font-size: 1.4rem; /* original 1.6 */}
span.grande-negrita{font-size: 1.4rem; /* original 1.6 */}


}