/*
 * Grandes Empleados — intro cinemática de la portada.
 *
 * Solo se carga en la página pública de inicio (publico/inicio.blade.php) y se muestra una vez por sesión
 * del navegador; la controla public/js/intro.js. Todas las clases llevan el prefijo ge-intro- para no
 * chocar con Bootstrap (.h1, .h2, .h3…) ni con el resto de app.css.
 *
 * Si el JavaScript no carga, la animación de respaldo de .ge-intro la desvanece sola a los 7.5 s,
 * de modo que el sitio nunca queda tapado.
 */

.ge-intro {
    --ge-intro-deep: #021b15;
    --ge-intro-deep-2: #062a20;
    --ge-intro-deep-3: #0a3b2d;

    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: var(--bs-font-sans-serif);
    background:
        radial-gradient(circle at 20% 15%, rgba(105, 185, 145, .14), transparent 24%),
        radial-gradient(circle at 82% 82%, rgba(64, 145, 108, .18), transparent 30%),
        linear-gradient(145deg, var(--ge-intro-deep), var(--ge-intro-deep-2) 52%, var(--ge-intro-deep-3));
    animation: geIntroOut .6s ease 7.5s forwards; /* respaldo sin JavaScript */
}

.ge-intro *,
.ge-intro *::before,
.ge-intro *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Mientras se ve la intro, la página no se desplaza (la clase la pone y quita intro.js). */
html.ge-intro-activa,
html.ge-intro-activa body {
    overflow: hidden;
}

.ge-intro-vineta {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 34%, rgba(0, 0, 0, .30) 100%);
}

.ge-intro-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    opacity: 0;
    mix-blend-mode: screen;
}

.ge-intro-aurora.a1 {
    width: 420px;
    height: 420px;
    left: -120px;
    top: -80px;
    background: rgba(82, 177, 133, .18);
    animation: geIntroAuroraA 8s ease-in-out infinite alternate;
}

.ge-intro-aurora.a2 {
    width: 520px;
    height: 520px;
    right: -180px;
    bottom: -150px;
    background: rgba(46, 122, 92, .20);
    animation: geIntroAuroraB 10s ease-in-out infinite alternate;
}

.ge-intro-malla {
    position: absolute;
    inset: -16%;
    z-index: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .021) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: perspective(900px) rotateX(61deg) translateY(30%);
    transform-origin: center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 75%);
    mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 75%);
}

.ge-intro-escenario {
    position: relative;
    z-index: 2;
    width: min(1120px, 96vw);
    height: min(760px, 92vh);
}

.ge-intro-omitir {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 20;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
    color: #edf8f1;
    border-radius: 999px;
    padding: 10px 15px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: .25s ease;
}

.ge-intro-omitir:hover {
    background: rgba(255, 255, 255, .11);
    transform: translateY(-1px);
}

.ge-intro-omitir:focus-visible {
    outline: 2px solid #92d2b2;
    outline-offset: 2px;
}

/* ---- Mensajes de vidrio ------------------------------------------------ */

.ge-intro-mensaje {
    position: absolute;
    width: 250px;
    min-height: 92px;
    padding: 16px 18px !important;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(145deg, rgba(255, 255, 255, .115), rgba(255, 255, 255, .035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 44px rgba(0, 0, 0, .16);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    opacity: 0;
}

.ge-intro-mensaje::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    bottom: -7px;
    background: inherit;
    border-right: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    transform: rotate(45deg);
}

.ge-intro-mensaje.izq { border-radius: 24px 24px 24px 10px; }
.ge-intro-mensaje.izq::after { left: 26px; }
.ge-intro-mensaje.der { border-radius: 24px 24px 10px 24px; }
.ge-intro-mensaje.der::after { right: 26px; }

/* --tx / --ty: distancia al centro; intro.js la calcula según la pantalla. */
.ge-intro-mensaje.m1 { left: 5%; top: 20%; transform: translate(-70px, 25px) rotate(-4deg) scale(.94); --tx: 390px; --ty: 170px; }
.ge-intro-mensaje.m2 { right: 5%; top: 18%; transform: translate(70px, 10px) rotate(4deg) scale(.94); --tx: -390px; --ty: 175px; }
.ge-intro-mensaje.m3 { left: 10%; bottom: 20%; transform: translate(-65px, -15px) rotate(3deg) scale(.94); --tx: 360px; --ty: -165px; }
.ge-intro-mensaje.m4 { right: 10%; bottom: 18%; transform: translate(65px, -20px) rotate(-3deg) scale(.94); --tx: -360px; --ty: -165px; }

.ge-intro-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(120, 211, 166, .85), rgba(64, 145, 108, .92));
    box-shadow: 0 0 18px rgba(93, 187, 141, .16);
    margin-bottom: 12px !important;
}

