/* ==========================================================================
   Portafolio & Servicios — versión clara
   Se carga después de servicios.css y solo afecta a <section class="svc svc--light">.
   Mismo lenguaje que la portada y el equipo: marfil, gris perla y el azul de la marca.
   Las imágenes son pantallas azul marino, como el celular y la tableta de los fotogramas.
   El cierre se mantiene como único momento oscuro, en negro con azul luminoso.
   ========================================================================== */
.svc--light{
  --s-warm:#0B0C0F;            /* texto principal */
  --s-gray:#4A4F5A;            /* texto secundario */
  --s-copper:#2450D6;          /* azul de marca (antes naranja cobrizo) */
  --s-orange:#2F5BEA;          /* azul de acento (antes naranja energético) */
  --s-line:rgba(11,12,15,.14);
  --s-line-soft:rgba(11,12,15,.08);
  background:#ECE9E2; color:var(--s-warm);
}
.svc--light ::selection{background:rgba(36,80,214,.18); color:#0B0C0F}

/* fondo: marfil hacia gris perla, con una luz azul muy suave que viaja entre paneles */
.svc--light .svc-bg{background:linear-gradient(155deg, #EFECE6 0%, #E9E6E0 52%, #DCDBD7 100%)}
.svc--light .svc-bg .glow{background:radial-gradient(closest-side, rgba(110,168,255,.22), rgba(110,168,255,.07) 55%, transparent 100%)}
.svc--light .svc-bg .drift{background:radial-gradient(circle, rgba(255,255,255,.55), transparent 62%)}
.svc--light .svc-bg .noise{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.svc--light .svc-bg .noise::after{background:radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(11,12,15,.07) 100%)}

/* introducción: continúa sin corte desde la portada */
.svc--light .svc-intro::before{background:linear-gradient(#ECE9E2 0%, rgba(236,233,226,0) 100%)}
.svc--light .svc-intro .lead{color:rgba(11,12,15,.8)}

/* paneles */
.svc--light .svc-num{-webkit-text-stroke-color:rgba(11,12,15,.12)}
.svc--light .svc-panel.is-active .svc-num{-webkit-text-stroke-color:rgba(36,80,214,.32)}
.svc--light .svc-caps li{color:rgba(11,12,15,.82)}
.svc--light .svc-btn{border-color:rgba(11,12,15,.22)}
.svc--light .svc-btn:hover, .svc--light .svc-btn:focus-visible{color:#FFFFFF}
.svc--light .svc-media .cap{color:rgba(74,79,90,.75)}

/* imagen protagonista: pantalla azul marino sobre el marfil */
.svc--light .svc-visual{
  background:radial-gradient(80% 70% at 70% 30%, rgba(79,123,255,.3), transparent 60%), linear-gradient(160deg, #1A2541, #080C16 72%);
  box-shadow:0 0 0 1px rgba(11,12,15,.06), 0 60px 110px -50px rgba(20,30,60,.55), 0 26px 70px -46px rgba(36,80,214,.5)}
.svc--light .vz-radar{background:conic-gradient(from 0deg, rgba(110,168,255,.45), rgba(110,168,255,0) 22%, transparent 100%)}

/* indicador de progreso */
.svc--light .svc-bar .dot{box-shadow:0 0 0 5px rgba(47,91,234,.14), 0 0 16px rgba(47,91,234,.55)}
.svc--light .svc-bar .ticks button::before{background:rgba(11,12,15,.22)}

/* cierre: el único momento oscuro, en negro con azul luminoso */
.svc--light .svc-outro{
  --s-warm:#F2F3F5; --s-gray:#A3A8B3; --s-orange:#6EA8FF; --s-copper:#2F5BEA;
  color:var(--s-warm);
  background:radial-gradient(60% 44% at 50% 50%, rgba(47,91,234,.2), transparent 70%), linear-gradient(180deg, #DCDBD7 0%, #1A1D25 14%, #0A0C11 32%, #050608 58%, #0B0D12 76%, #D6D6D4 100%);
  padding-bottom:clamp(200px,30vh,320px)}
.svc--light .svc-chip{border-color:rgba(110,168,255,.4)}
.svc--light .svc-cta{color:#FFFFFF; background:linear-gradient(100deg, #2450D6, #3D6BF0); box-shadow:0 20px 60px -18px rgba(47,91,234,.75), inset 0 1px 0 rgba(255,255,255,.28)}
.svc--light .svc-cta:hover, .svc--light .svc-cta:focus-visible{box-shadow:0 30px 80px -20px rgba(47,91,234,.9), inset 0 1px 0 rgba(255,255,255,.28)}
.svc--light .svc-cta .ar{background:#FFFFFF; color:#2450D6}

/* cursor personalizado sobre fondo claro */
.vx-cursor{background:#2450D6}
.vx-ring{border-color:rgba(11,12,15,.35); color:#FFFFFF}
.vx-hover .vx-ring{border-color:rgba(36,80,214,.6)}
.vx-view .vx-ring{background:#2450D6}

/* cabecera sobre el cierre oscuro */
.top.on-dark .nav a.on::after{background:#6EA8FF}

/* el equipo queda de último: transición suave desde el cierre oscuro */
.team-track{background:#D6D6D4}

/* el cierre conserva su propio fondo oscuro (sus capas de luz pasan a azul) */
.svc--light .svc-outro .svc-bg{background:none}
.svc--light .svc-outro .svc-bg .glow{opacity:0}
.svc--light .svc-outro .svc-bg .drift{background:radial-gradient(circle, rgba(47,91,234,.12), transparent 62%)}

/* datos de contacto bajo el botón final */
.svc-outro .svc-contact{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px; margin-top:clamp(26px,4vh,40px); font-size:12px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--s-gray)}
.svc-contact a{color:var(--s-warm); text-transform:none; letter-spacing:.04em; font-size:15px; border-bottom:1px solid rgba(110,168,255,.4); padding-bottom:2px; margin-left:8px; transition:border-color .25s ease, color .25s ease}
.svc-contact a:hover, .svc-contact a:focus-visible{color:#6EA8FF; border-color:#6EA8FF}
.svc-contact .sep{width:4px; height:4px; border-radius:50%; background:rgba(110,168,255,.6)}
.svc-contact .it{white-space:nowrap}
@media (max-width:560px){ .svc-contact{flex-direction:column; gap:14px} .svc-contact .sep{display:none} }