/* --- ESTILOS GENERALES BAREFOOT --- */
.surf-font { 
    font-family: 'Permanent Marker', cursive; 
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: white; 
}

.hero-bg {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1502680390469-be75c86b636f?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
}

/* --- SISTEMA DE INTERCAMBIO DE IMÁGENES (Ficha de Producto) --- */

/* 1. Contenedor principal que gestiona el Hover */
#imageStage {
    position: relative;
    background-color: #f9f9f9;
    overflow: hidden; /* Evita que las fotos se salgan al hacer transiciones */
    border-radius: 1.5rem; /* Mantiene la estética redondeada */
}

/* 2. Imagen de HOVER (La que tú elijas en imgBack del JS) */
#hoverImage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Empieza invisible */
    transition: opacity 0.6s ease-in-out; /* Fundido suave profesional */
    z-index: 10;
    pointer-events: none; /* Permite que el mouse detecte el contenedor de abajo */
}

/* 3. Imagen PRINCIPAL (La que se ve al cargar) */
#mainImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
    z-index: 5;
}

/* 4. EFECTO HOVER: Mostramos la de atrás al pasar el mouse */
#imageStage:hover #hoverImage {
    opacity: 1;
}

/* Opcional: El frente se desvanece sutilmente para dar profundidad */
#imageStage:hover #mainImage {
    opacity: 0.8;
}