/**
 * Archivo : components/hero.css
 * Scope   : Heroes comerciales compartidos.
 * Función : Imagen local, overlay y covers canónicas de artículos.
 */

/* Central, locale-independent landing-to-photography map. */
#main-content[data-page-key="home"] { --page-hero-image: url("/assets/images/heroes/hero-home.webp"); --page-hero-position: 64% 50%; --page-hero-position-mobile: 68% 50%; }
#main-content[data-page-key="services.index"] { --page-hero-image: url("/assets/images/heroes/hero-services.webp"); }
#main-content[data-page-key="services.s01"] { --page-hero-image: url("/assets/images/heroes/hero-professional-websites.webp"); }
#main-content[data-page-key="services.s02"] { --page-hero-image: url("/assets/images/heroes/hero-website-redesign-modernization.webp"); }
#main-content[data-page-key="services.s03"] { --page-hero-image: url("/assets/images/heroes/hero-website-audit.webp"); }
#main-content[data-page-key="services.s04"] { --page-hero-image: url("/assets/images/heroes/hero-website-performance-optimization.webp"); }
#main-content[data-page-key="services.s05"] { --page-hero-image: url("/assets/images/heroes/hero-website-maintenance.webp"); }
#main-content[data-page-key="services.s10"] { --page-hero-image: url("/assets/images/heroes/hero-web-development-for-agencies.webp"); }
#main-content[data-page-key="services.s11"] { --page-hero-image: url("/assets/images/heroes/hero-website-repair-recovery.webp"); }
#main-content[data-page-key="services.microtools"] { --page-hero-image: url("/assets/images/heroes/hero-custom-web-microtools.webp"); }
#main-content[data-page-key="services.api-integrations"] { --page-hero-image: url("/assets/images/heroes/hero-api-integrations.webp"); }
#main-content[data-page-key="services.templates"] { --page-hero-image: url("/assets/images/heroes/hero-ready-to-launch-websites.webp"); }
#main-content[data-page-key="about"] { --page-hero-image: url("/assets/images/heroes/hero-about.webp"); }
#main-content[data-page-key="contact.index"] { --page-hero-image: url("/assets/images/heroes/hero-contact.webp"); }
#main-content[data-page-key="audit.start"] { --page-hero-image: url("/assets/images/heroes/hero-free-website-audit.webp"); --page-hero-position: 55% 50%; --page-hero-position-mobile: 52% 50%; }
#main-content[data-page-key="legal.privacy"] { --page-hero-image: url("/assets/images/heroes/hero-privacy-policy.webp"); }
#main-content[data-page-key="legal.cookies"] { --page-hero-image: url("/assets/images/heroes/hero-cookie-policy.webp"); }
#main-content[data-page-key="legal.notice"] { --page-hero-image: url("/assets/images/heroes/hero-legal-notice.webp"); }

