/**
 * Hero tipo /servicio: en escritorio imagen a ancho completo bajo el menú fijo (sin solapamiento).
 * Altura fija 538px (proporción diseño 1920×538); object-fit: cover si la foto es más alta.
 * Móvil: fondo + gradiente (sin <img> visible).
 *
 * Requiere: body.page-hero-banner-desk
 * En .hero-section: --hero-banner-bg, --hero-banner-bg-mobile (opcional), --hero-banner-overlay
 * Primer hijo del section: <img class="hero-section__desk-bg" src="misma URL escritorio" ...>
 *
 * Opcional: body.hero-banner-desk-sidefade — gradiente izquierda→derecha para textos
 * Opcional: body.hero-banner-bg-mobile-right — background-position móvil a la derecha
 */

:root {
    --hero-desktop-height: 538px;
}

.hero-section__desk-bg {
    display: none;
}

body.page-hero-banner-desk .hero-section {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    aspect-ratio: unset;
    background-image: linear-gradient(
        rgba(0, 0, 0, var(--hero-banner-overlay, 0)),
        rgba(0, 0, 0, var(--hero-banner-overlay, 0))
    ), var(--hero-banner-bg-mobile, var(--hero-banner-bg));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: local;
}

@media (max-width: 768px) {
    body.page-hero-banner-desk.hero-banner-bg-mobile-right .hero-section {
        background-position: right top;
    }
}

@media (min-width: 769px) {
    body.page-hero-banner-desk .hero-section {
        background-image: none;
        background-size: auto;
        margin-top: 0;
        background-color: #000;
        height: var(--hero-desktop-height);
        min-height: var(--hero-desktop-height);
        max-height: var(--hero-desktop-height) !important;
    }

    body.page-hero-banner-desk .hero-section::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(
            rgba(0, 0, 0, var(--hero-banner-overlay, 0)),
            rgba(0, 0, 0, var(--hero-banner-overlay, 0))
        );
    }

    body.page-hero-banner-desk .hero-section .hero-section__desk-bg {
        display: block !important;
        width: 100% !important;
        height: var(--hero-desktop-height) !important;
        max-height: var(--hero-desktop-height) !important;
        object-fit: cover !important;
        object-position: center !important;
        margin-top: 0;
        vertical-align: top;
        flex-shrink: 0;
    }

    body.page-hero-banner-desk .hero-section > .hero-content {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
        padding: 0.75rem 1.4rem 1.4rem;
    }
}

@media (max-width: 768px) {
    body.page-hero-banner-desk .hero-section {
        display: flex;
        flex-direction: column;
    }

    body.page-hero-banner-desk .hero-section > .hero-content {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        align-self: stretch;
        min-height: 0;
        padding: var(--hero-content-mobile-inset-top, 0.65rem) 1rem 1.25rem;
        box-sizing: border-box;
    }
}

/* Legibilidad: velo lateral encima del overlay uniforme */
body.hero-banner-desk-sidefade.page-hero-banner-desk .hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.18) 55%,
        rgba(0, 0, 0, 0) 100%
    );
}

body.hero-banner-desk-sidefade.page-hero-banner-desk .hero-section > .hero-content {
    z-index: 3;
}

@media (max-width: 768px) {
    body.hero-banner-desk-sidefade.page-hero-banner-desk .hero-section::after {
        z-index: 1;
    }
    body.hero-banner-desk-sidefade.page-hero-banner-desk .hero-section > .hero-content {
        z-index: 2;
    }
}