/* ============================================================
   Equipo Origin-Go - Foto a ancho completo + Marquee
   La foto ya lleva los nombres incorporados en la imagen.
   Sin overlays, sin JS, sin markers.
   ============================================================ */

.cv-eq-wrapper {
    /* Full-bleed: rompe el padding global del tema
       `section { padding: 60px 20px }` (con !important en ≤768px).
       Patrón width:100vw + centrado, con overflow:hidden para
       que no provoque scroll horizontal. */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: #06070e;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.cv-eq-wrapper * {
    box-sizing: border-box;
}

.cv-eq-photo {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    vertical-align: bottom;
    object-position: center top;
}

/* ====== MARQUEE ====== */
/* Frame con borde conic-gradient giratorio (solo top + bottom).
   Reutiliza la @property --cv-srv-ga definida en la sección de servicios
   (más abajo en este archivo) y un keyframe propio a 5s. */
.cv-eq-marquee-frame {
    position: relative;
    padding: 1.5px 0;       /* gruesa visible del borde conic */
    margin: 0;
    background: #06070e;    /* fallback navegadores sin @property */
}

@supports (background: conic-gradient(from var(--cv-srv-ga), red, blue)) {
    .cv-eq-marquee-frame {
        background: conic-gradient(
            from var(--cv-srv-ga, 0deg),
            #6366f1,
            #a855f7,
            #ec4899,
            #f97316,
            #6366f1
        );
        animation: cv-srv-spin 5s linear infinite;
    }
}

