/* ----------------------------------------- */
/* --- ESTILOS PARA EL SLIDER DE PRODUCTOS --- */
/* ----------------------------------------- */

/* 1. Estructura Principal del Slide (Layout 50/50)
--------------------------------------------------- */
.wp-block-acf-slider--item {
    display: flex; /* Activa Flexbox para crear las columnas */
    background-color: #1c3488; /* Fondo azul oscuro de ejemplo, como en la imagen */
    color: #ffffff; /* Texto blanco por defecto */
    min-height: 500px; /* Altura mínima para que se vea bien, ajústala si es necesario */
    overflow: hidden; /* Evita que el contenido se salga */
}

/* Columna Izquierda (Imagen) */
.slide-image-column {
    width: 50%; /* Ocupa la mitad del espacio */
    flex-shrink: 0; /* Evita que la columna se encoja */
}

.slide-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen cubra todo el espacio sin deformarse */
}

/* Columna Derecha (Contenido) */
.slide-content-column {
    width: 50%;
    flex-shrink: 0;
    padding: 40px; /* Espaciado interno */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
}

/* Estilos para el texto dentro de la columna de contenido */
.slide-content-column h3 {
    color: #00BFFF; /* Color azul claro para el título, como en la imagen */
    font-size: 2.5rem;
    margin-top: 0;
}

.slide-content-column .product-description {
    margin-top: 20px;
    opacity: 0.9;
}


/* 2. Estilo de la Lista de Características (con icono)
--------------------------------------------------- */
/* 1. Reseteamos el contenedor de la lista (UL) */
.product-features {
    list-style: none !important; /* Aseguramos que el contenedor no tenga estilo de lista */
    padding-left: 0 !important; /* Reseteamos el padding que suelen tener las listas */
    margin-top: 30px;
}

/* 2. Reseteamos CADA elemento de la lista (LI) - ¡Esta es la parte clave! */
.product-features li {
    list-style-type: none !important; /* Anula el tipo de viñeta (círculo, disco, etc.) */
    list-style: none !important; /* Anulación general */
    background: none !important; /* Elimina viñetas que son imágenes de fondo */
    padding-left: 0 !important; /* Quitamos el espacio que ocupaba la viñeta original */
    margin-bottom: 10px;
}


/* 3. AHORA, RECONSTRUIMOS NUESTRO ESTILO DESEADO (el icono >) */
.product-features li {
    position: relative; /* La posición es necesaria para el icono */
    padding-left: 25px !important; /* Devolvemos el espacio, pero ahora para NUESTRO icono */
}
.product-features li::before {
    content: '>'; /* Este es el icono de flecha */
    position: absolute;
    left: 0;
    top: 0;
    color: #00BFFF; /* Color azul claro para el icono */
    font-weight: bold;
}


/* 3. Estilo del Botón (como en la imagen de The Battery Show)
--------------------------------------------------- */
.product-button {
    background-color: #00bfff00; /* Color de fondo del botón */
    color: #ffffff; /* Color del texto y la flecha (azul oscuro) */
    padding: 10px 20px;
    text-decoration: none;
    margin-top: 30px;
    display: inline-flex; /* Permite alinear texto y flecha */
    align-items: center; /* Centra verticalmente texto y flecha */
    align-self: flex-start; /* Hace que el botón no ocupe todo el ancho */
    font-weight: bold;
    transition: background-color 0.3s ease;
    border-radius: 9999px;
    border: 2px solid #fff;
}

.product-button:hover {
    background-color: #ffffff;
    border: 2px solid #1c3488; /* Cambia a blanco al pasar el mouse */
}

/* Estilos para la flecha SVG dentro del botón */
.product-button svg {
    margin-left: 10px;
    width: 20px; /* Tamaño de la flecha */
    height: 20px;
}

.swiper-slide {
  height: auto !important;
}

/* Forzamos a nuestro contenedor de contenido (el de las dos columnas)
   a estirarse siempre al 100% de la altura del slide. */
.wp-block-acf-slider--item {
  height: 100% !important;
}

.product-description {
    width: 80%;          /* Ocupa el 80% del ancho de la columna de contenido */
    font-size: 1.1rem;   /* Un tamaño de fuente cómodo para leer */
    line-height: 1.6;    /* Aumenta el espacio entre líneas para mayor legibilidad */
    opacity: 0.9;        /* Lo hace ligeramente más tenue que el título */
    margin-top: 20px;    /* Espacio superior para separarlo del título */
}

/* ----------------------------------------- */
/* --- 6. ESTILOS PARA LA VERSIÓN MÓVIL --- */
/* ----------------------------------------- */

/* Estas reglas se aplicarán solo en pantallas de 768px de ancho o menos (tablets y móviles) */
@media (max-width: 768px) {

    /* Cambiamos la dirección del contenedor principal a columna */
    .wp-block-acf-slider--item {
        flex-direction: column; /* Apila los elementos verticalmente */
    }

    .slide-image-column {
        height: 250px; 
        flex-shrink: 0;
        width: 100%; 
    }
    
    .slide-content-column {
        padding: 25px;
        justify-content: flex-start; 
        width: fit-content;
    }

    .slide-content-column h2 {
        font-size: 1rem !important; 
        width: 90%;
        margin-top: 0px !important;
    }

    .product-description {
        width: 100%;
        font-size: 1rem;
        margin: 0 !important;
    }

    /* (Opcional) Ocultamos las flechas de navegación en móvil, 
       ya que se puede deslizar con el dedo. */
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .slide-content-column h3 {
    font-size: 1.5rem;
    }

    .slide-content-column li {
    font-size: 1rem;
    }

    .product-features {
    margin-top: 0px;
    }

    .product-button {
        margin-top: 0px;
        margin-bottom: 8px;
    }

    .swiper-button-next,
    .swiper-rtl,
    .swiper-button-prev {
        display: none !important;
    }

    .swiper-pagination-bullets {
        display: none;
    }


}