/* Sección hero con imagen de fondo */

.hero-section_extensiones {

    position: relative;

    width: 100%;

    height: auto; /* Altura completa de la ventana */

    background-image: url('../img/fondo_ceub.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed; /* Efecto parallax opcional */

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-family: 'montserrat', cursive;



}



/* Overlay verde oscuro con opacidad */

.hero-section_extensiones::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 40, 60, 0.7); /* Azul oscuro con 50% de opacidad */

}



/* Contenido de texto */

.hero-content_extensiones {

    position: relative;

    //max-width: 800px;

    padding: 1.5rem 0 3rem;

    z-index: 1;

}



.boton-seccion {

  background-color: white;

  color: #e74c3c;

  border: none;

  padding: 12px 30px;

  font-size: 1rem;

  font-weight: bold;

  border-radius: 30px;

  cursor: pointer;

  transition: all 0.3s ease;

  text-decoration: none;

}



.boton-seccion:hover {

  background-color: #f1f1f1;

  transform: translateY(-3px);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);



}

  

@media (max-width: 600px) {

    .hero-content_extensiones h1 {

            font-size: 1.5rem;

            margin-top: 3rem;

            margin-bottom: 1rem;

            //font-style: italic;

            color: #f8d64e;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);



    }

   .hero-content_extensiones h2 {

            font-size: 1rem;

            margin-top: 1rem;

            margin-bottom: 1rem;

            //font-style: italic;

            color: white;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

            text-align: justify;

            line-height: 1.5;

    }

    .hero-content_extensiones p {

        font-size: 1rem;

        //margin-bottom: 0.5rem;

        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 

         line-height: 2; 

         padding-left: 0; 



    }

    .hero-content_extensiones ul {

        //padding-left: 2.5rem;

        font-size: 1rem;

       // margin-bottom: 1rem;

        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 

         line-height: 1.5;  

    }

        .hero-content_extensiones img{

        width: 15rem;



    }

}



@media screen and (min-width: 1024px) {

    .hero-content_extensiones h1 {

            font-size: 2.5rem;

            margin-top: 3rem;

            margin-bottom: 1rem;

            //font-style: italic;

            color: #f8d64e;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    }

   .hero-content_extensiones h2 {

            font-size: 1rem;

            margin-top: 1rem;

            margin-bottom: 1rem;

            //font-style: italic;

            color: white;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    }

    .hero-content_extensiones p {

        font-size: 1rem;

        //margin-bottom: 0.5rem;

        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 

         line-height: 1.5;  



    }

    .hero-content_extensiones ul {

        padding-left: 2.5rem;

        font-size: 1rem;

       // margin-bottom: 1rem;

        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 

         line-height: 1.5;  

    }

    .hero-content_extensiones img{

        width: 10rem;



    }    

} 



@media screen and (min-width: 1440px) {

    .hero-content_extensiones h1 {

            font-size: 2.5rem;

            margin-top: 3rem;

            margin-bottom: 1rem;

            //font-style: italic;

            color: #f8d64e;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    }

   .hero-content_extensiones h2 {

            font-size: 1rem;

            margin-top: 1rem;

            margin-bottom: 1rem;

            //font-style: italic;

            color: white;

            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    }

    .hero-content_extensiones p {

        font-size: 1rem;

        //margin-bottom: 0.5rem;

        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 

         line-height: 1.5;  



    }

    .hero-content_extensiones ul {

        padding-left: 2.5rem;

        font-size: 1rem;

       // margin-bottom: 1rem;

        color: white;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 

         line-height: 1.5;  

    }

    .hero-content_extensiones img{

        width: 15rem;



    }

}