/* =========================================================
   COOPERATIVA PIN-UNO — PREMIUM MOTION 2026
   Capa de progressive enhancement. El contenido base sigue
   visible y funcional cuando JavaScript o GSAP no están.
========================================================= */

html.premium-motion-ready {
    --pm-orange: #f3a23a;
    --pm-orange-soft: rgba(243, 162, 58, 0.2);
    --pm-green: #69b778;
    --pm-green-deep: #0b2d18;
    --pm-ink: #020c05;
    --pm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pm-ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
    --pm-duration-fast: 260ms;
    --pm-duration-medium: 560ms;
    --pm-spot-x: 50%;
    --pm-spot-y: 50%;

    overflow-x: clip;
}

html.premium-motion-ready body,
html.premium-motion-ready main,
html.premium-motion-ready .hero {
    max-width: 100%;
    overflow-x: clip;
}

/* Los wrappers <picture> son estructura, no animación: deben
   dimensionarse también en las páginas legales sin JavaScript. */

.header-logo > picture,
.footer-logo > picture {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 50%;
    line-height: 0;
}

.hero-machine-picture {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* =========================================================
   PROPIEDAD DE GSAP: RETIRADA SELECTIVA DE LOOPS ANTIGUOS
   Esta regla solo se activa después de confirmar GSAP.
========================================================= */

html.premium-motion-gsap .header,
html.premium-motion-gsap .hero-background,
html.premium-motion-gsap .hero-label,
html.premium-motion-gsap .hero h1,
html.premium-motion-gsap .hero-description,
html.premium-motion-gsap .hero-buttons,
html.premium-motion-gsap .hero-highlights,
html.premium-motion-gsap .hero-visual,
html.premium-motion-gsap .hero-visual-aura,
html.premium-motion-gsap .hero-machine-float,
html.premium-motion-gsap .hero-badge,
html.premium-motion-gsap .hero-decoration,
html.premium-motion-gsap .section-background-glow,
html.premium-motion-gsap .before-after-background-glow,
html.premium-motion-gsap .call-to-action-orbit,
html.premium-motion-gsap .floating-budget-button::before {
    animation: none;
}

html.premium-motion-gsap .hero::before,
html.premium-motion-gsap .hero-visual::before,
html.premium-motion-gsap .hero-badge::after {
    animation: none;
}

html.premium-motion-gsap [data-reveal],
html.premium-motion-gsap .pm-reveal {
    transition: none;
}

/* =========================================================
   UTILIDADES DE REVEAL Y MÁSCARAS
========================================================= */

html.premium-motion-ready .pm-split {
    min-width: 0;
    max-width: 100%;
}

html.premium-motion-ready .pm-line-mask {
    display: block;
    overflow: clip;
    padding-block: 0.035em 0.075em;
    margin-block: -0.035em -0.075em;
}

html.premium-motion-ready .pm-line {
    display: block;
    transform-origin: 50% 100%;
}

html.premium-motion-ready .hero h1 .pm-word {
    background:
        linear-gradient(
            105deg,
            #ffffff 0%,
            #f6fff7 62%,
            #d7efdc 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

html.premium-motion-ready .hero h1.pm-split {
    background: none;
}

html.premium-motion-gsap .pm-reveal:not(.is-revealed),
html.premium-motion-gsap .pm-line {
    will-change: transform, opacity;
}

html.premium-motion-ready .pm-reveal.is-revealed,
html.premium-motion-ready .is-revealed .pm-line {
    will-change: auto;
}

html.premium-motion-ready .pm-entry-sweep {
    position: absolute !important;
    top: -45% !important;
    bottom: auto !important;
    left: -48% !important;
    z-index: 6 !important;
    width: 31% !important;
    height: 190% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            rgba(243, 162, 58, 0.11),
            transparent
        ) !important;
    opacity: 0;
    transform: translate3d(-210%, 0, 0) skewX(-17deg);
    pointer-events: none;
}

html.premium-motion-ready .pm-reveal.is-revealed > .pm-entry-sweep,
html.premium-motion-ready .is-revealed > .pm-entry-sweep,
html.premium-motion-ready .pm-entry-sweep.is-active {
    animation: pm-entry-sweep 920ms var(--pm-ease-out) 1 both;
}

@keyframes pm-entry-sweep {
    0% {
        opacity: 0;
        transform: translate3d(-210%, 0, 0) skewX(-17deg);
    }

    18% {
        opacity: 0.72;
    }

    72%,
    100% {
        opacity: 0;
        transform: translate3d(660%, 0, 0) skewX(-17deg);
    }
}

/* =========================================================
   HEADER Y VIEW-TRANSITION COMPARTIDA
========================================================= */

html.premium-motion-ready .header {
    transform-origin: 50% 0;
}

html.premium-motion-ready .header-logo {
    isolation: isolate;
}

@supports (view-transition-name: pin-uno-logo) {
    .header-logo > picture {
        view-transition-name: pin-uno-logo;
    }
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: pm-page-out 170ms ease both;
}

::view-transition-new(root) {
    animation: pm-page-in 230ms var(--pm-ease-smooth, ease) both;
}

::view-transition-group(pin-uno-logo) {
    animation-duration: 300ms;
    animation-timing-function: var(--pm-ease-out, ease);
}

::view-transition-old(pin-uno-logo),
::view-transition-new(pin-uno-logo) {
    mix-blend-mode: normal;
}

@keyframes pm-page-out {
    to {
        opacity: 0;
    }
}

@keyframes pm-page-in {
    from {
        opacity: 0;
    }
}

/* =========================================================
   HERO — LUZ INDUSTRIAL, GRAIN Y PROFUNDIDAD
========================================================= */

html.premium-motion-ready .hero {
    isolation: isolate;
    background:
        radial-gradient(
            ellipse at 76% 46%,
            rgba(37, 103, 54, 0.3),
            transparent 37%
        ),
        linear-gradient(135deg, #020c05 0%, #071a0d 55%, #041108 100%);
}

html.premium-motion-ready .hero::before {
    z-index: 1;
    background:
        radial-gradient(
            ellipse at 78% 43%,
            rgba(243, 162, 58, 0.14) 0%,
            rgba(103, 179, 119, 0.09) 23%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 17% 33%,
            rgba(66, 150, 84, 0.1),
            transparent 41%
        ),
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.025),
            transparent 28%,
            rgba(255, 177, 71, 0.025) 72%,
            transparent
        );
    opacity: 0.94;
    pointer-events: none;
}

html.premium-motion-ready .hero::after {
    z-index: 1;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.17) 0.55px, transparent 0.75px),
        radial-gradient(rgba(0, 0, 0, 0.2) 0.45px, transparent 0.7px),
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0, 0, 0, 0.3) 100%
        );
    background-position: 0 0, 5px 7px, center;
    background-size: 7px 9px, 11px 13px, 100% 100%;
    opacity: 0.11;
    mix-blend-mode: soft-light;
    mask-image: none;
    -webkit-mask-image: none;
    pointer-events: none;
}

