/* MS IMPLANTES - ULTRA PREMIUM STYLES v12 (Grey/Gold Specific Request) */

/* --- Variables --- */
:root {
    --bg-body: #000000;
    /* Negro Total */
    --bg-card: #000000;
    /* Tarjetas Negras */
    --g-card-hover-bg: #111111;
    /* Gris muy oscuro al hover */

    --text-main: #f0f0f0;
    --text-card: #ffffff;

    --primary-gold: #cda434;
    /* Dorado */
    --glow-gold: 0 0 15px rgba(205, 164, 52, 0.4);

    --font-main: 'Montserrat', sans-serif;
}

/* --- Global Overrides --- */
body,
.layout,
.wrapper,
.module-gray {
    background-color: var(--bg-body) !important;
    color: var(--text-main);
    font-family: var(--font-main) !important;
}

/* APPLY DARK BACKGROUND BUT PRESERVE IMAGES */
section,
.module {
    background-color: var(--bg-body) !important;
    /* Set default dark background */
    color: var(--text-main);
    font-family: var(--font-main) !important;
}

/* Ensure sections with background images (Hero, Parallax) show them */
#header,
.parallax,
.module-header {
    background-color: transparent !important;
    /* Allow image to show */
    /* background-image rule REMOVED to allow inline styles/JS to work */
    background-position: center center;
    background-size: cover;
}

/* If the template uses inline styles for background-image, simple background-color: transparent is usually enough if !important wasn't used on the background shorthand elsewhere */

h1,
h2,
h3,
h4,
.module-title h2 {
    font-family: var(--font-main) !important;
    color: var(--primary-gold) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

p,
.module-title p {
    font-family: var(--font-main) !important;
    color: #e0e0e0;
    /* Brighter grey for better contrast on dark */
    font-weight: 400;
    /* Slightly thicker */
}

a {
    text-decoration: none !important;
    transition: all 0.3s ease;
    color: #ddd;
}

a:hover {
    color: var(--primary-gold);
}

/* --- HERO SECTION --- */
#header h1 {
    display: none !important;
}

/* #header background handled by global parallax rules now */

