/* === SLIDER JAVIER ESTILOS MULTISLIDER FINAL === */

.slider-container-javier { /* ok */
  position: relative;
  margin:0 auto;
  max-width: 95%;
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: pan-y;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ==== hipervínculos ==== */
.slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.img-container-javier {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0 auto;
}

.img-container-javier img {
     max-height: 100%;
     max-width: 100%;
     z-index: 2;
     object-fit: contain;
     border-radius: 8px;
     margin: 0 auto;
}

.slide-javier { /* 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-javier.active { /* ok */
    opacity: 1;
    z-index: 2;
}

/* Animaciones de entrada */
.slide-javier.slide-in-right { /* ok */
    animation: slideFromRight 1s ease forwards;
}
.slide-javier.slide-in-left { /* ok */
    animation: slideFromLeft 1s ease forwards;
}

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

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

@keyframes slideFromRight { /* ok */
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideFromLeft { /* ok */
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---------------------------------------------------- */
/* REGLAS CORREGIDAS PARA CENTRADO HORIZONTAL Y VERTICAL*/
/* ---------------------------------------------------- */

.slide-javier.text-javier,
.slide-javier.text-javier-t {
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    text-align: center;
}

/* NUEVA REGLA MÁS ESPECÍFICA: Garantiza que el enlace también centre el párrafo */
.slide-javier.text-javier .slide-link,
.slide-javier.text-javier-t .slide-link {
    display: flex;
    align-items: center; /* Centra el párrafo verticalmente */
    justify-content: center; /* Centra el párrafo horizontalmente */
}

/* ---------------------------------------------------- */
/* FIN DE REGLAS CORREGIDAS */
/* ---------------------------------------------------- */


.text-javier p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.02em;
    max-width: 800px;
    margin: 0 auto;
}

.text-javier-t p {
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.02em;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5;
}

@keyframes fadeInText { /* ok */
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fondo difuminado */
.slider-background-javier { /* 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;
}

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

/* Captions — animación solo si está activa */
.slide-javier.active .slider-caption-javier {
    animation: fadeInCaption 1s ease forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInCaption { /* ok */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

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

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

/****index adaptativo-responsivo ****/
@media(max-width:768px) {
  .slider-caption-javier {
    font-size: 0.9rem;
    max-width: 220px;
    padding: 10px 12px;
    display: none;
  }
  .controls-javier {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 75%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 4;
  }
  .controls-javier button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 25%;
    background: rgba(0, 78, 200, 0.7);
    color: #0ff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  /* Se aplica a ambos selectores para mayor consistencia */
  .slide-javier.text-javier .slide-link,
  .slide-javier.text-javier-t .slide-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .text-javier p { font-size: 1.1rem; }
  .text-javier-t p { font-size: 1rem; }
}

/* --- Ajuste de altura del slider para pantallas pequeñas en orientación horizontal --- */
@media (max-width: 768px) and (orientation: landscape) {
  .slider-container-javier { height: 200px; }
  .controls-javier 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; 
  }
  .text-javier p { font-size: 1.2rem; }
  .text-javier-t p { font-size: 0.9rem; }
}

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

/* 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-javier { height: 160px; }
}