/* --- Variables de Color y Fuentes (Personaliza según tu marca) --- */
:root {
    --color-primario: #556867; /* Azul corporativo oscuro (ejemplo) */
    --color-secundario: #000000; /* Azul más brillante para acentos (ejemplo) */
    --color-fondo-seccion: #141414da; /* Un gris muy claro o blanco */
    --color-texto-principal: #212529;
    --color-texto-secundario: #495057;
    --color-blanco: #ffffff;
    --fuente-principal: 'Montserrat', sans-serif; /* Fuente moderna y profesional */
    --fuente-titulos: 'Roboto Slab', serif; /* Fuente con serifa para títulos, da peso */
}

/* --- Estilos Generales de la Sección --- */
.seccion-lonas-estrella {
    background-color: var(--color-fondo-seccion);
    padding: 60px 20px; /* Más padding para un look premium */
    overflow: hidden; /* Para manejar elementos que puedan desbordar con animaciones */
    position: relative; /* Para posibles pseudo-elementos decorativos */
}

/* --- Estilo Impactante para el Título --- */
.seccion-lonas-estrella__titulo {
    font-family: var(--fuente-titulos);
    font-size: clamp(2.5rem, 5vw, 3.8rem); /* Tamaño responsivo */
    color: var(--color-primario);
    text-align: center;
    margin-bottom: 25px; /* Espacio antes del contenido */
    font-weight: 700;
    letter-spacing: -1px; /* Ajuste fino para títulos grandes */
    position: relative; /* Para el subrayado decorativo */
    padding-bottom: 15px; /* Espacio para el subrayado */
}

/* Subrayado decorativo e innovador para el título */
.seccion-lonas-estrella__titulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Ancho del subrayado */
    height: 5px; /* Grosor */
    background-image: linear-gradient(to right, var(--color-secundario), var(--color-primario));
    border-radius: 30px;
}

