/* ==========================================================================
   ======================== SECCIÓN PIERCING (ACTUALIZADO) ===================
   ========================================================================== */

/* Contenedor principal del enlace (Aquí limitamos la altura y centramos) */
.piercing-link {
    overflow: hidden; /* Vital para el zoom y el recorte de altura */
    background-color: #000;
    
    /* === LIMITAR ALTURA - VALORES MODIFICABLES === */
    height: 400px; /* Altura máxima para celulares */
}

/* Media query para pantallas más grandes (PC) */
@media (min-width: 768px) {
    .piercing-link {
        height: 580px; /* Altura máxima elegante para PC */
    }
}

/* Las imágenes que ocupan el 50% (Aseguramos el encuadre centrado) */
.piercing-img {
    width: 100%;  /* Fuerza a llenar el ancho del contenedor */
    height: 100%; /* Fuerza a llenar el alto del contenedor (VITAL) */
    /* Clases de Bootstrap 'w-100 h-100' deben estar en el HTML */
    object-fit: cover; /* Se estira para llenar los 450px de alto sin deformarse */
    object-position: center center; /* Fuerza el encuadre centrado absoluto vertical y horizontal */
    
    /* Transición súper suave para el efecto hover */
    transition: transform 0.6s ease, opacity 0.3s ease;
}

/* Diseño del botón (span) superpuesto (Se mantiene igual) */
.piercing-btn {
    background-color: #8a5a44;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 0.8rem 2.5rem;
    border-radius: 0;
    border: 1px solid #8a5a44;
    z-index: 10;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ==================== EFECTOS HOVER (Se mantienen igual) ==================== */

/* 1. Al pasar el ratón por el bloque, la imagen hace un ligero zoom */
.piercing-link:hover .piercing-img {
    transform: scale(1.03); 
    opacity: 0.95;
}

/* 2. Al pasar el ratón por el bloque, el botón se oscurece un poco */
.piercing-link:hover .piercing-btn {
    background-color: #6d4533; 
    border-color: #6d4533;
    color: #ffffff;
}