:root {
    color-scheme: dark;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #000;
    color: #fff;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: #000;
}

.header {
    display: flex;
    justify-content: flex-end;
    padding: 32px 45px;
}

.login {
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.04em;
    transition: color 0.25s ease;
}

.login:hover,
.login:focus-visible {
    color: #d5a249;
}

.login span {
    margin-left: 5px;
}

.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
}

.identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    transform: translateY(-15px);
}

.logo {
    display: block;
    width: min(440px, 80vw);
    height: auto;
    object-fit: contain;
}

.identity h1 {
    margin: 18px 0 0;
    color: #e6e0d6;
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 300;
    letter-spacing: 0.12em;
}

.coming-soon {
    margin-top: 55px;
    color: #b99b65;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.55em;
}

.footer {
    padding: 24px;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    font-size: 11px;
}

@media (max-width: 600px) {
    .header {
        padding: 25px;
    }

    .logo {
        width: min(340px, 85vw);
    }

    .identity h1 {
        letter-spacing: 0.07em;
    }

    .coming-soon {
        margin-top: 40px;
    }
}

/* ==========================================
   BEECOM WEB — WEB-12
   Panal progresivo sin Canvas
   ========================================== */

.main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.identity {
    position: relative;
    z-index: 2;
}

.hive-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hive-cell {
    position: absolute;

    left: var(--x);
    top: var(--y);

    width: 56px;
    height: 65px;

    margin-left: -28px;
    margin-top: -32px;

    opacity: 0;

    background: rgba(210, 158, 73, 0.42);

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );

    animation: hive-reveal 2.5s ease-out
        var(--delay) both;
}

.hive-cell::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: #000;

    clip-path: inherit;
}

@keyframes hive-reveal {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }

    35% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.22;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hive-cell {
        animation: none;
        opacity: 0.22;
    }
}

/* ==========================================
   BEECOM WEB — WEB-13
   Panal conectado e interactivo
   ========================================== */

.hive-cell {
    width: 55.43px;
    height: 64px;

    margin-left: -27.715px;
    margin-top: -32px;

    /* Se conserva la aparición progresiva */
    transition:
        filter 220ms ease,
        background-color 220ms ease;
}

.hive-cell::after {
    inset: 1px;
}

/* La iluminación se controla por proximidad */
.hive-cell.is-near {
    background: rgba(226, 171, 79, 0.75);
}

.hive-cell.is-hot {
    background: #f0bd65;
    filter: drop-shadow(0 0 7px rgba(231, 165, 62, 0.5));
}

/* Evitar interacciones si se prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .hive-cell {
        transition: none;
    }
}

/* WEB-14 — Geometría de panal contiguo */

.hive-cell {
    width: var(--hex-width);
    height: var(--hex-height);

    left: var(--x);
    top: var(--y);

    margin: 0;

    transform-origin: center;
}

.hive-cell::after {
    inset: 1px;
}

@keyframes hive-reveal {
    0% {
        opacity: 0;
        scale: 0.65;
    }

    35% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.22;
        scale: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hive-cell {
        scale: 1;
    }
}