*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
.container { 
    margin:0 auto;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.contenido {
    margin-top: 5px; /* ajusta según la altura total de top-bar + menú */
    padding: 20px;
}
.contenedor-imagenes { 
    position: relative;
    width: 100%;
    max-width: 900px; /* Reduce el tamaño máximo del contenedor */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    padding:10px;
}
.portada_escucha{ 
    background-image: url('../img/esru_escucha.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 900px;
    height: 450px;
    margin: 0 auto;
}
.Titulo_escucha{ 
    color:#003752;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 40px;
    text-align: center;
    font-weight: 200;
}
.Subtitulo_escucha{ 
    color:#003752;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 40px;
    text-align: center;
    font-weight: 200;
}
.titulo_escucha{ 
    color:#003752;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 40px;
    margin-top: 40px;
    text-align: center;
    font-weight: 200;
}
.descripcion_escucha { 
    text-align: justify;
    color:#858585;
    width:900px;
    line-height:1.8rem;
    margin-bottom: 30px;
    padding: 10px;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.imagen_historia { 
    width: 100%;
    height: 350px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 500px;
    background-image: url('../img/img_1(esru).jpg'); /* Imagen de escritorio */
    background-size:900px;
    background-repeat:no-repeat;
}
.imagen_valores { 
    width: 100%;
    height: 350px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 500px;
    background-image: url('../img/Texto-05.jpg'); /* Imagen de escritorio */
    background-size:900px;
    background-repeat:no-repeat;
}
.imagen_objetivos { 
    width: 100%;
    height: 350px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 500px;
    background-image: url('../img/Texto-06.jpg'); /* Imagen de escritorio */
    background-size:900px;
    background-repeat:no-repeat;
}
.imagen_actividades { 
    width: 100%;
    height: 500px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 400px;
    background-image: url('../img/Cambio página EE_cel-4.jpg'); /* Imagen de escritorio */
    background-size:400px;
    background-repeat:no-repeat;
}
.imagen_metodologia { 
width: 100%;
height: 600px; 
position: relative;
display: block;
object-fit: cover;
max-height: 400px;
background-image: url('../img/Cambio página EE_cel-5.jpg'); /* Imagen de escritorio */
background-size:400px;
background-repeat:no-repeat;
}
.imagen_beneficiario { 
    width: 100%;
    height: 350px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 500px;
    background-image: url('../img/Texto-08.jpg'); /* Imagen de escritorio */
    background-size:900px;
    background-repeat:no-repeat;
}

.lista-amarilla {
    list-style: none;
    padding-left: 20px;
  }
  
  .lista-amarilla li {
    position: relative;
    margin-bottom: 8px;
  }
  
  .lista-amarilla li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 7px;
    width: 10px;
    height: 10px;
    background-color:#ffd43b;
    border-radius: 80%;
  }
  
  .lista_beneficiario{
    list-style: none;
    padding-left: 20px;
  }
  
  .lista_beneficiario li {
    position: relative;
    margin-bottom: 8px;
  }
  
  .lista_beneficiario li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 7px;
    width: 10px;
    height: 10px;
    background-color:#858585;
    border-radius: 80%;
  }
.contenedor{
    position: relative;
    width: 100%;
    max-width: 900px; /* Reduce el tamaño máximo del contenedor */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
}
.texto-valores{ 
    font-size: 18px;
    position: absolute;
    top: 30%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: #858585;
    font-weight: bold;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
    text-align: center;
    opacity: 0;
    animation: slideIn 2s ease-out forwards;
    padding: 1rem;
    max-width: 90%;
    box-sizing: border-box;
}
.texto_beneficiario{
    position: absolute;
    top: 45%;
    left: 38%;
    transform: translate(-50%, -50%);
    color: #858585;
    font-size: 0.90rem;
    font-weight: bold;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
    text-align: justify;
    opacity: 0;
    animation: slideIn 2s ease-out forwards;
    padding: 1rem;
    max-width: 90%;
    box-sizing: border-box;
}
.correo {
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
}
.correo:hover {
    text-decoration: underline;
    color:red;
}
.texto {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
color: #858585;
font-size: 1.2rem;
font-weight: bold;
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
text-align: center;
opacity: 0;
animation: slideIn 2s ease-out forwards;
padding: 1rem;
max-width: 90%;
box-sizing: border-box;
}
.texto-objetivos {
position: absolute;
top: 35%;
left: 60%;
transform: translate(-50%, -40%);
color: #858585;
font-size: 0.90rem;
text-align: justify;
opacity: 0;
animation: slideIn 2s ease-out forwards;
padding: 1rem;
max-width: 100%;
box-sizing: border-box;
}
.texto-right {
    position: absolute;
    top: 36%;
    left: 44%;
    transform: translate(-50%, -50%);
    color: #858585;
}
.texto-right h4, .texto-left h4{
    text-align:center;
}
.texto-left { 
    position: absolute;
    top: 35%;
    left: 5%;
    width: 300px;;
    font-size: 14px;;
    text-align: justify;
    transform: translate(-10%, -50%);
    color:#858585;
    margin-bottom: 60px;;
    /* border:2px solid red; */
}

.titulo_escucha{ 
    color:#003752;
    font-size: 30px;
    text-align: center;
}
.thumb {
    max-height: 180px;
    width: 200px;
    height:320px; 
}
.descargar_material {
    display: inline-block;
    background-color: #4379ee; /* Amarillo dorado */
    color: #fff; /* Texto en negro */
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.2s;
    text-transform: uppercase;
}
.descargar_material:hover {
    background-color: #1b88e2; /* Amarillo más oscuro al pasar el cursor */
    transform: scale(1.05); /* Efecto de agrandamiento ligero */
    text-decoration: none;
    text-transform: uppercase;
    color:#fff;
}
.container_audicion { 
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    color:#858585;
    text-align:justify;
    gap:2rem;
    margin-top:20px;
    margin-bottom:50px;
    padding:5px;
    width:900px;
    /* border:2px solid red; */

}
.container_audicion strong { 
    color:#003752;
}
.contenedor_testimonio {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    /* border: 1px solid #ccc; */
    /* border-radius: 8px; */
    /* background-color: #f9f9f9; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
}
.titulo_testimonio { 
text-align: center;
font-size: 24px;
color: #003752;
margin-bottom: 20px;
font-weight: 200;
}
.descripcion_testimonial { 
text-align: justify;
font-size: 16px;
color: #858585;
line-height: 1.6;
margin-bottom: 40px;
font-style: italic;
}
/* Firma autor */
.firma_autor {
text-align: right;
font-style: italic;
font-weight:300;
margin-top: auto;
color: #003752;
}
.fa-quote-left,
.fa-quote-actividad-right {
color: #003752;
font-size: 1rem;
margin: 0 5px;
}
.iframe_escucha { 
width:950px;
height:515px; 
}
.container_premios {
max-width: 950px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumb {
flex: 1 1 calc(20% - 10px); /* 4 columnas en escritorio */
max-width: calc(20% - 10px);
aspect-ratio: 4 / 3;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s;
border-radius: 4px;
}
.thumb:hover {
border-color: #007BFF;
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
top: 0; left: 0; right:0; bottom: 0;
/* background: rgba(0,0,0,0.85); */
background-color: #333;;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 10px;
}
.lightbox.active {
display: flex;
}
.lightbox img {
max-width: 70%;
max-height: 80vh;
/* border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.7); */
}
.lightbox .close, 
.lightbox .prev, 
.lightbox .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
color: white;
background: none;     /* ← elimina fondo */
border: none;         /* ← elimina borde */
border-radius: 50%;   /* opcional: puedes quitar esto también */
padding: 12px;
cursor: pointer;
user-select: none;
transition: color 0.3s;
}
.lightbox .close {
top: 10%;
right: 5%;
transform: none;
}
.lightbox .close:hover,
.lightbox .prev:hover,
.lightbox .next:hover,
.lightbox .close:focus,
.lightbox .prev:focus,
.lightbox .next:focus {
    background: none;
    border: none;
    outline: none;
    color: #ECB409; /* cambia el color si deseas efecto visual al pasar el cursor */
}
.lightbox .prev {
    left: 5%;
}
.lightbox .next {
    right: 5%;
}
.lightbox .close:focus,
.lightbox .prev:focus,
.lightbox .next:focus {
  color: #ECB409;
  /* o algún otro estilo visual claro */
}
.texto-right ul {
    list-style-position: inside;
    padding: 0;
    margin: 0;
    text-align: center;
}

.texto-right li {
    text-align: center;
}

@keyframes slideIn {
0% {
    transform: translate(-50%, -60%);
    opacity: 0;
}
100% {
    transform: translate(-50%, -50%);
    opacity: 1;
}
}

  @media screen and (max-width: 991px) and (min-width: 751px) {
    
    .container_audicion {
        width: 100%;
        flex-direction: column;
        padding: 10px;
    }
    .portada_escucha{ 
        width: 100%;
        height: auto;
        aspect-ratio: 2/1;
    }
    .descripcion_escucha {
        text-align: justify;
        color:#858585;
        font-size: 16px;
        width: 100%;
        line-height: 2.5rem;
        font-family: italic;
        padding: 15px;
        /* color:red; */
    }
    .descripcion_testimonial{ 
        text-align: justify;
        color:#858585;
        font-size: 16px;
        width: 100%;
        line-height: 2.5rem;
        font-family: italic;
        padding: 15px;
    }
    .imagen_historia { 
   
        background-size:700px;
        background-repeat:no-repeat;
    }
    .imagen_valores { 
       
        background-size:700px;
        background-repeat:no-repeat;
    }
    .imagen_actividades { 
        background-size:420px;
        background-repeat:no-repeat;
    }
    .titulo_escucha{ 
        color:#003752;
        font-size: 20px;
        text-align: center;
        left:50px;
    }
    .imagen_objetivos {
        height:240px;
        right: 20%;
    }
    .texto-objetivos {
        position: absolute;
        top: 40%;
        left: 80%;
        width: 300px;
        /* transform: translate(-50%, -50%); */
        color: #858585;
        font-size: 0.90rem;
        text-align:justify;
    }
    .imagen_metodologia { 
        /* height: 240px; 
        */
        background-size:320px;
        background-repeat:no-repeat;
    }
    .imagen_beneficiario { 
        background-size:700px;
        background-repeat:no-repeat;
    }
    .Titulo_escucha{ 
        color:#003752;
        font-size: 30px;
        text-align: center;
    }
    .texto-right h4{ 
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* .texto-right ul { 
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;;
    } */
    .texto-right li {
        text-align: center;
        width: 100%; /* o un ancho fijo como 80% */
        left: 20px;
    }
    .texto-left  ul li{
        width: 600px;
        padding: 5px;
        font-size: 0.90rem;  
    }
    .texto_beneficiario{
        top: 35%;
        left: 35%;
        width: 380px;
        font-size: 9px;

    }
    .texto_beneficiario h4{ 
        text-align: center;
        font-size: 12px;

   
    } 
    .texto{ 
        font-size: 15px;
        width: 420px;
        top: 30%;
        
    }
    .texto-valores{ 
        font-size: 16px;
        width: 400px;
        top: 20%;
        color:#858585;
        
    }
    .titulo_escucha{ 
        color:#003752;
        font-size: 20px;
        text-align: center;
    }
    .texto-objetivos, .texto_beneficiario{ 
        font-size:12px;
    }
    .iframe_escucha
    {
            width:100%;
            margin:0 auto;
    }
   .container_audicion{ 
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
   .correo { 
    width: 100%;
    max-width: 900px;
   }
}
@media (max-width: 480px) {
    .thumb {
      flex: 1 1 calc(50% - 10px); /* 2 columnas */
      max-width: calc(50% - 10px);
    }
    .lightbox .close, 
    .lightbox .prev, 
    .lightbox .next {
      font-size: 2rem;
      padding: 8px;
    }
  }
  @media (max-width: 320px) {
    .thumb {
      flex: 1 1 100%;
      max-width: 100%;
    }
    .lightbox img {
      max-width: 100%;
      max-height: 70vh;
    }
    .correo{ 
        font-size: 20px;
        text-align: center;
        color:red;
    }
  }

@media (max-width: 750px) {
   
.contenedor-imagenes { 
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:10px;
}
.imagen_historia { 
    height: 360px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 500px;
    background-image: url('../logos/Cambio página EE_cel.jpg'); /* Imagen de escritorio */
    background-size:300px 200px;
    background-repeat:no-repeat;
}
.imagen_valores{ 
    height: 360px; 
    position: relative;
    display: block;
    object-fit: cover;
    max-height: 500px;
    background-image: url('../logos/Cambio página EE_cel-2.jpg'); /* Imagen de escritorio */
    background-size:300px 200px;
    background-repeat:no-repeat;
}
.imagen_beneficiario{ 
    height: 280px; 
    background-image: url('../img/Cambio página EE_cel-3.jpg'); /* Imagen de escritorio */
    background-size:280px;
    background-repeat:no-repeat;
}
.imagen_objetivos {
  height:240px;
  right: 55%;
  background-image: url('../img/Texto-06.jpg'); /* misma o nueva imagen móvil */
  background-size: cover;
}
.imagen_actividades { 
    height: 300px; 
    position: relative;
    display: block;
    object-fit: cover;
    background-image: url('../img/Cambio página EE_cel-4.jpg'); /* Imagen de escritorio */
    background-size:320px;
    background-repeat:no-repeat;
}
.imagen_metodologia { 
    height: 300px; 
    background-image: url('../img/Cambio página EE_cel-5.jpg'); /* Imagen de escritorio */
    background-size:300px;
    background-repeat:no-repeat;
}
.texto {
    position: absolute;
    top: 35%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    color: #858585;
    font-size: 0.60rem;
    width: 300px;
    text-align:justify;
}
.texto-valores {
    position: absolute;
    top: 35%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    color: #858585;
    font-size: 0.70rem;
    width: 300px;
    text-align:center;
}
.texto-objetivos {
    position: absolute;
    top: 40%;
    left: 120%;
    width: 180px;
    /* transform: translate(-50%, -50%); */
    color: #858585;
    font-size: 0.60rem;
    text-align:justify;
}

/* .texto-objetivos {
    font-size: 0.85rem;
    padding: 0.8rem;
} */
.titulo_escucha{ 
    color:#003752;
    font-size: 30px;
    text-align: center;
}
/* .texto-right ul li { 
    top: 10%;
    right: 30%;
    text-align: center;
    color:#858585;
    color: white;
    font-size: 0.70rem;
    font-weight: bold;   
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
} */

.contenido {
        margin-top:140px; /* ajusta según la altura total de top-bar + menú */
        padding: 20px;
}
.Titulo_escucha{ 
        color:#003752;
        font-size: 30px;
        text-align: center;
}
.correo {
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
    font-size:18px;
    text-align: center;
}
.portada_escucha{ 
        width: 100%;
        height: auto;
        aspect-ratio: 2/1;
}
.content-premios { 
        padding: 10px;;
}
.descripcion_escucha {
        text-align: justify;
        color:#858585;
        width:100%;
        font-size: 16px;
        line-height: 1.8rem;
        padding: 10px;;
}
.texto-left {
        width: 280px;
        padding: 5px;
        font-size: 9px;
}
.texto-right { 
    position: absolute;
    top: 35%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    color: #858585;
    font-size: 0.60rem;
    width: 300px;
    text-align:justify;
}
/* .texto-right ul { 
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;;
} */
.texto-right li {
  
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.lista_actividades{
    margin-top:12px;
    text-align:center;
    font-size:12px;

}
.texto_beneficiario { 
    top:48%;
    left: 50%;
    font-size: 8px;
    width: 300px;
}

.iframe_escucha{
            width:300px;
            height:300px; 
}
.container_audicion {
        width: 100%;
        flex-direction: column;
        padding: 10px;
}
.container_premios {
        max-width: 950px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
.imagen {
        max-height: none;
        height: auto;
}
.texto_beneficiario h4{ 
    margin-top: 10px;;
    font-size: 12px;
    text-align: center;
}
.titulo_testimonio {
        font-size: 20px;
}
.descripcion_testimonial {
        font-size: 14px;
}
.firma_autor {
    font-size: 14px;
}
}