/* ==========================================================
   Sillar Studio · Index · complemento de servicios-game.css
   Cargar DESPUÉS de servicios-game.css.
   ========================================================== */

@keyframes hm-tick {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hm-beat {
    0%,
    100% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.14);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.1);
    }
}

@keyframes hm-zap {
    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 194, 51, 0));
    }
    50% {
        filter: drop-shadow(0 0 7px rgba(255, 194, 51, .95));
    }
}

@keyframes hm-slide {
    from {
        transform: translateX(-6px);
        opacity: .4;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* ---------- Íconos nuevos ---------- */

.gi__hand {
    fill: none;
    stroke: var(--sg-ember);
    stroke-width: 2.8;
    stroke-linecap: round;
    transform-origin: 24px 24px;
}

.gi__hand--min {
    animation: hm-tick 6s linear infinite;
}

.gi__hand--hr {
    stroke: var(--sg-red);
    animation: hm-tick 72s linear infinite;
}

.gi__heart {
    fill: var(--sg-red);
    transform-origin: 24px 26px;
    animation: hm-beat 2.2s ease-in-out infinite;
}

.gi__bolt {
    fill: var(--sg-gold);
    stroke: var(--sg-ember);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation: hm-zap 1.8s ease-in-out infinite;
}


/* ---------- Chips del hero ---------- */

.hm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.hm-chips li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .9rem .35rem .45rem;
    border-radius: 99px;
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid rgba(225, 29, 46, .3);
    background: linear-gradient(120deg, rgba(225, 29, 46, .1), rgba(255, 106, 26, .08));
}

.hm-chips .gi {
    width: 30px;
    height: 30px;
}


/* ---------- Ahorro de tiempo ---------- */

.hm-time__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2.2rem);
    align-items: center;
    margin-bottom: 2rem;
}

.hm-time__clock {
    display: grid;
    place-items: center;
    width: clamp(96px, 14vw, 140px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 106, 26, .22), rgba(225, 29, 46, .08) 70%);
    border: 1px solid rgba(225, 29, 46, .3);
    box-shadow: 0 0 40px -10px rgba(225, 29, 46, .6);
}

.hm-time__clock .gi {
    width: 62%;
    height: 62%;
}

.hm-compare {
    display: grid;
    gap: .7rem;
}

.hm-compare__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: .8rem;
}

.hm-compare__before,
.hm-compare__after {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1.1rem;
    border-radius: 14px;
}

.hm-compare small {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
}

.hm-compare__before {
    border: 1px dashed rgba(127, 127, 127, .5);
    opacity: .85;
}

.hm-compare__after {
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, var(--sg-red), var(--sg-ember), var(--sg-magenta), var(--sg-red));
    background-size: 300% 100%;
    animation: sg-shift 7s linear infinite;
}

.hm-compare__after small {
    color: #fff;
    opacity: .85;
}

.hm-compare__arrow {
    align-self: center;
    font-size: 1.4rem;
    color: var(--sg-ember);
    animation: hm-slide 1.2s ease-in-out infinite alternate;
}

.hm-time__note {
    margin-top: 1rem;
    font-size: .85rem;
}


/* ---------- Panel en vivo ---------- */

.hm-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.hm-checks {
    list-style: none;
    margin: 1.2rem 0 1.6rem;
    padding: 0;
    display: grid;
    gap: .55rem;
}

.hm-checks li {
    position: relative;
    padding-left: 1.7rem;
}

.hm-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .28em;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sg-ember), var(--sg-red));
    box-shadow: 0 0 10px rgba(255, 106, 26, .6);
}

.hm-checks li::after {
    content: "";
    position: absolute;
    left: .32rem;
    top: .5em;
    width: .3rem;
    height: .5rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .hm-live {
        grid-template-columns: 1fr;
    }
    .hm-time__head {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .hm-compare__row {
        grid-template-columns: 1fr;
    }
    .hm-compare__arrow {
        transform: rotate(90deg);
        justify-self: center;
        animation: none;
    }
}


/* ---------- Sin movimiento si el usuario lo pide ---------- */

@media (prefers-reduced-motion: reduce) {
    .gi__hand,
    .gi__heart,
    .gi__bolt,
    .hm-compare__after,
    .hm-compare__arrow {
        animation: none !important;
    }
}