.page-hero {
    --hero-image: var(--page-hero-image, url("/assets/images/heroes/hero-commercial.svg"));
    --hero-position: var(--page-hero-position, 66% 50%);
    --hero-position-mobile: var(--page-hero-position-mobile, var(--hero-position));
    --hero-parallax-y: 0px;
    --hero-parallax-bg-y: var(--hero-parallax-y);
    --hero-parallax-ornament-y: 0px;
    --hero-home-viewport-y: 0px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #090909;
}
.page-hero:not(.contact-hero) { display: grid; grid-template-rows: auto 1fr; min-height: calc(100vh - var(--site-header-height)); min-height: calc(100dvh - var(--site-header-height)); }
.page-hero:not(.contact-hero) > .page-hero__inner { min-height: 0; }
.page-hero::before { position: absolute; z-index: 0; inset: -5rem 0; background-image: linear-gradient(90deg, rgb(5 5 5 / 94%) 0%, rgb(5 5 5 / 82%) 48%, rgb(5 5 5 / 55%) 100%), radial-gradient(circle at 78% 20%, rgb(242 194 48 / 18%), transparent 34rem), var(--hero-image); background-position: center, center, var(--hero-position); background-size: cover; content: ""; pointer-events: none; transform: translate3d(0, var(--hero-parallax-bg-y), 0) scale(1.13); transform-origin: center; will-change: transform; }
.page-hero > * { position: relative; z-index: 1; }
.page-hero[data-hero-media]::before { z-index: 1; inset: 0; background-image: linear-gradient(90deg, rgb(5 5 5 / 94%) 0%, rgb(5 5 5 / 82%) 48%, rgb(5 5 5 / 55%) 100%), radial-gradient(circle at 78% 20%, rgb(242 194 48 / 18%), transparent 34rem); transform: none; will-change: auto; }
.page-hero[data-hero-media] > .page-hero__media { position: absolute; z-index: 0; inset: -5rem 0; width: 100%; height: calc(100% + 10rem); object-fit: cover; object-position: var(--hero-position); pointer-events: none; transform: translate3d(0, var(--hero-parallax-bg-y), 0) scale(1.13); transform-origin: center; will-change: transform; }
.page-hero[data-hero-media] > *:not(.page-hero__media) { z-index: 2; }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero > .breadcrumbs { padding-block: clamp(0.9rem, 2vw, 1.25rem) 0; }
.page-hero .breadcrumbs ol { color: rgb(255 255 255 / 66%); }
.page-hero .breadcrumbs a { color: rgb(255 255 255 / 76%); }
.page-hero .breadcrumbs a:hover,
.page-hero .breadcrumbs a:focus-visible { color: var(--color-accent); }
.page-hero .eyebrow { color: #f2c230; }
.page-hero h1 { color: #fff; text-shadow: 0 0.12em 0.8em rgb(0 0 0 / 45%); }
.page-hero .page-hero__intro { color: rgb(255 255 255 / 78%); }

.page-hero--home {
    --hero-home-photo: var(--hero-image);
    --hero-home-ornament: url("/assets/images/heroes/hero-commercial.svg");
    grid-template-rows: 1fr;
}
.page-hero--home::before { background-image: linear-gradient(90deg, rgb(3 3 3 / 92%) 0%, rgb(3 3 3 / 74%) 46%, rgb(3 3 3 / 26%) 100%), linear-gradient(180deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 52%)), var(--hero-home-photo); background-position: center, center, var(--hero-position); transform: translate3d(0, var(--hero-home-viewport-y), 0) scale(1.13); }
.page-hero--home::after { position: absolute; z-index: 0; inset: -5rem 0; background-image: var(--hero-home-ornament); background-position: center; background-size: cover; content: ""; filter: saturate(1.08) contrast(1.04); mix-blend-mode: screen; opacity: 0.52; pointer-events: none; transform: translate3d(0, var(--hero-parallax-ornament-y), 0) scale(1.13); transform-origin: center; will-change: transform, opacity, filter; animation: home-hero-ornament-drift 14s ease-in-out infinite alternate; }

@keyframes home-hero-ornament-drift {
    0% {
        opacity: 0.42;
        filter: saturate(1.02) contrast(1.02) brightness(0.94);
        transform: translate3d(-1.15%, calc(var(--hero-parallax-ornament-y) - 0.35rem), 0) scale(1.13) rotate(-0.28deg);
    }
    50% {
        opacity: 0.56;
        filter: saturate(1.14) contrast(1.06) brightness(1.05);
        transform: translate3d(0.45%, calc(var(--hero-parallax-ornament-y) + 0.18rem), 0) scale(1.155) rotate(0.12deg);
    }
    100% {
        opacity: 0.48;
        filter: saturate(1.08) contrast(1.04) brightness(0.98);
        transform: translate3d(1.2%, calc(var(--hero-parallax-ornament-y) - 0.15rem), 0) scale(1.14) rotate(0.3deg);
    }
}

/*
 * Home desktop:
 * la fotografía queda anclada al viewport de forma nativa.
 * El Hero actúa como ventana de recorte mediante overflow:hidden.
 * El ornamento mantiene su parallax independiente.
 */
@media (min-width: 64rem) {
    .page-hero--home::before {
        background-attachment: scroll, scroll, fixed;
        transform: none;
        will-change: auto;
    }
}


@media (min-width: 48rem) and (max-width: 63.99rem) {
    #main-content[data-page-key="home"] .page-hero--home {
        min-height: calc(100vh - var(--site-header-height));
        min-height: calc(100dvh - var(--site-header-height));
    }

    #main-content[data-page-key="home"] .page-hero--home > .page-hero__inner {
        min-height: calc(100vh - var(--site-header-height));
        min-height: calc(100dvh - var(--site-header-height));
        align-content: center;
        grid-auto-rows: max-content;
        row-gap: clamp(1rem, 2.5vh, 1.6rem);
        padding-block: clamp(5rem, 12vh, 7rem);
    }

    #main-content[data-page-key="home"] .page-hero--home h1 {
        margin-block-end: 0;
    }

    #main-content[data-page-key="home"] .page-hero--home .page-hero__intro {
        margin-block-end: 0;
    }

    #main-content[data-page-key="home"] .page-hero--home .button-group {
        margin-block-start: clamp(0.15rem, 0.8vh, 0.45rem);
    }
}

