/* ═══════════════════════════════════════════════════════
   EXPERIENCIAS PAGE STYLES  (mobile-first)
   ═══════════════════════════════════════════════════════ */

/* ── Hero Mini ─────────────────────────────────────────── */
.hero-mini {
    position: relative;
    padding-top: calc(var(--nav-height, 72px) + var(--space-8));
    padding-bottom: var(--space-4);
    overflow: hidden;
}

.hero-mini__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-mini > .container {
    position: relative;
    z-index: 1;
}

.hero-mini__content {
    text-align: center;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-top: var(--space-8);
}

.hero-mini__title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
}

.hero-mini__subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 620px;
    margin-inline: auto;
}

.hero-mini__descriptor {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    color: var(--text-tertiary);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-top: var(--space-6);
}

/* ── Orbit Section — full-bleed dark inmersivo ─────────── */
.exp-orbit {
    padding: 0;
    overflow: visible;
}

.exp-orbit__bleed {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: #060610;
    padding-block: var(--space-8);
    overflow: hidden;
}

/* Fades suaves en los bordes */
.exp-orbit__bleed::before,
.exp-orbit__bleed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 5rem;
    z-index: 2;
    pointer-events: none;
}

.exp-orbit__bleed::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-primary), transparent);
}

.exp-orbit__bleed::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg-primary), transparent);
}

/* Atmósfera — glow radial sutil */
.exp-orbit__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%,
        color-mix(in srgb, #CE32FF 6%, transparent) 0%,
        transparent 70%);
}

.exp-orbit__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(6, 6, 16, 0.5) 80%,
        rgba(6, 6, 16, 0.85) 100%);
}

.exp-orbit__bleed > .container {
    position: relative;
    z-index: 3;
}

/* ── Reveal Card — liquid glass sobre fondo oscuro ──────── */
.clients-orbit__reveal {
    --glass-reflex-light: 0.3;
    --glass-reflex-dark: 2;

    position: absolute;
    z-index: 20;
    width: 270px;
    padding: 14px 16px;
    border-radius: 16px;
    pointer-events: auto;

    background-color: color-mix(in srgb, #CE32FF 8%, rgba(20, 20, 32, 0.7));
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
    border: 1px solid color-mix(in srgb, #CE32FF 12%, transparent);
    box-shadow: var(--glass-shadow);

    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Highlight especular superior */
.clients-orbit__reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(206, 50, 255, 0.25) 30%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(206, 50, 255, 0.25) 70%,
        transparent 100%);
    border-radius: 1px;
    z-index: 2;
    pointer-events: none;
}

/* Brillo interior */
.clients-orbit__reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(206, 50, 255, 0.06) 0%,
        transparent 40%);
    pointer-events: none;
}

.clients-orbit__reveal[hidden] {
    display: none;
}

