.separador{
  height: 95px;
}

.contenedor-1,
.contenedor-3,
.contenedor-4{
    width: 100%;
    position: relative;
    color: white;
    text-align: center;
}


.contenedor-1::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('../img/fondo-servicios-area4.webp') no-repeat;
  background-size: cover;
  background-position: center 70%;
  z-index: -1;
  filter: brightness(0.5);
  mask-image: linear-gradient(to top, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to right, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to bottom, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to left, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%);
  mask-composite: intersect;
}
/*
.contenedor-1::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background: url('../img/fondo-4.webp') no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
    mask-image: linear-gradient(to left, black 60%, rgba(0,0,0,0.5) 80%, transparent 95%),
                linear-gradient(to bottom, black 60%, rgba(0,0,0,0.5) 80%, transparent 100%);
                mask-composite: intersect;
    filter: brightness(0.5);
}*/

.contenedor-1 .texto {
    width: 100%;
    position: relative; 
    transform: none; 
}

.texto h1{
    font-size: 4em;
}

.texto h2,
.contenedor-2 h2,
.contenedor-3 h2,
.contenedor-4 h2 {
  position: relative;
  display: inline-flex;       
  justify-content: center;    
  align-items: center;        
  font-size: 2.5rem;
  color: #fbff2a;
  margin-bottom: 20px;
  font-family: "Anton";
  text-align: center;
}

.texto h2 span,
.contenedor-2 h2 span,
.contenedor-3 h2 span,
.contenedor-4 h2 span {
  display: inline-block;
  margin-right: 1rem; 
  background: url('../img/flecha-r.svg') no-repeat center;
  background-size: 5rem 5rem;
  width: 5.5rem;
  height: 5rem;
}

.parrafo-justificado {
  text-align: justify;
}

.texto p,
.texto ul,
.contenedor-2 p,
.contenedor-4 p{
  color: white;
  font-family: avenir;
  font-size: 1.3em;
  width: 80%;
  margin: 0 auto 30px;
  line-height: 1.5;
}

.texto ul{
  list-style: none;
  padding-left: 1.5em;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: justify;
  width: 60%;
  margin-left: 50%;
  transform: translateX(-50%);

}
.texto li {
  text-align: justify;
  background-image: url("../img/check-icono.svg"); 
  background-repeat: no-repeat;
  background-size: 1em 1em; 
  padding-left: 3em; 
  background-position: 0.5em center; 
  
  margin: 10px 0;
  display: flex;
  align-items: center; 
}

.contenedor-2{
  width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;  
}
.contenedor-2 .areas{
  width: 80%;
  position: relative;
  align-items: center;
}

.contenedor-2 .areas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0);
  mask-image:
    linear-gradient(to left,   black, transparent 10%), /* Borde derecho */
    linear-gradient(to right,  black, transparent 10%), /* Borde izquierdo */
    linear-gradient(to top,    black, transparent 5%), /* Borde inferior */
    linear-gradient(to bottom, black, transparent 5%); /* Borde superior */
  
  mask-composite: add;
}

.contenedor-2 h3,
.contenedor-3 h3{
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.contenedor-2 h4,
.contenedor-3 p{
  font-size: 1.5rem;
  font-family: avenir;
  margin: 0;
  margin-bottom: 50px;
}

.contenedor-2 .cont2-1,
.contenedor-2 .cont2-2,
.contenedor-2 .cont2-3{
  display: flex;
  flex-direction: column;
  position: relative; 
  height: 60vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.contenedor-2 .cont2-1::before,
.contenedor-2 .cont2-2::before,
.contenedor-2 .cont2-3::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  filter: brightness(0.5);
  z-index: -1;
}
.contenedor-2 .cont2-1::before{
  background: url('../img/fondo-servicios-area1-2.webp') no-repeat;
  background-size: cover;
  background-position: center 80%;
}
.contenedor-2 .cont2-2::before{
  background: url('../img/fondo-servicios-area2-2-1.webp') no-repeat;
  background-size: cover;
  background-position: left 80%;
}
.contenedor-2 .cont2-3::before{
  background: url('../img/fondo-servicios-area-3-2.webp') no-repeat;
  background-size: cover;
  background-position: left 30%;
}

.contenedor-4::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('../img/fondo-servicios-estructura2.webp') no-repeat;
  background-size: cover;
  background-position: center 55%;
  z-index: -1;
  filter: brightness(0.5);
  mask-image: linear-gradient(to top, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to right, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to bottom, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to left, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%);
  mask-composite: intersect;
}

.contenedor-4 .contenedor-4_1 h3{
  font-size: 1.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative; 
  padding-bottom: 1.5em;
  margin-bottom: 1em;
  margin-top: 1.5em; 
}

.contenedor-4_1 h3:not(:last-child)::after {
  content: '';
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
  
  /* Dimensiones y Posición */
  position: absolute;
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 50%;
  height: 5px;
}

.contenedor-3::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('../img/fondo-servicios-actividades.webp') no-repeat;
  background-size: cover;
  background-position: center 0%;
  z-index: -1;
  filter: brightness(0.5);
  mask-image: linear-gradient(to top, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to right, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to bottom, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%),
              linear-gradient(to left, black 95%, rgba(0,0,0,0.5) 97.5%, transparent 99%);
  mask-composite: intersect;
}

.contenedor-3 h3{
  margin-bottom: 10px;
}

@media (max-width: 576px){
  .texto h2,
  .contenedor-2 h2,
  .contenedor-3 h2,
  .contenedor-4 h2 {
    display: flex;            
    justify-content: center;
    width: 90%;
    padding: 0 5%;
    
  }

  .contenedor-3::before{        
        background-position: 55% center;
    }

  .texto h2 span,
  .contenedor-2 h2 span,
  .contenedor-3 h2 span,
  .contenedor-4 h2 span {
    position: absolute; 
    left: 0;                
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;          
    background-size: 3rem 3rem;  
    width: 3.5rem;
    height: 3rem;
  }
    .contenedor-1::before{
        width: 100%;
        mask-image: linear-gradient(to bottom, black 70%, rgba(0,0,0,0.5) 90%, transparent 99%);
    }

    .contenedor-1 .texto{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        transform: none;
    }
    .contenedor-1 .texto p{
      text-align: justify;
    }

    .texto ul{
      width: 90%;
      align-items:normal; 
    }

    .contenedor-2 .areas{
      width: 95%; 
    }

    .contenedor-2 p{
        /* Limita el ancho para crear espacio a los lados */
        width: 90%; 
        /* Centra el párrafo */
        margin: 0 auto; 
        /* Asegura que el texto use la justificación mejorada */
        text-align: center;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        -webkit-hyphenate-limit-lines: 2;
        letter-spacing: -0.01em;
    }

    .contenedor-4 p,
    .contenedor-4 .contenedor-4_1{
      width: 90%;
      margin: 0 auto;
    }

    .contenedor-3 p{
      width: 90%;
      margin: 0 auto 50px;
    }

.texto p,
.texto ul {
    width: 100%; /* Ocupa el 100% de su contenedor centrado (90% de la pantalla) */
    
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto; 
    -ms-hyphens: auto;
    -webkit-hyphenate-limit-lines: 2;
    letter-spacing: -0.01em;
}

    .contenedor-4 p{
        text-align: center; /* Centrar el texto en sí */
        hyphens: auto; /* Desactivar guiones en esta línea corta */
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
          -webkit-hyphenate-limit-lines: 2;
        /* Opcional: El ajuste de letter-spacing que probamos antes */
        letter-spacing: -0.01em;
    }
}