html{
    height:100%;
}

body{
    width:100%;
    height:100%;
    overflow:hidden;
}

/* ==========================
   Contenedor Central
========================== */

.center-piece{

    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    transform:translateY(-58px);
    z-index:5;
    pointer-events:none;
    overflow:hidden;

}

.center-piece::before{

    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:480px;
    height:480px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(35,150,255,.14) 0%,
        rgba(30,110,255,.08) 45%,
        transparent 75%);
    filter:blur(120px);
    transform:translate(-50%,-50%);
    z-index:-2;

}

.center-piece::after{

    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:720px;
    height:720px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,255,255,.02) 0%,
        rgba(80,140,255,.02) 40%,
        transparent 75%);
    filter:blur(220px);
    transform:translate(-50%,-50%);
    z-index:-3;

}

/* ==========================
   Imagen
========================== */

/* Contenedor que fija el tamaño y la posición exactos
   compartidos por las 3 imágenes centrales (crossfade) */
.center-stage{

    position:relative;
    width:min(32.5vw,480px);
    height:min(32.5vw,480px);

    animation:float 10s cubic-bezier(.45,.05,.55,.95) infinite;

}

/* <picture> es solo un contenedor de formatos (AVIF/WebP); display:contents
   lo saca de la caja visual para que el <img> se posicione exactamente
   igual que antes, directamente respecto a .center-stage */
.center-stage picture{
    display:contents;
}

.center-stage picture img{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    object-fit:contain;

    filter:

       drop-shadow(0 0 18px rgba(0,180,255,.28))
       drop-shadow(0 0 55px rgba(0,120,255,.24))
       drop-shadow(0 30px 80px rgba(0,0,0,.55));

    opacity:0;
    animation:crossfade 12s ease-in-out infinite;

}

/* Cada imagen ocupa su tercio del ciclo de 12s (4s c/u),
   con solape para que el cambio sea un fundido suave. */
.center-stage picture:nth-child(1) img{ animation-delay:0s; }
.center-stage picture:nth-child(2) img{ animation-delay:-8s; }
.center-stage picture:nth-child(3) img{ animation-delay:-4s; }

/* ==========================
   Animaciones
========================== */

@keyframes crossfade{

    0%,100%{
        opacity:0;
    }

    4%{
        opacity:1;
    }

    28%{
        opacity:1;
    }

    34%{
        opacity:0;
    }

}

@keyframes float{

    0%{
        transform:translate3d(0,0,0) rotate(-0.25deg);
    }

    25%{
        transform:translate3d(-3px,-6px,0) rotate(0deg);
    }

    50%{
        transform:translate3d(0,-12px,0) rotate(.25deg);
    }

    75%{
        transform:translate3d(3px,-6px,0) rotate(0deg);
    }

    100%{
        transform:translate3d(0,0,0) rotate(-0.25deg);
    }

}

/*======================================
            VALORES
======================================*/

.hero-values{

    position:absolute;
    left:50%;
    bottom:70px;
    transform:translateX(-50%);
    width:96%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:20;
    pointer-events:none;

}

.hero-values .left,
.hero-values .right{

    display:flex;
    gap:34px;

}

.hero-values span{

    color:#EAF2FF;
    font-size:11px;
    font-weight:500;
    letter-spacing:4px;
    text-transform:uppercase;
    opacity:.92;

}

/*======================================
            ESLOGAN
======================================*/

.hero-slogan{

    position:absolute;
    left:50%;
    top:calc(50% + 182px);
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:15;
    pointer-events:none;

}

/* ---- Frase principal rotativa sincronizada con el crossfade de las 3 imágenes
   de .center-stage (misma animación, misma duración y
   mismos delays) ---- */

.hero-tagline{

    position:relative;
    height:clamp(32px,4.6vw,50px);
    margin:0;

}

.hero-tagline span{

    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;

    color:#F4F6FA;
    font-family:'Manrope',sans-serif;
    font-size:clamp(22px,3.2vw,42px);
    font-weight:600;
    line-height:1;
    letter-spacing:5px;
    text-transform:uppercase;
    white-space:nowrap;

    text-shadow:
        0 0 14px rgba(0,170,255,.35),
        0 0 38px rgba(0,110,255,.2);

    opacity:0;
    animation:crossfade 12s ease-in-out infinite;

}

.hero-tagline span:nth-child(1){ animation-delay:0s; }
.hero-tagline span:nth-child(2){ animation-delay:-8s; }
.hero-tagline span:nth-child(3){ animation-delay:-4s; }

.footer{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    padding:0;
    pointer-events:none;
}

/* ==========================
   MÓVIL (mismo breakpoint que common.css: 640px)
========================== */

@media (max-width:640px){

    .center-piece{
        transform:translateY(-70px);
    }

    .center-piece::before{
        width:300px;
        height:300px;
    }

    .center-piece::after{
        width:420px;
        height:420px;
    }

    .center-stage{
        width:min(58vw,300px);
        height:min(58vw,300px);
    }

    .hero-slogan{
        top:calc(50% + 132px);
        padding:0 20px;
    }

    .hero-tagline{
        height:66px;
    }

    .hero-tagline span{
        font-size:clamp(18px,5.4vw,26px);
        font-weight:600;
        white-space:normal;
        letter-spacing:1.5px;
        line-height:1.25;
        padding:0 20px;
        text-align:center;
    }

    .hero-values{
        bottom:52px;
        width:92%;
        flex-wrap:wrap;
        row-gap:10px;
    }

    .hero-values .left,
    .hero-values .right{
        gap:16px;
    }

    .hero-values span{
        font-size:8.5px;
        letter-spacing:2px;
    }

}