/* ===== ESTILOS DEL CARRUSEL ===== */
.carrusel-contenedor {
    position: relative;
    margin-bottom: var(--aes-space-5);
}

.visor-imagen-principal {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Aspect ratio 1:1 */
    overflow: hidden;
    background: var(--aes-surface-alt);
    border-radius: var(--aes-radius-lg);
}

.visor-imagen-principal img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.flecha-carrusel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--aes-surface-translucent);
    border: none;
    border-radius: var(--aes-radius-full);
    width: 40px;
    height: 40px;
    font-size: var(--aes-text-lg);
    cursor: pointer;
    z-index: var(--aes-z-raised);
    transition: all var(--aes-duration-slow) ease;
}

.flecha-carrusel:hover {
    background: var(--aes-surface);
    box-shadow: var(--aes-shadow-hover);
}

.flecha-carrusel.prev {
    left: var(--aes-space-3);
}

.flecha-carrusel.next {
    right: var(--aes-space-3);
}

.dots-contenedor {
    display: flex;
    justify-content: center;
    gap: var(--aes-space-2);
    margin: var(--aes-space-3) 0;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: var(--aes-radius-full);
    background: var(--aes-border);
    cursor: pointer;
    transition: all var(--aes-duration-slow) ease;
}

.dot.active {
    background: var(--aes-primary);
    transform: scale(1.2);
}

.thumbnails-rejilla {
    display: flex;
    gap: var(--aes-space-3);
    overflow-x: auto;
    padding: var(--aes-space-3) 0;
}

.thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--aes-radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--aes-duration-slow) ease;
    flex-shrink: 0;
}

.thumbnail.active {
    border-color: var(--aes-primary);
}

.thumbnail:hover {
    opacity: 0.8;
}

/* ===== ESTILOS DE LA FICHA ===== */
.informacion-producto-ficha {
    padding: var(--aes-space-5);
}

.informacion-producto-ficha h2 {
    font-family: var(--aes-font-display);
    letter-spacing: 0.2px;
    font-weight: var(--aes-weight-bold);
    color: var(--aes-ink);
    margin-bottom: var(--aes-space-4);
}

/* Categoría -- discreta, mismo criterio que .aes-product-card__category
   del catálogo (2.2), sin mayúscula sostenida por ser frase completa
   ("Categoría: X") y no un chip corto. */
.aes-pdp-categoria {
    margin: 0 0 var(--aes-space-3);
    font-size: var(--aes-text-sm);
    color: var(--aes-ink-muted);
}

.informacion-producto-ficha h3 {
    font-size: var(--aes-text-2xl);
    font-weight: var(--aes-weight-bold);
    color: var(--aes-navy);
    margin-bottom: var(--aes-space-5);
}

.informacion-producto-ficha h3 .precio-centavos {
    font-size: 0.5em;
    font-weight: var(--aes-weight-bold);
    vertical-align: super;
    margin-left: var(--aes-space-1);
}

.especificaciones-tecnicas-caja {
    background: var(--aes-surface-alt);
    padding: var(--aes-space-4);
    border-radius: var(--aes-radius-lg);
    margin-bottom: var(--aes-space-5);
}

.especificaciones-tecnicas-caja h5 {
    font-weight: var(--aes-weight-bold);
    color: var(--aes-ink);
}
.especificaciones-tecnicas-caja strong {
    color: var(--aes-ink-muted);
    font-weight: var(--aes-weight-medium);
}

/* ===== ALERTAS DE STOCK ===== */
.alerta-stock-mensaje {
    margin-top: var(--aes-space-4);
}

.alerta-stock-mensaje .alert {
    padding: var(--aes-space-3) var(--aes-space-4);
    border-radius: var(--aes-radius-sm);
    font-weight: var(--aes-weight-medium);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .informacion-producto-ficha {
        padding: var(--aes-space-4) 0;
    }
    
    .thumbnail {
        width: 50px;
        height: 50px;
    }
    
    .flecha-carrusel {
        width: 30px;
        height: 30px;
        font-size: var(--aes-text-sm);
    }

    /* CTA de compra sticky (ticket 4.3): la fila de cantidad + "Agregar al
       carrito" deja de estar al final de la ficha y queda fija abajo del
       viewport -- siempre alcanzable sin volver a subir. padding-right deja
       libre el botón flotante de WhatsApp (nunca se toca ese selector). */
    .aes-pdp-cta-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--aes-z-raised);
        margin: 0;
        padding: var(--aes-space-3) var(--aes-space-4);
        padding-right: 90px;
        background: var(--aes-surface);
        border-top: 1px solid var(--aes-border);
        box-shadow: var(--aes-shadow-top);
    }

    /* Reserva el alto de la barra fija para que no tape el final de la
       ficha ni el footer al llegar al fondo de la página. */
    .container-producto-integral {
        padding-bottom: 88px;
    }
}