/*
 * Autor: Sergio Martinez de Unlockers Cloud | URL: https://1lockers.net
 * Home v3 «dinámica»: capa visual (hero con red de datos, sello, ticker, servicios en scroll
 * horizontal, frase central, pasos). Todo se ve bien sin JavaScript; html.motion activa los efectos.
 */
.v3 { --esm-o: #4CC79A; --acc-o: #8EA8FF; }

/* ---------- Hero ---------- */
.v3-hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(92vh, 860px); display: flex; align-items: center;
    background: radial-gradient(900px 520px at 78% 40%, #133159 0%, rgba(11,31,58,0) 70%), radial-gradient(700px 420px at 10% 110%, #0F3A2E 0%, rgba(11,31,58,0) 70%), #0B1F3A; }
.v3-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.v3-beam { position: absolute; top: -30%; left: -40%; width: 45%; height: 160%; z-index: -1; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(76,199,154,.06) 45%, rgba(142,168,255,.12) 50%, rgba(76,199,154,.06) 55%, transparent 100%); transform: rotate(14deg); }
html.motion .v3-beam { animation: v3beam 9s ease-in-out 1.6s infinite; }
@keyframes v3beam { 0% { left: -45%; opacity: 0 } 10% { opacity: 1 } 55% { opacity: 1 } 70% { left: 110%; opacity: 0 } 100% { left: 110%; opacity: 0 } }
.v3-hero__in { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 980px) { .v3-hero__in { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 56px; } }
.v3-hero__copy { display: flex; flex-direction: column; gap: 24px; max-width: 660px; }
.v3-h1 { margin: 0; font-family: 'Archivo', Arial, sans-serif; font-stretch: 112%; font-weight: 700; font-size: clamp(34px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.015em; color: #F5F7F4; }
.v3-h1 em { font-style: normal; color: #4CC79A; }
.v3-h1 .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.v3-h1 .wd > span { display: inline-block; will-change: transform; }
.v3-lead { margin: 0; font-size: 18px; line-height: 28px; color: #C9D2CE; max-width: 560px; }
.v3-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.v3-meta { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: #A3B1AC; }
.v3-meta b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; color: #F5F7F4; font-size: 16px; margin-right: 4px; }
.v3-meta a { color: inherit !important; }

/* Sello: emblema real + marco hexagonal técnico + anillos que giran */
.v3-seal { position: relative; width: min(460px, 80vw); aspect-ratio: 1; justify-self: center; }
@media (max-width: 980px) { .v3-seal { width: min(280px, 72vw); order: -1; margin: 0 auto -8px; } }
.v3-seal__glow { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(76,199,154,.30) 0%, rgba(76,199,154,.10) 40%, rgba(11,31,58,0) 70%); filter: blur(6px); }
.v3-seal__layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v3-seal__frame { filter: drop-shadow(0 0 10px rgba(76,199,154,.28)); }
.v3-seal__scan { filter: drop-shadow(0 0 8px rgba(142,168,255,.9)); }
html.motion .v3-seal__ring-a { animation: v3rot 38s linear infinite; }
html.motion .v3-seal__ring-b { animation: v3rot 70s linear infinite reverse; }
html.motion .v3-seal__scan { animation: v3rot 6s linear infinite; }
@keyframes v3rot { to { transform: rotate(360deg); } }
.v3-seal__emblem { position: absolute; left: 29%; top: 32.3%; width: 42%; height: auto; filter: drop-shadow(0 8px 30px rgba(0,148,59,.35)); }
.v3-seal__tag { position: absolute; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: #A3B1AC; white-space: nowrap; }
.v3-seal__tag--t { left: 50%; top: 9.5%; transform: translateX(-50%); color: #4CC79A; }
.v3-seal__tag--b { left: 50%; bottom: 9.5%; transform: translateX(-50%); }
.v3-seal__tag--l { left: 0; top: 50%; transform: translate(-30%, -170%); }
.v3-seal__tag--r { right: 0; top: 50%; transform: translate(20%, 130%); color: #8EA8FF; }
@media (max-width: 980px) { .v3-seal__tag { font-size: 9px; } }
.v3-node { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: #4CC79A; box-shadow: 0 0 14px #4CC79A; }
.v3-node--a { left: 10%; top: 26%; } .v3-node--b { right: 9%; top: 70%; background: #8EA8FF; box-shadow: 0 0 14px #8EA8FF; } .v3-node--c { left: 30%; bottom: 8%; width: 5px; height: 5px; }
html.motion .v3-node { animation: v3blink 2.6s ease-in-out infinite; } .v3-node--b { animation-delay: .9s !important; } .v3-node--c { animation-delay: 1.7s !important; }
@keyframes v3blink { 50% { opacity: .25; transform: scale(.7); } }

/* ---------- Ticker ---------- */
.v3-ticker { background: #0A1524; border-block: 1px solid #1C3150; overflow: hidden; padding: 22px 0; position: relative; }
.v3-ticker::before, .v3-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 1; pointer-events: none; }
.v3-ticker::before { left: 0; background: linear-gradient(90deg, #0A1524, transparent); }
.v3-ticker::after { right: 0; background: linear-gradient(270deg, #0A1524, transparent); }
.v3-ticker__track { display: flex; align-items: center; gap: 36px; width: max-content; font-family: 'Archivo', Arial, sans-serif; font-stretch: 112%; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; color: #4CC79A; white-space: nowrap; }
.v3-ticker__track i { width: 10px; height: 10px; transform: rotate(45deg); background: #8EA8FF; flex: none; }
.v3-ticker__track span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1px rgba(232,238,234,.7); }
html:not(.motion) .v3-ticker__track { animation: v3tick 50s linear infinite; }
@keyframes v3tick { to { transform: translateX(-50%); } }

/* ---------- Servicios ---------- */
.v3-svc-section { padding: 96px 0 80px; background: #F5F7F4; }
.v3-head { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: 40px; }
.v3-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.v3-svc { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 8px; background: #FFFFFF; border: 1px solid #D5DCD6;
    color: #0B1F3A !important; text-decoration: none; transform-style: preserve-3d; transition: border-color .2s ease; min-height: 330px; }
.v3-svc:hover { border-color: #0B5A43; }
.v3-svc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(76,199,154,.14), transparent 45%); }
.v3-svc:hover::after { opacity: 1; }
.v3-art { width: 100%; height: auto; max-height: 104px; color: #0B1F3A; margin: 0 0 14px; overflow: visible; }
.v3-art .ac { color: #0B5A43; stroke: #0B5A43; }
.v3-svc__t { margin: 0; font-family: 'Archivo', Arial, sans-serif; font-stretch: 112%; font-weight: 600; font-size: 22px; line-height: 28px; }
.v3-svc__d { margin: 0; font-size: 15px; line-height: 22px; color: #4A5853; }
.v3-svc__p { margin-top: auto; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; font-weight: 500; color: #0B1F3A; }
.v3-svc__c { font-size: 15px; font-weight: 600; color: #1E40AF; }
.v3-svc-progress { display: none; height: 2px; background: #D5DCD6; margin-top: 32px; overflow: hidden; }
.v3-svc-progress span { display: block; height: 100%; width: 100%; background: #0B5A43; transform-origin: left; transform: scaleX(0); }
.v3-unsure { margin-top: 28px; }

html.motion .v3-svc-section.h-scroll { padding: 64px 0 56px; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
html.motion .v3-svc-section.h-scroll .v3-svc-wrap { width: 100%; max-width: none; padding-left: max(48px, calc((100vw - 1280px) / 2 + 48px)); }
html.motion .v3-svc-section.h-scroll .v3-head { margin-bottom: 32px; }
html.motion .v3-svc-section.h-scroll .v3-services { display: flex; gap: 20px; width: max-content; padding-right: max(48px, calc((100vw - 1280px) / 2 + 48px)); }
html.motion .v3-svc-section.h-scroll .v3-svc { width: min(360px, 30vw); flex: none; }
html.motion .v3-svc-section.h-scroll .v3-svc-progress { display: block; max-width: 1184px; }

/* Servicios en celular: carrusel deslizable con imán */
@media (max-width: 1023px) {
  .v3-services { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -16px; padding: 4px 16px 8px; scroll-padding-left: 16px; }
  .v3-services::-webkit-scrollbar { display: none; }
  .v3-svc { flex: 0 0 82%; scroll-snap-align: start; min-height: 0; }
  .v3-svc-progress { display: block; margin-top: 18px; }
  .v3-svc-section { padding: 56px 0 48px; }
  .v3-head { margin-bottom: 24px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .v3-svc { flex-basis: 46%; } }

/* ---------- Frase central ---------- */
.v3-statement { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 150px 0 160px; background: radial-gradient(900px 500px at 50% 100%, #133159 0%, rgba(11,31,58,0) 70%), #0A1524; }
.v3-statement__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .72; }
.v3-statement::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at center, rgba(10,21,36,.62) 0%, rgba(10,21,36,.25) 70%, rgba(10,21,36,.55) 100%); }
.v3-circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .35; }
.v3-statement__in { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.v3-st-text { margin: 0; font-family: 'Archivo', Arial, sans-serif; font-stretch: 125%; font-weight: 800; font-size: clamp(48px, 9vw, 136px); line-height: .98; letter-spacing: -.025em; color: #F5F7F4; max-width: 1100px; }
.v3-st-text .sw { display: inline-block; transition: color .2s, text-shadow .3s; }
html.motion .v3-st-text.st-armed .sw { color: rgba(232,238,234,.24); }
.v3-st-text, .v3-st-sub { text-shadow: 0 2px 24px rgba(5,13,25,.85); }
html.motion .v3-st-text .sw.lit { color: #F5F7F4; }
html.motion .v3-st-text .sw.hot, .v3-st-text .sw.hot { color: #4CC79A; text-shadow: 0 0 40px rgba(76,199,154,.45); }
.v3-st-sub { margin: 0; max-width: 640px; font-size: 18px; line-height: 28px; color: #C9D2CE; }
@media (max-width: 680px) { .v3-statement { padding: 96px 0 110px; } }

/* ---------- Por qué ---------- */
.v3-why__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .v3-why__grid { grid-template-columns: 1fr; gap: 32px; } }
.v3-why__intro { display: flex; flex-direction: column; gap: 16px; }
.v3-shield { width: 84px; height: auto; }
.v3-why__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.v3-why__item { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid #D5DCD6; }
.v3-why__item:last-child { border-bottom: 1px solid #D5DCD6; }
.v3-why__t { display: block; font-weight: 600; font-size: 17px; line-height: 24px; margin-bottom: 2px; }

/* ---------- Pasos ---------- */
.v3-steps { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .v3-steps { grid-template-columns: 1fr; } }
.v3-steps__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #D5DCD6; }
.v3-steps__line span { display: block; height: 100%; background: #0B5A43; transform-origin: left; }

.v3-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 36px; }
.v3-step::before { content: ""; position: absolute; top: -6px; left: 0; width: 14px; height: 14px; border-radius: 2px; background: #FFFFFF; border: 2px solid #0B5A43; transform: rotate(45deg); }
.v3-step__n { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; color: #0B5A43; font-weight: 500; }
.v3-step__t { font-weight: 600; font-size: 18px; line-height: 26px; }

/* ---------- Cursor ---------- */
.v3-cursor { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: 40;
    background: radial-gradient(circle, rgba(76,199,154,.16) 0%, rgba(142,168,255,.06) 40%, transparent 70%); opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen; display: none; }
html.motion.fine .v3-cursor { display: block; }

@media (prefers-reduced-motion: reduce) {
    .v3-seal__layer, .v3-beam, .v3-ring, .v3-node, .v3-ticker__track { animation: none !important; }
    .v3-cursor { display: none !important; }
    .v3-statement__video { display: none; }
}

/* Pasos en celular: línea vertical a la izquierda (va al final para ganar a las reglas base) */
@media (max-width: 900px) {
  .v3-steps { gap: 0; padding-left: 36px; }
  .v3-steps__line { display: block; left: 5px; right: auto; top: 6px; bottom: 30px; width: 2px; height: auto; }
  .v3-steps__line span { height: 100%; width: 100%; transform-origin: top center; }
  .v3-step { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 6px; padding: 0 0 30px 0; }
  .v3-step:last-child { padding-bottom: 0; }
  .v3-step::before { top: 5px; left: -36px; width: 12px; height: 12px; }
  .v3-step__n { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 24px; }
  .v3-step__t { grid-column: 2; grid-row: 1; font-size: 17px; line-height: 24px; }
  .v3-step > .v2-p { grid-column: 2; }
}