.ge-intro-linea {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    margin-top: 8px !important;
}

.ge-intro-linea.suave { background: rgba(255, 255, 255, .35); }
.ge-intro-linea.w1 { width: 78%; }
.ge-intro-linea.w2 { width: 58%; }
.ge-intro-linea.w3 { width: 86%; }
.ge-intro-linea.w4 { width: 48%; }

/* ---- Centro: escribiendo… → logo --------------------------------------- */

.ge-intro-centro {
    position: absolute;
    left: 50%;
    top: 44%;
    width: min(260px, 48vw);
    height: min(260px, 48vw);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

.ge-intro-burbuja {
    position: absolute;
    width: 132px;
    height: 64px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .17);
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 22px 48px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    opacity: 0;
    transform: scale(.8);
}

.ge-intro-puntos {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    opacity: 0;
}

.ge-intro-puntos i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f6fff9;
    box-shadow: 0 0 14px rgba(255, 255, 255, .15);
}

.ge-intro-logo-fluido,
.ge-intro-reflejo {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-mask: url('../img/intro-logo.svg') center / contain no-repeat;
    mask: url('../img/intro-logo.svg') center / contain no-repeat;
}

.ge-intro-logo-fluido {
    transform: scale(.04) rotate(-8deg);
    background: linear-gradient(150deg, #6dc09b 0%, #40916c 58%, #2f7657 100%);
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .24)) drop-shadow(0 0 20px rgba(103, 185, 145, .20));
}

.ge-intro-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .22));
}

/* La máscara queda fija sobre el logo y solo el brillo (::before) lo recorre. */
.ge-intro-reflejo {
    opacity: 1;
    overflow: hidden;
}

.ge-intro-reflejo::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(112deg,
        transparent 0%, transparent 36%,
        rgba(255, 255, 255, .78) 48%, rgba(255, 255, 255, .20) 54%,
        transparent 64%, transparent 100%);
    transform: translateX(-150%);
}

.ge-intro-nombre {
    position: absolute;
    left: 50%;
    top: 71%;
    transform: translate(-50%, 22px);
    color: #f2faf5;
    font-size: clamp(26px, 3.3vw, 42px);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
    opacity: 0;
    white-space: nowrap;
}

.ge-intro-regla {
    position: absolute;
    left: 50%;
    top: 79%;
    width: 0;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(133, 211, 173, .9), transparent);
    opacity: 0;
}

.ge-intro-lema {
    position: absolute;
    left: 50%;
    top: 82%;
    transform: translate(-50%, 10px);
    color: rgba(242, 250, 245, .58);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0;
    white-space: nowrap;
}

.ge-intro-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.25);
    opacity: 0;
    border: 1px solid rgba(148, 222, 185, .16);
}

.ge-intro-halo.k1 { width: 210px; height: 210px; }
.ge-intro-halo.k2 { width: 330px; height: 330px; }
.ge-intro-halo.k3 { width: 470px; height: 470px; }

.ge-intro-destello {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    background: radial-gradient(circle,
        rgba(255, 255, 255, .90) 0 8%, rgba(133, 211, 173, .70) 18%,
        rgba(64, 145, 108, .34) 44%, rgba(64, 145, 108, .10) 60%, transparent 76%);
    box-shadow: 0 0 56px 20px rgba(64, 145, 108, .22);
}

.ge-intro-lavado {
    position: absolute;
    inset: -20%;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, .14) 0%, rgba(130, 211, 171, .10) 24%,
        rgba(64, 145, 108, .04) 44%, transparent 68%);
    transform: scale(.55);
}

/* ---- Fases (las agrega intro.js en orden) ------------------------------ */

.ge-intro.mensajes .m1 { animation: geIntroMensajeIn .80s cubic-bezier(.16, 1, .3, 1) .00s forwards; }
.ge-intro.mensajes .m2 { animation: geIntroMensajeIn .80s cubic-bezier(.16, 1, .3, 1) .12s forwards; }
.ge-intro.mensajes .m3 { animation: geIntroMensajeIn .80s cubic-bezier(.16, 1, .3, 1) .22s forwards; }
.ge-intro.mensajes .m4 { animation: geIntroMensajeIn .80s cubic-bezier(.16, 1, .3, 1) .32s forwards; }

