/* --- HER STYLES --- */

/* Hero background logo */
.hero-bg-logo {
    width: 40vw;
    max-width: 520px;
    height: auto;
    opacity: 0.1;
    pointer-events: none;
    filter: grayscale(100%);
    display: block;

}

.hero-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centrado */
    transform: translate(-50%, -20%);
    z-index: 0;
    opacity: 0.07;
    width: 60%;
    /* Reducido de 80% */
    max-width: none;
}

@media (min-width: 868px) {
    .hero-logo-bg {
        width: 40%;
        /* Reducido de 65% */
        left: 50%;
        transform: translate(-50%, -20%);
    }
}

@media (max-width: 968px) {
    .hero-bg-logo {
        width: 50vw;
        max-width: 360px;
        opacity: 0.08;
    }
}

@media (max-width: 640px) {
    .hero-bg-logo {
        display: none;
    }
}

.hero-bg {
    height: clamp(400px, 60vh, 550px);
    overflow: hidden;
}

.hero-bg-position {
    /* CONTROLAR POSICION DE IMAGEN DE FONDO (Vertical) */
    /* Modificar el segundo valor (ej. 20%, -50px, center, bottom) */
    object-position: center 20%;
}

.hero-title {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 6.5vw, 5rem);
    letter-spacing: 0.1em;
    line-height: 1;
    color: white;
    text-shadow:
        0 4px 12px rgba(0, 0, 0, 0.65);
    opacity: 0;
    /* Hidden initially for GSAP */
}

.hero-subtitle {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    background: linear-gradient(120deg,
            #f97316 0%,
            #ffb347 40%,
            #f97316 80%);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: glowSweep 4s linear infinite;
    opacity: 0;
    /* Hidden for GSAP */
}

.hero-badge {
    opacity: 0;
    /* Hidden for GSAP */
}

@keyframes glowSweep {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* MACHINE SHADOW */
.machine-shadow {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 100px;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.4) 30%,
            rgba(0, 0, 0, 0) 90%);
    filter: blur(28px);
    z-index: -1;
}

.machine-contrast-shadow {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 160px;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.5) 45%,
            rgba(0, 0, 0, 0) 100%);
    filter: blur(28px);
    z-index: -1;
}

/* Custom Hero Layout Adjustments */
.hero-section-height {
    min-height: 70vh;
    max-height: 850px;
    height: auto;
}

.hero-padding-top {
    /* CONTROLAR DISTANCIA TITULO - BORDE SUPERIOR AQUI */
    padding-top: 80px;
    /* Ajustar este valor */
}

.hero-container-narrow {
    max-width: 1000px !important;
    /* Force narrower width as requested */
    margin-left: auto;
    margin-right: auto;
}

/* (Scales moved to bottom of file for specificity) */

/* ... existing code ... */

@keyframes enterLeft {
    0% {
        opacity: 0;
        transform: scale(1.0) translateX(100px) translateY(-200px);
    }

    100% {
        opacity: 1;
        transform: scale(2.3) translateX(5%) translateY(-200px);
        /* Match new base scale */
    }
}

@keyframes enterRight {
    0% {
        opacity: 0;
        transform: scale(1.0) translateX(-100px) translateY(-200px);
    }

    100% {
        opacity: 1;
        transform: scale(2.5) translateX(-8%) translateY(-200px);
        /* Match new base scale */
    }
}

/* ... existing code ... */






body {
    overflow-x: hidden;
    /* FIX: Evitar scroll horizontal */
}

/* GLASS CARDS - Premium Style (Dark Blue Gradient) */
.hero-glass-card {
    background: linear-gradient(135deg, rgba(56, 64, 83, 0.6) 0%, rgba(30, 41, 59, 0.2) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    /* Bordes más delgados y sutiles */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 2px 1px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    padding: 20px 16px;
    /* Menos padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 200px;
    /* Tarjeta más pequeña */
    opacity: 0;
    /* Hidden initially for GSAP */
}

.hero-glass-card::before {
    /* Brillo superior sutil */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.hero-glass-card::after {
    /* Brillo lateral sutil */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent, rgba(255, 255, 255, 0.1));
}

.hero-glass-card h4 {
    font-size: 1.5rem;
    /* Texto un poco más pequeño */
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-glass-card p {
    font-size: 0.65rem;
    /* Texto descriptivo más pequeño */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.hero-glass-card .seal-icon {
    margin-top: 12px;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
}

/* STAMPS & SLOGAN */
.hero-stamp-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    opacity: 0;
    /* Hidden for GSAP */
}

.hero-stamp-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Slogan Styling Update */
.hero-slogan {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    opacity: 0;
    /* Hidden for GSAP */
}

.hero-slogan i {
    color: #f97316;
    /* Color naranja para el icono del slogan */
    font-size: 0.7rem;
}


/* BOTONES HERO */
.hero-btn {
    /* CONTROLAR TAMAÑO Y BORDES AQUI */
    padding: 12px 24px;
    /* Menos padding */
    font-size: 1rem;
    border-radius: 50px;
}

/* Animations */
@keyframes enterLeft {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(100px) translateY(-200px);
        /* Starts closer to center */
    }

    100% {
        opacity: 1;
        transform: scale(1.1) translateX(5%) translateY(-200px);
        /* Final State */
    }
}

@keyframes enterRight {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(-100px) translateY(-200px);
        /* Starts closer to center */
    }

    100% {
        opacity: 1;
        transform: scale(1.0) translateX(-8%) translateY(-200px);
        /* Final State */
    }
}

