/* ===========================
   HERO
=========================== */
.hero{
    min-height:100vh;
    
    position:relative;

    width:100%;
    min-height:100vh;

    background:
        radial-gradient(circle at 20% 20%, rgba(0,140,255,.12), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(0,140,255,.08), transparent 25%),
        linear-gradient(180deg,#050816,#081325);

    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,140,255,.15), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(0,140,255,.10), transparent 25%),
        linear-gradient(180deg,#050816,#081325);

    display:flex;
    justify-content:center;
    align-items:center;
    position: relative;
    overflow:hidden;

    padding:95px 0 60px;
    
}

/* ===========================
   LADO IZQUIERDO
=========================== */

.tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#10244d;

    color:#45b3ff;

    font-size:14px;

    margin-bottom:25px;

}

.hero-left h1{

    font-size: clamp(2.375rem, 1.495rem + 3.755vw, 5.25rem);

    line-height: 1.05;

    font-weight: 800;

    color: white;

    margin-bottom: 25px;

    text-shadow:0 0 20px rgba(0,132,255,.12);
}

.hero-left span{

    color: #2da9ff;

}

.hero-left p{

    font-size:clamp(1rem, .886rem + .485vw, 1.25rem);

    color:#b9c3d5;

    line-height:1.7;

    margin-bottom:35px;

}
.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

/* .btn-primary y .btn-secondary ahora viven en css/buttons.css */
.hero-container{

    position:relative;

    z-index:2;

    width:100%;

    /* Sin max-width centrado: el texto arranca al mismo margen que el
       logo del navbar (70px), en vez de quedar centrado dentro de una
       caja angosta que deja un hueco vacío a la izquierda. */
    padding:0 70px;

    box-sizing:border-box;

}

/* El texto vive en una columna angosta a la izquierda; el resto del
   hero-container queda libre a propósito (para un futuro elemento a la
   derecha) y de fondo se ve el toro. */
.hero-left{
    max-width:640px;
}

.hero-stats{

    display:flex;

    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;

}

.stat-card{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#0f1b34;

    border:1px solid rgba(255,255,255,.08);

    padding:14px 22px;

    border-radius:16px;

    color:white;

    font-weight:600;

    font-size:14px;

    text-decoration:none;

    box-shadow:0 0 25px rgba(0,140,255,.12);

    transition:.3s;

}

.stat-card i{

    color:#2da9ff;

    font-size:16px;

}

.stat-card:hover{

    transform:translateY(-5px);

    border-color:#2da9ff;

}
/* ==========================
TORO DE FONDO
========================== */

.bull-bg{

    position:absolute;

    left:66%;
    top:56%;

    transform:translate(-50%,-50%);

    width:1300px;

    opacity:.55;

    filter:
        drop-shadow(0 0 70px #1d8fff)
        brightness(.95);

    pointer-events:none;

    z-index:1;

}
.hero::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,
        rgba(0,132,255,.20),
        transparent 70%);

    filter:blur(80px);

    z-index:0;

}
.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at center,
        transparent 30%,
        rgba(5,8,22,.55) 100%);

    z-index:1;

}