@media (max-width: 47.99rem) {
    .page-hero::before { background-position: center, center, var(--hero-position-mobile); transform: translate3d(0, var(--hero-parallax-bg-y), 0) scale(1.09); }
    .page-hero[data-hero-media] > .page-hero__media { inset: -3.5rem 0; height: calc(100% + 7rem); object-position: var(--hero-position-mobile); transform: translate3d(0, var(--hero-parallax-bg-y), 0) scale(1.09); }

    .page-hero--home {
        min-height: calc(100vh - var(--site-header-height));
        min-height: calc(100dvh - var(--site-header-height));
    }

    #main-content[data-page-key="home"] .page-hero--home > .page-hero__inner {
        min-height: calc(100vh - var(--site-header-height));
        min-height: calc(100dvh - var(--site-header-height));
        align-content: center;
        grid-auto-rows: max-content;
        row-gap: clamp(1.15rem, 3.5vh, 1.9rem);
        padding-block: clamp(4rem, 12vh, 6.25rem);
    }

    .page-hero--home::before {
        inset: -3.5rem 0;
        background-image:
            linear-gradient(180deg, rgb(3 3 3 / 82%) 0%, rgb(3 3 3 / 58%) 38%, rgb(3 3 3 / 30%) 70%, rgb(3 3 3 / 50%) 100%),
            linear-gradient(90deg, rgb(3 3 3 / 82%) 0%, rgb(3 3 3 / 48%) 62%, rgb(3 3 3 / 24%) 100%),
            var(--hero-home-photo);
        background-position: center, center, var(--hero-position-mobile);
        background-size: cover;
        transform: translate3d(0, var(--hero-home-viewport-y), 0) scale(1.09);
    }

    .page-hero--home::after {
        background-position: 61% center;
        opacity: 0.38;
        transform: translate3d(0, var(--hero-parallax-ornament-y), 0) scale(1.09);
    }

    #main-content[data-page-key="home"] .page-hero--home h1 {
        max-width: 11.5ch;
        margin-block-end: 0;
        font-size: clamp(2.8rem, 13vw, 4rem);
        line-height: 0.96;
    }

    #main-content[data-page-key="home"] .page-hero--home .page-hero__intro {
        max-width: 30rem;
        margin-block-end: 0;
        font-size: clamp(1rem, 4.45vw, 1.16rem);
        line-height: 1.6;
    }

    #main-content[data-page-key="home"] .page-hero--home .button-group {
        align-items: flex-start;
        margin-block-start: clamp(0.2rem, 1vh, 0.55rem);
    }

    .page-hero .eyebrow,
    .page-hero--home .home-hero__audit-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero:not(.page-hero--home)::before,
    .page-hero--home::after { transform: none; will-change: auto; }
    .page-hero[data-hero-media] > .page-hero__media { transform: none; will-change: auto; }
    .page-hero--home::after { animation: none; }
}