#sostenibilidad video{
    padding:20px 0
}
#sostenibilidad .et_pb_row{
    padding:10px;
}
.nuestro-objetivo {
  /* Estilos del contenedor */
  background-color: #142c29;
  border-radius: 20px;
  padding: 15px 15px; /* Añadimos un poco de espacio interior */
  

  /* Alineación con Flexbox */
  display: flex;
  
  gap: 20px; /* Crea un espacio entre la imagen y el texto */
}
#sostenibilidad .nuestro-objetivo img{
    padding:0;
    object-fit: cover;
}

/* Para que el texto sea visible en el fondo oscuro */
.nuestro-objetivo .et_pb_text_inner, 
.nuestro-objetivo .et_pb_text_inner p,
.nuestro-objetivo .et_pb_text_inner strong {
  color: #ffffff; 
}

/* Opcional: Evita que la imagen se encoja si el texto es muy largo */
.nuestro-objetivo .et_pb_image {
  flex-shrink: 0.8;
}
/* --- 1. imagenes que acompañan al texto --- */
.image-flex-row {
  display: flex;
  flex-wrap: wrap; /* Permitimos que los elementos se envuelvan */
  gap: 15px;
}

.image-flex-row .et_pb_image {
  /* Hacemos que cada imagen ocupe casi el 50% para la cuadrícula 2x2 */
  flex: 1 1 calc(50% - 8px); 
  min-width: calc(50% - 8px);
  overflow: hidden; /* Oculta las partes de la imagen que se recortan */
}
.image-flex-row .et_pb_image .et_pb_image_wrap {
  height: 100%;
  width: 100%;
}

.image-flex-row .et_pb_image img {
  /* Hacemos que la imagen llene el 100% del contenedor */
  width: 100%;
  height: 100%;
  
  /* La imagen cubre el contenedor, recortándose si es necesario para evitar distorsión */
  object-fit: cover; 
}
#certificaciones{
    color: white !important;
}
#certificaciones h2{
    font-size:24px;
    font-weight:500;
    color:white !important;
}
#certificaciones h3{
    font-size:40px;
    font-weight: 500;
    color:white !important;
}
#certificaciones p{
    font-size:16px !important;;
    font-weight: 400;
}
/* Ocultar controles de video de Divi para el video de sostenibilidad */
.video-sostenibilidad .et_pb_video_overlay,
.video-sostenibilidad .et_pb_video_play,
.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls-timeline,
.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls-current-time-display,
.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls-time-remaining-display,
.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls-mute-button,
.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls-toggle-closed-captions-button,
.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

.video-sostenibilidad .et_pb_video_box video::-webkit-media-controls {
    display: none !important;
}
/*Lista de certificados*/
.service-row {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos formen la cuadrícula 2x2 */
  gap: 30px 20px; /* 30px de espacio vertical, 20px horizontal */
}

.service-row .et_pb_text {
  /* Cada elemento ocupa el 50% del ancho menos el espacio del gap */
  flex: 1 1 calc(50% - 10px);
}

/* Aplicamos el borde izquierdo SOLO a los elementos de la SEGUNDA columna */
.service-row .et_pb_text {
  border-left: 1px solid #115850;
  padding-left: 20px;
}
#certificados .et_pb_row{
    padding: 15px 0;
}
.icono-contenedor img{
    padding-bottom:20px;
}
/*Alianzas*/
#alianzas h2{
    font-size:22px;
    font-weight: 500;;
}
#alianzas h3{
    font-size:42px;
    font-weight: 500;;
}