html.premium-motion-ready .hero-background {
    inset: -34px;
    transform-origin: 50% 50%;
}

html.premium-motion-ready .hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(2, 12, 5, 0.99) 0%,
            rgba(4, 20, 9, 0.94) 39%,
            rgba(5, 24, 11, 0.59) 69%,
            rgba(3, 15, 7, 0.43) 100%
        ),
        linear-gradient(
            to top,
            rgba(1, 9, 4, 0.84),
            transparent 47%
        );
}

html.premium-motion-ready .hero-content,
html.premium-motion-ready .hero-main-grid,
html.premium-motion-ready .hero-copy,
html.premium-motion-ready .hero-visual {
    min-width: 0;
}

html.premium-motion-ready .hero-label {
    overflow: hidden;
}

html.premium-motion-ready .hero-label::before {
    width: 30px;
    height: 1px;
    flex: 0 0 auto;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            var(--pm-green),
            var(--pm-orange)
        );
    box-shadow: none;
    transform: scaleX(var(--pm-line-progress, 1));
    transform-origin: left center;
}

html.premium-motion-ready .section-label::before {
    transform: scaleX(var(--pm-line-progress, 1));
    transform-origin: left center;
}

html.premium-motion-ready .hero h1.pm-split,
html.premium-motion-ready .hero h1 .pm-line-mask {
    text-wrap: balance;
}

