/*****INICIO CSS CUERPO EXPERIENCIA*****/

    /* SECCIÓN 1-SLIDER */

    .slider-container {                         /* ok */
      position: relative;
      max-width: 95%;
      margin:0 auto;
      height: 300px;                           /* ajusta según necesites */
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      touch-action: pan-y;                      /* Permite el deslizamiento horizontal para el slider */
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .slide.img {                               /* ok */
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .slide {                                 /* ok */
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:1rem; opacity:0;
      transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    }
    .slide.active {                           /* ok */
      opacity:1;
    }

    .slide.text p {                                /* ok */
      font-family:'IBM Plex Sans',sans-serif;
      font-size:1.4rem;
      line-height:1.6;
      text-align:center;
      letter-spacing:.02em;
      max-width:800px;
    }

    .slide.img img {                      /* ok */
      max-height: 100%;
      max-width: 100%;
      position: relative;
      z-index: 2;
      object-fit: contain;
      border-radius: 8px;
    }

    .slider-background {                        /* ok */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      filter: blur(6px) brightness(1.2);
      transform: scale(1.2);
      z-index: 1;
    }

/*** texto flotante en slider ***/

    .slider-caption {               /* ok */
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      color: #fff;
      background: rgba(0, 0, 0, 0.45);
      padding: 12px 16px;
      font-size: 1.2rem;
      font-weight: 500;
      border-radius: 8px;
      max-width: 240px;
      pointer-events: none;
      transition: opacity 0.3s ease;
     }

    .slider-caption.left {               /* ok */
      left: 10%;
      text-align: center;
    }

    .slider-caption.right {               /* ok */
      right: 10%;
      text-align: center;
    }

    .controls {               /* ok */
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      width:100%;
      display:flex;
      justify-content:space-between;
      padding:0 20px;
      z-index: 4;
    }

    .controls button {               /* ok */
      width:30px;
      height:30px;
      border:none;
      border-radius:50%;
      background:rgba(0,0,0,.5);
      color:#fff;
      font-size:1.2rem;
      cursor:pointer;
      transition:background .3s;
      z-index: 5;
      position: relative;
    }

    .controls button:hover {               /* ok */
      background:rgba(0,0,0,.7);
    }

/* SECCIÓN 2-MOSAICO DERECHA */

    #row-2 {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      max-width: 95%;
      margin:0 auto;
      padding:2rem 1rem;
      align-items:start;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    #row-2 .text {
      font-family:'Nunito Sans',sans-serif;
      text-align:left;
      line-height:1.6;
      font-size:1rem;
      color:#333;
    }

    #row-2 .mosaic {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      grid-auto-rows:120px;
      gap:10px;
    }

.mosaic-item {
  position: relative;
  border-radius:8px;
  background:#e0e0e0;
  z-index: 1;
  display: flex; /* Añadir para centrar la imagen dentro del item */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  border-radius: 12px;
}

.mosaic-item img {
  min-width: 60%; /* Reducir al 75% del ancho del contenedor */
  min-height: 50%; /* Reducir al 75% de la altura del contenedor */
  width: 50%; /* Permitir que el ancho se ajuste manteniendo la proporción */
  height: 100%; /* Permitir que la altura se ajuste manteniendo la proporción */
  object-fit: cover; /* Asegura que la imagen completa sea visible dentro de las dimensiones, sin recortar */
  transform: scale(1);
  border-radius: 12px;
  transition: transform 0.6s ease-in-out, object-fit 0.6s ease-in-out, z-index 0s 0.6s;
}

.mosaic-item:hover { z-index: 10; }

.mosaic-item:hover img { transform: scale(1.5); object-fit: contain; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);   border-radius: 12px;}

/* SECCIÓN 3-MOSAICO IZQUIERDA */

#row-3 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width: 95%;
  margin:0 auto;
  padding:2rem 1rem;
  #background:#f0f7fb;
  align-items:center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#row-3 .mosaic {
  display:grid; grid-template-columns:repeat(2,1fr);
  grid-auto-rows:120px;
  gap:10px;
  position: relative; 
  z-index: 1;
}

/* experiencia adaptativo-responsivo */

@media(max-width:768px){
  #row-2 { grid-template-columns:1fr; }
  #row-2 .mosaic { grid-auto-rows: 120px; }
  #row-2 .mosaic-item img { max-width:100%; max-height:100%; }
  #row-3 { grid-template-columns:1fr; align-items:start; display: flex; flex-direction: column; }
  #row-3 .text { order: 1; }
  #row-3 .mosaic { order: 2; }

/* Oculta los botones en tablets y móviles 768px*/
      .slider-caption {
         font-size: 0.9rem;
         max-width: 220px;
         padding: 10px 12px;
         display: none;
      }
      .controls {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
         width:75%;
         display:flex;
         justify-content:space-between;
         padding:0 20px;
         z-index: 4;
      }
      .controls button { 
         width:30px;
         height:30px;
         border:none;
         border-radius:25%;
         background:rgba(0,78,200,.7);
         color:#0ff; font-size:1.2rem;
         cursor:pointer;
         transition:background .3s;
      }
      .slide.text p { font-size: 1.2rem; }
}

/* --- Ajuste de altura del slider para pantallas pequeñas en orientación horizontal --- */
@media (max-width: 768px) and (orientation: landscape) {
      .slider-container { height: 200px; }
}

/* --- Ajuste para el texto principal del slider en pantallas muy pequeñas (móviles) --- */
@media (max-width: 480px) {
      .slide.text p { font-size: 1rem; line-height: 1.5; padding: 0 10px; }
}

/* Puedes añadir un breakpoint aún más específico si ves que 200px sigue siendo mucho para algunos móviles muy pequeños en horizontal */
@media (max-width: 576px) and (orientation: landscape) {
      .slider-container { height: 160px; }
}