/*
 * Stronix — Capa de mejoras UI/UX (skill ui-ux-pro-max)
 * Archivo aditivo: se carga después de styles.css y no modifica reglas existentes.
 * Para desactivarlo basta con quitar su <link> en index.html.
 */

/* Colores, tipografías, espacios y movimiento: ver css/tokens.css (generado desde
   assets/design-tokens.json con la skill design-system). */

/* ==========================================
   1. Barra de progreso de lectura
   ========================================== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10001;
    pointer-events: none;
    background: linear-gradient(90deg, var(--stronix-cyan), var(--stronix-sky));
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* ==========================================
   2. Tarjetas: foco de luz que sigue al cursor + borde luminoso
   Se usan pseudo-elementos para no pisar las transiciones de .animate-on-scroll
   ========================================== */
.bento-item,
.elite-card,
.masonry-item,
.tm-card {
    position: relative;
    isolation: isolate;
}

.bento-item::before,
.elite-card::before,
.masonry-item::before,
.tm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spotlight), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out-expo);
}

.bento-item::after,
.elite-card::after,
.masonry-item::after,
.tm-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid var(--glow-border);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .bento-item:hover::before,
    .elite-card:hover::before,
    .masonry-item:hover::before,
    .tm-card:hover::before,
    .bento-item:hover::after,
    .elite-card:hover::after,
    .masonry-item:hover::after,
    .tm-card:hover::after {
        opacity: 1;
    }
}

/* ==========================================
   3. Micro-interacciones
   ========================================== */
.service-chip {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .service-chip:hover {
        border-color: var(--glow-border);
        background-color: rgba(var(--stronix-sky-rgb), 0.06);
    }
}

.card-icon,
.service-icon,
.feature-icon {
    display: inline-block;
    transition: transform 0.3s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .elite-card:hover .card-icon,
    .bento-item:hover .service-icon,
    .feature-row:hover .feature-icon {
        transform: translateY(-3px) scale(1.06);
    }
}

/* Cifras con ancho fijo para que el contador no haga saltar el layout */
.stat-num {
    font-variant-numeric: tabular-nums;
}

/* ==========================================
   4. Tipografía: evita líneas huérfanas
   ========================================== */
h2,
h3,
.section-lead {
    text-wrap: balance;
}

p,
blockquote {
    text-wrap: pretty;
}

/* ==========================================
   5. Accesibilidad
   ========================================== */
.tab-btn:focus-visible {
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress {
        display: none;
    }

    .bento-item::before,
    .elite-card::before,
    .masonry-item::before,
    .tm-card::before {
        display: none;
    }
}

/* ==========================================
   6. Logo Cloud con haz de luz (adaptado de 21st.dev "Logo Cloud 15")
   ========================================== */
@property --beam-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.logo-cloud-section {
    padding: 72px 20px 56px;
}

.logo-cloud-card {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    padding: 44px 0 32px;
    background: rgba(var(--stronix-navy-rgb), 0.4);
}

/* Haz de luz que recorre el borde */
.border-beam {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(from var(--beam-angle),
            transparent 0deg 300deg,
            rgba(var(--stronix-cyan-rgb), 0.9) 340deg,
            var(--stronix-sky) 355deg,
            transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: beam-spin 8s linear infinite;
}

@keyframes beam-spin {
    to { --beam-angle: 360deg; }
}

/* Título apoyado sobre el borde superior, con barrido de luz */
.logo-cloud-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0 20px;
    max-width: calc(100% - 32px);
    background: var(--dark-bg);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    color: var(--text-secondary);
}

.logo-cloud-title span {
    background-image: linear-gradient(90deg,
            var(--text-secondary) 0%, var(--text-secondary) 44%,
            var(--stronix-sky) 48%, var(--primitive-color-white) 50%, var(--stronix-cyan) 52%,
            var(--text-secondary) 56%, var(--text-secondary) 100%);
    background-size: 250% 100%;
    background-position: 100% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-sweep 8s linear infinite;
}

@keyframes title-sweep {
    0%, 55% { background-position: 100% center; }
    85%, 100% { background-position: 0% center; }
}

.logo-marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.logo-marquee-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 48px;
    padding-right: 48px;
    list-style: none;
    animation: logo-scroll 40s linear infinite;
}

