/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    background:#000;
    font-family:'Poppins', sans-serif;
}

/* HERO */
.hero{
    position:relative;
    width:100%;
    height:100vh;
    background:url('assets/imagenes/Cara7.jpg') center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    /* ANIMACIÓN DE EXPANSIÓN */
    animation:heroZoom 2.8s ease-out forwards;
}

/* OVERLAY (no bloquea mouse) */
.overlay{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.22);
    backdrop-filter:none; /* nitidez de la imagen blur(3px)*/
    pointer-events:none;
    z-index:0;
}

/* NOMBRE GABRIEL LEON */
.hero-content{
    position:relative;
    z-index:10;
    text-align:center;
    color:white;
    margin-bottom: 0px;
    line-height: 1;
    gap: 2px;
}

/* NOMBRE */
.name{
    font-family:sans-serif, serif;
    font-size:5.2rem;
    font-weight:200;
    letter-spacing:14px;
    margin-bottom:0;
    line-height: 1;
    opacity:0;
    animation:fadeIn 2.3s ease forwards;
    animation-delay:.2s;
    margin-top: 30px;
}

/* FIRMA */

.signature {
    margin-top: 30px;
    margin-bottom: 10px;
    width: 120px;       /* ajusta según tu firma */
    max-width: 80%;
    opacity:0;
    animation:fadeIn 5.3s ease forwards;
    animation-delay: 2s;
}

/* SELECTORES */
.selectors{
    margin-top:30px;
    display:flex;
    gap:35px;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}

/* LINKS o doblaje, musica, tecnologia (solo animación) */
.selector{
    color:rgb(246, 226, 195);
    text-decoration:none;
    font-size:2.0rem;
    letter-spacing:.8px;
    opacity:0;
    display:inline-block;
    cursor:pointer;

    animation:fadeIn 1.2s ease forwards;
    animation-delay:var(--delay);
}

/* TEXTO INTERNO (hover real) */
.selector-label{
    display:inline-block;
    transform:scale(1);
    transition:transform .30s ease, opacity .30s ease;
}

/* HOVER */
.selector:hover .selector-label{
    transform:scale(1.18) translateY(-3px);
    opacity:1;
}

/* DIVISOR ENTRE PALABRAS| */
.divider{
    color:rgb(246, 226, 195);
    font-size:1.1rem;
    opacity:0;
    animation:fadeIn 1.2s ease forwards;
    animation-delay:var(--delay);
}

/* ANIMACIÓN DE ENTRADA */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(22px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ANIMACIÓN DEL FONDO */
@keyframes heroZoom{
    0%{
        background-size:108%;
    }
    100%{
        background-size:100%;
    }
}

/* RESPONSIVE */
@media(max-width:900px){
    .name{font-size:3.6rem;}
}
@media(max-width:600px){
    .name{font-size:2.6rem;}
}

@keyframes signaturePop { 0% { 
    opacity: 0; 
    transform: scale(0.4); 
    filter: blur(6px); /* opcional: da un efecto más “mágico” */ } 60% { 
    opacity: 1; transform: scale(1.08); /* ligero overshoot para elegancia */ } 100% { 
    opacity: 1; 
    transform: scale(1); 
    filter: blur(0); } }

/* FIX */
.s1, .s2, .s3{
    display:inline-block !important;
}
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;

    display: flex;              /* 👈 clave */
    flex-direction: column;
    align-items: center;

    gap: 6px;                   /* 👈 controla TODO el espacio vertical */
    transform: translateY(-80px); /* 👈 sube el bloque completo */
}

/*.name, .signature, .selectors {
  border: 1px solid red; Solo para inspección visual */