/* --- Estilo para el Artículo del Producto Destacado --- */
.producto-estrella-destacado {
    display: flex;
    flex-direction: column; /* Stack en móvil */
    align-items: center;
    gap: 30px;
    max-width: 1100px; /* Ancho máximo del contenedor del producto */
    margin: 40px auto 0; /* Margen superior y centrado */
    padding: 30px;
    background-color: var(--color-blanco);
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 15px 35px rgba(0, 90, 156, 0.1), /* Sombra principal más suave y difusa */
                0 5px 15px rgba(0, 0, 0, 0.07);     /* Sombra secundaria más cercana */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.producto-estrella-destacado:hover {
    transform: translateY(-10px); /* Efecto de elevación al pasar el cursor */
    box-shadow: 0 25px 45px rgba(0, 90, 156, 0.15),
                0 10px 20px rgba(0, 0, 0, 0.1);
}

/* --- Diseño Impresionante para la Imagen --- */
/* --- Diseño Impresionante para la Imagen con FORMA DE PLASMA --- */
.producto-estrella-destacado__figura {
    margin: 0;
    position: relative; 
    width: 100%; 
    max-width: 550px; 
    /* ¡Aplicamos el clip-path aquí! */
    clip-path: url(#plasma-clip-shape);
    /* El aspect-ratio ayuda a mantener la forma del plasma consistente
       antes de que la imagen cargue o si la imagen no es perfectamente responsiva.
       Ajusta este valor según la proporción de tu forma de plasma y tus imágenes.
       Por ejemplo, si tu forma es más ancha que alta. */
    aspect-ratio: 4 / 3; /* Ejemplo, ajusta según tu forma y contenido */
    background-color: #e0e0e0; /* Color de fondo mientras carga la imagen */
    /* Quitamos overflow: hidden y border-radius de aquí, ya que el clip-path define el borde */
}
.producto-estrella-destacado__imagen {
    display: block;
    width: 100%;
    height: 100%; /* Para que llene la figura (que ahora tiene aspect-ratio) */
    object-fit: cover; /* Muy importante para que la imagen cubra la forma sin distorsionarse */
    /* Ya no necesitamos border-radius en la imagen, el clip-path lo maneja */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.5s ease;
    filter: saturate(1.1); 
}

.producto-estrella-destacado:hover .producto-estrella-destacado__imagen {
    transform: scale(1.08); 
    filter: saturate(1.3) brightness(1.05);
}

/* Efecto de "marco" o "brillo" sutil alrededor de la imagen (opcional) */
.producto-estrella-destacado__figura::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px; /* Ligeramente más grande */
    border: 2px solid transparent;
    border-radius: 15px; /* Un radio un poco mayor que la imagen */
    z-index: -1; /* Detrás de la imagen */
    transition: border-color 0.4s ease;
}

.producto-estrella-destacado:hover .producto-estrella-destacado__figura::before {
    border-color: var(--color-secundario); /* Color del borde al hacer hover en el artículo */
}


/* --- Estilo para la Información del Producto --- */
.producto-estrella-destacado__informacion {
    text-align: center; /* Centrado en móvil */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar el botón */
    justify-content: center; /* Centrar verticalmente si hay espacio */
    padding: 10px;
     position: relative; /* Para asegurar que esté sobre cualquier fondo si hay superposiciones */
    z-index: 1; /* Para que el texto esté sobre la figura si hay un layout más complejo */
}

.producto-estrella-destacado__descripcion {
    font-family: var(--fuente-principal);
    color: var(--color-texto-secundario);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px; /* Más espacio antes del CTA */
    max-width: 500px; /* Para mejor legibilidad */
}

/* --- Estilo para la Llamada a la Acción (CTA) --- */
.producto-estrella-destacado__cta {
    font-family: var(--fuente-principal);
    display: inline-block;
    background-image: linear-gradient(to right, var(--color-secundario) 0%, var(--color-primario) 70%, var(--color-primario) 100%);
    background-size: 200% auto; /* Para efecto de transición en hover */
    color: var(--color-blanco);
    padding: 15px 35px; /* Botón más grande */
    text-decoration: none;
    border-radius: 50px; /* Botón tipo píldora */
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición suave para todo */
    box-shadow: 0 4px 15px rgba(0, 90, 156, 0.2);
}

.producto-estrella-destacado__cta:hover,
.producto-estrella-destacado__cta:focus {
    background-position: right center; /* Cambia la dirección del gradiente */
    transform: translateY(-3px) scale(1.02); /* Ligera elevación y escala */
    box-shadow: 0 7px 20px rgba(0, 90, 156, 0.3);
    color: var(--color-blanco); /* Asegurar que el color del texto no cambie */
}

/* --- Diseño Responsivo para Tablets y Escritorio --- */
@media (min-width: 768px) {
    .producto-estrella-destacado {
        flex-direction: row; /* Imagen a un lado, texto al otro */
        gap: 40px; /* Más espacio en escritorio */
    }

    .producto-estrella-destacado__figura {
        flex-basis: 50%; /* La imagen ocupa la mitad del espacio */
        max-width: none; /* Permitir que flex-basis controle el tamaño */
    }

    .producto-estrella-destacado__informacion {
        flex-basis: 50%; /* El texto ocupa la otra mitad */
        text-align: left; /* Alinear texto a la izquierda */
        align-items: flex-start; /* Alinear elementos al inicio */
    }

    .producto-estrella-destacado__descripcion {
        font-size: 1.15rem; /* Un poco más grande en escritorio */
        margin-left:0; /* Resetear si había auto-márgenes */
        margin-right:0;
    }
}

@media (min-width: 1024px) {
    .seccion-lonas-estrella__titulo {
        margin-bottom: 40px; /* Más espacio en pantallas grandes */
    }

    .producto-estrella-destacado {
        gap: 60px;
        padding: 50px;
    }
}

/* --- Consideraciones Adicionales para "Impresionar" --- */
/*
1.  Fuentes de Calidad:
    Asegúrate de cargar las fuentes (Montserrat y Roboto Slab o las que elijas) correctamente.
    Puedes usar Google Fonts:
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto+Slab:wght@700&display=swap" rel="stylesheet">

2.  Optimización de Imágenes:
    Usa imágenes de alta resolución pero optimizadas para la web para que no tarden en cargar.

3.  Animaciones Sutiles al Hacer Scroll (JavaScript o Intersection Observer API):
    Podrías hacer que los elementos aparezcan con un fade-in o slide-in sutil cuando el usuario
    hace scroll y la sección entra en la vista. Esto añade mucho dinamismo.

4.  Microinteracciones:
    Pequeñas respuestas visuales a las acciones del usuario (como los hovers ya implementados)
    mejoran la sensación de un diseño pulido.
*/