.ge-intro.escribiendo .ge-intro-burbuja { animation: geIntroBurbujaIn .46s cubic-bezier(.16, 1, .3, 1) forwards; }
.ge-intro.escribiendo .ge-intro-puntos { animation: geIntroAparecer .26s ease-out .08s forwards; }
.ge-intro.escribiendo .ge-intro-puntos i:nth-child(1) { animation: geIntroPunto .70s ease-in-out 0s 3; }
.ge-intro.escribiendo .ge-intro-puntos i:nth-child(2) { animation: geIntroPunto .70s ease-in-out .12s 3; }
.ge-intro.escribiendo .ge-intro-puntos i:nth-child(3) { animation: geIntroPunto .70s ease-in-out .24s 3; }

.ge-intro.convergen .m1 { animation: geIntroAlCentro .88s cubic-bezier(.4, 0, .2, 1) .00s forwards; }
.ge-intro.convergen .m2 { animation: geIntroAlCentro .88s cubic-bezier(.4, 0, .2, 1) .05s forwards; }
.ge-intro.convergen .m3 { animation: geIntroAlCentro .88s cubic-bezier(.4, 0, .2, 1) .10s forwards; }
.ge-intro.convergen .m4 { animation: geIntroAlCentro .88s cubic-bezier(.4, 0, .2, 1) .15s forwards; }

.ge-intro.forma-logo .ge-intro-burbuja { animation: geIntroBurbujaFuera .62s cubic-bezier(.22, .86, .25, 1) forwards; }
.ge-intro.forma-logo .ge-intro-puntos { animation: geIntroPuntosFuera .62s cubic-bezier(.22, .86, .25, 1) forwards; }
.ge-intro.forma-logo .ge-intro-logo-fluido { animation: geIntroLogoFluido 1.04s cubic-bezier(.14, .96, .24, 1.05) .12s forwards; }
.ge-intro.forma-logo .ge-intro-destello { animation: geIntroDestello 1.08s ease-out .06s forwards; }
.ge-intro.forma-logo .k1 { animation: geIntroHalo 1.02s ease-out .12s forwards; }
.ge-intro.forma-logo .k2 { animation: geIntroHalo 1.14s ease-out .20s forwards; }
.ge-intro.forma-logo .k3 { animation: geIntroHalo 1.28s ease-out .28s forwards; }

.ge-intro.fijo .ge-intro-logo { animation: geIntroLogoIn .44s ease-out forwards; }
.ge-intro.fijo .ge-intro-logo-fluido { animation: geIntroDesvanecer .44s ease-out forwards; }
.ge-intro.fijo .ge-intro-reflejo::before { animation: geIntroReflejo 1.10s cubic-bezier(.2, .7, .2, 1) .16s forwards; }
.ge-intro.fijo .ge-intro-nombre { animation: geIntroNombreIn .72s cubic-bezier(.16, 1, .3, 1) .18s forwards; }
.ge-intro.fijo .ge-intro-regla { animation: geIntroReglaIn .62s ease-out .35s forwards; }
.ge-intro.fijo .ge-intro-lema { animation: geIntroLemaIn .58s ease-out .46s forwards; }
.ge-intro.fijo .ge-intro-lavado { animation: geIntroLavado 1.32s ease-out forwards; }

/* Con JavaScript la duración la marca intro.js, no el respaldo (aunque el script haya tardado en llegar). */
.ge-intro.con-js {
    animation: none;
}

.ge-intro.con-js.salida {
    animation: geIntroOut .86s cubic-bezier(.55, .05, .3, 1) forwards;
}

/* ---- Keyframes --------------------------------------------------------- */

@keyframes geIntroAuroraA {
    from { transform: translate3d(0, 0, 0) scale(.95); opacity: .32; }
    to { transform: translate3d(70px, 45px, 0) scale(1.1); opacity: .55; }
}

@keyframes geIntroAuroraB {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .24; }
    to { transform: translate3d(-80px, -50px, 0) scale(1.12); opacity: .48; }
}

@keyframes geIntroMensajeIn {
    0% { opacity: 0; filter: blur(10px); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0); }
}