/* --- PRODUCT CARDS (Elegant & Small) --- */
.portfolio-item .portfolio-wrapper {
    background: var(--bg-card);
    /* NEGRO */
    border: 1px solid #222;
    /* Borde sutil para separar del fondo */
    border-radius: 4px;
    padding: 10px;
    margin: 5px;
    /* Menos espacio para el grid de 6 */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Imágenes */
.portfolio-item img {
    width: 100%;
    height: auto;
    max-height: 160px;
    /* Permitimos que llene casi todo el recuadro */
    object-fit: contain;
    margin: 0 auto;
    display: block;
    transform: scale(1.3);
    /* ZOOM AUMENTADO PARA LLENAR EL RECUADRO */
    transform-origin: center center;
    transition: transform 0.4s ease;
}

/* Títulos y textos dentro de la tarjeta blanca */
.portfolio-caption h5.portfolio-title,
.portfolio-subtitle {
    text-align: center;
}

/* Títulos de Productos (Fuera de la tarjeta blanca, sobre fondo negro) */
.portfolio-caption h5.portfolio-title,
.product-title {
    font-family: var(--font-main);
    font-weight: 700;
    color: #ffffff !important;
    /* BLANCO para leerse sobre fondo negro */
    font-size: 0.85rem;
    /* Texto más pequeño */
    margin-top: 10px;
    transition: color 0.3s;
}

.portfolio-item:hover .portfolio-caption h5.portfolio-title {
    color: var(--primary-gold) !important;
    /* Texto se pone dorado al hover */
}

.portfolio-subtitle,
.product-category {
    font-family: var(--font-main);
    color: #bbbbbb !important;
    /* Gris claro */
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0;
}

/* --- HOVER EFFECT: GOLD BORDER + DARKER BG (Requested) --- */
.portfolio-item:hover .portfolio-wrapper {
    background: var(--g-card-hover-bg) !important;
    border-color: var(--primary-gold);
    /* CONTORNO DORADO */
    box-shadow: var(--glow-gold);
    transform: translateY(-3px);
    z-index: 10;
}

/* --- FORCE 6 COLUMNS (Grid Overrides) --- */
@media (min-width: 992px) {

    .row-portfolio[data-columns="6"] .grid-sizer,
    .row-portfolio[data-columns="6"] .portfolio-item {
        width: 16.666% !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {

    .row-portfolio[data-columns="6"] .grid-sizer,
    .row-portfolio[data-columns="6"] .portfolio-item {
        width: 33.333% !important;
    }
}

.portfolio-item .portfolio-wrapper {
    margin: 5px !important;
    padding: 5px !important;
    /* Menos padding para que la imagen llene más */
}



.portfolio-caption h5.portfolio-title {
    font-size: 0.75rem !important;
    /* Texto proporcional a la miniatura */
}

/* INTERPRETACIÓN ALTERNATIVA: Si el usuario quiere fondo "gris mas oscuro" DE LA TARJETA,
   y la tarjeta es blanca, un gris suave (#f0f0f0) se nota "mas oscuro" que el blanco puro.
   Si ponemos gris oscuro real (#333), la foto JPG con fondo blanco se verá como un parche horrible.
   Mantendré un gris sutil para preservar la estética. */

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item:hover .portfolio-title {
    color: var(--primary-gold) !important;
}

/* --- FORCE GOLD OVERLAY (No more aqua/green) --- */
.portfolio-overlay,
.portfolio-item:hover .portfolio-overlay {
    background: rgba(184, 134, 11, 0.85) !important;
    /* Dark Gold/Brown Overlay */
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    /* Show on hover */
}

/* --- FIX CLICK FUNCTIONALITY --- */
/* Make the link cover the ENTIRE card so clicking anywhere opens the popup */
.portfolio-item {
    position: relative;
    /* Ensure context for absolute link */
}

a.portfolio-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    /* Bring to front */
    cursor: pointer;
    background: transparent;
    /* Invisible clickable layer */
}

/* Remove default icon centering styles if they interfere, or keep them hidden */
.portfolio-link::before,
.portfolio-link::after {
    display: none !important;
}

/* --- REMOVING BLUE SHADOWS/EFFECTS --- */
::selection {
    background: var(--primary-gold);
    color: #000;
}

/* --- FOOTER (Unified & Dark) --- */
.footer {
    background-color: #050505 !important;
    /* Casi negro */
    border-top: 4px solid var(--primary-gold);
    /* Línea dorada divisoria */
    padding: 50px 0;
    color: #999;
}

.widget-title h5 {
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 3px solid var(--primary-gold);
    padding-left: 10px;
    margin-bottom: 20px;
}

.widget_text,
.widget_text p,
.widget_text a {
    color: #aaa;
    line-height: 1.8;
}

.widget_text a:hover {
    color: var(--primary-gold);
    text-decoration: underline;
}

.footer-copyright {
    background-color: #000 !important;
    color: #555;
    padding: 20px 0;
    border-top: 1px solid #111;
}

/* --- Icons Box (Servicios) --- */
.icon-box-title h6 {
    color: var(--primary-gold) !important;
}

.icon-box-icon {
    color: #fff;
}

.icon-box-left .icon-box-icon img {
    filter: brightness(0) invert(1);
    /* Hacer iconos blancos */
}

/* --- FILTERS --- */
.filters a {
    color: #ffffff !important;
    /* White text for inactive filters */
    font-family: var(--font-main);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.filters a.current,
.filters a:hover {
    color: var(--primary-gold) !important;
    border-bottom: 1px solid var(--primary-gold);
    /* Optional underline */
}

/* SOCIAL BRANDS */
.social-facebook:hover {
    color: #3b5998 !important;
}

.social-whatsapp:hover {
    color: #25D366 !important;
}

.icon-whatsapp {
    color: #25D366 !important;
    margin-right: 5px;
}

.icon-envelope {
    color: #cda434 !important;
    margin-right: 5px;
}

.icon-phone {
    color: #cda434 !important;
    margin-right: 5px;
}

/* Instagram Gradient Text */
.social-instagram:hover {
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- WHATSAPP PULSE ANIMATION --- */
@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.btn-whatsapp-pulse {
    background: linear-gradient(45deg, #25D366, #128C7E) !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 35px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    animation: pulse-whatsapp 2s infinite;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-whatsapp-pulse:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    color: #fff !important;
}

.catalog-guide {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    border: 1px dashed rgba(205, 164, 52, 0.3);
    text-align: center;
}

.guide-step {
    display: inline-block;
    padding: 0 20px;
    text-align: center;
}

.guide-step i {
    font-size: 1.5rem;
    color: var(--primary-gold);
    display: block;
    margin-bottom: 5px;
}

.guide-step span {
    font-size: 0.8rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- CINEMATIC VIDEO SECTION (DEFINITIVE COMPACT FIX) --- */
.video-premium-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    aspect-ratio: 16 / 9;
    /* Soporte moderno */
}

/* Fallback para navegadores viejos */
@supports not (aspect-ratio: 16/9) {
    .video-premium-container {
        padding-top: 56.25%;
        height: 0;
    }
}



.video-premium-container iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}