/* ======================= GLOBAL ======================= */
.spl-wrapper {
  width: 100%;
  box-sizing: border-box;
  height:auto;
}

/* ======================= GRID PRINCIPAL ======================= */
.spl-main-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 26px;
  padding: 18px;
  box-sizing: border-box;
}

/* ======================= FEATURED (IZQUIERDA 2/3) ======================= */
.spl-featured {
  display: flex;
  background: linear-gradient(145deg, rgba(82,36,30,0.25), rgba(31,8,8,0.4));
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  box-sizing: border-box;
  align-items: stretch;
  gap: 22px;
  height: fit-content;
}

/* Imagen 40% */
.spl-featured-left {
  flex: 0 0 40%;
}

.spl-featured-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* ← cuadrada como referencia */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
}

/* Texto 60% */
.spl-featured-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}

/* Iconos arriba */
.spl-featured-top-icons {
  display: flex;
  justify-content: flex-end;
}
.spl-featured-top-icons .spl-icon {
  width: 32px;
  height: 32px;
  opacity: 0.95;
}

/* Texto central */
.spl-title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}

.spl-episode-number {
  font-size: 14px;
  color: #e9dfdb;
  margin: 4px 0 10px 0;
}

.spl-desc {
  font-size: 14px;
  color: #e8dfdb;
  line-height: 1.55;
  max-width: 90%;
}

/* Iconos abajo */
.spl-featured-bottom-icons {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  cursor: pointer;
}

.spl-featured-bottom-icons img {
  width: 32px;
  height: 32px;
}

/* ======================= LISTA DERECHA ======================= */
.spl-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #b37a67 #3d0e0a;
}

/* Scroll personalizado */
.spl-list::-webkit-scrollbar {
  width: 8px;
}
.spl-list::-webkit-scrollbar-track {
  background: rgba(50,10,7,0.6);
  border-radius: 6px;
}
.spl-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#d9a18f,#b06c5a);
  border-radius: 6px;
}

/* Item lista */
.spl-list-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  padding: 10px;
  height: fit-content;
  background: linear-gradient(120deg, rgba(69,29,22,0.45), rgba(36,10,8,0.55));
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}

/* Imagen */
.spl-list-left {
  padding-right: 4px;
}
.spl-list-thumb {
  width: 80%;
  aspect-ratio: 1 / 1; /* ← cuadrada exacta */
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
}

/* Contenido */
.spl-list-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Icono arriba */
.spl-list-top-icon {
  display: flex;
  justify-content: flex-end;
}
.spl-icon-small-top {
  width: 20px;
  height: 20px;
}

/* Texto */
.spl-list-texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.spl-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.spl-sub {
  font-size: 12px;
  color: #d5c7c7;
}

/* Iconos abajo */
.spl-list-bottom-icons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  cursor: pointer;
}
.spl-icon-small {
  width: 22px;
  height: 22px;
}

/* ======================= RESPONSIVIDAD (DESKTOP) ======================= */
@media (max-width: 1400px) {
  .spl-main-grid {
    grid-template-columns: 1.5fr 1fr;
  }
  .spl-desc {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  .spl-featured-left {
    flex: 0 0 45%;
  }
}

/* ======================= MÓVIL ======================= */
@media (max-width: 900px) {

    .spl-main-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 14px;
    }

    .spl-featured {
        flex-direction: column;
        padding: 18px;
        gap: 18px;
    }

    .spl-featured-left {
        width: 100%;
        flex: unset;
        padding-right: 0;
    }

    .spl-featured-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 18px;
    }

    .spl-featured-right {
        width: 100%;
        flex: unset;
        padding-left: 0;
        gap: 14px;
    }

    .spl-featured-top-icons {
        justify-content: flex-end;
    }

    .spl-title {
        font-size: 18px;
        line-height: 1.25;
        margin-top: 2px;
    }

    .spl-episode-number {
        font-size: 14px;
        opacity: 0.9;
    }

    .spl-desc {
        font-size: 14px;
        line-height: 1.55;
        opacity: 0.9;
        margin-bottom: 18px;
    }

    .spl-featured-bottom-icons {
        justify-content: flex-end;
        gap: 18px;
    }

    .spl-list {
        max-height: 50%;
    }

    .spl-list-item {
        grid-template-columns: 100px auto;
        padding: 14px;
        border-radius: 16px;
        gap: 14px;
    }

    .spl-list-thumb {
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }

    .spl-list-top-icon {
        margin-bottom: 4px;
    }

    .spl-name {
        font-size: 15px;
    }

    .spl-sub {
        font-size: 13px;
    }

    .spl-list-bottom-icons {
        gap: 14px;
        justify-content: flex-end;
    }
}


/* ======================= CAMBIOS QUE PEDISTE SOLO PARA MÓVIL ======================= */
@media (max-width: 900px) {

    /* 1) ICONO SUPERIOR DEL FEATURED ABSOLUTO */
    .spl-featured {
        position: relative;
    }

    .spl-featured-top-icons {
        position: absolute;
        top: 18px;
        right: 10px;
        z-index: 10;
    }

    .spl-featured-top-icons .spl-icon {
        width: 30px;
        height: 30px;
    }

    /* 2) IMAGEN DEL FEATURED REDUCIDA 30% Y CENTRADA */
    .spl-featured-left {
        display: flex;
        justify-content: center;
    }

    .spl-featured-image {
        width: 70% !important;
    }

    /* 3) IMAGEN DE LAS LIST CARDS AL 100% */
    .spl-list-thumb {
        width: 100% !important;
    }
}