@keyframes geIntroBurbujaIn {
    from { opacity: 0; transform: scale(.78); filter: blur(8px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes geIntroAparecer {
    to { opacity: 1; }
}

@keyframes geIntroPunto {
    0%, 100% { transform: translateY(0) scale(1); opacity: .62; }
    45% { transform: translateY(-8px) scale(1.06); opacity: 1; }
}

@keyframes geIntroAlCentro {
    0% { opacity: 1; }
    62% { opacity: .88; transform: translate(var(--tx), var(--ty)) scale(.62); filter: blur(2px); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.10); filter: blur(12px); }
}

@keyframes geIntroBurbujaFuera {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.20); }
}

@keyframes geIntroPuntosFuera {
    0% { opacity: 1; gap: 11px; transform: scale(1); }
    60% { opacity: 1; gap: 0; transform: scale(.66); }
    100% { opacity: 0; gap: 0; transform: scale(.12); }
}

@keyframes geIntroLogoFluido {
    0% { opacity: 0; transform: scale(.04) rotate(-8deg); filter: blur(7px) drop-shadow(0 0 0 rgba(103, 185, 145, 0)); }
    42% { opacity: 1; transform: scale(.62) rotate(1.6deg); filter: blur(0) drop-shadow(0 0 28px rgba(103, 185, 145, .28)); }
    72% { opacity: 1; transform: scale(1.06) rotate(-.7deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes geIntroDestello {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    35% { opacity: .92; transform: translate(-50%, -50%) scale(2.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(7.8); }
}

@keyframes geIntroHalo {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
    36% { opacity: .74; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes geIntroLogoIn {
    from { opacity: 0; transform: scale(.992); filter: blur(1px) drop-shadow(0 24px 34px rgba(0, 0, 0, .22)); }
    to { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 24px 34px rgba(0, 0, 0, .22)); }
}

@keyframes geIntroDesvanecer {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes geIntroReflejo {
    0% { opacity: 0; transform: translateX(-150%); }
    18% { opacity: .60; }
    76% { opacity: .46; }
    100% { opacity: 0; transform: translateX(150%); }
}

@keyframes geIntroNombreIn {
    from { opacity: 0; transform: translate(-50%, 22px) scale(.98); filter: blur(6px); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}

@keyframes geIntroReglaIn {
    from { opacity: 0; width: 0; }
    to { opacity: .8; width: 180px; }
}

@keyframes geIntroLemaIn {
    from { opacity: 0; transform: translate(-50%, 10px); letter-spacing: 7px; }
    to { opacity: 1; transform: translate(-50%, 0); letter-spacing: 4px; }
}

@keyframes geIntroLavado {
    0% { opacity: 0; transform: scale(.55); }
    34% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.22); }
}

@keyframes geIntroOut {
    to { opacity: 0; transform: scale(1.018); visibility: hidden; pointer-events: none; }
}

/* ---- Pantallas chicas -------------------------------------------------- */

@media (max-width: 760px) {
    .ge-intro-mensaje { width: 190px; min-height: 74px; padding: 13px 15px !important; }
    .ge-intro-avatar { width: 28px; height: 28px; margin-bottom: 9px !important; }
    .ge-intro-linea { height: 7px; margin-top: 6px !important; }
    .ge-intro-mensaje.m1 { left: 2%; top: 18%; }
    .ge-intro-mensaje.m2 { right: 2%; top: 18%; }
    .ge-intro-mensaje.m3 { left: 4%; bottom: 20%; }
    .ge-intro-mensaje.m4 { right: 4%; bottom: 20%; }
    .ge-intro-centro { width: min(220px, 54vw); height: min(220px, 54vw); }
    .ge-intro-nombre { top: 69%; font-size: 28px; }
    .ge-intro-regla { top: 77%; }
    .ge-intro-lema { top: 80%; font-size: 9px; letter-spacing: 3px; }
}

@media (max-width: 420px) {
    .ge-intro-mensaje { width: 150px; }
}

/* ---- Movimiento reducido: solo el logo y el nombre, y se cierra rápido -- */

@media (prefers-reduced-motion: reduce) {
    .ge-intro-mensaje, .ge-intro-burbuja, .ge-intro-puntos, .ge-intro-logo-fluido, .ge-intro-reflejo,
    .ge-intro-destello, .ge-intro-halo, .ge-intro-regla, .ge-intro-lema, .ge-intro-aurora {
        display: none !important;
    }

    .ge-intro-logo { opacity: 1 !important; animation: none !important; }
    .ge-intro-nombre { opacity: 1 !important; transform: translate(-50%, 0) !important; animation: none !important; }
    .ge-intro { animation: geIntroOut .3s ease 1.3s forwards !important; }
}