html.premium-motion-ready .hero-visual {
    isolation: isolate;
    transform-style: preserve-3d;
}

html.premium-motion-ready .hero-visual-aura {
    z-index: 1;
    background:
        radial-gradient(
            circle,
            rgba(242, 157, 50, 0.27) 0%,
            rgba(98, 170, 113, 0.14) 31%,
            rgba(24, 76, 38, 0.08) 51%,
            transparent 72%
        );
    filter: blur(16px);
    transform-origin: 50% 54%;
    pointer-events: none;
}

html.premium-motion-ready .hero-machine-float {
    z-index: 2;
    min-width: 0;
    transform-origin: 50% 65%;
}

html.premium-motion-ready .hero-machine-stage {
    min-width: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 50% 62%;
}

html.premium-motion-gsap .hero-background,
html.premium-motion-gsap .hero-visual-aura,
html.premium-motion-gsap .hero-machine-float,
html.premium-motion-gsap .hero-machine-stage,
html.premium-motion-gsap .hero-badges-layer {
    will-change: transform;
}

html.premium-motion-ready .hero-machine-image {
    display: block;
    width: 100%;
    max-width: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 65%;
}

html.premium-motion-ready .hero-badges-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    min-width: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}

html.premium-motion-ready .hero-badges-layer .hero-badge {
    pointer-events: auto;
}

html.premium-motion-ready .hero-badge {
    --pm-badge-x: 0px;
    --pm-badge-y: 0px;

    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(
            145deg,
            rgba(5, 20, 10, 0.78),
            rgba(11, 43, 21, 0.52)
        );
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.31),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
    translate: var(--pm-badge-x) var(--pm-badge-y);
    transform-origin: 50% 50%;
}

html.premium-motion-gsap .hero-badge::after {
    left: -60%;
    opacity: 0;
    transition:
        left 680ms var(--pm-ease-out),
        opacity 180ms ease;
}

html.premium-motion-gsap .hero-badge:hover::after,
html.premium-motion-gsap .hero-badge:focus-within::after {
    left: 150%;
    opacity: 0.65;
}

html.premium-motion-gsap .scroll-indicator-line::after {
    animation: pm-scroll-cue 1.8s 1.25s var(--pm-ease-smooth) 1 both;
}

@keyframes pm-scroll-cue {
    from {
        left: -50%;
    }

    to {
        left: 110%;
    }
}

/* =========================================================
   SUPERFICIES, SERVICIOS Y FICHAS DE MAQUINARIA
========================================================= */

html.premium-motion-ready .premium-card,
html.premium-motion-ready .premium-surface {
    --pm-pointer-x: 0px;
    --pm-pointer-y: 0px;
    --pm-rotate-x: 0deg;
    --pm-rotate-y: 0deg;
    --pm-reveal-y: 0px;
    --pm-reveal-scale: 1;
    --pm-spot-x: var(--mouse-x, 50%);
    --pm-spot-y: var(--mouse-y, 50%);

    backface-visibility: hidden;
    transform-origin: 50% 50%;
}

html.premium-motion-ready .premium-card::before,
html.premium-motion-ready .premium-surface::before {
    background:
        radial-gradient(
            390px circle at var(--pm-spot-x) var(--pm-spot-y),
            rgba(243, 162, 58, 0.14),
            rgba(105, 183, 120, 0.045) 23%,
            transparent 47%
        );
}

html.premium-motion-ready .section-dark .premium-card::before {
    background:
        radial-gradient(
            410px circle at var(--pm-spot-x) var(--pm-spot-y),
            rgba(255, 179, 74, 0.2),
            rgba(105, 183, 120, 0.065) 24%,
            transparent 49%
        );
}

html.premium-motion-ready .service-card,
html.premium-motion-ready .machine-card {
    isolation: isolate;
    perspective: 900px;
}

html.premium-motion-gsap .service-card {
    --pm-pointer-lift: 0px;
    --pm-hover-lift: 0px;

    transform:
        perspective(900px)
        translateY(calc(var(--pm-pointer-lift) + var(--pm-hover-lift)))
        rotateX(var(--pm-rotate-x))
        rotateY(var(--pm-rotate-y));
    transition:
        border-color 320ms ease,
        box-shadow 420ms var(--pm-ease-out);
}

