/* =======================================================
   ESTILO FINAL PROFESIONAL - DECOCEMENTO PTY
   ======================================================= */

:root {
    --naranja-brand: #ff6b00;
    --naranja-hover: #e66000;
    --azul-pty: #002363;
    --fuente-base: 'Poppins', sans-serif;
}

body {
    font-family: var(--fuente-base);
    background-color: #f4f4f4;
    margin: 0;
    overflow-x: hidden; /* Evita scrolls laterales raros */
}

/* NAVBAR - El alma de la marca */
.custom-navbar {
    background-color: #ffffff !important;
    padding: 0.8rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}


.logo-header {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* Enlaces en header*/
.navbar-brand span { color: #f55401 !important; }

.nav-link { 
    color: red !important; 
    margin: 0 10px; 
    font-weight: 400;
    transition: all 0.3s ease; 
}

.nav-link:hover { 
    color: #002363 !important; 
    transform: translateY(-2px); 
}



.btn-white-action:hover {
    background-color: #f0f0f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}



.btn-orange-hero {
    background-color: var(--naranja-brand);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    padding: 12px 30px;
    transition: 0.3s;
}

.btn-orange-hero:hover {
    background-color: var(--naranja-hover);
    color: white;
    transform: scale(1.05);
}

/* CARDS SERVICIOS - Look de lujo */
.service-card {
    border: none !important;
    border-radius: 25px !important;
    background: #ffffff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

.text-orange { color: var(--naranja-brand); }

/* TEXTURAS - El catálogo visual */
.texture-img {
    height: 180px;
    width: 100%;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    border: 4px solid transparent;
    transition: all 0.4s ease;
    cursor: pointer;
}

.texture-img:hover {
    border-color: var(--naranja-brand);
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* FOOTER SLIM */
.custom-footer-slim {
    background-color: #f8f9fa;
    border-top: 2px solid var(--naranja-brand);
    padding: 30px 0;
}

/* Esto asegura que el azul funcione tanto en el footer como en el header */
.pty-text, 
.pty-footer,
.navbar-brand .pty-text { 
    color: #002363 !important; /* O var(--azul-pty) si ya la tienes definida */
    font-weight: 700 !important;
}




/* Ajustes para que en el celular de para se vea perfecto */


/* ===================================================
   CORRECCIÓN PARA MÓVIL: ACTIVAR MOVIMIENTO AL TOQUE
   =================================================== */

/* En móviles, cuando se toca la opción (active) */
@media (max-width: 991px) {
    .dropdown-item:hover {
        background-color: transparent !important;
        color: #002363 !important;
        transform: translateY(-2px);
        transition: all 0.5s ease;
    }
    
}

/* ===================================================
   LISTA DESPLEGABLE MÓVIL: AJUSTE DISCRETO Y ELEGANTE
   =================================================== */

@media (max-width: 991px) {
    /* El contenedor ahora es discreto y transparente */
    .dropdown-menu {
      
        backdrop-filter: blur(10px); /* Desenfoca lo que está detrás */
        border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Borde muy fino */
        border-radius: 15px !important;
        margin: 10px 15px !important; /* Lo separamos de los bordes del teléfono */
        padding: 10px !important;
        width: fit-content !important; /* ¡CLAVE! Se ajusta al ancho del texto */
        min-width: 200px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    }

    /* Las opciones dentro de la lista */
    .dropdown-item {
        color: #002363 !important;
        font-size: 0.95rem !important;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    /* Efecto al tocar: Se ilumina y flota un poquito */
    .dropdown-item:active, 
    .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        transform: scale(0.98); /* Pequeña pulsación al tocar */
        padding-left: 20px !important; /* Se mueve a la derecha */
    }
}

/* En Computadora sigue siendo el efecto naranja que querías */
@media (min-width: 992px) {
    .dropdown-item:hover {
        background-color: transparent !important;
        color: #002363 !important;
        transform: translateY(-2px);
        transition: all 0.5s ease;
    }
}

.dropdown-item {
        color: red !important;
        font-size: 0.95rem !important;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    /* ===================================================
   REDES SOCIALES CON SUS COLORES OFICIALES
   =================================================== */

/* Ajuste general para todos los iconos del footer */
.social-icon-footer {
    font-size: 1.6rem;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 0 10px;
}

/* COLORES FIJOS DE MARCA */
.social-icon-footer.facebook {
    color: #1877F2 !important; /* Azul Facebook */
}

.social-icon-footer.linkedin {
    color: #0077B5 !important; /* Azul LinkedIn Oficial */
}

.social-icon-footer.instagram {
    color: #E4405F !important; /* Rosa Instagram */
}

.social-icon-footer.tiktok {
    color: #000000 !important; /* Negro TikTok */
}

.social-icon-footer.youtube {
    color: #FF0000 !important; /* Rojo YouTube Oficial */
}

/* EFECTO DE MOVIMIENTO (Para todos por igual) */
.social-icon-footer:hover, 
.social-icon-footer:active {
    transform: translateY(-5px); /* Salto elegante */
    filter: brightness(1.2); /* Se ilumina un poco */
    text-decoration: none !important;
}

/* Color oficial de WhatsApp (Verde) */
.fa-whatsapp {
    color: #25D366 !important; /* Verde oficial de WhatsApp */
    
}



/* Mantenemos la limpieza para que NO tenga la raya debajo */
.social-icon-footer, a {
    text-decoration: none !important;
}



/* --- AJUSTES ESPECÍFICOS PARA MÓVIL --- */
@media (max-width: 768px) {
    .hero-section {
        height: auto !important; /* Deja que el contenido defina la altura */
        padding: 80px 20px !important; /* Dale aire arriba y abajo */
    }

    /* Título principal en el Infinix */
    .hero-section h1.display-3 {
        font-size: 1.8rem !important; /* Un poco más pequeño para que no ocupe 6 líneas */
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        /* Le damos un toque extra de sombra a la letra para despegarla del fondo */
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5); 
    }

    /* Subtítulo */
    .hero-section .lead {
        font-size: 1.05rem !important;
        line-height: 1.5;
        margin-bottom: 35px !important;
        /* Un blanco puro para máximo contraste */
        color: #ffffff !important; 
        text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    }
}



/* ===================================================
   BOTONES ESTILIZADOS Y COMPACTOS (MÓVIL)
   =================================================== */

@media (max-width: 768px) {
    /* El contenedor ahora les da más aire a los lados */
    .hero-section .d-flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important; 
        padding: 0 40px !important; /* Empujamos los botones hacia adentro */
    }

    /* Botón más corto y delgado */
    .hero-section .btn-lg {
        width: 100% !important;
        max-width: 210px !important; /* ¡CLAVE! Antes estaba en 260px, ahora es más fino */
        padding: 8px 15px !important; /* Menos alto para que se vea refinado */
        font-size: 0.85rem !important; /* Letra un pelín más pequeña para que no grite */
        border-radius: 8px !important; /* Curvatura más suave */
        font-weight: 500;
        letter-spacing: 0.5px;
         transform: translateY(-3px);     /* Se levanta un poquito */
    }

    /* Ajuste del icono para que no se vea desproporcionado */
    .hero-section .btn-lg i {
        font-size: 1rem;
        margin-right: 5px;
    }
}

/* ===================================================
   AJUSTE DE BOTONES PARA COMPUTADORA (PC/DESKTOP)
   =================================================== */

/* Este cambio afecta solo a pantallas grandes */
@media (min-width: 992px) {
    .hero-section .btn-lg {
        padding: 10px 25px !important; /* Mucho más bajos y estilizados */
        font-size: 1rem !important;      /* Tamaño de letra equilibrado */
        width: auto !important;          /* Que el botón solo mida lo que mide el texto */
        min-width: 180px;                /* Pero con un mínimo para que no sean enanos */
        border-radius: 8px !important;   /* Curvatura más sutil */
        transition: all 0.3s ease;       /* Para que el efecto al pasar el mouse sea suave */
    }

    /* Efecto Hover: Para que se sienta interactivo en PC */
    .hero-section .btn-lg:hover {
        transform: translateY(-3px);     /* Se levanta un poquito */
        box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    }
}

/* --- HERO SECTION --- (inicio) */
.hero-section {
    min-height: 85vh;
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('img/Portada.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
}

/* --- AJUSTES PARA COMPUTADORA (LAPTOPS Y PC) --- */
@media (min-width: 992px) {
    .hero-section {
        min-height: 60vh; /* Reducimos la altura en PC para que no sea tan masivo */
        max-width: 1250px; /* Encajonamos la sección para que la foto no se desparrame a los lados */
        margin: 0 auto; /* Centramos todo el contenedor en las pantallas grandes */
        border-radius: 12px; /* Le da unas esquinas redondeadas muy elegantes */
        overflow: hidden; /* Asegura que la foto respete las esquinas redondeadas */
        background-attachment: scroll; /* Cambiamos a scroll en PC para mejorar el encuadre de la piscina */
    }
}



/* =======================================================
   ESTILOS NUEVA SECCIÓN ESPECIALIDADES
   ======================================================= */

#especialidades {
    border-top: 1px solid rgba(0,0,0,0.05); /* Separación sutil */
}

.pty-slogan {
    font-size: 1.1rem;
    font-weight: 300;
}

/* El contenedor individual de cada especialidad */
.specialty-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    cursor: default;
}

/* El círculo naranja sutil alrededor del icono */
.specialty-item .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 107, 0, 0.1); /* Naranja con transparencia */
    border: 2px solid rgba(255, 107, 0, 0.2);
}

/* El título de la especialidad (Azul PTY) */
.specialty-title {
    color: #002363; /* var(--azul-pty) */
    font-size: 1rem;
    margin-top: 10px;
    line-height: 1.2;
}

/* Efecto hover integrado al estilo suave de la página */
.specialty-item:hover {
    transform: translateY(-5px);
}

.specialty-item:hover .icon-circle {
    background-color: rgba(255, 107, 0, 0.2); /* Se oscurece el círculo un poco */
    border-color: var(--naranja-brand);
}

/* Estilo para los bloques de evolución */
.border-orange {
    border-color: var(--naranja-brand) !important;
}

.bg-light {
    background-color: #f9f9f9 !important;
}

/* Ajuste para que los números 01 y 02 resalten */
.text-orange {
    color: var(--naranja-brand) !important;
}

/* Animación sutil al pasar el mouse por los bloques de texto */
.col-md-5 .p-4 {
    transition: all 0.3s ease;
}

.col-md-5 .p-4:hover {
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateX(5px);
}


.bg-trayectoria {
    position: relative;
    /* REEMPLAZA 'proyecto-fondo.jpg' con el nombre de tu imagen real */
    background-image: linear-gradient(rgba(0, 35, 99, 0.4), rgba(0, 35, 99, 0.4)), url('img/deco3.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Esto crea un efecto elegante al bajar con el mouse */
    color: white !important;
}

.bg-trayectoria h2, .bg-trayectoria h3, .bg-trayectoria p {
    color: white !important;
}

.evolution-card-dark {
    background-color: rgba(255, 255, 255, 0.1); /* Cuadros semi-transparentes */
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado moderno */
    border-left: 5px solid var(--naranja-brand);
    padding: 30px;
    border-radius: 0 15px 15px 0;
    height: 100%;
}



/* --- PÁGINA SPRAY DECK --- */

.hero-spray-page {
    /* REEMPLAZA CON UNA FOTO DE PISCINA DE TUS PAPÁS */
    background: linear-gradient(rgba(0, 35, 99, 0.8), rgba(0, 35, 99, 0.4)), url('img/hero-spray.jpg');
    background-size: cover;
    background-position: center;
    min-height: 500px;
    display: flex;
    align-items: center;
}

.bg-orange {
    background-color: var(--naranja-brand);
}

.btn-orange {
    background-color: var(--naranja-brand);
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 50px;
}

.btn-orange:hover {
    background-color: #e65c00;
    color: white;
    transform: translateY(-2px);
}

.text-orange {
    color: var(--naranja-brand);
}

/* Efecto para las tarjetas de la galería */
.card img {
    transition: transform 0.5s ease;
    height: 250px;
    object-fit: cover;
}

.card:hover img {
    transform: scale(1.1);
}

/* --- HERO SECTION - SPRAY DECK --- (Celulares y Tablets) */
.hero-spray-page {
    /* Fondo con capa oscura y la imagen específica de Spray Deck */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/spray5.jpeg');
    
    /* Ajustes para que la imagen se vea profesional */
    background-size: cover;         /* Cubre todo el espacio sin deformarse */
    background-position: center;    /* Centra la imagen */
    background-repeat: no-repeat;
    background-attachment: fixed;   /* Efecto parallax moderno en móviles */
    
    /* Altura en móviles */
    min-height: 70vh;               /* Usamos vh para que ocupe una buena porción de la pantalla */
    display: flex;
    align-items: center;
    color: white;                   /* Asegura que los textos sean blancos */
    transition: all 0.3s ease;      /* Suaviza cualquier transición de tamaño */
}

/* --- AJUSTES PARA COMPUTADORA (LAPTOPS Y PC) --- */
@media (min-width: 992px) {
    .hero-spray-page {
         min-height: 60vh; /* Reducimos la altura en PC para que no sea tan masivo */
        max-width: 1250px; /* Encajonamos la sección para que la foto no se desparrame a los lados */
        margin: 0 auto; /* Centramos todo el contenedor en las pantallas grandes */
        border-radius: 12px;        /* Esquinas redondeadas elegantes a juego con el Index */
        overflow: hidden;           /* Mantiene la foto dentro de los bordes redondeados */
        background-attachment: scroll; /* Cambiamos a scroll en PC para asegurar el mejor encuadre del trabajo */
    }
}
/* Estilo para el botón naranja si aún no lo tienes */
.btn-orange {
    background-color: #f07832; /* El naranja de tu logo */
    color: white;
    border: none;
    transition: 0.3s;
}

.btn-orange:hover {
    background-color: #d66528;
    color: white;
    transform: scale(1.05);
}

/* EFECTO DE RESALTE UNIFICADO (Spray Deck & Microcemento) */
.effect-hover-vertical:hover {
    transform: translateY(-12px) !important; /* Se eleva igual en ambas */
    border-color: #ff6b00 !important; /* Naranja fuerte obligatorio */
    
    /* El brillo naranja neón (Glow) potenciado */
    box-shadow: 0 20px 40px rgba(255, 107, 0, 0.6) !important; 
    
    /* Brillo extra a la imagen */
    filter: brightness(1.1) !important; 
}

/* ===================================================
   TARJETAS DE BENEFICIOS - EFECTO GLOW UNIFICADO
   =================================================== */

.hvr-float {
    /* Transición premium y fluida */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-radius: 20px; 
    background-color: #ffffff;
    border: 2px solid transparent !important; 
    display: block;
}

.hvr-float:hover {
    transform: translateY(-12px) !important; /* Se eleva igual que las fotos */
   
    
    /* El brillo naranja neón (Glow) potenciado */
    box-shadow: 0 20px 40px rgba(255, 107, 0, 0.3) !important;
}

/* Efecto para los iconos (i) y la clase de iconos */
.advantage-icon, .hvr-float i {
    font-size: 2.5rem;
    color: #FF6700;
    margin-bottom: 1rem;
    display: inline-block;
    transition: all 0.3s ease;
}

/* El icono también reacciona al pasar el puntero */
.hvr-float:hover i, 
.hvr-float:hover .advantage-icon {
    transform: scale(1.15);
    color: #ff6b00 !important;
}

/* Control del ancho en computadoras para que no toque los bordes */
@media (min-width: 1200px) {
    .contenedor-ventajas {
        max-width: 1100px; /* Aquí controlas qué tan "ancho" quieres que se vea en PC */
        margin: 0 auto;    /* Esto lo mantiene centrado siempre */
    }
}

/* Espaciado para móvil */
@media (max-width: 768px) {
    .hvr-float {
        margin-bottom: 20px;
    }
}

/* ===================================================
   SECCIÓN PISCINA PROFESIONAL (RESPONSIVA)
   =================================================== */

/* Ajuste para el contenedor de la imagen */
.piscina-banner {
    min-height: 400px;
    background-size: cover !important;
    background-position: center center !important;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.4s ease;
}

/* Solo en pantallas grandes (Computadora) */
@media (min-width: 992px) {
    .piscina-banner {
        border-radius: 25px 0 0 25px !important;
        min-height: 550px !important; /* Más alta en PC */
    }
    .piscina-info-derecha {
        border-radius: 0 25px 25px 0 !important;
        min-height: 550px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Solo en Móvil (Teléfono) */
@media (max-width: 991px) {
    .piscina-banner {
        border-radius: 0 !important; /* En móvil que ocupe todo el ancho */
        min-height: 380px !important; /* Altura ideal para que luzca la foto */
        background-attachment: scroll !important; /* Evita que la foto se vea borrosa */
    }
    
    .caja-contacto-flotante {
        width: 85% !important;
        margin: 0 auto;
        transform: translateY(20px); /* Le da un efecto moderno sobre el borde */
        box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    }

    .detalles-tecnicos-movil {
        padding-top: 50px !important; /* Espacio para que la caja flotante no tape el texto */
        background-color: #ffffff;
    }
}

/* Color naranja para los iconos de esta sección */
.icon-piscina {
    color: #FF6700;
    font-size: 1.4rem;
}

/* Efecto para las muestras de color */
.color-swatch-card {
    transition: transform 0.3s ease;
    cursor: default;
}

.color-swatch-card:hover {
    transform: scale(1.05);
}

/* Ajuste para que el texto de la PTY en el footer no se pierda */
.pty-footer {
    color: #002363 !important;
    font-weight: bold;
}

/* =======================================================
   MEJORAS ESPECÍFICAS: PÁGINA MICROCEMENTO
   ======================================================= */

/* 1. Ajuste del Hero de Microcemento (Título más impactante) */
.hero-spray-page h1 {
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    letter-spacing: -1px;
}

/* 2. Estilización de la lista de beneficios */
.fa-circle-check.text-orange {
    filter: drop-shadow(0 2px 4px rgba(255, 103, 0, 0.3));
    font-size: 1.4rem !important;
}

/* 3. MEJORA: Gama de Tonos (Círculos de color) */
/* Añadimos un efecto de profundidad a las muestras de color */
.row-cols-2 .col div[style*="background-color"] {
    transition: all 0.4s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1), 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    position: relative;
}

/* Efecto al pasar el mouse por los colores */
.row-cols-2 .col:hover div[style*="background-color"] {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border-color: #002363 !important; /* Cambia a azul al hover para contraste */
}

/* 4. Estilo de los nombres de los colores */
.fw-semibold.mt-2 {
    color: #333;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. Separador de secciones discreto */
section.py-5 {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Contenedor con efecto de identidad Decocemento PTY */
.effect-hover-vertical {
    max-width: 350px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    border: 5px solid #ffffff; /* Borde inicial blanco */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más fluida */
    cursor: pointer;
    background-color: white; /* Evita transparencias raras */
    max-height: 280px;

}

/* EFECTO DE RESALTE UNIFICADO (Spray Deck & Microcemento) */
.effect-hover-vertical:hover {
    transform: translateY(-12px) !important; /* Se eleva igual en ambas */
    border-color: #ff6b00 !important; /* Naranja fuerte obligatorio */
    
    /* El brillo naranja neón (Glow) potenciado */
    box-shadow: 0 20px 40px rgba(255, 107, 0, 0.2) !important; 
    
    /* Brillo extra a la imagen */
    filter: brightness(1.1) !important; 
}

/* 8. Fix para el Navbar en esta página específica */
/* Asegura que el logo no se vea apretado */
.custom-navbar .container {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* BOTÓN WHATSAPP ESTILO SAMSUNG S24 (SÓLIDO Y CENTRADO) */
.whatsapp-btn-fix {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 65px;          /* Tamaño del círculo */
    height: 65px;
    background-color: #25d366; /* Verde exacto de WhatsApp */
    color: white !important;
    border-radius: 50%;   /* Círculo perfecto */
    display: flex;        /* Activamos Flexbox para centrar */
    align-items: center;  /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    font-size: 38px;      /* Tamaño del logo blanco */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    text-decoration: none !important;
    z-index: 9999;        /* Por encima de todo */
    transition: transform 0.3s ease;
}

/* Evitamos que el icono se mueva o cambie de color */
.whatsapp-btn-fix i {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Efecto sutil al tocarlo */
.whatsapp-btn-fix:hover {
    transform: scale(1.1);
    color: white !important;
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .whatsapp-btn-fix {
        width: 60px;
        height: 60px;
        font-size: 34px;
        bottom: 20px;
        right: 20px;
    }
}

/* BOTÓN WHATSAPP CIRCULAR LIMPIO */
.btn-whatsapp-decocemento {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Sombra inicial suave */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    z-index: 2000;
    transition: all 0.3s ease; /* Transición suave para el sombreado */
}

/* El logo de WhatsApp interno */
.btn-whatsapp-decocemento img {
    width: 35px;
    height: 35px;
    display: block;
}

/* EFECTO PROFESIONAL AL PASAR EL PUNTERO (HOVER) */
.btn-whatsapp-decocemento:hover {
    transform: translateY(-5px) scale(1.05); /* Se eleva un poco */
    background-color: #128c7e;
    /* Sombra profesional más intensa y extendida */
    box-shadow: 0 10px 20px rgba(0,0,0,0.4); 
}

/* Ajuste para móviles */
@media (max-width: 576px) {
    .btn-whatsapp-decocemento {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
    }
    .btn-whatsapp-decocemento img {
        width: 30px;
    }
}

/* --- ESTILO PARA VIDEOS VERTICALES PROFESIONALES --- */

.video-blur-container {
    position: relative;
    width: 100%;
    height: 400px; /* Ajusta esta altura según prefieras */
    background-color: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El video que hace el efecto de fondo */
.video-bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que llene todo el espacio */
    filter: blur(5px) brightness(80%); /* Mucho desenfoque y un poco más oscuro */
    transform: scale(1.1); /* Evita bordes blancos por el desenfoque */
    z-index: 1;
}

/* El video real en el centro */
.video-foreground {
    position: relative;
    z-index: 2;
    height: 100%;
    width: auto; /* Mantiene su forma vertical original */
    max-width: 100%;
    box-shadow: 0 0 30px rgba(0,0,0,0.5); /* Le da profundidad al video central */
}

/* Ajuste para móviles: que el contenedor no sea tan alto */
@media (max-width: 768px) {
    .video-blur-container {
        height: 350px;
    }
}