/* Servicios — Motion-Driven (ui-ux-pro-max), tokens Urabasoft.
   Solo transform/opacity. Las escenas corren cuando la tarjeta está en pantalla. */

.svc-catalog {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--color-background);
}

.svc-mosaic {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 720px) {
    .svc-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .svc-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .svc-tile--wide {
        grid-column: span 3;
    }
}

.svc-tile {
    min-width: 0;
    content-visibility: auto;
    contain-intrinsic-size: 320px 280px;
}

.svc-tile article {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05);
}

.svc-tile__copy {
    padding: 1rem 1.15rem 1.2rem;
}

.svc-tile__copy h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--color-primary);
}

.svc-tile__copy p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.svc-stage {
    position: relative;
    height: 148px;
    background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.svc-tile--wide .svc-stage {
    height: 120px;
}

/* Las animaciones solo viven mientras la tarjeta está visible */
.svc-stage *,
.svc-stage *::before,
.svc-stage *::after {
    animation-play-state: paused;
}

.svc-tile.is-live .svc-stage *,
.svc-tile.is-live .svc-stage *::before,
.svc-tile.is-live .svc-stage *::after {
    animation-play-state: running;
}

/* —— 1 Educación: barras de avance —— */
.scene-edu {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    height: 100%;
    padding: 28px 24px 22px;
}

.scene-edu span {
    width: 22px;
    height: 28%;
    border-radius: 6px 6px 2px 2px;
    background: var(--color-accent);
    transform-origin: bottom;
    animation: edu-grow 2.4s ease-in-out infinite;
}

.scene-edu span:nth-child(2) { animation-delay: 0.2s; height: 46%; opacity: 0.85; }
.scene-edu span:nth-child(3) { animation-delay: 0.4s; height: 68%; opacity: 0.7; }
.scene-edu span:nth-child(4) { animation-delay: 0.6s; height: 88%; }

@keyframes edu-grow {
    0%, 100% { transform: scaleY(0.55); }
    50% { transform: scaleY(1); }
}

/* —— 2 Web: ventana de navegador —— */
.scene-web {
    margin: 22px auto 0;
    width: min(220px, 78%);
    height: 104px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.scene-web__bar {
    height: 16px;
    background: #0f172a;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0 8px;
}

.scene-web__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    display: block;
}

.scene-web__blocks {
    padding: 10px;
    display: grid;
    gap: 6px;
}

.scene-web__blocks b {
    display: block;
    height: 10px;
    border-radius: 3px;
    background: #e2e8f0;
    transform: translateX(-110%);
    animation: web-slide 2.8s ease-in-out infinite;
}

.scene-web__blocks b:nth-child(1) { width: 70%; background: var(--color-accent); }
.scene-web__blocks b:nth-child(2) { width: 100%; animation-delay: 0.15s; }
.scene-web__blocks b:nth-child(3) { width: 55%; animation-delay: 0.3s; }

@keyframes web-slide {
    0% { transform: translateX(-110%); }
    25%, 80% { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* —— 3 Facturación —— */
.scene-bill {
    width: min(210px, 76%);
    margin: 24px auto 0;
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
}

.scene-bill span {
    display: block;
    height: 6px;
    margin-bottom: 8px;
    border-radius: 3px;
    background: #cbd5e1;
    transform-origin: left;
    animation: bill-line 2.6s ease-in-out infinite;
}

.scene-bill span:nth-child(2) { width: 80%; animation-delay: 0.15s; }
.scene-bill span:nth-child(3) { width: 62%; animation-delay: 0.3s; }
.scene-bill strong {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    animation: bill-pop 2.6s ease-in-out infinite;
}

@keyframes bill-line {
    0% { transform: scaleX(0); }
    40%, 100% { transform: scaleX(1); }
}

@keyframes bill-pop {
    0%, 35% { opacity: 0; transform: translateY(4px); }
    50%, 100% { opacity: 1; transform: translateY(0); }
}

/* —— 4 Pasarela —— */
.scene-pay {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-pay__slot {
    width: 150px;
    height: 28px;
    border: 2px dashed var(--color-accent);
    border-radius: 6px;
    position: relative;
}

.scene-pay__card {
    position: absolute;
    left: -70px;
    top: 50%;
    width: 86px;
    height: 52px;
    margin-top: -26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f172a, #0369a1);
    animation: pay-swipe 3s ease-in-out infinite;
}

.scene-pay__card::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 12px;
    width: 18px;
    height: 14px;
    border-radius: 2px;
    background: #fde68a;
}

@keyframes pay-swipe {
    0% { transform: translateX(0); }
    45%, 70% { transform: translateX(92px); }
    100% { transform: translateX(210px); opacity: 0; }
}

/* —— 5 Red social —— */
.scene-social {
    padding: 16px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scene-social article {
    height: 28px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    animation: social-in 3.2s ease-in-out infinite;
}

.scene-social article:nth-child(2) { animation-delay: 0.25s; width: 92%; }
.scene-social article:nth-child(3) { animation-delay: 0.5s; width: 80%; }

@keyframes social-in {
    0% { opacity: 0; transform: translateY(10px); }
    20%, 85% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0.4; transform: translateY(-6px); }
}

/* —— 6 IA automatización —— */
.scene-flow {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.scene-flow i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    display: block;
    animation: flow-pulse 1.8s ease-in-out infinite;
}

.scene-flow i:nth-child(2) { animation-delay: 0.3s; }
.scene-flow i:nth-child(3) { animation-delay: 0.6s; }
.scene-flow i:nth-child(4) { animation-delay: 0.9s; background: #0f172a; }

@keyframes flow-pulse {
    0%, 100% { transform: scale(0.75); opacity: 0.45; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* —— 7 CRM —— */
.scene-crm {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    gap: 10px;
    justify-content: center;
    align-content: center;
    height: 100%;
}

.scene-crm div {
    height: 96px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e2e8f0;
    position: relative;
}

.scene-crm b {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 16px;
    border-radius: 4px;
    background: var(--color-accent);
    animation: crm-drop 2.8s ease-in-out infinite;
}

.scene-crm div:nth-child(2) b { animation-delay: 0.4s; background: #0f172a; }
.scene-crm div:nth-child(3) b { animation-delay: 0.8s; }

@keyframes crm-drop {
    0% { top: 8px; }
    50% { top: 64px; }
    100% { top: 8px; }
}

/* —— 8 Voz IA —— */
.scene-voice {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.scene-voice span {
    width: 6px;
    height: 18px;
    border-radius: 99px;
    background: var(--color-accent);
    transform-origin: center;
    animation: voice-bar 1.1s ease-in-out infinite;
}

.scene-voice span:nth-child(2) { animation-delay: 0.1s; }
.scene-voice span:nth-child(3) { animation-delay: 0.2s; }
.scene-voice span:nth-child(4) { animation-delay: 0.3s; height: 36px; }
.scene-voice span:nth-child(5) { animation-delay: 0.15s; height: 48px; background: #0f172a; }
.scene-voice span:nth-child(6) { animation-delay: 0.25s; height: 36px; }
.scene-voice span:nth-child(7) { animation-delay: 0.05s; }

@keyframes voice-bar {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}

/* —— 9 Agencias —— */
.scene-agency {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: min(200px, 70%);
    margin: 22px auto 0;
}

.scene-agency span {
    height: 42px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    animation: agency-tile 2.8s ease-in-out infinite;
}

.scene-agency span:nth-child(2) { animation-delay: 0.2s; }
.scene-agency span:nth-child(3) { animation-delay: 0.4s; }
.scene-agency span:nth-child(4) { animation-delay: 0.6s; background: var(--color-accent); border-color: transparent; }

@keyframes agency-tile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* —— 10 Chat —— */
.scene-chat {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scene-chat span {
    height: 26px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    animation: chat-pop 2.4s ease-in-out infinite;
}

.scene-chat span:nth-child(1) { width: 68%; }
.scene-chat span:nth-child(2) { width: 52%; margin-left: auto; background: var(--color-accent); border: 0; animation-delay: 0.35s; }
.scene-chat span:nth-child(3) { width: 74%; animation-delay: 0.7s; }

@keyframes chat-pop {
    0% { opacity: 0; transform: scale(0.92) translateY(6px); }
    20%, 100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* —— 11 Correo —— */
.scene-mail {
    width: 120px;
    height: 78px;
    margin: 32px auto 0;
    background: #fff;
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    position: relative;
}

.scene-mail::before,
.scene-mail::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 40px;
    background: transparent;
    border-top: 2px solid var(--color-accent);
    clip-path: polygon(0 0, 50% 70%, 100% 0);
    animation: mail-flap 2.6s ease-in-out infinite;
}

@keyframes mail-flap {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(8px); opacity: 0.55; }
}

/* —— 12 Servidores —— */
.scene-rack {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: flex-end;
    height: 100%;
    padding-bottom: 18px;
}

.scene-rack div {
    width: 46px;
    height: 96px;
    border-radius: 6px;
    background: #0f172a;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scene-rack i {
    display: block;
    height: 6px;
    border-radius: 2px;
    background: #0369a1;
    animation: rack-led 1.4s steps(2) infinite;
}

.scene-rack div:nth-child(2) i { animation-delay: 0.2s; }
.scene-rack div:nth-child(3) i:nth-child(odd) { animation-delay: 0.45s; background: #38bdf8; }

@keyframes rack-led {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

/* —— 13 IA propia —— */
.scene-brain {
    width: 88px;
    height: 88px;
    margin: 28px auto 0;
    border-radius: 50%;
    border: 2px solid rgba(3, 105, 161, 0.35);
    position: relative;
    animation: brain-spin 8s linear infinite;
}

.scene-brain::before,
.scene-brain::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--color-accent);
}

.scene-brain::before {
    width: 14px;
    height: 14px;
    left: 50%;
    top: -7px;
    margin-left: -7px;
}

.scene-brain::after {
    width: 22px;
    height: 22px;
    left: 50%;
    top: 50%;
    margin: -11px 0 0 -11px;
    background: #0f172a;
    animation: brain-core 1.6s ease-in-out infinite;
}

@keyframes brain-spin {
    to { transform: rotate(360deg); }
}

@keyframes brain-core {
    0%, 100% { transform: scale(0.8); }
    50% { transform: scale(1.08); }
}

/* —— 14 Mucho más —— */
.scene-more {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 16px;
}

.scene-more span {
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    animation: more-float 3s ease-in-out infinite;
}

.scene-more span:nth-child(2) { animation-delay: 0.3s; }
.scene-more span:nth-child(3) { animation-delay: 0.6s; color: #fff; background: var(--color-accent); border-color: transparent; }
.scene-more span:nth-child(4) { animation-delay: 0.15s; }

@keyframes more-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
    .svc-stage *,
    .svc-stage *::before,
    .svc-stage *::after {
        animation: none !important;
    }
}