html.premium-motion-gsap .service-card:hover,
html.premium-motion-gsap .service-card:focus-within {
    --pm-hover-lift: -3px;
}

html.premium-motion-gsap .hero-buttons .button,
html.premium-motion-gsap .call-to-action .button {
    --pm-magnet-x: 0px;
    --pm-magnet-y: 0px;

    translate: var(--pm-magnet-x) var(--pm-magnet-y);
}

html.premium-motion-ready .service-card .card-number,
html.premium-motion-ready .machine-card .machine-number,
html.premium-motion-ready .machine-card .machine-category,
html.premium-motion-ready .machine-card .machine-card-decoration {
    backface-visibility: hidden;
}

html.premium-motion-ready .service-card .card-line {
    transform-origin: left center;
}

html.premium-motion-ready .service-card:hover,
html.premium-motion-ready .service-card:focus-within {
    border-color: rgba(243, 162, 58, 0.34);
}

html.premium-motion-ready .service-card:hover h3,
html.premium-motion-ready .service-card:focus-within h3 {
    color: var(--green-500, #429654);
}

html.premium-motion-ready .machine-card:hover .machine-card-decoration,
html.premium-motion-ready .machine-card:focus-within .machine-card-decoration {
    width: 78px;
    opacity: 0.94;
}

/* Storytelling institucional: profundidad editorial breve. */

html.premium-motion-ready .company-story-line,
html.premium-motion-ready .experience-panel-line {
    transform-origin: 50% 0;
}

html.premium-motion-ready .experience-panel {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(243, 162, 58, 0.095),
            transparent 34%
        ),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), #f3f8f3);
}

html.premium-motion-ready .experience-areas li {
    transform-origin: left center;
}

/* =========================================================
   GALERÍAS — CLIP, OVERLAY Y MODAL
========================================================= */

html.premium-motion-ready .gallery-card {
    --pm-gallery-clip: inset(0 0 0 0 round 18px 18px 0 0);
}

html.premium-motion-ready .gallery-card .gallery-media {
    clip-path: var(--pm-gallery-clip);
    -webkit-clip-path: var(--pm-gallery-clip);
    transform-origin: 50% 100%;
}

html.premium-motion-gsap .gallery-card.pm-reveal:not(.is-revealed) .gallery-media {
    will-change: clip-path;
}

html.premium-motion-ready .gallery-card.is-revealed .gallery-media {
    will-change: auto;
}

html.premium-motion-ready .gallery-media::before {
    background:
        linear-gradient(
            to top,
            rgba(2, 14, 6, 0.76),
            rgba(3, 18, 8, 0.11) 53%,
            transparent 77%
        ),
        radial-gradient(
            circle at var(--pm-spot-x) var(--pm-spot-y),
            rgba(243, 162, 58, 0.13),
            transparent 42%
        );
}

html.premium-motion-ready .gallery-cover-image {
    transform-origin: 50% 58%;
    transition:
        filter 520ms ease,
        opacity 240ms ease,
        transform 720ms var(--pm-ease-out);
}

html.premium-motion-ready .gallery-card:hover .gallery-cover-image,
html.premium-motion-ready .gallery-card:focus-within .gallery-cover-image {
    transform: scale(1.045);
}

html.premium-motion-ready .gallery-media-action {
    transition:
        border-color var(--pm-duration-fast) ease,
        opacity var(--pm-duration-fast) ease,
        transform 360ms var(--pm-ease-out);
}

html.premium-motion-ready .gallery-modal-backdrop {
    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(34, 91, 49, 0.24),
            transparent 48%
        ),
        rgba(1, 8, 3, 0.94);
}

html.premium-motion-ready .gallery-modal-dialog {
    border-color: rgba(255, 255, 255, 0.13);
    transform: translateY(18px) scale(0.97);
}

html.premium-motion-ready .gallery-modal.active .gallery-modal-dialog {
    transform: translateY(0) scale(1);
}