.cv-eq-marquee {
    background: #06070e;
    padding: 18px 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.cv-eq-marquee::before,
.cv-eq-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.cv-eq-marquee::before { left: 0;  background: linear-gradient(to right, #06070e, transparent); }
.cv-eq-marquee::after  { right: 0; background: linear-gradient(to left,  #06070e, transparent); }

.cv-eq-marquee__track {
    display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    animation: cv-eq-marquee 60s linear infinite;
    will-change: transform;
}

/* CV-SEO 2026-06-14: pausa al hacer hover en desktop (invita a leer servicios) */
.cv-eq-marquee:hover .cv-eq-marquee__track {
    animation-play-state: paused;
}

@keyframes cv-eq-marquee {
    to { transform: translateX(-50%); }
}

.cv-eq-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    font-size: 15px;
    font-weight: 600;          /* CV-SEO 2026-06-14: 500 → 600 para más presencia */
    color: #f1f5f9;            /* CV-SEO 2026-06-14: gris → blanco hueso (contraste premium) */
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.cv-eq-marquee__dot {
    color: #f97316;
    font-size: 18px;
    line-height: 1;
    /* CV-SEO 2026-06-14: pulse sutil (Apple-style) — no chillón */
    display: inline-block;
    animation: cv-eq-dot-pulse 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}

@keyframes cv-eq-dot-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@media (max-width: 768px) {
    .cv-eq-marquee { padding: 14px 0; }
    .cv-eq-marquee::before,
    .cv-eq-marquee::after { width: 60px; }
    .cv-eq-marquee__track { gap: 28px; }
    .cv-eq-marquee__item { gap: 28px; font-size: 14px; }  /* CV-SEO 2026-06-14: 13px → 14px legibilidad */
    .cv-eq-marquee__dot { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-eq-marquee__track,
    .cv-eq-marquee-frame,
    .cv-eq-marquee__dot { animation: none; }
}


/* ============================================================
   SECCIÓN "NUESTROS SERVICIOS" — Grid de 8 cards oscuro
   Prefijo .cv-srv-* para aislar del CSS del tema.
   ============================================================ */

@property --cv-srv-ga {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes cv-srv-spin {
    to { --cv-srv-ga: 360deg; }
}

.cv-srv-wrapper {
    /* Full-bleed: rompe el padding global del tema */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin: 0 !important;
    padding: 60px 20px !important;
    background: #06070e !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    isolation: isolate;
}

.cv-srv-wrapper * {
    box-sizing: border-box;
}

/* ====== HEADER ====== */
.cv-srv-head {
    text-align: center;
    margin: 0 auto 40px;
    max-width: 720px;
    position: relative;
    z-index: 1;
}

.cv-srv-title {
    position: relative;
    z-index: 3;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 600;
    color: #f8fafc !important;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    line-height: 1.15;
}

.cv-srv-subtitle {
    font-size: 16px;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0;
    font-weight: 400;
}

/* ====== GRID ====== */
.cv-srv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ====== CARD ======
   Borde conic-gradient giratorio. Cada card tiene su --cv-srv-c
   (color acento) y --cv-srv-delay para offset de la animación.
   ============================================================ */
.cv-srv-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 14px;
    padding: 1.5px;
    background: rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    isolation: isolate;
}

@supports (background: conic-gradient(from var(--cv-srv-ga), red, blue)) {
    .cv-srv-card {
        background: conic-gradient(
            from var(--cv-srv-ga),
            var(--cv-srv-c, #6366f1) 0deg,
            transparent 90deg,
            transparent 270deg,
            var(--cv-srv-c, #6366f1) 360deg
        );
        animation: cv-srv-spin 6s linear infinite;
        animation-delay: var(--cv-srv-delay, 0s);
    }
}

.cv-srv-card__inner {
    position: relative;
    background: #0a0c1a;
    border-radius: 13px;
    padding: 22px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
    overflow: hidden;
}

/* Glow radial en top center */
.cv-srv-card__glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 120px;
    background: radial-gradient(ellipse at center, var(--cv-srv-c, #6366f1) 0%, transparent 65%);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

/* Shimmer sweep */
.cv-srv-card__shimmer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 13px;
    z-index: 0;
}

.cv-srv-card__shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: cv-srv-shimmer 5s ease-in-out infinite;
    animation-delay: var(--cv-srv-delay, 0s);
}

@keyframes cv-srv-shimmer {
    0%, 100% { left: -100%; }
    50%      { left: 140%; }
}

/* Card content */
.cv-srv-card__icon {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--cv-srv-c, #6366f1);
    z-index: 2;
}

.cv-srv-card__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--cv-srv-c, #6366f1);
    opacity: 0.10;
    z-index: -1;
}

.cv-srv-card__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.cv-srv-card__tag {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cv-srv-c, #6366f1);
}

.cv-srv-card__title {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.cv-srv-card__desc {
    position: relative;
    z-index: 2;
    font-size: 13.5px;
    line-height: 1.55;
    color: #d1d5db;
    margin: 0;
    flex-grow: 1;
}

/* Hover */
.cv-srv-card:hover {
    transform: translateY(-4px);
}

.cv-srv-card[style*="#f97316"]:hover { box-shadow: 0 20px 40px -16px rgba(249, 115, 22, 0.4); }
.cv-srv-card[style*="#6366f1"]:hover { box-shadow: 0 20px 40px -16px rgba(99,  102, 241, 0.4); }
.cv-srv-card[style*="#a855f7"]:hover { box-shadow: 0 20px 40px -16px rgba(168, 85,  247, 0.4); }
.cv-srv-card[style*="#ec4899"]:hover { box-shadow: 0 20px 40px -16px rgba(236, 72,  153, 0.4); }
.cv-srv-card[style*="#3b82f6"]:hover { box-shadow: 0 20px 40px -16px rgba(59,  130, 246, 0.4); }
.cv-srv-card[style*="#10b981"]:hover { box-shadow: 0 20px 40px -16px rgba(16,  185, 129, 0.4); }
.cv-srv-card[style*="#f59e0b"]:hover { box-shadow: 0 20px 40px -16px rgba(245, 158, 11,  0.4); }
.cv-srv-card[style*="#ef4444"]:hover { box-shadow: 0 20px 40px -16px rgba(239, 68,  68,  0.4); }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
    .cv-srv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .cv-srv-grid { grid-template-columns: 1fr; }
    .cv-srv-wrapper { padding: 48px 18px !important; }
    .cv-srv-head { margin-bottom: 28px; }
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
    .cv-srv-card,
    .cv-srv-card__shimmer::before {
        animation: none !important;
    }
}