@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

.body { width: 100%; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; }

.container-spl { width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; background-size: cover; background-repeat: no-repeat; background-position: center; }
.container-spl .correct { position: absolute; top: 81.8px; width: 100%; }
.container-spl .correct .triangle { margin: 0 auto; text-align: center; width: 0; height: 0; border-top: 30px solid #181A1C; border-left: 585px outset transparent; border-right: 585px outset transparent; position: relative; }
.container-spl .main-slider { width: 100%; height: 60vh; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center; background: transparent; }
.container-spl .main-slider .col1 { width: 40%; color: #181a1c; }
.container-spl .main-slider .col1 h2 { font-weight: bolder; margin-bottom: 30px; }
.container-spl .main-slider .col1 h3 { margin-bottom: 10px; }
.container-spl .main-slider .col1 p { text-align: justify; margin-bottom: 30px; color: #181a1c; }
.container-spl .main-slider .col1 a { text-decoration: none; color: #181a1c; text-align: center; margin-top: 30px; padding: 15px 25px; border: 1px solid #181a1c; font-size: 20px; }
.container-spl .main-slider .col1 a:hover { background-color: #181a1c; color: white; }
.container-spl .main-slider .col2 { width: 40%; }
.container-spl .main-slider .col2 img { height: auto; max-width: 100%; vertical-align: middle; border: 0; }

/* REGLAS DEL SLIDER OSCURO CON !IMPORTANT PARA FORZAR LOS COLORES */
.container-spl.slider-oscuro { 
    display: block !important; 
    width: 100% !important; 
    overflow: hidden; 
    background-color: #181a1c !important; 
    padding: 60px 0 80px 0; /* Agregamos más espacio abajo para los dots en general */
    background-image: none !important; 
}
.container-spl.slider-oscuro .correct { display: none; }
.container-spl.slider-oscuro .main-slider { min-height: 60vh; height: auto; }
.container-spl.slider-oscuro .main-slider .col1 { width: 45%; color: #ffffff !important; }
.container-spl.slider-oscuro .main-slider .col1 h2 { font-weight: 900; font-size: 3rem; margin: 0 0 15px 0; color: #fece1a !important; line-height: 1.1; }
.container-spl.slider-oscuro .main-slider .col1 h3 { margin: 0 0 20px 0; font-size: 1.5rem; font-weight: 400; color: #e0e0e0 !important; }
.container-spl.slider-oscuro .main-slider .col1 p { text-align: left; margin: 0 0 40px 0; color: #cccccc !important; font-size: 1.1rem; line-height: 1.6; }
.container-spl.slider-oscuro .main-slider .col1 a { display: inline-block; background-color: #fece1a !important; color: #181a1c !important; font-weight: bold; padding: 15px 35px; border-radius: 10px; font-size: 1.1rem; border: none !important; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 10px 20px rgba(254, 206, 26, 0.2); transition: all 0.3s ease; }
.container-spl.slider-oscuro .main-slider .col1 a:hover { background-color: #ffffff !important; color: #181a1c !important; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(255, 255, 255, 0.2); }
.container-spl.slider-oscuro .main-slider .col2 { width: 45%; display: flex; justify-content: center; align-items: center; }
.container-spl.slider-oscuro .main-slider .col2 img { max-height: 400px; object-fit: contain; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)); }

/* HACEMOS VISIBLES LAS FLECHAS EN ESCRITORIO PINTÁNDOLAS DE AMARILLO */
/* HACEMOS VISIBLES LAS FLECHAS EN ESCRITORIO PINTÁNDOLAS DE AMARILLO */
.container-spl.slider-oscuro .splide__arrow { 
    background: transparent !important; 
    border: none !important;
    opacity: 0.7; /* Un poco transparente en estado normal */
}
.container-spl.slider-oscuro .splide__arrow svg { 
    fill: #fece1a !important; 
    width: 35px; 
    height: 35px;
}
.container-spl.slider-oscuro .splide__arrow:hover { 
    background: transparent !important; 
    opacity: 1; /* Brilla al 100% al pasar el mouse, sin moverse */
}

/* RESPONSIVE */
@media screen and (max-width: 1256px) {
  .container-spl { display: block; height: auto; padding-bottom: 20px; overflow: hidden; width: 100%; }
  .container-spl .splide { padding: 0; }
  .container-spl .main-slider { height: auto; width: 100%; }
  .container-spl .main-slider .col1 { width: 90%; margin: 0 auto; box-sizing: border-box; }
  .container-spl .main-slider .col1 h2 { font-size: 25px; margin-bottom: 20px; }
  .container-spl .main-slider .col1 h3 { font-size: 20px; line-height: 20px; }
  .container-spl .main-slider .col1 p { font-size: 15px; }
  .container-spl .main-slider .col1 a { padding: 10px 20px; font-size: 15px; margin-top: 20px; }
  .container-spl .main-slider .col2 { display: none; width: 0%; }
  
  /* EL ARREGLO DEL SLIDER OSCURO ESTÁ AQUÍ */
  .container-spl.slider-oscuro { 
      padding: 40px 0 80px 0; /* <--- MUCHÍSIMO MÁS ESPACIO ABAJO PARA LOS DOTS */
      display: block !important; 
  }
  .container-spl.slider-oscuro .main-slider { 
      flex-direction: column-reverse; 
      gap: 20px;  
      padding-top: 100px;
      padding-bottom: 30px; /* <--- SEPARACIÓN EXTRA ENTRE EL BOTÓN Y LOS DOTS */
      box-sizing: border-box; 
  }
  .container-spl.slider-oscuro .main-slider .col1 { 
      width: 100%; 
      text-align: center; 
      padding: 0 10px;
  }
  .container-spl.slider-oscuro .main-slider .col1 h2 { font-size: 2.2rem; margin-bottom: 10px; }
  .container-spl.slider-oscuro .main-slider .col1 h3 { font-size: 1.2rem; margin-bottom: 15px; }
  .container-spl.slider-oscuro .main-slider .col1 p { 
      font-size: 1rem; 
      text-align: center; 
      margin-bottom: 30px; 
      word-wrap: break-word; 
  }
  .container-spl.slider-oscuro .main-slider .col1 a { font-size: 1rem; padding: 12px 25px; margin-top: 0; }
  .container-spl.slider-oscuro .main-slider .col2 { 
      display: flex !important; 
      width: 100%; 
      max-width: 280px; 
      margin: 0 auto; 
  }
  
  /* OCULTAMOS LAS FLECHAS SOLO EN CELULAR PARA QUE NO ESTORBEN */
  .container-spl.slider-oscuro .splide__arrow { 
      display: none !important; 
  }
  .container-spl .main-slider .splide__arrow,
.container-spl .splide__arrow { 
    display: none !important; 
}
}