html.premium-motion-ready .gallery-image-frame {
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(66, 150, 84, 0.065),
            transparent 58%
        ),
        #010803;
}

html.premium-motion-ready .gallery-modal-image {
    transform: scale(0.992);
    transition:
        opacity 170ms ease,
        transform 240ms var(--pm-ease-smooth);
}

html.premium-motion-ready .gallery-modal-image.is-loaded {
    transform: scale(1);
}

html.premium-motion-ready .gallery-modal.pm-gallery-animating .gallery-modal-image,
html.premium-motion-ready .gallery-modal-image.pm-gallery-animating {
    will-change: transform, opacity;
}

html.premium-motion-gsap .gallery-modal,
html.premium-motion-gsap .gallery-modal-dialog {
    transition: none;
}

html.premium-motion-gsap .budget-modal,
html.premium-motion-gsap .budget-modal-dialog,
html.premium-motion-gsap .gallery-modal.pm-gallery-animating .gallery-modal-image {
    transition: none;
}

html.premium-motion-ready .gallery-thumbnail.active,
html.premium-motion-ready .gallery-thumbnail[aria-current="true"] {
    box-shadow:
        0 0 0 1px rgba(255, 179, 74, 0.34),
        0 10px 24px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   COMPARADORES — ENTRADA Y CUE ÚNICO DEL HANDLE
========================================================= */

html.premium-motion-ready .before-after-card.pm-comparison-entered {
    border-color: rgba(255, 179, 74, 0.17);
}

html.premium-motion-ready .before-after-card.pm-comparison-entered::after {
    transform: scaleX(1);
}

html.premium-motion-ready .before-after-card.pm-handle-cue .before-after-handle,
html.premium-motion-ready .before-after-handle.pm-handle-cue {
    animation: pm-handle-cue 760ms var(--pm-ease-out) 1 both;
}

@keyframes pm-handle-cue {
    0%,
    100% {
        translate: 0 0;
    }

    28% {
        translate: -5px 0;
    }

    62% {
        translate: 5px 0;
    }
}

html.premium-motion-ready .before-after-range:focus-visible ~ .before-after-divider .before-after-handle,
html.premium-motion-ready .before-after-frame:focus-within .before-after-handle {
    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.3),
        0 0 0 8px rgba(255, 255, 255, 0.12),
        0 0 30px rgba(255, 179, 74, 0.35);
}

/* =========================================================
   FAQ — RESPUESTA RÁPIDA SIN TRANSICIÓN CSS DE HEIGHT
========================================================= */

html.premium-motion-ready .faq-item {
    transition:
        border-color 260ms ease,
        background-color 260ms ease,
        box-shadow 300ms ease;
}

html.premium-motion-ready .faq-item.is-open,
html.premium-motion-ready .faq-item:has(.faq-trigger[aria-expanded="true"]) {
    border-color: rgba(243, 162, 58, 0.24);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(243, 162, 58, 0.085),
            transparent 33%
        ),
        linear-gradient(145deg, #ffffff, #f5f9f5);
}

html.premium-motion-ready .faq-item::after {
    transition:
        opacity 220ms ease,
        transform 300ms var(--pm-ease-out);
}

html.premium-motion-ready .faq-icon,
html.premium-motion-ready .faq-icon::before,
html.premium-motion-ready .faq-icon::after {
    transition-duration: 280ms;
    transition-timing-function: var(--pm-ease-out);
}

html.premium-motion-ready .faq-panel {
    transition: none;
}

html.premium-motion-ready .faq-panel.is-opening,
html.premium-motion-ready .faq-panel.is-closing {
    animation: none;
    will-change: auto;
}

html.premium-motion-ready .faq-panel-content {
    opacity: 0.84;
    transform: translateY(-3px);
    transition:
        opacity 180ms ease,
        transform 260ms var(--pm-ease-out);
}