.logo-marquee:hover .logo-marquee-group {
    animation-play-state: paused;
}

.logo-marquee-group li {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-fg-soft);
}

.logo-marquee-group img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

@keyframes logo-scroll {
    to { transform: translateX(-100%); }
}

/* ==========================================
   7. Testimonios en marquesina (adaptado de 21st.dev "Testimonials Marquee")
   ========================================== */
.testimonials-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    max-width: none;
}

.marquee-toggle {
    display: none;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    background: transparent;
    color: var(--color-fg);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.marquee-toggle:hover {
    border-color: var(--glow-border);
    background-color: rgba(var(--stronix-sky-rgb), 0.08);
}

.testimonials-elite.tm-ready .marquee-toggle {
    display: inline-flex;
}

.tm-card {
    flex-shrink: 0;
    width: 360px;
    margin: 0;
    padding: 28px;
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tm-card .elite-quote {
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.tm-client {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tm-client strong {
    display: block;
    color: var(--color-fg);
    font-size: 1rem;
}

.tm-client strong + span {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.tm-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--stronix-navy);
    background: linear-gradient(135deg, var(--stronix-sky), var(--stronix-cyan));
}

/* Sin JS o con movimiento reducido: rejilla estática */
.tm-marquee:not(.tm-ready) .tm-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.tm-marquee:not(.tm-ready) .tm-card {
    width: auto;
}

/* Con JS: dos filas infinitas en sentidos opuestos */
.tm-marquee.tm-ready {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tm-ready .tm-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.tm-ready .tm-track {
    display: flex;
    width: max-content;
    animation: tm-scroll var(--tm-duration, 60s) linear infinite;
}

.tm-ready .tm-row.is-reverse .tm-track {
    animation-direction: reverse;
}

.tm-group {
    display: flex;
    gap: 24px;
    padding-right: 24px;
}

.tm-marquee.is-paused .tm-track,
.tm-ready .tm-row:hover .tm-track,
.tm-ready .tm-row:focus-within .tm-track {
    animation-play-state: paused;
}

@keyframes tm-scroll {
    to { transform: translateX(-50%); }
}

@media (max-width: 600px) {
    .tm-card {
        width: 290px;
        padding: 22px;
    }

    .logo-marquee-group {
        gap: 32px;
        padding-right: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .border-beam,
    .logo-cloud-title span {
        animation: none;
    }

    .logo-cloud-title span {
        -webkit-text-fill-color: currentColor;
        background: none;
    }

    .logo-marquee {
        -webkit-mask-image: none;
        mask-image: none;
        justify-content: center;
    }

    .logo-marquee-group {
        animation: none;
        flex-wrap: wrap;
        flex-shrink: 1;
        justify-content: center;
        gap: 24px 32px;
        padding: 0 24px;
    }

    .logo-marquee-group[aria-hidden="true"] {
        display: none;
    }
}

/* ==========================================
   8. FASE 1 — Tipografía con personalidad
   Space Grotesk (títulos) + DM Sans (texto) + JetBrains Mono (detalles técnicos)
   ========================================== */
h1, h2, h3, h4, .logo span, .stat-num {
    font-family: var(--font-heading);
}

.mega-title,
.section-title,
.elite-title {
    letter-spacing: -0.02em;
    word-spacing: 0.04em;
}

/* Etiquetas técnicas en monoespaciada */
.eyebrow,
.elite-subtitle,
.bento-tags li,
.step-num {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0;
}

.eyebrow,
.elite-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
}

.eyebrow::before,
.elite-subtitle::before {
    content: "// ";
    color: var(--stronix-cyan);
}

/* ==========================================
   9. FASE 1 — Revelado de títulos por líneas (GSAP SplitText)
   ========================================== */
html.anim-pending .mega-title {
    visibility: hidden;
}

/* Las máscaras de línea no deben recortar letras con descendentes (g, y, p) */
.split-line-mask {
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

/* ==========================================
   10. FASE 1 — Línea de progreso del proceso
   ========================================== */
.step-num {
    display: inline-block;
    margin-right: 10px;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--stronix-cyan);
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--stronix-cyan), var(--stronix-sky));
    box-shadow: 0 0 12px rgba(var(--stronix-cyan-rgb), 0.6);
    transform: scaleY(0);
    transform-origin: top center;
    pointer-events: none;
}

.timeline-dot {
    transition: background-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}

.timeline-item.is-lit .timeline-dot {
    background: var(--stronix-cyan);
    border-color: var(--stronix-cyan);
    box-shadow: 0 0 0 6px rgba(var(--stronix-cyan-rgb), 0.15), 0 0 18px rgba(var(--stronix-cyan-rgb), 0.7);
    transform: scale(1.15);
}

.timeline-content h3,
.timeline-content p {
    transition: color 0.4s var(--ease-out-expo), opacity 0.4s var(--ease-out-expo);
}

.timeline.has-progress .timeline-item:not(.is-lit) .timeline-content {
    opacity: 0.45;
}

.timeline-content {
    transition: opacity 0.4s var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
    .timeline-progress {
        display: none;
    }
}

@media (max-width: 600px) {
    .eyebrow {
        font-size: 0.75rem;
        white-space: nowrap;
    }
}

/* ==========================================
   11. FASE 2 — Mini-animaciones en servicios
   ========================================== */
.mini-terminal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 18px 0 4px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--terminal-bg);
    border: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--terminal-fg);
}

