/* ============================================================
   Sección: SOCIAL PROOF  (pieza reutilizable — ver ADR-0006)
   Portado fiel de la v1 (SocialProof.module.css). Namespaceado a mano.
   Los LOGOS salen del CMS (client_logos); banderas y stats son fijas (ADR-0007).
   ============================================================ */

.social-proof {
    padding-block: var(--section-y);
}

/* Panel claro redondeado que contiene todo */
.social-proof__panel {
    background: var(--color-surface-subtle);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-8), 4vw, var(--space-16));
}

.social-proof__eyebrow {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
}

/* ---------- Stats ---------- */
.social-proof__stats {
    display: flex;
    gap: var(--space-16);
    margin-top: var(--space-6);
}

.social-proof__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.social-proof__number {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
}
.social-proof__number--primary {
    color: var(--color-primary);
}
.social-proof__number--accent {
    color: var(--color-accent);
}

.social-proof__stat-label {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-neutral-400);
}

/* ---------- Banderas de países ---------- */
.social-proof__flags {
    margin-top: var(--space-8);
}

.social-proof__flags-track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    animation-duration: 24s; /* solo se usa en mobile (10 banderas × 2.4s) */
}

/* Desktop: la segunda copia sobra → fuera. Las banderas reales envuelven solas. */
.social-proof__flag-item[aria-hidden='true'] {
    display: none;
}

.social-proof__flag-item {
    flex-shrink: 0;
}

.social-proof__flag {
    display: block;
    height: 30px;
    width: auto;
}

@media (min-width: 1440px) {
    .social-proof__flags-track {
        gap: var(--space-1);
    }
    .social-proof__flag {
        height: 23px;
    }
}

/* ---------- Copy ---------- */
.social-proof__lead {
    max-width: 60ch;
    margin-top: var(--space-6);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

/* ---------- Carrusel de logos ---------- */
.social-proof__marquee {
    position: relative;
    margin-top: var(--space-12);
    overflow: hidden;
    /* fade suave en los bordes izq/der */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.social-proof__track {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: max-content;
    animation-name: socialProofScroll;
    animation-duration: 80s; /* fallback; la real la fija la plantilla según cuántos logos haya */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.social-proof__marquee:hover .social-proof__track {
    animation-play-state: paused;
}

.social-proof__logo-item {
    flex-shrink: 0;
}

.social-proof__logo {
    display: block;
    height: 60px;
    width: auto;
    /* logos monocromo (line-art): se oscurecen para darles presencia y uniformar. */
    filter: brightness(0.5) contrast(1.1);
    transition: filter var(--transition);
}
.social-proof__logo:hover {
    filter: brightness(0.3) contrast(1.15);
}

/* logos a color (PNG de marca): se muestran tal cual, más bajos. */
.social-proof__logo--color,
.social-proof__logo--color:hover {
    filter: none;
    height: 40px;
    margin-inline: 14px;
}

@keyframes socialProofScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Opuesto al de las marcas: arranca corrido -50% y vuelve a 0 → viaja al revés. */
@keyframes socialProofScrollFlags {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/* Accesibilidad: sin movimiento si el usuario lo pidió */
@media (prefers-reduced-motion: reduce) {
    .social-proof__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-12);
    }
    .social-proof__marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .social-proof__flags-track {
        animation: none;
    }
    .social-proof__flags {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .social-proof__flag-item[aria-hidden='true'] {
        display: none;
    }
}

@media (max-width: 640px) {
    .social-proof {
        --page-padding-x: 0;
        padding-block: var(--space-6);
    }
    .social-proof__panel {
        padding: var(--space-4) 0;
        background: transparent;
        border-radius: 0;
    }
    /* el texto necesita un respiro para no pegarse al borde; el marquee sí va full. */
    .social-proof__eyebrow,
    .social-proof__lead,
    .social-proof__stats {
        padding-inline: var(--space-5);
    }
    .social-proof__eyebrow,
    .social-proof__lead {
        text-align: center;
    }
    .social-proof__flags {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    /* en mobile SÍ mostramos la copia duplicada y animamos las banderas al revés */
    .social-proof__flag-item[aria-hidden='true'] {
        display: block;
    }
    .social-proof__flags-track {
        flex-wrap: nowrap;
        width: max-content;
        animation-name: socialProofScrollFlags;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        will-change: transform;
    }
    .social-proof__stats {
        justify-content: center;
        gap: var(--space-8);
    }
}