@media (min-width: 981px) { /* El breakpoint de Divi para escritorio */
  .nuestro-objetivo {
    align-items: center; /* Centra verticalmente la imagen y el texto */
    padding: 25px 25px; /* Añadimos un poco de espacio interior */
    margin: 25px 0px; /* Añadimos un poco de espacio exterior */
  }
  .image-flex-row {
    /* En escritorio, ya no queremos que se envuelvan */
    flex-wrap: nowrap; 
    align-items: stretch; /* Hacemos que todas tengan la misma altura */
  }

  .image-flex-row .et_pb_image {
    /* Hacemos que cada imagen ocupe el mismo espacio en una sola fila */
    flex: 1; 
    /* El min-width ya no es necesario aquí, flex: 1 se encarga */
    min-width: calc(20% - 8px); 
  }   
  
  .image-flex-row .et_pb_image_2 {
    flex: 2; /* Shorthand para flex-grow: 2 */
  }
  /*Lista de certificados en escritorio*/
   .service-row {
    flex-wrap: nowrap; /* Forzamos todo a una sola fila */
    gap: 20px; /* Un solo valor para el gap horizontal */
  }  

  /* En escritorio, queremos que TODOS los elementos, excepto el primero, tengan borde */
  .service-row .et_pb_text {
    border-left: 1px solid #115850;
    padding-left: 20px;
  } 
 
  #alianzas{
    padding-top:100px !important;
    padding-bottom:50px !important;
  }
  .columna-logos-sostenibilidad{
    padding-bottom:50px;
  }
}

/* --- Carrusel de Logos para Sostenibilidad (CORREGIDO) --- */

.carrusel-sostenibilidad {
    overflow: hidden;
    /* El color de fondo es necesario para que mix-blend-mode funcione */
    background-color: #ECEBE9;
}

/* Forzar la altura y alineación de CADA logo */
.carrusel-sostenibilidad .et_pb_image {
    height: 173px !important; /* Forzamos la altura del contenedor */
    display: flex !important; /* Usamos flexbox para centrar */
    align-items: center;
    justify-content: center;
    padding: 10px; /* Damos un poco de aire a los logos */
    box-sizing: border-box;
}

/* Forzar el modo de mezcla y el tamaño de la IMAGEN */
.carrusel-sostenibilidad .et_pb_image img {
    mix-blend-mode: multiply;
    object-fit: contain !important; /* Escalar sin deformar */
    max-height: 100%;
    max-width: 100%;
}


/* Comportamiento en Escritorio (Estático) */
@media all and (min-width: 981px) {
    .carrusel-sostenibilidad .columna-logos-sostenibilidad {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /* Ocultamos los logos duplicados en escritorio */
    .carrusel-sostenibilidad .et_pb_image:nth-child(n+6) {
        display: none !important;
    }
    
}

/* Comportamiento en Tablet y Móvil (Animado) */
@media all and (max-width: 980px) {
    .carrusel-sostenibilidad .columna-logos-sostenibilidad {
        display: grid;
        align-items: center;
        animation: scroll-sostenibilidad 40s linear infinite;
    }

    .carrusel-sostenibilidad .columna-logos-sostenibilidad:hover {
        animation-play-state: running; /* La animación no se pausa en hover */
    }
}

/* Configuración para Tablet */
@media all and (max-width: 980px) and (min-width: 480px) {
    .carrusel-sostenibilidad .columna-logos-sostenibilidad {
        --module-count: 10; /* 5 logos originales x 2 */
        --columns: 3;
        --module-width: calc(100vw / var(--columns));
        --scroll-distance: calc(var(--module-width) * (var(--module-count) / 2) * -1);
        grid-template-columns: repeat(var(--module-count), var(--module-width));
    }
}

/* Configuración para Móvil */
@media all and (max-width: 479px) {
    .carrusel-sostenibilidad .columna-logos-sostenibilidad {
        --module-count: 10; /* 5 logos originales x 2 */
        --columns: 2;
        --module-width: calc(100vw / var(--columns));
        --scroll-distance: calc(var(--module-width) * (var(--module-count) / 2) * -1);
        grid-template-columns: repeat(var(--module-count), var(--module-width));
    }
}

/* Animación del scroll */
@keyframes scroll-sostenibilidad {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--scroll-distance));
    }
}

@media (max-width: 767px) {
  .service-row {
    --service-gap: clamp(16px, 6vw, 28px);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--service-gap);
    padding: 24px 0;
    margin: 0;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--service-gap);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .service-row::-webkit-scrollbar {
    display: none;
  }

  .service-row .et_pb_text {
    flex: 0 0 calc((100% - var(--service-gap)) / 1.75);
    max-width: calc((100% - var(--service-gap)) / 1.75);
    scroll-snap-align: start;
    border-left: 1px solid #115850;
    padding-left: 20px;
  }
}