.mt-prompt {
    color: var(--stronix-cyan);
}

.mt-cursor {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    margin-left: -6px;
    background: var(--stronix-sky);
    animation: mt-blink 1s steps(1) infinite;
}

.mt-ok {
    flex-basis: 100%;
    color: var(--terminal-ok);
}

.mini-terminal.is-typing .mt-ok {
    opacity: 0;
}

.mini-terminal .mt-ok {
    transition: opacity 0.4s ease;
}

@keyframes mt-blink {
    50% { opacity: 0; }
}

.mini-pipeline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 4px;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.mini-pipeline li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    color: var(--text-secondary);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.mini-pipeline li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.mini-pipeline li.is-done {
    color: var(--color-fg);
    border-color: rgba(var(--stronix-cyan-rgb), 0.5);
    background: rgba(var(--stronix-cyan-rgb), 0.1);
}

.mini-pipeline li.is-done::before {
    background: var(--color-success);
    opacity: 1;
    box-shadow: 0 0 8px var(--color-success);
}

/* Las barras de seguridad crecen cuando la tarjeta aparece, no al cargar la página */
.bento-item:not(.is-visible) .security-chart .bar {
    animation-play-state: paused;
}

.security-chart .bar:nth-child(2) { animation-delay: 0.12s; }
.security-chart .bar:nth-child(3) { animation-delay: 0.24s; }
.security-chart .bar:nth-child(4) { animation-delay: 0.36s; }

/* ==========================================
   12. FASE 2 — Tarjetas apiladas en "Nosotros" (solo escritorio)
   ========================================== */
@media (min-width: 901px) {
    .elite-scroll-col .elite-card {
        position: sticky;
        top: calc(130px + var(--stack-i, 0) * 18px);
        scale: var(--stack-scale, 1);
        filter: brightness(var(--stack-dim, 1));
        transform-origin: center top;
        box-shadow: 0 -12px 32px -12px rgba(var(--primitive-rgb-black), 0.5);
    }

    .elite-scroll-col {
        gap: 40vh;
        padding-bottom: 8vh;
    }
}

/* ==========================================
   13. FASE 2 — Portafolio con revelado tipo cortina
   ========================================== */
.accordion-item {
    transition: width 0.5s ease, flex-grow 0.5s ease;
}

/* ==========================================
   14. FASE 2 — Preguntas frecuentes deslizantes
   ========================================== */
.faq-answer-elite {
    overflow: hidden;
}

/* ==========================================
   15. FASE 2 — Nombre gigante en el pie de página
   ========================================== */
.footer-wordmark {
    overflow: hidden;
    padding: 40px 20px 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(4rem, 19vw, 17rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-align: center;
    user-select: none;
    background: linear-gradient(to bottom, rgba(var(--stronix-sky-rgb), 0.35) 0%, rgba(var(--stronix-sky-rgb), 0.04) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-wordmark .wm-char {
    background: linear-gradient(to bottom, rgba(var(--stronix-sky-rgb), 0.35) 0%, rgba(var(--stronix-sky-rgb), 0.04) 85%);
    -webkit-background-clip: text;
    background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
    .mt-cursor {
        animation: none;
    }
}

/* ==========================================
   16. FASE 3 — En móvil el título de "Nosotros" fluye sin salto forzado
   ========================================== */
@media (max-width: 600px) {
    .elite-title {
        font-size: 1.9rem;
    }

    .elite-title br {
        display: none;
    }
}

/* ==========================================
   17. FASE 3 — Casilla de autorización de datos (Ley 1581 de 2012)
   ========================================== */
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
}

.consent-check input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--stronix-cyan);
    cursor: pointer;
}

