/* =========================================================
   HOME MOBILE HERO WEBSTYLE - ÓPTICA MIRA
   Cargar ÚLTIMO. Solo afecta móvil.
   Objetivo: que el hero móvil se vea como la versión web.
========================================================= */

@media (max-width: 820px) {

    .home-page .desktop-hero-original {
        display: none !important;
    }

    .home-page .om-mobile-hero-clean {
        display: block !important;
        position: relative !important;
        height: 620px !important;
        min-height: 620px !important;
        overflow: hidden !important;
        background: #fff8ec !important;
        border-bottom: 1px solid rgba(196, 146, 47, .18) !important;
    }

    .home-page .om-mobile-hero-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        overflow: hidden !important;
        background: #fff8ec !important;
    }

    .home-page .om-mobile-hero-image img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: 72% center !important;
        transform: none !important;
    }

    /* Gradiente parecido al desktop: texto legible a la izquierda, foto visible a la derecha */
    .home-page .om-mobile-hero-clean::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        background:
            linear-gradient(
                90deg,
                rgba(255, 248, 236, .94) 0%,
                rgba(255, 248, 236, .86) 38%,
                rgba(255, 248, 236, .34) 68%,
                rgba(255, 248, 236, .05) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255, 248, 236, .05) 0%,
                rgba(255, 248, 236, .06) 52%,
                rgba(255, 248, 236, .42) 82%,
                rgba(255, 248, 236, .88) 100%
            ) !important;
        pointer-events: none !important;
    }

    .home-page .om-mobile-hero-content {
        position: absolute !important;
        z-index: 3 !important;
        left: 22px !important;
        right: 22px !important;
        top: 94px !important;
        width: auto !important;
        max-width: 520px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .home-page .om-mobile-hero-content::before {
        display: none !important;
        content: none !important;
    }

    .home-page .om-mobile-hero-content span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 0 14px !important;
        color: #c4922f !important;
        font-size: .68rem !important;
        font-weight: 900 !important;
        letter-spacing: .18em !important;
        text-transform: uppercase !important;
    }

    .home-page .om-mobile-hero-content span::before {
        content: "" !important;
        width: 28px !important;
        height: 1px !important;
        background: linear-gradient(90deg, #c4922f, transparent) !important;
    }

    .home-page .om-mobile-hero-content h1 {
        max-width: 72% !important;
        margin: 0 0 18px !important;
        color: #3f2b1f !important;
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: clamp(2.35rem, 8.8vw, 3.2rem) !important;
        line-height: .93 !important;
        letter-spacing: -.055em !important;
        text-wrap: balance;
    }

    .home-page .om-mobile-hero-content p {
        max-width: 70% !important;
        margin: 0 !important;
        color: #6d4b34 !important;
        font-size: .95rem !important;
        line-height: 1.62 !important;
    }

    .home-page .om-mobile-hero-actions {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-top: 28px !important;
    }

    .home-page .om-mobile-btn-primary,
    .home-page .om-mobile-btn-secondary {
        width: auto !important;
        min-height: 46px !important;
        padding: 0 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-size: .92rem !important;
        font-weight: 900 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .home-page .om-mobile-btn-primary {
        color: #25170e !important;
        background: linear-gradient(135deg, #c4922f, #e0b75a) !important;
        box-shadow: 0 14px 30px rgba(196, 146, 47, .22) !important;
    }

    .home-page .om-mobile-btn-secondary {
        color: #3f2b1f !important;
        background: rgba(255, 250, 241, .72) !important;
        border: 1px solid rgba(128, 91, 44, .20) !important;
        backdrop-filter: blur(8px) !important;
    }
}

/* Teléfonos medianos: mantiene el estilo desktop, pero ajusta para que no se corte */
@media (max-width: 560px) {

    .home-page .om-mobile-hero-clean {
        height: 600px !important;
        min-height: 600px !important;
    }

    .home-page .om-mobile-hero-image img {
        object-position: 70% center !important;
    }

    .home-page .om-mobile-hero-clean::after {
        background:
            linear-gradient(
                90deg,
                rgba(255, 248, 236, .94) 0%,
                rgba(255, 248, 236, .86) 44%,
                rgba(255, 248, 236, .42) 74%,
                rgba(255, 248, 236, .08) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255, 248, 236, .04) 0%,
                rgba(255, 248, 236, .08) 58%,
                rgba(255, 248, 236, .54) 86%,
                rgba(255, 248, 236, .88) 100%
            ) !important;
    }

    .home-page .om-mobile-hero-content {
        left: 18px !important;
        right: 18px !important;
        top: 82px !important;
    }

    .home-page .om-mobile-hero-content h1 {
        max-width: 78% !important;
        font-size: clamp(2rem, 8.1vw, 2.55rem) !important;
        line-height: .96 !important;
        margin-bottom: 14px !important;
    }

    .home-page .om-mobile-hero-content p {
        max-width: 78% !important;
        font-size: .89rem !important;
        line-height: 1.55 !important;
    }

    .home-page .om-mobile-hero-actions {
        margin-top: 22px !important;
        gap: 10px !important;
    }

    .home-page .om-mobile-btn-primary,
    .home-page .om-mobile-btn-secondary {
        min-height: 44px !important;
        padding: 0 16px !important;
        font-size: .88rem !important;
    }
}

/* Teléfonos pequeños: si no cabe en fila, los botones bajan ordenados */
@media (max-width: 430px) {

    .home-page .om-mobile-hero-clean {
        height: 590px !important;
        min-height: 590px !important;
    }

    .home-page .om-mobile-hero-content {
        top: 78px !important;
    }

    .home-page .om-mobile-hero-content h1 {
        max-width: 84% !important;
        font-size: clamp(1.85rem, 7.9vw, 2.25rem) !important;
    }

    .home-page .om-mobile-hero-content p {
        max-width: 86% !important;
        font-size: .86rem !important;
    }

    .home-page .om-mobile-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .home-page .om-mobile-btn-primary,
    .home-page .om-mobile-btn-secondary {
        width: 100% !important;
    }
}

@media (max-width: 390px) {

    .home-page .om-mobile-hero-clean {
        height: 570px !important;
        min-height: 570px !important;
    }

    .home-page .om-mobile-hero-content {
        top: 70px !important;
    }

    .home-page .om-mobile-hero-content h1 {
        font-size: clamp(1.72rem, 7.8vw, 2.05rem) !important;
    }
}