html.premium-motion-ready .faq-item.is-open .faq-panel-content,
html.premium-motion-ready .faq-item:has(.faq-trigger[aria-expanded="true"]) .faq-panel-content {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   CTA FINAL Y BOTÓN FLOTANTE
========================================================= */

html.premium-motion-ready .call-to-action {
    isolation: isolate;
    background:
        radial-gradient(
            ellipse at 88% 12%,
            rgba(243, 162, 58, 0.18),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 3% 100%,
            rgba(105, 183, 120, 0.14),
            transparent 38%
        ),
        linear-gradient(125deg, #061a0c 0%, #123d22 50%, #236739 100%);
}

html.premium-motion-ready .call-to-action::before {
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.13) 0.5px, transparent 0.7px);
    background-size: 48px 48px, 48px 48px, 9px 11px;
    opacity: 0.36;
    pointer-events: none;
}

html.premium-motion-ready .call-to-action::after {
    position: absolute;
    right: 5%;
    bottom: 0;
    left: 5%;
    z-index: 1;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(105, 183, 120, 0.55),
            rgba(243, 162, 58, 0.82),
            transparent
        );
    content: "";
    transform-origin: left center;
    pointer-events: none;
}

html.premium-motion-ready .call-to-action-content {
    z-index: 2;
}

html.premium-motion-ready .call-to-action-orbit {
    will-change: transform;
}

html.premium-motion-ready .call-to-action .button {
    transform-origin: 50% 50%;
}

html.premium-motion-gsap .floating-budget-button::before {
    opacity: 0.28;
    transform: scale(1);
}

html.premium-motion-ready .floating-budget-button.pm-section-active::before {
    animation: pm-floating-attention 620ms var(--pm-ease-out) 1 both;
}

html.premium-motion-ready .floating-budget-button:focus-visible {
    box-shadow:
        0 17px 38px rgba(188, 89, 9, 0.35),
        0 0 0 6px rgba(243, 162, 58, 0.2);
}

@keyframes pm-floating-attention {
    0% {
        opacity: 0.34;
        transform: scale(0.98);
    }

    55% {
        opacity: 0.08;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.26;
        transform: scale(1);
    }
}

/* =========================================================
   CSS SCROLL-DRIVEN — SOLO DECORACIÓN Y CON FALLBACK
========================================================= */