.consent-check a {
    color: var(--stronix-sky);
}

.footer-form .consent-check {
    margin: 10px 0 0;
    font-size: 0.8rem;
}

/* ==========================================
   18. Formularios: campo trampa anti-spam y aviso de error
   ========================================== */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.toast-error .toast-icon {
    color: var(--color-error);
}

/* ==========================================
   19. FASE 4 — Portada: tarjetas de garantía más presentes y suelo de cuadrícula
   ========================================== */
.premium-hero::after {
    content: "";
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -12%;
    height: 55%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--stronix-sky-rgb), 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--stronix-sky-rgb), 0.09) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(600px) rotateX(62deg);
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 85%);
    mask-image: linear-gradient(to top, #000 5%, transparent 85%);
}

.hero-floating-ui {
    flex-basis: 340px;
    gap: 14px;
}

.float-card {
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(var(--primitive-rgb-navy-800), 0.92), rgba(var(--primitive-rgb-navy-800), 0.65));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: rgba(var(--primitive-rgb-white), 0.1);
    box-shadow: var(--shadow-float);
    animation: float-y 6s ease-in-out infinite;
}

.float-card:nth-child(2) { animation-delay: -2s; }

@media (min-width: 901px) {
    .float-card:nth-child(2) { margin-left: 28px; }
}
.float-card:nth-child(3) { animation-delay: -4s; }

.float-card i {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 1.35rem;
    color: var(--stronix-sky);
    background: rgba(var(--stronix-cyan-rgb), 0.12);
    border: 1px solid rgba(var(--stronix-cyan-rgb), 0.28);
}

@keyframes float-y {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* ==========================================
   20. FASE 4 — Franja de confianza con cifras
   ========================================== */
.proof-strip {
    padding: 24px 20px 0;
    position: relative;
    z-index: 2;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(var(--primitive-rgb-navy-800), 0.9), rgba(var(--primitive-rgb-navy-900), 0.9));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.proof-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 32px;
}

.proof-item + .proof-item {
    border-left: 1px solid var(--hairline);
}

.proof-num {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--primitive-color-white) 30%, var(--stronix-sky));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.proof-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .proof-item:nth-child(3) {
        border-left: 0;
    }

    .proof-item:nth-child(n + 3) {
        border-top: 1px solid var(--hairline);
    }

    .proof-item {
        padding: 22px 20px;
    }
}

/* ==========================================
   21. FASE 4 — Servicios: contenido arriba, iconos en baldosa y mini-visuales
   ========================================== */
.bento-item {
    justify-content: flex-start;
}

.bento-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bento-content .service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    border-radius: 14px;
    font-size: 1.6rem;
    color: var(--stronix-sky);
    background: rgba(var(--stronix-cyan-rgb), 0.1);
    border: 1px solid rgba(var(--stronix-cyan-rgb), 0.25);
}

.bento-content .bento-tags,
.bento-content .security-chart,
.bento-content .mini-platforms,
.bento-content .mini-spark {
    margin-top: auto;
}

.bento-content .mini-terminal + .bento-tags,
.bento-content .mini-pipeline + .bento-tags {
    margin-top: 14px;
}

.bento-content .mini-terminal,
.bento-content .mini-pipeline {
    margin-top: auto;
    align-self: stretch;
}

.bento-content .mini-pipeline {
    align-self: flex-start;
}

.security-chart {
    width: 100%;
    height: 96px;
}

.row-span-2 .security-chart {
    height: 150px;
}

.security-chart .bar {
    background: linear-gradient(to top, rgba(var(--stronix-cyan-rgb), 0.12), var(--stronix-cyan));
    border-radius: 8px 8px 3px 3px;
}

.mini-platforms {
    display: flex;
    gap: 10px;
    list-style: none;
    padding-top: 8px;
}

.mini-platforms li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: rgba(var(--primitive-rgb-white), 0.03);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--chip-fg);
}