/* Botón cerrar */
.clients-orbit__reveal-close {
    --glass-reflex-light: 0.3;

    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, #CE32FF 8%, rgba(255, 255, 255, 0.06));
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
    border: 1px solid color-mix(in srgb, #CE32FF 10%, transparent);
    box-shadow: var(--glass-shadow);
    color: #d4d4d8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth);
}

.clients-orbit__reveal-close:hover {
    background-color: color-mix(in srgb, #CE32FF 15%, rgba(255, 255, 255, 0.1));
    color: #fafafa;
}

/* Header — avatar + nombre + estrellas */
.clients-orbit__reveal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: var(--space-6);
}

.clients-orbit__reveal-avatar {
    --glass-reflex-light: 0.3;

    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, #CE32FF 10%, rgba(255, 255, 255, 0.06));
    border: 1px solid color-mix(in srgb, #CE32FF 15%, transparent);
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CE32FF;
    flex-shrink: 0;
    overflow: hidden;
}

.clients-orbit__reveal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clients-orbit__reveal-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.clients-orbit__reveal-meta strong {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: #fafafa;
    line-height: 1.2;
}

.clients-orbit__reveal-stars {
    display: flex;
    gap: 1px;
}

/* Quote */
.clients-orbit__reveal-quote {
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: #d4d4d8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Rol */
.clients-orbit__reveal-role {
    font-size: var(--text-2xs);
    color: #a1a1aa;
}

/* ── Tamaño de órbita en experiencias — via variables del sistema ── */
.exp-orbit .clients-orbit__scene {
    --orbit-scene:  280px;
    --orbit-inner:  118px;
    --orbit-middle: 196px;
    --orbit-outer:  268px;
    --orbit-center: 64px;
    margin-block: var(--space-2);
}

/* ── Header dentro del bleed oscuro ────────────────────── */
.exp-orbit__header {
    text-align: center;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.exp-orbit__title {
    font-size: var(--text-3xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: #fafafa;
    margin: 0;
}

@media (min-width: 640px) {
    .exp-orbit__title {
        font-size: var(--text-4xl);
    }
}

/* ── Watermark — tipografía ambiente detrás de la órbita ── */
.exp-orbit__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.exp-orbit__watermark span {
    font-size: clamp(5rem, 17vw, 14rem);
    font-weight: var(--fw-extrabold);
    line-height: 0.85;
    letter-spacing: var(--tracking-tight);
    color: transparent;
    -webkit-text-stroke: 1px rgba(206, 50, 255, 0.2);
    background: linear-gradient(180deg,
        rgba(206, 50, 255, 0.15) 0%,
        rgba(81, 112, 255, 0.08) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ── Tap cue bajo la órbita ─────────────────────────────── */
.tap-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-10);
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--duration-fast) var(--ease-smooth);
}

.tap-cue:hover {
    color: rgba(255, 255, 255, 0.9);
}

.tap-cue__icon {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tap-cue__icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    animation: tap-cue-press 1.8s var(--ease-in-out) infinite;
}

.tap-cue__ring {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) scale(0.5);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    animation: tap-cue-ring 1.8s var(--ease-in-out) infinite;
}

.tap-cue__label {
    font-size: 9px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: inherit;
}

/* ── Nodos con testimonios — ring de pulso ──────────────── */
.clients-orbit__node--has-testimonial {
    cursor: pointer;
}

.clients-orbit__node--has-testimonial::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-full);
    border: 1.5px solid color-mix(in srgb, var(--node-color, #CE32FF) 30%, transparent);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-smooth);
}

.clients-orbit__node--has-testimonial:hover::after {
    opacity: 1;
}

/* Nodo activo — seleccionado, con brillo */
.clients-orbit__node.is-active {
    background: color-mix(in srgb, var(--node-color, #CE32FF) 25%, rgba(255, 255, 255, 0.6));
    border-color: color-mix(in srgb, var(--node-color, #CE32FF) 50%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--node-color, #CE32FF) 30%, transparent),
                0 0 40px color-mix(in srgb, var(--node-color, #CE32FF) 15%, transparent);
    transform: scale(1.15);
    z-index: 10;
}

/* Nodos siempre en modo dark dentro del bleed oscuro */
.exp-orbit .clients-orbit__node {
    background: color-mix(in srgb, var(--node-color) 10%, rgba(255, 255, 255, 0.07));
    border-color: color-mix(in srgb, var(--node-color) 22%, rgba(255, 255, 255, 0.12));
}

.exp-orbit .clients-orbit__node:hover {
    background: color-mix(in srgb, var(--node-color) 16%, rgba(255, 255, 255, 0.12));
    border-color: color-mix(in srgb, var(--node-color) 36%, rgba(255, 255, 255, 0.2));
    box-shadow: var(--glass-shadow),
                0 0 14px color-mix(in srgb, var(--node-color) 18%, transparent);
}

/* Texto de nombre dentro del bleed siempre claro */
.exp-orbit .clients-orbit__name {
    color: color-mix(in srgb, var(--node-color) 70%, #ffffff);
}

/* ── Impacto Real — header centrado ────────────────────── */
.exp-impact .section__header {
    text-align: center;
    margin-bottom: var(--space-10);
}

/* ── Testimonios — header centrado + marquee ────────────── */
#testimonials .section__header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.testimonials-marquee {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-block: var(--space-2);
}

.testimonials-marquee .marquee__track {
    gap: var(--space-4);
    padding-inline: var(--space-6);
    align-items: stretch;
}

.testimonials-marquee .card--testimonial {
    flex: 0 0 clamp(280px, 82vw, 360px);
    width: clamp(280px, 82vw, 360px);
}

body:has(.testimonial-modal:not([hidden])) .testimonials-marquee .marquee__track {
    animation-play-state: paused;
}

.card--testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--glass-blur-soft));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft));
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
}

.card--testimonial:hover {
    border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    box-shadow: var(--glass-shadow), 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

[data-theme="dark"] .card--testimonial:hover {
    box-shadow: var(--glass-shadow), 0 8px 24px rgba(0, 0, 0, 0.35);
}

.card--testimonial__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
}

.card--testimonial__quote {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    font-style: italic;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.card--testimonial__quote::before {
    content: '\201C';
    font-size: var(--text-xl);
    color: var(--color-primary);
    font-weight: var(--fw-extrabold);
    line-height: 0;
    vertical-align: -0.25em;
    margin-right: var(--space-1);
    font-style: normal;
}

.card--testimonial__stars {
    display: flex;
    gap: 2px;
    color: #FBBF24;
    align-items: center;
    min-height: 16px;
}

.card--testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}

.card--testimonial__avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, #b820e6 10%, transparent);
    border: 1px solid color-mix(in srgb, #b820e6 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b820e6;
    flex-shrink: 0;
    overflow: hidden;
}

[data-theme="light"] .card--testimonial__avatar {
    background: color-mix(in srgb, #3D5CE5 10%, transparent);
    border-color: color-mix(in srgb, #3D5CE5 20%, transparent);
    color: #3D5CE5;
}

.card--testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.card--testimonial__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.card--testimonial__meta strong {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card--testimonial__meta span {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Modal de testimonios ───────────────────────────────── */
/* ── Testimonial Modal — estilo alineado con SecurApp ───── */
.testimonial-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.testimonial-modal[hidden] {
    display: none;
}

.testimonial-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.testimonial-modal__dialog {
    --tm-color: var(--color-primary);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    background: color-mix(in srgb, var(--tm-color) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--tm-color) 12%, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08),
                0 24px 48px rgba(0, 0, 0, 0.12),
                0 0 40px color-mix(in srgb, var(--tm-color) 6%, transparent);
    padding: var(--space-8);
}

[data-theme="dark"] .testimonial-modal__dialog {
    background: color-mix(in srgb, var(--tm-color) 6%, var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-color: color-mix(in srgb, var(--tm-color) 15%, var(--card-border));
    box-shadow: var(--glass-shadow),
                0 24px 48px rgba(0, 0, 0, 0.3),
                0 0 40px color-mix(in srgb, var(--tm-color) 8%, transparent);
}

.testimonial-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    box-shadow: var(--glass-shadow);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
}

.testimonial-modal__close:hover {
    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
    transform: scale(1.08);
}

.testimonial-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.testimonial-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-modal__avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    border: 1px solid color-mix(in srgb, var(--glass-light) 18%, transparent);
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
    box-shadow: var(--glass-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.testimonial-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonial-modal__info {
    flex: 1;
    min-width: 0;
}

.testimonial-modal__name {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    display: block;
}

.testimonial-modal__role {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    display: block;
}

.testimonial-modal__quote {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
    font-style: italic;
    margin: 0;
}

.testimonial-modal__quote::before {
    content: '\201C';
    font-size: var(--text-2xl);
    color: var(--color-primary);
    font-weight: var(--fw-extrabold);
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: var(--space-1);
    font-style: normal;
}

[data-theme="dark"] .testimonial-modal__quote::before {
    color: var(--color-secondary);
}

.testimonial-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.testimonial-modal__stars {
    display: flex;
    gap: 3px;
    color: var(--color-warning);
    align-items: center;
}

.testimonial-modal__logo {
    height: 48px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE  (mobile-first: min-width only)
   ═══════════════════════════════════════════════════════ */

/* ── sm  (>= 640px) ─────────────────────────────────── */
@media (min-width: 640px) {
    .hero-mini__title {
        font-size: var(--text-5xl);
    }

    .exp-orbit .clients-orbit__scene {
        --orbit-scene:  380px;
        --orbit-inner:  164px;
        --orbit-middle: 264px;
        --orbit-outer:  364px;
        --orbit-center: 76px;
    }

    .testimonials-marquee .card--testimonial {
        flex-basis: 340px;
        width: 340px;
    }
}

/* ── lg  (>= 1024px) ────────────────────────────────── */
@media (min-width: 1024px) {
    .hero-mini {
        padding-top: calc(var(--nav-height, 72px) + var(--space-12));
        padding-bottom: var(--space-16);
    }

    .hero-mini__title {
        font-size: var(--text-hero);
    }

    .exp-orbit__bleed {
        padding-block: var(--space-8);
    }

    .exp-orbit .clients-orbit__scene {
        --orbit-scene:  480px;
        --orbit-inner:  210px;
        --orbit-middle: 336px;
        --orbit-outer:  462px;
        --orbit-center: 88px;
    }

    .clients-orbit__reveal {
        width: 300px;
        padding: 16px 20px;
    }

    .clients-orbit__reveal-quote {
        -webkit-line-clamp: 4;
    }

    .testimonials-marquee .card--testimonial {
        flex-basis: 380px;
        width: 380px;
    }
}

/* ── xl  (>= 1440px) ────────────────────────────────── */
@media (min-width: 1440px) {
    .exp-orbit .clients-orbit__scene {
        --orbit-scene:  540px;
        --orbit-inner:  236px;
        --orbit-middle: 378px;
        --orbit-outer:  520px;
        --orbit-center: 96px;
    }
}