/* =========================================
   HERO SYSTEM — STREAMING PRO
   ========================================= */

/* ===== HERO BASE ===== */

.am-hero{
    position:relative;
    width:100%;

    /* Altura flexible (no vh rígido) */
    min-height:340px;

    /* Espaciado vertical cinematográfico */
    padding:60px 0;

    display:flex;
    align-items:center;

    /* Evita desbordes del zoom background */
    overflow:hidden;
}


/* ===== BACKGROUND LAYER ===== */

.am-hero::before{
    content:"";
    position:absolute;
    inset:0;

    /* Imagen principal hero */
    background:url('/images/hero-main.jpg') center/cover no-repeat;

    /* Zoom cinematográfico suave */
    transform:scale(1.05);
    animation:heroZoom 20s ease-in-out infinite alternate;

    z-index:0;
}


/* ===== OVERLAY (ajustado menos oscuro) ===== */

.am-hero::after{
    content:"";
    position:absolute;
    inset:0;

    /* Gradiente cinematográfico pero más claro */
    background:linear-gradient(
        rgba(5,7,15,0.45),
        rgba(5,7,15,0.75)
    );

    z-index:1;
}


/* ===== CONTENIDO HERO ===== */

.am-hero-content{
    position:relative;
    z-index:2;

    /* Container global del sistema */
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}


/* ===== TITULO HERO ===== */

.am-hero h1{
    /* Tipografía fluida responsive */
    font-size:clamp(28px,4vw,52px);

    line-height:1.1;
    margin-bottom:20px;
    font-weight:700;

    /* Limita ancho para lectura cinematográfica */
    max-width:600px;
}


/* ===== BOTÓN HERO ===== */

.am-hero .btn{
    margin-top:20px;

    /* Branding dorado sistema */
    background:#f59e0b;
    color:#fff;

    /* Área táctil cómoda */
    padding:14px 26px;

    /* Estética SaaS moderna */
    border-radius:12px;

    font-weight:600;
    text-decoration:none;
    display:inline-block;

    /* Micro-interacción */
    transition:.25s;
}

.am-hero .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}


/* ===== ANIMACIÓN GPU HERO ===== */

@keyframes heroZoom{
    from{ transform:scale(1.05); }
    to{ transform:scale(1.12); }
}


/* =========================================
   HERO MOBILE
   ========================================= */

@media (max-width:768px){

    .am-hero{
        min-height:180px;
        padding:25px 0;
    }

    .am-hero h1{
        font-size:clamp(22px,6vw,26px);
    }

}