.mini-platforms i {
    color: var(--stronix-sky);
}

.mini-spark {
    width: 100%;
    height: 56px;
    overflow: visible;
}

.mini-spark .spark-line {
    fill: none;
    stroke: var(--stronix-cyan);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(var(--stronix-cyan-rgb), 0.6));
    transition: stroke-dashoffset 1.6s var(--ease-out-expo) 0.3s;
}

.mini-spark .spark-area {
    fill: rgba(var(--stronix-cyan-rgb), 0.1);
    opacity: 0;
    transition: opacity 1s ease 1.2s;
}

.bento-item.is-visible .mini-spark .spark-line {
    stroke-dashoffset: 0;
}

.bento-item.is-visible .mini-spark .spark-area {
    opacity: 1;
}

/* ==========================================
   22. FASE 4 — Proceso en dos columnas (escritorio)
   ========================================== */
.process-cta {
    display: inline-flex;
    margin-top: 28px;
}

@media (min-width: 901px) {
    .process-elite .container {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 64px;
        align-items: start;
    }

    .process-head {
        position: sticky;
        top: 140px;
        margin-bottom: 0;
    }

    .process-elite .timeline {
        max-width: none;
        margin-top: 8px;
    }
}

/* ==========================================
   23. FASE 4 — Menú: indica la sección en la que estás
   ========================================== */
.pill-nav nav a {
    position: relative;
}

.pill-nav nav a.is-active {
    color: var(--primitive-color-white);
}

