/* =========================================================
   HOME SAFE FIX - ÓPTICA MIRA
   Hero móvil independiente + restauración desktop.
   Este archivo debe cargarse al final del head.php.
   Versión corregida: texto móvil sobre la imagen, sin tocar el index.
========================================================= */

.om-mobile-hero-clean {
    display: none;
}

/* =========================================================
   ESCRITORIO: usa el hero original del sitio
========================================================= */
@media (min-width: 821px) {

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

    .home-page .desktop-hero-original {
        display: grid !important;
        position: relative !important;
        min-height: 670px !important;
        align-items: center !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: #fff8ec !important;
    }

    .home-page .desktop-hero-original .hero-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: url('../img/banner/hero-optica-mira.webp') center / cover no-repeat !important;
        z-index: 1 !important;
    }

    .home-page .desktop-hero-original .hero-overlay {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        z-index: 2 !important;
        background: linear-gradient(
            90deg,
            rgba(255,248,236,.82) 0%,
            rgba(255,248,236,.46) 38%,
            rgba(255,248,236,.05) 76%
        ) !important;
        pointer-events: none !important;
    }

    .home-page .desktop-hero-original .hero-content {
        position: relative !important;
        z-index: 3 !important;
        padding-top: 80px !important;
        padding-bottom: 110px !important;
    }

    .home-page .desktop-hero-original .hero-copy {
        max-width: 610px !important;
        padding-top: 0 !important;
    }

    .home-page .desktop-hero-original .hero-copy h1 {
        margin: 18px 0 18px !important;
        font-size: clamp(3rem, 5.6vw, 5.1rem) !important;
        line-height: .94 !important;
        letter-spacing: -.052em !important;
        color: var(--coffee) !important;
    }

    .home-page .desktop-hero-original .hero-copy p {
        max-width: 560px !important;
        margin: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.8 !important;
        color: var(--coffee-2) !important;
    }

    .home-page .desktop-hero-original .hero-buttons {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-top: 28px !important;
        position: relative !important;
        z-index: 4 !important;
    }

    .home-page .desktop-hero-original .hero-buttons a {
        width: auto !important;
        min-height: 48px !important;
        padding: 0 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
    }

    .home-page .trust-strip {
        position: relative !important;
        z-index: 6 !important;
        margin-top: -42px !important;
    }
}

/* =========================================================
   MÓVIL: hero propio con texto ENCIMA de la imagen
========================================================= */
@media (max-width: 820px) {

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

    .home-page .om-mobile-hero-clean {
        display: block !important;
        position: relative !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;
        overflow: hidden !important;
        background: #fff8ec !important;
        z-index: 1 !important;
    }

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

    .home-page .om-mobile-hero-clean::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                180deg,
                rgba(255, 248, 236, .02) 0%,
                rgba(255, 248, 236, .10) 28%,
                rgba(255, 248, 236, .58) 52%,
                rgba(255, 248, 236, .92) 73%,
                #fff8ec 100%
            ) !important;
    }

.home-page .om-mobile-hero-content {
    position: relative;
    z-index: 3;
    width: min(100% - 28px, 520px);
    margin: 0 auto;
    padding: 235px 0 34px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

    .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-bottom: 10px !important;
        color: #c4922f !important;
        font-size: .68rem !important;
        font-weight: 900 !important;
        letter-spacing: .17em !important;
        text-transform: uppercase !important;
    }

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

    .home-page .om-mobile-hero-content h1 {
        max-width: 96% !important;
        margin: 0 0 12px !important;
        color: #3f2b1f !important;
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: clamp(2.05rem, 9.6vw, 2.75rem) !important;
        line-height: .97 !important;
        letter-spacing: -.045em !important;
    }

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

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

    .home-page .om-mobile-btn-primary,
    .home-page .om-mobile-btn-secondary {
        width: 100% !important;
        min-height: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-size: .95rem !important;
        font-weight: 900 !important;
        text-decoration: none !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, .90) !important;
        border: 1px solid rgba(128, 91, 44, .22) !important;
        backdrop-filter: blur(8px) !important;
    }

    .home-page .trust-strip {
        margin-top: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .home-page .trust-strip div {
        padding: 16px !important;
        border-right: 1px solid rgba(128, 91, 44, .16) !important;
        border-bottom: 1px solid rgba(128, 91, 44, .16) !important;
    }

    .home-page .trust-strip strong {
        font-size: .88rem !important;
    }

    .home-page .trust-strip span {
        font-size: .78rem !important;
    }
}

@media (max-width: 560px) {
    .home-page .om-mobile-hero-clean {
        min-height: 560px;
    }

    .home-page .om-mobile-hero-image img {
        object-position: 77% top;
    }

    .home-page .om-mobile-hero-content {
        padding-top: 225px;
        padding-bottom: 28px;
    }

    .home-page .om-mobile-hero-content h1 {
        font-size: clamp(1.95rem, 9.4vw, 2.48rem) !important;
        line-height: .98 !important;
    }

    .home-page .om-mobile-hero-content p {
        font-size: .9rem !important;
        line-height: 1.55 !important;
    }
}

@media (max-width: 390px) {
    .home-page .om-mobile-hero-clean {
        min-height: 540px;
    }

    .home-page .om-mobile-hero-content {
        padding-top: 210px;
    }

    .home-page .om-mobile-hero-content h1 {
        font-size: clamp(1.8rem, 9vw, 2.25rem) !important;
    }
}