.animate-enter-left {
    animation: enterLeft 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-enter-right {
    animation: enterRight 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}



/* Spacing Constraint for Content - Browser Unification */
/* Refactorizado para evitar problemas de vw + scrollbar */
.hero-content-constraint {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* Usar % en lugar de vw para que sea consistente con el ancho disponible real (sin scrollbar) */
    padding-left: 4%;
    padding-right: 4%;
    max-width: 1920px;
    box-sizing: border-box;
}

@media (min-width: 1600px) {
    .hero-content-constraint {
        padding-left: 10%;
        /* Más centrado en pantallas muy anchas */
        padding-right: 10%;
    }
}

.hero-machine-large {
    /* MODIFICAR TAMAÑO DE MAQUINAS AQUI */
    transform: scale(3.8);
    /* Base Center */
    transform-origin: bottom center;
}

.hero-machine-center {
    /* POSICIÓN MÁQUINA CENTRAL */
    transform-origin: bottom center;
    /* Animation */
    animation: enterCenterMachine 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    /* Start hidden for animation */
}

.hero-machine-left {
    transform-origin: bottom center;
    /* Animation: Starts after center machine arrives */
    animation: enterLeftMachine 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
    opacity: 0;
}

.hero-machine-right {
    transform-origin: bottom center;
    /* Animation: Starts after center machine arrives */
    animation: enterRightMachine 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
    opacity: 0;
}

@keyframes enterCenterMachine {
    0% {
        transform: scale(1.0) translateY(100%);
        opacity: 0;
    }

    100% {
        transform: scale(1.0) translateY(-60px);
        opacity: 1;
    }
}

@keyframes enterLeftMachine {
    0% {
        /* Start from Center Machine Position (Behind) */
        transform: scale(1) translateX(200px) translateY(-200px);
        opacity: 0;
    }

    100% {
        transform: scale(1.1) translateX(2%) translateY(-220px);
        opacity: 1;
    }
}

@keyframes enterRightMachine {
    0% {
        /* Start from Center Machine Position (Behind) */
        transform: scale(1) translateX(-200px) translateY(-125px);
        opacity: 0;
    }

    100% {
        transform: scale(1.2) translateX(2%) translateY(-145px);
        opacity: 1;
    }
}

/* Parallax Speeds for machines will be handled via inline styles or JS,
   but specific classes can be added here if needed */

/* =====================================
   HERO – MOBILE ONLY (SAFE OVERRIDES)
   NO AFECTA DESKTOP
   ===================================== */

@media (max-width: 767px) {

    /* HERO container */
    .hero-section-height {
        min-height: auto;
        height: auto;
        max-height: none;
        overflow: hidden;
        padding-bottom: 0 !important;
        position: relative;
    }

    /* Layout - Posición relativa para las máquinas */
    .hero-content-constraint {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        position: relative;
    }

    /* Contenedor de máquinas - posición relativa */
    .hero-content-constraint {
        display: grid !important;
        grid-template-columns: 1fr;
        position: relative;
        min-height: 50vh;
    }

    /* Máquinas laterales - VISIBLES pero pequeñas y detrás */
    .hero-machine-left,
    .hero-machine-right {
        display: block !important;
        position: absolute !important;
        animation: none !important;
        opacity: 0.6 !important;
        z-index: 1 !important;
        width: 35% !important;
        max-width: 140px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Máquina izquierda - posicionada a la izquierda */
    .hero-machine-left {
        left: 5% !important;
        bottom: 80px !important;
        transform: none !important;
    }

    /* Máquina derecha - posicionada a la derecha */
    .hero-machine-right {
        right: 5% !important;
        bottom: 80px !important;
        transform: none !important;
    }

    /* Máquina central - al frente y más grande */
    .hero-machine-center {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: 10 !important;
        position: relative !important;

        max-width: 75%;
        max-height: 42vh;
        width: auto;
        object-fit: contain;

        margin: 0 auto 8px auto;
    }

    /* Sombra gradient - CORREGIDA para mobile */
    /* Debe estar en el borde inferior del hero */
    .hero-section-height>div>.absolute.bottom-0 {
        bottom: 0 !important;
        height: 200px !important;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(0, 0, 0, 0.8) 30%,
                rgba(0, 0, 0, 0.4) 60%,
                transparent 100%) !important;
    }

    /* Eliminar empujes verticales heredados */
    .hero-content-constraint>div {
        margin-top: 0 !important;
    }

    /* Botones – contenedor */
    .hero-section-height .z-30 {
        width: 100%;
        padding: 0 16px 24px 16px;
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Botones */
    .hero-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 520px;

        padding: 18px 20px;
        font-size: 1rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Limpieza visual */
    .hero-logo-bg {
        display: none;
    }

    .hero-bg-position {
        object-position: center center;
    }
}