@media (min-width: 901px) {
    .pill-nav nav a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--stronix-cyan);
        box-shadow: 0 0 8px var(--stronix-cyan);
        transform: translateX(-50%) scale(0);
        transition: transform 0.3s var(--ease-out-expo);
    }

    .pill-nav nav a.is-active::after {
        transform: translateX(-50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .float-card {
        animation: none;
    }

    .mini-spark .spark-line {
        stroke-dashoffset: 0;
    }

    .mini-spark .spark-area {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .premium-hero::after {
        display: none;
    }
}

/* ==========================================
   24. SISTEMA OBSIDIAN CYBER-LUXE UNIFICADO
   Estilo Apple Pro / Vercel / Linear: Liquid Glass translúcido,
   fondos obsidian profundos (#0C0C0C, #111113) y acentos cian/neón.
   ========================================== */

/* Fondo base y ambient glow entre secciones */
body {
    background-color: var(--primitive-color-navy-950);
    color: var(--color-fg);
}

.services,
.premium-services-tabs,
.about-elite,
.elite-features,
.faq-elite,
.contact-elite {
    position: relative;
}

/* 1. Header / Navegación: Liquid Glass auténtico (Apple HIG) */
header.pill-nav {
    background: rgba(12, 12, 12, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* 2. Tarjetas Bento y Paneles: Cristales de Obsidiana con luz de borde */
.bento-item,
.elite-card,
.tm-card {
    background: rgba(17, 17, 19, 0.72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px -20px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .bento-item:hover,
    .elite-card:hover,
    .tm-card:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(0, 229, 255, 0.35) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 60px -20px rgba(0, 159, 223, 0.25) !important;
    }
}

/* Iconos de servicio y paneles */
.bento-content .service-icon,
.pane-icon,
.card-icon,
.feature-icon {
    background: rgba(0, 159, 223, 0.12) !important;
    border: 1px solid rgba(0, 159, 223, 0.28) !important;
    color: var(--primitive-color-cyan-400) !important;
    box-shadow: inset 0 0 12px rgba(0, 159, 223, 0.15);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--primitive-radius-md);
    font-size: var(--primitive-font-size-xl);
}

/* Etiquetas y chips de tecnologías */
.bento-tags li {
    background: rgba(0, 159, 223, 0.08) !important;
    border: 1px solid rgba(0, 159, 223, 0.2) !important;
    color: var(--primitive-color-sky-300) !important;
    border-radius: var(--primitive-radius-pill);
    font-weight: 500;
}

.service-chip,
.mini-platforms li {
    background: rgba(23, 23, 26, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--color-fg-soft) !important;
    transition: all 0.25s ease;
}

.service-chip i {
    color: var(--primitive-color-cyan-400) !important;
}

@media (hover: hover) and (pointer: fine) {
    .service-chip:hover {
        border-color: rgba(0, 229, 255, 0.35) !important;
        background: rgba(0, 159, 223, 0.12) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 159, 223, 0.2);
    }
}

/* 3. Catálogo de Servicios: Estilo Consola de Desarrollador */
.premium-services-tabs .tabs-container {
    background: rgba(17, 17, 19, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.tabs-sidebar {
    background: rgba(12, 12, 12, 0.7) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.tab-btn {
    color: var(--color-fg-muted) !important;
    border-left: 3px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

.tab-btn.active {
    background: rgba(0, 159, 223, 0.12) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--primitive-color-cyan-400) !important;
    box-shadow: inset 0 0 16px rgba(0, 159, 223, 0.08) !important;
}

.tab-btn.active i {
    color: var(--primitive-color-cyan-400) !important;
}

.pane-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 4. Por qué elegirnos: Filas con micro-bordes y hover fluido */
.feature-list {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .feature-row:hover {
        background: rgba(255, 255, 255, 0.02);
    }
}

/* 5. Cifras y Estadísticas */
.stat-num {
    font-family: var(--primitive-font-family-display) !important;
    background: linear-gradient(135deg, #ffffff 40%, var(--primitive-color-cyan-400) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 14px rgba(0, 159, 223, 0.35));
}

/* 6. FAQ Elite Accordion: Tarjetas Liquid Glass */
.faq-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: none !important;
}

.faq-item-elite {
    background: rgba(17, 17, 19, 0.5) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 0 24px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq-item-elite:hover {
    border-color: rgba(0, 229, 255, 0.25) !important;
    background: rgba(17, 17, 19, 0.65) !important;
}

.faq-item-elite[open] {
    border-color: rgba(0, 229, 255, 0.35) !important;
    background: rgba(17, 17, 19, 0.75) !important;
    box-shadow: 0 16px 36px -12px rgba(0, 159, 223, 0.25) !important;
}

.faq-item-elite summary {
    border: none !important;
    color: #ffffff !important;
    padding: 22px 0 !important;
}

.faq-item-elite[open] .icon-cross {
    transform: rotate(45deg);
    color: var(--primitive-color-cyan-400);
}

.faq-answer-elite {
    color: var(--color-fg-body) !important;
}

/* 7. Formulario de Contacto en Cristal */
.contact-form-elite .minimal-form {
    background: rgba(17, 17, 19, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    padding: 44px !important;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.input-line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: border-color 0.3s ease !important;
}

.input-line:focus-within {
    border-bottom-color: var(--primitive-color-cyan-400) !important;
    box-shadow: 0 1px 0 var(--primitive-color-cyan-400) !important;
}

/* 8. Máscaras de degradado suave para carruseles y marquee */
.tm-marquee,
.tech-marquee-section {
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* 9. Botón WhatsApp con pulso de luz */
.global-whatsapp-button {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    animation: pulse-wa 2.8s infinite;
}

@keyframes pulse-wa {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* ==========================================
   Menú: botón para descargar el brochure en PDF
   ========================================== */
.pill-nav nav a.nav-brochure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin: -7px 0; /* el borde no desplaza la línea base del resto de enlaces */
    border: 1px solid rgba(160, 196, 226, 0.35);
    border-radius: 980px;
    color: var(--stronix-sky, #A0C4E2);
    white-space: nowrap;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.pill-nav nav a.nav-brochure:hover,
.pill-nav nav a.nav-brochure:focus-visible {
    border-color: var(--stronix-cyan, #009FDF);
    background: rgba(0, 159, 223, 0.12);
    color: var(--primitive-color-white, #fff);
}

.pill-nav nav a.nav-brochure::after {
    display: none;
}

@media (max-width: 768px) {
    .pill-nav nav a.nav-brochure {
        display: flex;
        justify-content: center;
        margin: 6px 0;
        padding: 10px 14px;
        color: var(--primitive-color-white, #fff);
    }
}

/* ==========================================
   FASE 6 — Pulido de interacción
   (skills redesign-skill + emil-design-eng)
   Todo aditivo: sobrescribe reglas anteriores sin tocarlas.
   ========================================== */
:root {
    /* Curvas fuertes: respuesta inmediata al usuario */
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
    --press-scale: 0.97;
}

/* 1. "transition: all" → solo las propiedades que cambian (más fluido, sin animar layout por accidente) */
.btn-contact {
    transition: background-color 200ms ease, transform 160ms var(--ease-out-strong);
}

.tab-btn {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease,
        transform 160ms var(--ease-out-strong) !important;
}

.social-icons a,
.footer-form button {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease,
        transform 160ms var(--ease-out-strong);
}

.service-chip,
.mini-platforms li {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.faq-item-elite {
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease !important;
}

.input-line label {
    transition: transform 200ms var(--ease-out-strong), font-size 200ms var(--ease-out-strong),
        top 200ms var(--ease-out-strong), color 200ms ease;
}

.pill-nav {
    transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

/* 2. Respuesta al presionar: todo lo que se puede tocar se "hunde" un poco */
.btn-contact:active,
.tab-btn:active,
.social-icons a:active,
.footer-form button:active,
.marquee-toggle:active,
.menu-toggle:active,
.pill-nav nav a.nav-brochure:active,
.contact-whatsapp:active {
    transform: scale(var(--press-scale)) !important;
    transition-duration: 100ms !important;
}

.faq-item-elite summary {
    transition: color 200ms ease;
}

.faq-item-elite summary:active {
    color: var(--primitive-color-white, #fff);
}

/* 3. Hover solo con ratón (en móviles el "hover" queda pegado tras tocar) */
@media (hover: none) {
    .tab-btn:hover:not(.active) {
        background: transparent !important;
        color: var(--color-fg-muted) !important;
    }

    .faq-item-elite:hover:not([open]) {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(17, 17, 19, 0.5) !important;
    }

    .social-icons a:hover {
        background: transparent;
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--color-fg);
    }
}

/* 4. Menú móvil: apertura más rápida y con curva fuerte (se usa a menudo) */
@media (max-width: 768px) {
    nav ul.active {
        animation: slideDown 200ms var(--ease-out-strong) forwards;
    }
}

/* 5. Pestañas del catálogo: entrada más corta y sin salto */
.tab-pane.active {
    animation: stx-pane-in 240ms var(--ease-out-strong) both;
}

@keyframes stx-pane-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 6. Preguntas frecuentes: la respuesta aparece suave, no de golpe */
.faq-item-elite[open] .faq-answer-elite {
    animation: stx-answer-in 220ms var(--ease-out-strong) both;
}

@keyframes stx-answer-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7. Portafolio en acordeón: curva de movimiento en pantalla, solo propiedades necesarias */
.accordion-item {
    transition: flex-grow 450ms var(--ease-in-out-strong), width 450ms var(--ease-in-out-strong);
}

.accordion-item img {
    transition: transform 600ms var(--ease-out-strong);
}

/* 8. Hero: altura real en móviles (100vh salta con la barra del navegador en iOS) */
@supports (min-height: 100dvh) {
    .hero {
        min-height: 100dvh;
    }
}

/* 9. Tipografía: sin palabras sueltas en la última línea */
.section-title,
.elite-title,
.bento-item h3,
.elite-card h3,
.feature-text,
.timeline-content h3 {
    text-wrap: balance;
}

.section-lead,
.elite-desc,
.bento-item p,
.elite-card p,
.feature-desc,
.timeline-content p,
.faq-answer-elite p {
    text-wrap: pretty;
}

/* 10. Enlace "Saltar al contenido" para quien navega con teclado */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    padding: 10px 18px;
    border-radius: 980px;
    background: var(--stronix-cyan, #009FDF);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 200ms var(--ease-out-strong);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* Movimiento reducido: se quitan desplazamientos, se mantienen los cambios de color */
@media (prefers-reduced-motion: reduce) {
    .tab-pane.active,
    .faq-item-elite[open] .faq-answer-elite,
    nav ul.active {
        animation: none !important;
    }

    .btn-contact:active,
    .tab-btn:active,
    .social-icons a:active,
    .footer-form button:active,
    .marquee-toggle:active,
    .menu-toggle:active,
    .pill-nav nav a.nav-brochure:active,
    .contact-whatsapp:active {
        transform: none !important;
    }
}

/* Títulos en móvil: el salto de línea forzado deja "Tecnología que trabaja…" en tres líneas */
@media (max-width: 600px) {
    .elite-title {
        font-size: 1.9rem;
    }

    .elite-title br {
        display: none;
    }
}