/*
 * DAMER — CSS de iteración rápida (sin compilar app.css).
 * npm run sync:damer-overrides  →  Ctrl+F5
 */

.damer-home-hero-gradient {
    background:
        radial-gradient(
            ellipse 52% 40% at 22% 76%,
            rgba(248, 250, 254, 0.98) 0%,
            rgba(236, 242, 252, 0.85) 32%,
            rgba(214, 225, 245, 0.35) 58%,
            transparent 78%
        ),
        radial-gradient(
            ellipse 80% 58% at 0% 100%,
            rgba(48, 85, 165, 0.52) 0%,
            rgba(72, 106, 178, 0.3) 42%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 85% 75% at 0% 0%,
            #fcc8cc 0%,
            rgba(255, 214, 222, 0.75) 18%,
            rgba(242, 221, 228, 0.35) 40%,
            transparent 68%
        ),
        radial-gradient(
            ellipse 70% 65% at 100% 0%,
            rgba(120, 160, 229, 0.7) 0%,
            rgba(97, 140, 220, 0.45) 32%,
            transparent 68%
        ),
        radial-gradient(
            ellipse 95% 90% at 100% 100%,
            #021a70 0%,
            #01176c 22%,
            rgba(27, 47, 119, 0.88) 45%,
            rgba(33, 70, 161, 0.45) 68%,
            transparent 92%
        ),
        linear-gradient(
            135deg,
            #fce8ea 0%,
            #f2dde4 15%,
            #e9dbe8 28%,
            #d6cde2 38%,
            #c2cdeb 48%,
            #80a3e3 62%,
            #4578d1 76%,
            #2146a1 88%,
            #021a70 100%
        );
}

.damer-home-hero-cta {
    background-color: #2d5aa8 !important;
    box-shadow: 0 8px 22px rgba(27, 47, 119, 0.28);
}

.damer-home-hero-cta:hover {
    background-color: #1b2f77 !important;
}

@media (min-width: 1024px) {
    .damer-home-hero-grid {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
        gap: 1.75rem;
    }

    .damer-home-hero-visual {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 440px;
        overflow: visible;
    }

    .damer-home-hero-visual img {
        width: 125%;
        max-width: none;
        margin-left: 0;
        margin-right: -1.5rem;
        object-position: right center;
        transform: translateX(6%);
    }
}

@media (min-width: 1280px) {
    .damer-home-hero-visual img {
        width: 135%;
        margin-right: -2.5rem;
        transform: translateX(8%);
    }
}

@media (max-width: 639px) {
    .damer-home-hero-shell {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 12px;
    }

    .damer-home-hero-panel {
        min-height: auto !important;
        padding-top: 72px !important;
        padding-bottom: 52px !important;
    }

    .damer-home-hero-gradient {
        background:
            radial-gradient(
                ellipse 120% 55% at 50% -8%,
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 255, 255, 0.08) 42%,
                transparent 72%
            ),
            radial-gradient(
                ellipse 95% 65% at 0% 0%,
                rgba(199, 92, 92, 0.58) 0%,
                rgba(240, 170, 176, 0.34) 38%,
                transparent 72%
            ),
            radial-gradient(
                ellipse 90% 75% at 100% 100%,
                rgba(2, 26, 112, 0.88) 0%,
                rgba(27, 47, 119, 0.68) 42%,
                rgba(61, 111, 173, 0.32) 70%,
                transparent 90%
            ),
            linear-gradient(
                165deg,
                #e8a0a6 0%,
                #d4c8e4 22%,
                #8aa8d6 54%,
                #3d6fad 80%,
                #1b2f77 100%
            );
    }

    .damer-home-hero-tech-overlay {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.3;
        background:
            url('/themes/damer-tailwind/img/hero-dashboard.png') no-repeat center 118% / 128% auto;
        -webkit-mask-image: linear-gradient(
            180deg,
            transparent 0%,
            transparent 42%,
            rgba(0, 0, 0, 0.18) 58%,
            rgba(0, 0, 0, 0.62) 82%,
            rgba(0, 0, 0, 0.88) 100%
        );
        mask-image: linear-gradient(
            180deg,
            transparent 0%,
            transparent 42%,
            rgba(0, 0, 0, 0.18) 58%,
            rgba(0, 0, 0, 0.62) 82%,
            rgba(0, 0, 0, 0.88) 100%
        );
    }

    .damer-home-hero-dots {
        opacity: 0.34;
    }

    .damer-home-hero-copy {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .damer-home-hero-copy::before {
        content: none;
    }

    .damer-home-hero-brand {
        display: block;
        font-size: 1em;
    }

    .damer-home-hero-title-sep {
        display: none;
    }

    .damer-home-hero-title-line {
        display: block;
        margin-top: 0.2rem;
    }

    .damer-home-hero-title {
        font-size: 1.875rem !important;
        line-height: 1.14 !important;
        text-align: center !important;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.98),
            0 2px 16px rgba(255, 255, 255, 0.88),
            0 0 1px rgba(255, 255, 255, 0.95);
    }

    .damer-home-hero-scribble-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
        overflow: visible;
    }

    .damer-home-hero-scribble {
        width: min(88%, 300px);
        height: auto;
        aspect-ratio: 491 / 26;
        display: block;
        margin-left: auto;
        margin-right: auto;
        filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.65));
    }

    .damer-home-hero-subtitle {
        font-size: 0.9375rem !important;
        margin-top: 1.25rem;
        max-width: 18rem;
        text-align: center !important;
        font-weight: 600 !important;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 1),
            0 2px 12px rgba(255, 255, 255, 0.92),
            0 0 1px rgba(255, 255, 255, 0.95);
    }

    .damer-home-hero-cta-wrap {
        width: 100%;
        max-width: 20rem;
    }

    .damer-home-hero-cta {
        width: 100%;
        max-width: 100%;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.05em;
        white-space: normal;
        text-align: center;
        box-shadow:
            0 10px 26px rgba(27, 47, 119, 0.42),
            0 2px 8px rgba(0, 0, 0, 0.14) !important;
    }
}

@media (min-width: 640px) {
    .damer-home-hero-title-sep {
        display: inline;
    }

    .damer-home-hero-title-line {
        display: inline;
    }
}