@supports (animation-timeline: view()) {
    html.premium-motion-ready .section-heading::after,
    html.premium-motion-ready .call-to-action::after,
    html.premium-motion-ready:not(.premium-motion-gsap) .company-story-line {
        animation-name: pm-view-line;
        animation-duration: 1ms;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: view();
        animation-range: entry 8% cover 36%;
        transform-origin: left center;
    }

    html.premium-motion-ready:not(.premium-motion-gsap) .company-story-line {
        animation-name: pm-view-line-y;
        transform-origin: center top;
    }

    html.premium-motion-ready:not(.premium-motion-gsap) .before-after-background-grid {
        animation-name: pm-view-grid-drift;
        animation-duration: 1ms;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
}

@keyframes pm-view-line {
    from {
        opacity: 0.35;
        transform: scaleX(0.12);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes pm-view-line-y {
    from {
        opacity: 0.35;
        transform: scaleY(0.08);
    }

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes pm-view-grid-drift {
    from {
        transform: translate3d(0, -12px, 0);
    }

    to {
        transform: translate3d(0, 12px, 0);
    }
}

/* =========================================================
   RESPONSIVE PREMIUM
========================================================= */

@media (max-width: 1080px) {
    html.premium-motion-ready .hero-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    html.premium-motion-ready .hero-copy,
    html.premium-motion-ready .hero-visual {
        width: 100%;
        max-width: 100%;
    }

    html.premium-motion-ready .hero-visual {
        width: min(100%, 720px);
        margin-inline: auto;
    }

    html.premium-motion-ready .hero-badge-top {
        right: 4%;
    }

    html.premium-motion-ready .hero-badge-bottom {
        left: 4%;
    }
}

@media (max-width: 850px) {
    html.premium-motion-ready body,
    html.premium-motion-ready main,
    html.premium-motion-ready .hero,
    html.premium-motion-ready .hero-content,
    html.premium-motion-ready .hero-main-grid {
        max-width: 100%;
        overflow-x: clip;
    }

    html.premium-motion-ready .hero::after {
        background-size: 7px 9px, 11px 13px, 100% 100%;
        opacity: 0.085;
    }

    html.premium-motion-ready .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(2, 13, 6, 0.95),
                rgba(5, 24, 11, 0.84) 54%,
                rgba(2, 12, 5, 0.94)
            );
    }

    html.premium-motion-ready .hero-visual {
        width: min(100%, 620px);
        max-width: 100%;
        overflow: visible;
        perspective: none;
    }

    html.premium-motion-ready .hero-machine-float,
    html.premium-motion-ready .hero-machine-stage,
    html.premium-motion-ready .hero-machine-picture,
    html.premium-motion-ready .hero-machine-image {
        width: 100%;
        max-width: min(100%, 520px);
    }

    html.premium-motion-ready .hero-badge {
        max-width: min(46%, 190px);
    }

    html.premium-motion-ready .service-card,
    html.premium-motion-ready .machine-card {
        perspective: none;
    }

    html.premium-motion-ready .gallery-modal-dialog {
        transform: translateY(14px) scale(0.985);
    }

    html.premium-motion-ready .gallery-modal.active .gallery-modal-dialog {
        transform: none;
    }

    html.premium-motion-ready .call-to-action-orbit {
        opacity: 0.62;
    }
}

@media (max-width: 520px) {
    html.premium-motion-ready .hero-content {
        padding-top: 106px;
        padding-bottom: 50px;
    }

    html.premium-motion-ready .hero h1,
    html.premium-motion-ready .hero h1 .pm-line-mask,
    html.premium-motion-ready .hero h1 .pm-line {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    html.premium-motion-ready .hero-visual {
        min-height: 342px;
        padding-bottom: 72px;
    }

    html.premium-motion-ready .hero-machine-float,
    html.premium-motion-ready .hero-machine-stage,
    html.premium-motion-ready .hero-machine-picture,
    html.premium-motion-ready .hero-machine-image {
        max-width: min(100%, 390px);
    }

    html.premium-motion-ready .hero-badges-layer {
        inset: auto 0 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        align-items: stretch;
    }

    html.premium-motion-ready .hero-badge,
    html.premium-motion-ready .hero-badge-top,
    html.premium-motion-ready .hero-badge-bottom {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        display: flex;
        gap: 7px;
        padding: 8px 9px;
        border-radius: 11px;
    }

    html.premium-motion-ready .hero-badge-icon {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
    }

    html.premium-motion-ready .hero-badge-dot {
        width: 7px;
        height: 7px;
        margin-left: 4px;
        box-shadow: 0 0 0 4px rgba(241, 139, 24, 0.13);
    }

    html.premium-motion-ready .hero-badge small {
        margin-bottom: 2px;
        font-size: 0.49rem;
        line-height: 1.2;
    }

    html.premium-motion-ready .hero-badge strong {
        font-size: 0.61rem;
        line-height: 1.25;
    }

    html.premium-motion-ready .pm-line-mask {
        overflow: clip;
    }

    html.premium-motion-ready .gallery-card .gallery-media {
        --pm-gallery-clip: inset(0 0 0 0 round 15px 15px 0 0);
    }

    html.premium-motion-ready .call-to-action::after {
        right: 14px;
        left: 14px;
    }
}

@media (max-width: 390px) {
    html.premium-motion-ready .hero-copy,
    html.premium-motion-ready .hero-main-grid {
        min-width: 0;
        width: 100%;
    }

    html.premium-motion-ready .hero-label {
        width: 100%;
        max-width: 100%;
        white-space: normal;
    }

    html.premium-motion-ready .hero-label::before {
        width: 20px;
    }

    html.premium-motion-ready .hero-visual {
        min-height: 315px;
        padding-bottom: 70px;
    }

    html.premium-motion-ready .hero-badges-layer {
        gap: 5px;
    }

    html.premium-motion-ready .hero-badge,
    html.premium-motion-ready .hero-badge-top,
    html.premium-motion-ready .hero-badge-bottom {
        gap: 5px;
        padding: 7px;
    }

    html.premium-motion-ready .hero-badge-icon {
        width: 23px;
        height: 23px;
    }

    html.premium-motion-ready .hero-badge small {
        font-size: 0.46rem;
    }

    html.premium-motion-ready .hero-badge strong {
        font-size: 0.57rem;
    }

    html.premium-motion-ready .gallery-modal-heading h2 {
        max-width: 45vw;
    }
}

@media (hover: none),
(pointer: coarse) {
    html.premium-motion-ready .service-card:hover,
    html.premium-motion-ready .machine-card:hover,
    html.premium-motion-ready .gallery-card:hover,
    html.premium-motion-ready .before-after-card:hover,
    html.premium-motion-ready .hero-badge:hover,
    html.premium-motion-ready .call-to-action .button:hover {
        transform: none;
    }

    html.premium-motion-ready .gallery-media-action {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   MOVIMIENTO REDUCIDO — TODO VISIBLE, SIN PARALLAX/TILT
========================================================= */

html.premium-motion-reduced {
    scroll-behavior: auto !important;
}

html.premium-motion-reduced *,
html.premium-motion-reduced *::before,
html.premium-motion-reduced *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
}

html.premium-motion-reduced [data-reveal],
html.premium-motion-reduced .pm-reveal,
html.premium-motion-reduced .pm-line,
html.premium-motion-reduced .header,
html.premium-motion-reduced .hero-copy > *,
html.premium-motion-reduced .hero-visual,
html.premium-motion-reduced .hero-machine-float,
html.premium-motion-reduced .hero-machine-stage,
html.premium-motion-reduced .hero-badges-layer,
html.premium-motion-reduced .hero-badge,
html.premium-motion-reduced .premium-card,
html.premium-motion-reduced .premium-surface,
html.premium-motion-reduced .button,
html.premium-motion-reduced .call-to-action-orbit,
html.premium-motion-reduced .floating-budget-button {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

html.premium-motion-reduced .hero-background,
html.premium-motion-reduced .hero-visual-aura {
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    transform: none !important;
}

html.premium-motion-reduced .pm-line-mask {
    overflow: visible !important;
}

html.premium-motion-reduced .pm-entry-sweep,
html.premium-motion-reduced .hero-badge::after,
html.premium-motion-reduced .floating-budget-button::before {
    display: none !important;
}

html.premium-motion-reduced .gallery-modal.active .gallery-modal-dialog,
html.premium-motion-reduced .gallery-modal-image.is-loaded,
html.premium-motion-reduced .faq-panel-content {
    opacity: 1 !important;
    transform: none !important;
}

html.premium-motion-reduced .before-after-handle {
    animation: none !important;
    translate: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html.premium-motion-ready {
        scroll-behavior: auto !important;
    }

    html.premium-motion-ready *,
    html.premium-motion-ready *::before,
    html.premium-motion-ready *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }

    html.premium-motion-ready [data-reveal],
    html.premium-motion-ready .pm-reveal,
    html.premium-motion-ready .pm-line,
    html.premium-motion-ready .header,
    html.premium-motion-ready .hero-copy > *,
    html.premium-motion-ready .hero-visual,
    html.premium-motion-ready .hero-machine-float,
    html.premium-motion-ready .hero-machine-stage,
    html.premium-motion-ready .hero-badges-layer,
    html.premium-motion-ready .hero-badge,
    html.premium-motion-ready .premium-card,
    html.premium-motion-ready .premium-surface,
    html.premium-motion-ready .button,
    html.premium-motion-ready .call-to-action-orbit,
    html.premium-motion-ready .floating-budget-button {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        transform: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    html.premium-motion-ready .hero-background,
    html.premium-motion-ready .hero-visual-aura {
        opacity: 1 !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        transform: none !important;
    }

    html.premium-motion-ready .pm-line-mask {
        overflow: visible !important;
    }

    html.premium-motion-ready .pm-entry-sweep,
    html.premium-motion-ready .hero-badge::after,
    html.premium-motion-ready .floating-budget-button::before {
        display: none !important;
    }

    html.premium-motion-ready .gallery-modal.active .gallery-modal-dialog,
    html.premium-motion-ready .gallery-modal-image.is-loaded,
    html.premium-motion-ready .faq-panel-content {
        opacity: 1 !important;
        transform: none !important;
    }

    html.premium-motion-ready .before-after-handle {
        animation: none !important;
        translate: none !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(pin-uno-logo) {
        animation: none !important;
    }
}