/* ============================================
   DEMO MODE - Blur + Marca DEMO en Imágenes
   ============================================ */

/* Reset: ningún contenedor, texto o sección debe estar borroso */
body.demo-mode div,
body.demo-mode section,
body.demo-mode article,
body.demo-mode label,
body.demo-mode p,
body.demo-mode h1,
body.demo-mode h2,
body.demo-mode h3,
body.demo-mode h4,
body.demo-mode span,
body.demo-mode a,
body.demo-mode li,
body.demo-mode ul {
    filter: none !important;
}

/* Solo imágenes <img> con blur */
body.demo-mode img {
    filter: blur(4px) !important;
    transition: filter 0.3s ease;
}

body.demo-mode img:hover {
    filter: blur(2px) !important;
}

/* Excepciones: logos, avatares, iconos pequeños sin blur */
body.demo-mode img.no-demo-blur,
body.demo-mode .mc-profile-avatar img,
body.demo-mode .lh-retell-launcher img,
body.demo-mode .lh-lang-fab img,
body.demo-mode img[width="1"],
body.demo-mode img[height="1"],
body.demo-mode .brand-logo {
    filter: none !important;
}

/* Contenedor de imagen con marca de agua */
.demo-img-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.demo-img-wrapper img {
    display: block;
    width: 100%;
}

/* Overlay de marca de agua */
.demo-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.demo-watermark-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: rgba(220, 20, 20, 0.55);
    text-transform: uppercase;
    letter-spacing: 8px;
    transform: rotate(-35deg);
    white-space: nowrap;
    user-select: none;
    text-shadow: 
        3px 3px 6px rgba(180, 0, 0, 0.4),
        -2px -2px 4px rgba(255, 255, 255, 0.2);
}

.demo-img-wrapper--small .demo-watermark-text {
    font-size: 24px;
    letter-spacing: 4px;
}

.demo-img-wrapper--medium .demo-watermark-text {
    font-size: 36px;
    letter-spacing: 6px;
}

@media (max-width: 768px) {
    .demo-watermark-text {
        font-size: 32px;
        letter-spacing: 5px;
    }
    .demo-img-wrapper--small .demo-watermark-text {
        font-size: 18px;
        letter-spacing: 3px;
    }
    .demo-img-wrapper--medium .demo-watermark-text {
        font-size: 28px;
        letter-spacing: 4px;
    }
}

@media (max-width: 480px) {
    .demo-watermark-text {
        font-size: 24px;
        letter-spacing: 4px;
    }
}

/* ============================================
   MARCA DE AGUA COMPLETA EN TODA LA PÁGINA
   ============================================ */

/* Overlay fijo diagonal que cubre toda la pantalla */
body.demo-mode::after {
    content: 'DEMO';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', 'Arial Black', sans-serif;
    font-size: 14vw;
    font-weight: 900;
    color: rgba(220, 20, 20, 0.10);
    text-transform: uppercase;
    letter-spacing: 3vw;
    white-space: nowrap;
    pointer-events: none;
    z-index: 999999;
    user-select: none;
    transform: rotate(-35deg);
    overflow: visible;
}

@media (max-width: 768px) {
    body.demo-mode::after {
        font-size: 18vw;
        letter-spacing: 4vw;
    }
}

@media (max-width: 480px) {
    body.demo-mode::after {
        font-size: 22vw;
        letter-spacing: 5vw;
    }
}