/* ============================================================
   SAID VALSECA — Sci-fi HUD personal site (v2)
   Juegos = naranja · TI = azul
   ============================================================ */

:root{
  --bg:        #04060b;
  --bg-2:      #060a12;
  --panel:     rgba(8,13,24,.72);
  --line:      rgba(120,160,220,.16);
  --text:      #dfe7f2;
  --muted:     #93a4bc;
  --blue:      #4da3ff;
  --orange:    #ff8c2e;
  --purple:    #a78bfa;
  --f-display: 'Michroma', sans-serif;
  --f-title:   'Orbitron', 'Michroma', sans-serif;
  --f-ui:      'Rajdhani', sans-serif;
  --f-mono:    'Share Tech Mono', monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-ui);
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.c-blue{ color:var(--blue); }
.c-orange{ color:var(--orange); }
.c-purple{ color:var(--purple); }

.container{ width:min(1280px,93%); margin:0 auto; }

/* recorte de esquinas estilo HUD */
.notch, .hc-inner, .hud-inner, .aq-inner, .cc-inner{
  clip-path:polygon(
    var(--n,14px) 0, calc(100% - var(--n,14px)) 0, 100% var(--n,14px),
    100% calc(100% - var(--n,14px)), calc(100% - var(--n,14px)) 100%, var(--n,14px) 100%,
    0 calc(100% - var(--n,14px)), 0 var(--n,14px)
  );
}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; align-items:start; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; }
.preloader-inner{ text-align:center; }
.preloader-logo{
  font-family:var(--f-display); font-size:2.6rem;
  color:var(--text); letter-spacing:.1em;
  text-shadow:0 0 30px rgba(77,163,255,.6);
  animation:pulse 1.4s ease-in-out infinite;
}
.preloader-bar{
  width:220px; height:2px; margin:22px auto 14px;
  background:rgba(120,160,220,.15); overflow:hidden;
}
.preloader-bar span{
  display:block; height:100%; width:40%;
  background:linear-gradient(90deg,var(--orange),var(--blue));
  animation:loadbar 1.1s ease-in-out infinite;
}
.preloader-text{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.35em;
  color:var(--muted);
}
@keyframes loadbar{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(560px);} }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} }

/* ============ NAVBAR ============ */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg,rgba(4,6,11,.94),rgba(4,6,11,.6));
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .4s, background .4s;
}
.navbar.scrolled{ background:rgba(4,6,11,.92); border-bottom-color:var(--line); }
.nav-inner{
  width:min(1440px,94%); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.nav-brand{ display:flex; align-items:center; gap:14px; }
.nav-logo{
  font-family:var(--f-display); font-size:.92rem; letter-spacing:.02em;
  text-shadow:0 0 18px rgba(77,163,255,.5);
}
.nav-name{ font-weight:600; font-size:.84rem; letter-spacing:.35em; }
.nav-links{ display:flex; gap:6px; }
.nav-link{
  position:relative;
  font-weight:600; font-size:.9rem; letter-spacing:.24em; color:var(--muted);
  padding:10px 15px;
  transition:color .25s;
}
.nav-link::after{
  content:''; position:absolute; left:15px; right:15px; bottom:3px;
  height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav-link:hover, .nav-link.active{ color:var(--text); }
.nav-link.active::after, .nav-link:hover::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:1px solid var(--line);
  padding:11px 10px; cursor:pointer;
}
.nav-toggle span{ width:22px; height:2px; background:var(--text); transition:transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:100px 0 30px;
  overflow:hidden;
  background:var(--bg);
}

/* imágenes laterales con difuminado hacia el centro */
.hero-img{
  position:absolute; top:0; bottom:0; width:46%;
  z-index:0; overflow:hidden;
}
.hero-img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  will-change:transform;
}
.hero-img-left{
  left:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 97%);
  mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 97%);
}
.hero-img-right{
  right:0;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 30%,transparent 97%);
  mask-image:linear-gradient(270deg,#000 0%,#000 30%,transparent 97%);
}
.hero-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,11,.8) 0%, rgba(4,6,11,.15) 25%, rgba(4,6,11,.15) 65%, rgba(4,6,11,.92) 100%);
}
.hero-img-tint{ position:absolute; inset:0; mix-blend-mode:overlay; opacity:.45; }
.tint-orange{ background:linear-gradient(90deg, rgba(255,140,46,.55), transparent 72%); }
.tint-blue{ background:linear-gradient(270deg, rgba(77,163,255,.55), transparent 72%); }

/* marco fino */
.hero-frame{ position:absolute; inset:18px; z-index:1; pointer-events:none; }
.hf{ position:absolute; width:56px; height:56px; border:1px solid rgba(140,175,225,.35); }
.hf.tl{ top:0; left:0; border-right:0; border-bottom:0; }
.hf.tr{ top:0; right:0; border-left:0; border-bottom:0; }
.hf.bl{ bottom:0; left:0; border-right:0; border-top:0; }
.hf.br{ bottom:0; right:0; border-left:0; border-top:0; }
.hf-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--orange); font-size:.9rem; opacity:.9;
}
.hf-arrow.left{ left:2px; }
.hf-arrow.right{ right:2px; }

.hero-content{
  position:relative; z-index:2;
  width:min(1300px,94%);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.hero-eyebrow{
  position:relative;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center;
  font-weight:600; font-size:.8rem; letter-spacing:.3em;
  padding:12px 34px;
  margin-bottom:20px;
}
.eb-corner{ position:absolute; top:0; bottom:0; width:16px; }
.eb-corner.l{ left:0; border-left:1px solid rgba(140,175,225,.5); border-top:1px solid rgba(140,175,225,.5); border-bottom:1px solid rgba(140,175,225,.5); }
.eb-corner.r{ right:0; border-right:1px solid rgba(140,175,225,.5); border-top:1px solid rgba(140,175,225,.5); border-bottom:1px solid rgba(140,175,225,.5); }
.hero-eyebrow .dot{ width:4px; height:4px; border-radius:50%; background:var(--blue); opacity:.85; }

/* ===== EL NOMBRE — ahora usando imagen personalizada ===== */
.hero-title{
  width:min(86vw, 780px);
  margin:0;
  line-height:0;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.52));
}
.hero-name-img{
  display:block;
  width:100%;
  height:auto;
}
.hero-title-line{ display:block; }

.hero-sub{
  margin-top:24px;
  font-weight:500; font-size:clamp(.85rem,1.5vw,1.08rem);
  letter-spacing:.3em; color:#c3cfdf;
}

/* divisor con muesca central */
.hero-divider{ display:flex; align-items:flex-start; margin:26px 0 32px; }
.hd-line{ width:150px; height:1px; margin-top:0; }
.hd-line.l{ background:linear-gradient(90deg,transparent,rgba(255,140,46,.9)); }
.hd-line.r{ background:linear-gradient(270deg,transparent,rgba(255,140,46,.9)); }
.hd-notch{
  width:56px; height:14px; margin:0 -1px;
  border:1px solid rgba(255,140,46,.9); border-top:0;
  clip-path:polygon(0 0, 100% 0, 78% 100%, 22% 100%);
  background:transparent;
}

/* tarjetas con borde segmentado, muy delgado y fondo translúcido */
.hero-cards{
  display:grid; grid-template-columns:repeat(2, minmax(300px, 360px));
  gap:38px; justify-content:center;
}
.hero-card{
  --cut:18px;
  --frame-color: rgba(77,163,255,.88);
  --frame-soft: rgba(77,163,255,.22);
  position:relative;
  display:block;
  padding:0;
  background:none;
  overflow:hidden;
  isolation:isolate;
  z-index:0;
  clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition:transform .32s ease, filter .32s ease, opacity .32s ease;
}
.hero-card:hover{ transform:translateY(-5px) scale(1.01); }
.hero-card::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  clip-path:inherit;
  background:
    linear-gradient(var(--frame-color),var(--frame-color)) left 22px top 0 / 82px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 22px top 0 / 82px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 0 top 22px / 1px 48px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 0 bottom 22px / 1px 48px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 22px bottom 0 / 82px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) left 22px bottom 0 / 82px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) left 0 bottom 22px / 1px 48px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) left 0 top 22px / 1px 48px no-repeat,
    linear-gradient(135deg, transparent 46%, var(--frame-color) 47%, var(--frame-color) 53%, transparent 54%) left top / 22px 22px no-repeat,
    linear-gradient(225deg, transparent 46%, var(--frame-color) 47%, var(--frame-color) 53%, transparent 54%) right top / 22px 22px no-repeat,
    linear-gradient(315deg, transparent 46%, var(--frame-color) 47%, var(--frame-color) 53%, transparent 54%) right bottom / 22px 22px no-repeat,
    linear-gradient(45deg, transparent 46%, var(--frame-color) 47%, var(--frame-color) 53%, transparent 54%) left bottom / 22px 22px no-repeat,
    linear-gradient(var(--frame-soft),var(--frame-soft)) center top 0 / calc(100% - 188px) 1px no-repeat,
    linear-gradient(var(--frame-soft),var(--frame-soft)) center bottom 0 / calc(100% - 188px) 1px no-repeat;
  opacity:.84;
  transition:opacity .28s ease, filter .28s ease, transform .28s ease;
  pointer-events:none;
}
.hero-card::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  clip-path:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 28%, rgba(255,255,255,.015) 72%, rgba(255,255,255,.02));
  opacity:.55;
  pointer-events:none;
  transition:opacity .28s ease;
}
.card-orange{
  color:var(--orange);
  --frame-color: rgba(255,140,46,.9);
  --frame-soft: rgba(255,140,46,.24);
}
.card-orange:hover{ filter:drop-shadow(0 0 18px rgba(255,140,46,.16)) brightness(1.08); }
.card-blue{
  color:var(--blue);
  --frame-color: rgba(77,163,255,.9);
  --frame-soft: rgba(77,163,255,.24);
}
.card-blue:hover{ filter:drop-shadow(0 0 18px rgba(77,163,255,.16)) brightness(1.08); }
.hc-inner{
  position:relative; z-index:1;
  --cut:17px;
  display:flex; flex-direction:column; align-items:center;
  padding:34px 30px 28px;
  clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background:linear-gradient(180deg, rgba(10,15,28,.12), rgba(6,10,18,.06));
  backdrop-filter:blur(5px);
  text-align:center;
  transition:background .28s ease, transform .28s ease;
}
.hc-inner::before{
  content:'';
  position:absolute; left:54px; right:54px; bottom:53px; height:1px;
  background:linear-gradient(90deg, transparent, currentColor 18%, currentColor 82%, transparent);
  opacity:.16;
}
.hero-card-head{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:16px;
}
.hc-icon{ width:42px; height:42px; flex:none; filter:drop-shadow(0 0 9px currentColor); transition:transform .28s ease, filter .28s ease, opacity .28s ease; }
.hc-title{ text-align:left; min-width:220px; }
.hc-title span{
  display:block; font-weight:600; font-size:.78rem; letter-spacing:.36em; color:var(--text);
}
.hc-title strong{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:1.28rem; letter-spacing:.045em; line-height:1.12; min-height:1.2em;
  white-space:nowrap; margin-top:4px;
  transition:text-shadow .28s ease, transform .28s ease;
}
.hc-desc{
  font-size:.84rem; font-weight:500; letter-spacing:.16em;
  color:var(--muted); margin-bottom:16px;
}
.hc-cta{ font-weight:700; font-size:.85rem; letter-spacing:.3em; transition:letter-spacing .28s ease, transform .28s ease, opacity .28s ease; }
.hero-card:hover .hc-cta{ letter-spacing:.38em; transform:translateY(-1px); opacity:1; }
.hero-card:hover::before{ opacity:1; }
.hero-card:hover::after{ opacity:.82; }
.hero-card:hover .hc-inner{ background:linear-gradient(180deg, rgba(16,23,39,.28), rgba(8,13,24,.12)); transform:translateY(-1px); }
.hero-card:hover .hc-icon{ transform:translateY(-2px) scale(1.05); filter:drop-shadow(0 0 13px currentColor); }
.hero-card:hover .hc-title strong{ transform:translateX(1px); text-shadow:0 0 12px currentColor; }

/* HUD laterales — más discretos, transparentes y con borde segmentado */
.hud-tag{
  --cut:14px;
  --frame-color: rgba(77,163,255,.72);
  --frame-soft: rgba(77,163,255,.18);
  position:absolute; top:auto; bottom:-8px;
  width:204px; padding:0;
  opacity:.82;
  background:none;
  text-align:left;
  transition:opacity .25s ease, transform .25s ease, filter .25s ease;
}
.hud-tag:hover{ opacity:.95; transform:translateY(-2px); }
.hud-tag::before{
  content:'';
  position:absolute; inset:0;
  clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background:
    linear-gradient(var(--frame-color),var(--frame-color)) left 16px top 0 / 52px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 16px top 0 / 52px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 0 top 16px / 1px 34px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 0 bottom 16px / 1px 34px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) right 16px bottom 0 / 52px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) left 16px bottom 0 / 52px 1px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) left 0 bottom 16px / 1px 34px no-repeat,
    linear-gradient(var(--frame-color),var(--frame-color)) left 0 top 16px / 1px 34px no-repeat,
    linear-gradient(135deg, transparent 45%, var(--frame-color) 46%, var(--frame-color) 54%, transparent 55%) left top / 16px 16px no-repeat,
    linear-gradient(225deg, transparent 45%, var(--frame-color) 46%, var(--frame-color) 54%, transparent 55%) right top / 16px 16px no-repeat,
    linear-gradient(315deg, transparent 45%, var(--frame-color) 46%, var(--frame-color) 54%, transparent 55%) right bottom / 16px 16px no-repeat,
    linear-gradient(45deg, transparent 45%, var(--frame-color) 46%, var(--frame-color) 54%, transparent 55%) left bottom / 16px 16px no-repeat,
    linear-gradient(var(--frame-soft),var(--frame-soft)) center top 0 / calc(100% - 132px) 1px no-repeat,
    linear-gradient(var(--frame-soft),var(--frame-soft)) center bottom 0 / calc(100% - 132px) 1px no-repeat;
  pointer-events:none;
}
.hud-tag::after{
  content:'';
  position:absolute; inset:10px;
  clip-path:inherit;
  border:1px solid rgba(255,255,255,.02);
  opacity:.32;
  pointer-events:none;
}
.hud-left{
  left:4px;
  color:var(--orange);
  --frame-color: rgba(255,140,46,.78);
  --frame-soft: rgba(255,140,46,.18);
}
.hud-right{
  right:4px;
  color:var(--blue);
  --frame-color: rgba(77,163,255,.78);
  --frame-soft: rgba(77,163,255,.18);
}
.hud-inner{
  position:relative;
  --cut:13px;
  padding:13px 15px 12px;
  clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background:rgba(6,10,18,.12);
  backdrop-filter:blur(2px);
}
.hud-inner::before{
  content:'';
  position:absolute; left:14px; right:14px; top:34px; height:1px;
  background:linear-gradient(90deg, transparent, currentColor 24%, currentColor 76%, transparent);
  opacity:.18;
}
.hud-tag-title{ font-weight:700; font-size:.68rem; letter-spacing:.16em; margin-bottom:10px; }
.hud-tag ul li{
  font-size:.64rem; font-weight:500; letter-spacing:.14em;
  color:rgba(147,164,188,.82); padding:2px 0;
}

/* stats hero */
.hero-stats{
  position:relative; z-index:2;
  width:min(1280px,93%);
  margin-top:42px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:20px 8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hstat{ display:flex; align-items:center; gap:15px; justify-content:center; }
.hstat svg{ width:33px; height:33px; flex:none; color:#e8eef7; opacity:.92; }
.hstat strong{
  display:block; font-weight:700; font-size:.95rem; letter-spacing:.18em;
}
.hstat span{
  display:block; font-size:.7rem; font-weight:500;
  letter-spacing:.08em; color:var(--muted); line-height:1.5;
}

.hero-scroll{
  position:relative; z-index:2;
  margin-top:24px;
  display:flex; align-items:center; gap:16px;
  font-weight:600; font-size:.76rem; letter-spacing:.32em; color:var(--muted);
  transition:color .3s;
}
.hero-scroll:hover{ color:var(--orange); }
.hs-wing{ width:90px; height:10px; position:relative; }
.hs-wing::before{
  content:''; position:absolute; top:50%; left:0; right:0; height:1px;
  background:rgba(140,175,225,.35);
}
.hs-wing.l::after, .hs-wing.r::after{
  content:''; position:absolute; top:0; width:10px; height:10px;
  border-top:1px solid rgba(140,175,225,.55);
}
.hs-wing.l::after{ left:0; border-left:1px solid rgba(140,175,225,.55); transform:rotate(-45deg); }
.hs-wing.r::after{ right:0; border-right:1px solid rgba(140,175,225,.55); transform:rotate(45deg); }
.mouse{
  width:19px; height:31px; border:1.5px solid var(--orange); border-radius:11px;
  display:flex; justify-content:center; padding-top:6px; flex:none;
}
.wheel{
  width:3px; height:7px; border-radius:2px; background:var(--orange);
  animation:wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{
  0%,100%{ transform:translateY(0); opacity:1; }
  50%{ transform:translateY(8px); opacity:.2; }
}

/* ============ SECCIONES ============ */
.section{ position:relative; padding:90px 0; }
.sec-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:700; font-size:.82rem; letter-spacing:.34em;
  margin-bottom:16px;
}
.sec-eyebrow::after{
  content:''; width:70px; height:1px; background:currentColor; opacity:.55;
}

/* ============ SOBRE MÍ ============ */
.sec-about{ background:var(--bg); }
.about-frame{
  position:relative;
  border:0;
  padding:18px 10px 24px;
  background:none;
}
.about-index{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.28em; color:var(--blue);
  margin-bottom:18px;
}
.about-index::before{
  content:''; flex:1; max-width:320px; height:1px;
  background:linear-gradient(90deg,transparent,var(--blue));
}

.about-grid{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 292px;
  gap:15px;
  align-items:start;
}

.about-photo{ position:relative; }
.about-circle{
  position:absolute; top:-2%; left:-8%; right:-8%;
  z-index:0; opacity:.85;
  animation:spin-slow 70s linear infinite;
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
.about-me{
  position:relative; z-index:1;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.56));
  -webkit-mask-image:linear-gradient(180deg,#000 80%, transparent 99%);
  mask-image:linear-gradient(180deg,#000 80%, transparent 99%);
}
.about-nameplate{
  position:relative; z-index:2;
  margin-top:-22px;
  max-width:255px;
  padding:12px 18px;
  background:rgba(6,10,18,.9); backdrop-filter:blur(6px);
  border:1px solid rgba(77,163,255,.35);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.about-nameplate strong{
  display:block; font-weight:700; font-size:.95rem; letter-spacing:.22em; margin-bottom:5px;
}
.about-nameplate span{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.18em; color:var(--muted); line-height:1.6;
}
.np-accent{
  position:absolute; left:0; bottom:0; width:64px; height:2px;
  background:linear-gradient(90deg,var(--orange),transparent);
}

.about-text h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.2rem,2vw,1.62rem);
  letter-spacing:.05em; line-height:1.4;
  color:#eef3fa;
  margin-bottom:22px;
}
.about-paras p{ color:var(--muted); margin-bottom:10px; font-size:.94rem; line-height:1.78; }
.about-paras strong{ font-weight:700; }

/* stats bajo el texto */
.about-stats{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:rgba(8,13,24,.55);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.astat{ text-align:center; padding:16px 10px 14px; }
.astat + .astat{ border-left:1px solid var(--line); }
.astat strong{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.6rem); letter-spacing:.04em; margin-bottom:7px;
}
.astat strong.astat-word{ font-size:clamp(1rem,1.6vw,1.3rem); }
.astat span{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  color:var(--muted); line-height:1.55;
}
.astat em{
  display:block; font-style:normal; font-size:.66rem; font-weight:600;
  letter-spacing:.16em; color:var(--muted); order:-1;
}

.about-define{ display:flex; flex-direction:column; gap:12px; }
.define-title{
  font-weight:700; font-size:.78rem; letter-spacing:.28em; color:var(--blue);
  margin-bottom:0;
}
.define-item{ display:flex; gap:12px; align-items:flex-start; }
.define-icon{
  flex:none; width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid rgba(77,163,255,.4); color:var(--blue);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:rgba(77,163,255,.06);
}
.define-icon svg{ width:21px; height:21px; }
.define-item strong{ display:block; font-weight:700; font-size:.84rem; letter-spacing:.2em; margin-bottom:3px; }
.define-item p{ font-size:.84rem; color:var(--muted); line-height:1.55; }

.about-quote{
  --n:14px;
  margin-top:10px; padding:1px;
  clip-path:polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n));
  background:linear-gradient(135deg, rgba(77,163,255,.7), rgba(77,163,255,.18) 40%, rgba(77,163,255,.18) 60%, rgba(77,163,255,.7));
}
.aq-inner{
  --n:13px;
  display:block; padding:18px 18px 16px;
  background:rgba(7,12,22,.94);
  font-size:.93rem; color:var(--text);
}
.quote-mark{
  display:block; font-family:var(--f-display); font-size:1.6rem;
  color:var(--blue); line-height:.8; margin-bottom:10px;
}

/* mi camino */
.camino{ margin-top:34px; }
.camino-title{
  display:flex; align-items:center; gap:20px;
  font-weight:700; font-size:.84rem; letter-spacing:.3em; color:var(--blue);
  margin-bottom:24px;
}
.camino-line{ flex:1; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
.camino-track{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.camino-track::before{
  content:''; position:absolute; top:34px; left:7%; right:7%;
  height:1px; background:linear-gradient(90deg,transparent,rgba(77,163,255,.45) 12%,rgba(77,163,255,.45) 88%,transparent);
}
.camino-item{ position:relative; text-align:center; }
.camino-item::before{
  /* punto sobre la línea entre hexágonos */
  content:''; position:absolute; top:31px; right:-14px;
  width:7px; height:7px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 8px var(--blue);
}
.camino-item:last-child::before{ display:none; }
.hexa{
  width:62px; height:62px; margin:0 auto 14px;
  display:grid; place-items:center;
  background:var(--bg);
  border:1px solid rgba(77,163,255,.5); color:var(--blue);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition:box-shadow .3s, transform .3s;
}
.camino-item:hover .hexa{ transform:translateY(-4px); box-shadow:0 0 22px rgba(77,163,255,.35); }
.hexa svg{ width:26px; height:26px; }
.camino-item strong{
  display:block; font-weight:700; font-size:.83rem; letter-spacing:.22em; margin-bottom:7px;
}
.camino-item p{ font-size:.78rem; color:var(--muted); line-height:1.55; }

/* tecnologías */
.tech-bar{
  margin-top:26px;
  display:flex; align-items:center; gap:18px;
  padding:16px 22px;
  border:1px solid var(--line);
  background:rgba(8,13,24,.55);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.tech-label{
  flex:none;
  font-weight:700; font-size:.7rem; letter-spacing:.2em;
  color:var(--blue); line-height:1.7;
  padding-right:30px; border-right:1px solid var(--line);
}
.tech-list{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.tech-logo{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#b8c9df;
  opacity:.92;
  transition:transform .25s ease, color .25s ease, text-shadow .25s ease, opacity .25s ease;
  cursor:default;
}
.tech-logo i{
  font-size:1.9rem; line-height:1;
}
.tech-logo[title="AWS"] i{
  font-size:2.2rem;
}
.tech-logo:hover{
  color:var(--text);
  opacity:1;
  transform:translateY(-2px);
  text-shadow:0 0 14px rgba(77,163,255,.7);
}

/* ============ CONTACTO ============ */
.sec-contact{
  overflow:hidden;
  background:var(--bg-2);
  padding-bottom:56px;
}
.contact-world{
  position:absolute; top:-4%; right:-10%; width:min(56vw,820px);
  z-index:0; pointer-events:none;
}
.contact-world img{
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 58% 45%, #000 48%, transparent 80%);
  mask-image:radial-gradient(ellipse 72% 72% at 58% 45%, #000 48%, transparent 80%);
}
.contact-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.55fr 1fr; gap:70px;
}
.contact-left h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,3.1vw,2.35rem);
  letter-spacing:.05em; line-height:1.3; color:#eef3fa;
}
.contact-intro{ margin:24px 0 40px; color:var(--muted); font-size:1.02rem; }

.contact-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px;
}
.ccard{
  --n:15px;
  position:relative; display:block; padding:1px;
  clip-path:polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n));
  transition:transform .35s, filter .35s;
}
.ccard:hover{ transform:translateY(-6px); }
.ccard-orange{ color:var(--orange); background:linear-gradient(135deg, rgba(255,140,46,.85), rgba(255,140,46,.2) 35%, rgba(255,140,46,.2) 65%, rgba(255,140,46,.85)); }
.ccard-orange:hover{ filter:drop-shadow(0 0 18px rgba(255,140,46,.3)); }
.ccard-blue{ color:var(--blue); background:linear-gradient(135deg, rgba(77,163,255,.85), rgba(77,163,255,.2) 35%, rgba(77,163,255,.2) 65%, rgba(77,163,255,.85)); }
.ccard-blue:hover{ filter:drop-shadow(0 0 18px rgba(77,163,255,.3)); }
.ccard-purple{ color:var(--purple); background:linear-gradient(135deg, rgba(167,139,250,.85), rgba(167,139,250,.2) 35%, rgba(167,139,250,.2) 65%, rgba(167,139,250,.85)); }
.ccard-purple:hover{ filter:drop-shadow(0 0 18px rgba(167,139,250,.3)); }
.ccard-neutral{ color:#c7d3e5; background:linear-gradient(135deg, rgba(199,211,229,.7), rgba(199,211,229,.18) 35%, rgba(199,211,229,.18) 65%, rgba(199,211,229,.7)); }
.ccard-neutral:hover{ filter:drop-shadow(0 0 18px rgba(199,211,229,.2)); }
.cc-inner{
  --n:14px;
  display:block; padding:28px 26px 24px;
  background:rgba(6,10,18,.92); backdrop-filter:blur(4px);
}
.ccard-icon{
  display:grid; place-items:center;
  width:54px; height:54px; margin-bottom:16px;
  border:1px solid currentColor;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:rgba(255,255,255,.02);
}
.ccard-icon svg{ width:25px; height:25px; }
.ccard strong{
  display:block; font-weight:700; font-size:.96rem; letter-spacing:.18em;
  color:var(--text); margin-bottom:11px; line-height:1.5;
}
.ccard p{ font-size:.8rem; color:var(--muted); min-height:44px; }
.ccard-arrow{ display:inline-block; margin-top:14px; font-size:1.2rem; transition:transform .3s; }
.ccard:hover .ccard-arrow{ transform:translateX(8px); }

.contact-right{ padding-top:110px; display:flex; flex-direction:column; gap:42px; }
.contact-quote{ font-size:1.03rem; color:var(--text); line-height:1.7; }
.contact-quote .quote-mark{ font-size:2rem; }
.contact-quote footer{
  margin-top:13px; font-size:.85rem; font-weight:600;
  letter-spacing:.14em; color:var(--blue);
}
.connect-title{
  display:flex; align-items:center; gap:18px;
  font-weight:700; font-size:.86rem; letter-spacing:.3em; color:var(--text);
  margin-bottom:20px;
}
.connect-links{ display:flex; flex-wrap:wrap; gap:14px 26px; }
.connect-links a{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:.84rem; color:var(--muted);
  transition:color .25s, text-shadow .25s;
}
.connect-links a:hover{ color:var(--text); text-shadow:0 0 16px rgba(77,163,255,.6); }
.connect-links svg{ width:19px; height:19px; }
.avail{ padding-top:32px; border-top:1px solid var(--line); }
.avail-list{ display:flex; align-items:center; gap:18px; font-weight:600; letter-spacing:.1em; }
.avail-list i{ width:5px; height:5px; border-radius:50%; background:var(--blue); opacity:.7; }

.footer{
  position:relative; z-index:1;
  margin:96px auto 0;
  display:flex; align-items:center; gap:16px;
  width:min(1280px,93%);
}
.footer-line{ flex:1; height:1px; background:var(--line); }
.footer-text{
  font-weight:600; font-size:.78rem; letter-spacing:.3em; color:var(--muted);
  white-space:nowrap;
}
.footer-text em{ font-style:normal; }

/* ============ ANIMACIONES DE ENTRADA ============ */
.reveal-load{
  opacity:0; transform:translateY(26px);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:var(--d,0s);
}
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
body.loading .reveal-load{ animation-play-state:paused; }

.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ============ RESPONSIVE ============ */
@media (max-width:1240px){
  .hud-tag{ display:none; }
  .about-grid{ grid-template-columns:280px 1fr; }
  .about-define{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:18px; }
  .define-title{ width:100%; }
  .define-item{ flex:1 1 210px; }
  .about-quote{ flex:1 1 100%; }
}

@media (max-width:980px){
  .nav-name{ display:none; }
  .nav-links{
    position:fixed; top:76px; right:0; bottom:0;
    width:min(320px,84vw);
    flex-direction:column; gap:4px;
    padding:32px 26px;
    background:rgba(5,8,14,.97); backdrop-filter:blur(14px);
    border-left:1px solid var(--line);
    transform:translateX(105%);
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-link{ font-size:.95rem; padding:14px 10px; border-bottom:1px solid rgba(120,160,220,.08); }
  .nav-toggle{ display:flex; }

  .hero{ padding-top:104px; }
  .hero-img{ width:60%; opacity:.5; }
  .hero-frame{ inset:12px; }
  .hf{ width:34px; height:34px; }
  .hero-cards{ grid-template-columns:1fr; width:min(430px,100%); }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hstat{ justify-content:flex-start; }

  .about-frame{ padding:14px 6px 24px; }
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ max-width:400px; margin:0 auto; }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .astat:nth-child(3){ border-left:0; }
  .astat:nth-child(3), .astat:nth-child(4){ border-top:1px solid var(--line); }
  .camino-track{ grid-template-columns:repeat(2,1fr); gap:36px 22px; }
  .camino-track::before, .camino-item::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .contact-right{ padding-top:0; }
  .contact-world{ width:92vw; right:-32%; opacity:.35; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .section{ padding:70px 0; }
  .contact-cards{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:1fr; gap:15px; }
  .hero-eyebrow{ gap:10px; font-size:.7rem; letter-spacing:.2em; padding:10px 20px; }
  .hero-title{ width:min(94vw, 560px); }
  .hero-sub{ letter-spacing:.18em; }
  .hs-wing{ width:40px; }
  .hd-line{ width:80px; }
  .camino-track{ grid-template-columns:1fr; }
  .tech-bar{ flex-direction:column; align-items:flex-start; gap:20px; }
  .tech-label{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 16px; width:100%; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .footer{ flex-direction:column; gap:14px; }
  .footer-text{ white-space:normal; text-align:center; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .reveal, .reveal-load{ opacity:1 !important; transform:none !important; }
  .hero-img img{ transform:none !important; }
}


/* ============ SUBWEB: VIDEOJUEGOS ============ */
.games-page{
  background:#03060b;
}
.games-page .navbar{
  background:linear-gradient(180deg,rgba(2,4,8,.92),rgba(2,4,8,.48));
}
.games-page .nav-link.active{
  color:var(--orange);
}
.games-page .nav-link.active::after{
  background:var(--orange);
  transform:scaleX(1);
}

.games-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:104px 0 34px;
  background:#03060b;
}
.games-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.games-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% center;
  transform:scale(1.02);
  filter:brightness(.88) contrast(1.06) saturate(.94);
}
.games-hero-bg::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 48% 54% at 74% 43%, rgba(255,140,46,.11), transparent 66%),
    radial-gradient(ellipse 42% 54% at 20% 48%, rgba(255,140,46,.05), transparent 72%),
    linear-gradient(90deg, rgba(3,6,11,.90) 0%, rgba(3,6,11,.74) 24%, rgba(3,6,11,.36) 49%, rgba(3,6,11,.62) 100%),
    linear-gradient(180deg, rgba(3,6,11,.70) 0%, rgba(3,6,11,.10) 35%, rgba(3,6,11,.22) 65%, rgba(3,6,11,.88) 100%);
}
.games-hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg, transparent 0 2.4%, rgba(255,140,46,.5) 2.45%, transparent 2.52%, transparent 97.4%, rgba(255,140,46,.3) 97.48%, transparent 97.56%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 6px);
  opacity:.18;
  pointer-events:none;
}
.games-frame{
  position:absolute;
  inset:88px 42px 32px;
  z-index:2;
  pointer-events:none;
}
.gf-line{
  position:absolute;
  top:70px;
  bottom:18px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,140,46,.74) 18%, rgba(160,170,190,.25) 78%, transparent);
}
.gf-line.left{ left:0; }
.gf-line.right{ right:0; }
.gf-dot{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px var(--orange);
}
.gf-dot.left{ left:-2px; top:49%; }
.gf-dot.right{ right:-2px; top:49%; }

.games-hero-inner{
  position:relative;
  z-index:3;
  width:min(1460px, 90%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 760px) minmax(320px, 400px);
  grid-template-areas:
    "copy focus"
    "cards cards";
  align-items:start;
  column-gap:52px;
  row-gap:38px;
}

.games-copy{ grid-area:copy; max-width:760px; }
.games-kicker{
  display:inline-flex;
  align-items:center;
  gap:13px;
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.28em;
  margin-bottom:34px;
}
.games-kicker span{
  width:18px;
  height:18px;
  border:1px solid rgba(255,140,46,.75);
}
.games-kicker span:first-child{
  border-right:0;
  border-bottom:0;
}
.games-kicker span:last-child{
  border-left:0;
  border-top:0;
}

.games-title{
  font-family:var(--f-display);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:.94;
  margin:0;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.7));
}
.games-title span{
  display:block;
  color:#eef2f7;
  font-size:clamp(2rem, 3.8vw, 3.9rem);
  font-weight:400;
}
.games-title strong{
  display:block;
  color:var(--orange);
  font-size:clamp(2.55rem, 4.8vw, 4.75rem);
  font-weight:400;
  letter-spacing:.055em;
  text-shadow:0 0 26px rgba(255,140,46,.3);
}

.games-roles{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
  color:#d6dce6;
  font-weight:600;
  font-size:clamp(.86rem,1.28vw,1rem);
  letter-spacing:.19em;
}
.games-roles i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px var(--orange);
}

.games-divider{
  display:flex;
  align-items:flex-start;
  margin:18px 0 24px;
}
.games-divider span{
  width:132px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,140,46,.88));
}
.games-divider span:last-child{
  background:linear-gradient(270deg, transparent, rgba(255,140,46,.88));
}
.games-divider i{
  width:46px;
  height:13px;
  border:1px solid rgba(255,140,46,.9);
  border-top:0;
  transform:translateY(-1px);
  clip-path:polygon(0 0, 100% 0, 72% 100%, 28% 100%);
}

.games-text{
  max-width:760px;
  color:#c4cbd6;
  font-size:clamp(.96rem,1.32vw,1.08rem);
  line-height:1.64;
  letter-spacing:.035em;
  margin-bottom:20px;
}

.games-actions{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.games-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:230px;
  height:58px;
  padding:0 28px;
  color:#e7edf6;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.15em;
  background:rgba(4,7,13,.42);
  border:1px solid rgba(190,200,220,.28);
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  overflow:hidden;
  transition:transform .28s ease, border-color .28s ease, color .28s ease, background .28s ease;
}
.games-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(var(--orange),var(--orange)) left 12px top 0 / 64px 1px no-repeat,
    linear-gradient(var(--orange),var(--orange)) right 12px bottom 0 / 64px 1px no-repeat,
    linear-gradient(135deg, transparent 45%, var(--orange) 47%, var(--orange) 53%, transparent 55%) left top / 12px 12px no-repeat,
    linear-gradient(315deg, transparent 45%, var(--orange) 47%, var(--orange) 53%, transparent 55%) right bottom / 12px 12px no-repeat;
  opacity:.28;
  transition:opacity .28s ease;
}
.games-btn.primary{
  border-color:rgba(255,140,46,.76);
  color:#fff;
}
.games-btn.primary::before{ opacity:.95; }
.games-btn span{
  position:relative;
  color:var(--orange);
  font-size:1.3rem;
  transition:transform .28s ease;
}
.games-btn:hover{
  transform:translateY(-3px);
  border-color:rgba(255,140,46,.9);
  background:rgba(255,140,46,.045);
}
.games-btn:hover::before{ opacity:1; }
.games-btn:hover span{ transform:translateX(6px); }

.games-focus{
  grid-area:focus;
  justify-self:end;
  align-self:center;
  position:relative;
  color:var(--orange);
  padding:1px;
  clip-path:polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
  background:
    linear-gradient(var(--orange),var(--orange)) left 28px top 0 / 120px 1px no-repeat,
    linear-gradient(rgba(255,140,46,.45),rgba(255,140,46,.45)) right 28px top 0 / 120px 1px no-repeat,
    linear-gradient(var(--orange),var(--orange)) left 0 top 28px / 1px 130px no-repeat,
    linear-gradient(rgba(255,140,46,.65),rgba(255,140,46,.65)) right 0 bottom 28px / 1px 130px no-repeat,
    linear-gradient(rgba(255,140,46,.72),rgba(255,140,46,.72)) left 28px bottom 0 / 120px 1px no-repeat,
    linear-gradient(rgba(255,140,46,.45),rgba(255,140,46,.45)) right 28px bottom 0 / 120px 1px no-repeat,
    linear-gradient(135deg, transparent 47%, var(--orange) 48%, var(--orange) 52%, transparent 53%) left top / 28px 28px no-repeat,
    linear-gradient(225deg, transparent 47%, rgba(255,140,46,.82) 48%, rgba(255,140,46,.82) 52%, transparent 53%) right top / 28px 28px no-repeat,
    linear-gradient(315deg, transparent 47%, var(--orange) 48%, var(--orange) 52%, transparent 53%) right bottom / 28px 28px no-repeat,
    linear-gradient(45deg, transparent 47%, rgba(255,140,46,.82) 48%, rgba(255,140,46,.82) 52%, transparent 53%) left bottom / 28px 28px no-repeat;
  background-color:rgba(4,7,13,.54);
  backdrop-filter:blur(7px);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.games-focus::before{
  content:'';
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}
.focus-title{
  display:flex;
  align-items:center;
  gap:16px;
  padding:28px 28px 14px;
  font-family:var(--f-mono);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.28em;
}
.focus-title svg{
  width:30px;
  height:30px;
  filter:drop-shadow(0 0 10px rgba(255,140,46,.55));
}
.focus-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:12px 28px 28px;
}
.focus-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.focus-item svg{
  width:36px;
  height:36px;
  color:#edf3fb;
  opacity:.92;
  flex:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.focus-item strong{
  display:block;
  color:#dbe2eb;
  font-weight:700;
  font-size:.84rem;
  letter-spacing:.14em;
  margin-bottom:5px;
}
.focus-item span{
  color:#aab4c2;
  font-size:.85rem;
  line-height:1.45;
}

.games-service-cards{
  grid-area:cards;
  margin-top:4px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:18px;
  width:100%;
}
.game-service-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:96px;
  padding:14px 14px;
  color:var(--orange);
  background:rgba(4,7,13,.42);
  clip-path:polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  overflow:hidden;
  transition:transform .28s ease, background .28s ease, filter .28s ease;
}
.game-service-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,140,46,.75),rgba(255,140,46,.75)) left 22px top 0 / 92px 1px no-repeat,
    linear-gradient(rgba(180,190,210,.24),rgba(180,190,210,.24)) right 22px top 0 / 92px 1px no-repeat,
    linear-gradient(rgba(255,140,46,.75),rgba(255,140,46,.75)) left 0 top 22px / 1px 42px no-repeat,
    linear-gradient(rgba(180,190,210,.26),rgba(180,190,210,.26)) right 0 bottom 22px / 1px 42px no-repeat,
    linear-gradient(rgba(180,190,210,.26),rgba(180,190,210,.26)) left 22px bottom 0 / 92px 1px no-repeat,
    linear-gradient(rgba(255,140,46,.65),rgba(255,140,46,.65)) right 22px bottom 0 / 92px 1px no-repeat,
    linear-gradient(135deg, transparent 47%, rgba(255,140,46,.7) 48%, rgba(255,140,46,.7) 52%, transparent 53%) left top / 22px 22px no-repeat,
    linear-gradient(225deg, transparent 47%, rgba(180,190,210,.28) 48%, rgba(180,190,210,.28) 52%, transparent 53%) right top / 22px 22px no-repeat,
    linear-gradient(315deg, transparent 47%, rgba(255,140,46,.62) 48%, rgba(255,140,46,.62) 52%, transparent 53%) right bottom / 22px 22px no-repeat,
    linear-gradient(45deg, transparent 47%, rgba(180,190,210,.3) 48%, rgba(180,190,210,.3) 52%, transparent 53%) left bottom / 22px 22px no-repeat;
  opacity:.9;
  pointer-events:none;
  transition:opacity .28s ease;
}
.game-service-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 0%, rgba(255,140,46,.12) 45%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.game-service-card:hover{
  transform:translateY(-5px);
  background:rgba(255,140,46,.055);
  filter:drop-shadow(0 0 18px rgba(255,140,46,.15));
}
.game-service-card:hover::after{ transform:translateX(125%); }
.gsc-icon{
  position:relative;
  z-index:1;
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 12px rgba(255,140,46,.3));
}
.gsc-icon svg{
  width:26px;
  height:26px;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gsc-text{
  position:relative;
  z-index:1;
  min-width:0;
  flex:1;
}
.gsc-text em{
  display:block;
  font-style:normal;
  color:rgba(221,229,240,.32);
  font-family:var(--f-display);
  font-size:.84rem;
  letter-spacing:.08em;
  margin-bottom:5px;
}
.gsc-text strong{
  display:block;
  color:#f1f5fb;
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(.66rem,.72vw,.82rem);
  letter-spacing:.04em;
  line-height:1.05;
}
.game-service-card > i{
  position:relative;
  z-index:1;
  margin-left:auto;
  font-style:normal;
  color:var(--orange);
  font-size:1.15rem;
  transition:transform .28s ease;
}
.game-service-card:hover > i{ transform:translateX(6px); }


/* ============ SECCIÓN: COORDINACIÓN DE EQUIPOS ============ */
.coord-section{
  position:relative;
  padding:38px 0 64px;
  background:
    radial-gradient(ellipse 60% 34% at 68% 18%, rgba(255,140,46,.06), transparent 62%),
    linear-gradient(180deg, rgba(3,6,11,.98) 0%, rgba(3,6,11,.96) 100%);
}
.coord-wrap{ width:min(1520px, 94%); }
.coord-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
  color:#dbe2eb;
  font-family:var(--f-mono);
  font-size:.84rem;
  letter-spacing:.18em;
}
.coord-topline-left{
  display:flex; align-items:center; gap:12px;
}
.coord-topline-left i{
  width:110px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
}
.coord-topline-right{ color:#dfe7f2; }
.coord-topline-right em{ font-style:normal; color:var(--orange); margin-right:14px; }
.coord-grid{
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr);
  gap:18px;
  grid-template-areas:
    'intro scale'
    'what areas'
    'quote quote';
}
.game-panel{
  position:relative;
  padding:1px;
  clip-path:polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  background:
    linear-gradient(rgba(255,140,46,.72),rgba(255,140,46,.72)) left 22px top 0 / 120px 1px no-repeat,
    linear-gradient(rgba(170,185,205,.16),rgba(170,185,205,.16)) right 22px top 0 / 120px 1px no-repeat,
    linear-gradient(rgba(255,140,46,.7),rgba(255,140,46,.7)) left 0 top 22px / 1px 62px no-repeat,
    linear-gradient(rgba(170,185,205,.16),rgba(170,185,205,.16)) right 0 bottom 22px / 1px 62px no-repeat,
    linear-gradient(rgba(170,185,205,.18),rgba(170,185,205,.18)) left 22px bottom 0 / 120px 1px no-repeat,
    linear-gradient(rgba(255,140,46,.62),rgba(255,140,46,.62)) right 22px bottom 0 / 120px 1px no-repeat,
    linear-gradient(135deg, transparent 47%, rgba(255,140,46,.75) 48%, rgba(255,140,46,.75) 52%, transparent 53%) left top / 22px 22px no-repeat,
    linear-gradient(225deg, transparent 47%, rgba(170,185,205,.18) 48%, rgba(170,185,205,.18) 52%, transparent 53%) right top / 22px 22px no-repeat,
    linear-gradient(315deg, transparent 47%, rgba(255,140,46,.6) 48%, rgba(255,140,46,.6) 52%, transparent 53%) right bottom / 22px 22px no-repeat,
    linear-gradient(45deg, transparent 47%, rgba(170,185,205,.18) 48%, rgba(170,185,205,.18) 52%, transparent 53%) left bottom / 22px 22px no-repeat;
  background-color:rgba(4,7,13,.42);
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.game-panel::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.022); pointer-events:none;
}
.coord-intro{ grid-area:intro; padding:22px 22px 18px; }
.coord-kicker{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  color:var(--orange); font-family:var(--f-mono); font-size:.8rem; letter-spacing:.25em; font-weight:700;
}
.coord-kicker span{ width:14px; height:14px; border:1px solid rgba(255,140,46,.8); }
.coord-kicker span:first-child{ border-right:0; border-bottom:0; }
.coord-kicker span:last-child{ border-left:0; border-top:0; }
.coord-title{ font-family:var(--f-display); line-height:.93; text-transform:uppercase; margin:0 0 14px; }
.coord-title span{ display:block; color:#eef2f7; font-size:clamp(1.55rem,2.9vw,2.95rem); }
.coord-title strong{ display:block; color:var(--orange); font-size:clamp(2.2rem,4.4vw,4.1rem); font-weight:400; letter-spacing:.04em; text-shadow:0 0 20px rgba(255,140,46,.18); }
.coord-text{ max-width:640px; color:#c6d0dd; font-size:.9rem; line-height:1.62; letter-spacing:.02em; }
.coord-divider{ margin:18px 0 0; }
.coord-scale{ grid-area:scale; padding:20px 20px 18px; }
.panel-title{
  color:var(--orange); font-family:var(--f-mono); font-size:.9rem; letter-spacing:.16em; font-weight:700;
  margin-bottom:16px; display:flex; align-items:center; gap:16px;
}
.panel-title-line::after, .panel-title-line-right::after{
  content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,140,46,.35), rgba(255,255,255,.07));
}
.panel-title-icon .pti-icon{
  width:40px; height:40px; display:grid; place-items:center; color:var(--orange); border:1px solid rgba(255,140,46,.18); background:rgba(255,140,46,.03);
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.panel-title-icon .pti-icon svg{ width:20px; height:20px; }
.coord-metrics{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
}
.coord-metric{
  text-align:center; padding:4px 18px 0;
}
.coord-metric + .coord-metric{ border-left:1px solid rgba(255,255,255,.08); }
.coord-metric-icon{ color:var(--orange); margin:0 auto 14px; width:50px; height:50px; display:grid; place-items:center; }
.coord-metric-icon svg{ width:40px; height:40px; }
.coord-metric strong{ display:block; color:var(--orange); font-family:var(--f-display); font-weight:400; font-size:clamp(1.2rem,1.85vw,2rem); letter-spacing:.05em; line-height:1.1; }
.coord-metric span{ display:block; min-height:1.3em; color:var(--orange); font-weight:700; letter-spacing:.12em; font-size:.8rem; margin-top:6px; }
.coord-metric p{ margin-top:12px; color:#b8c2cf; font-size:.8rem; line-height:1.6; }
.coord-what{ grid-area:what; padding:20px 20px 18px; }
.coord-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.coord-list li{ position:relative; padding:0 0 9px 34px; color:#d8e0ea; font-size:.88rem; line-height:1.45; border-bottom:1px dashed rgba(255,255,255,.08); }
.coord-list li::before{ content:'›'; position:absolute; left:8px; top:-1px; color:var(--orange); font-size:1.3rem; line-height:1; }
.coord-list li:last-child{ border-bottom:0; padding-bottom:0; }
.coord-areas{ grid-area:areas; padding:20px 20px 18px; }
.coord-tags{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-top:12px; align-items:stretch; }
.coord-tag{
  min-height:76px; display:flex; align-items:center; gap:12px; padding:14px 18px; color:#eef3fa; background:rgba(6,10,18,.62);
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border:1px solid rgba(255,140,46,.22);
}
.coord-tag-icon{ width:24px; height:24px; display:grid; place-items:center; color:var(--orange); flex:none; }
.coord-tag-icon svg{ width:20px; height:20px; stroke-linecap:round; stroke-linejoin:round; }
.coord-tag span{ font-family:var(--f-display); font-size:.84rem; letter-spacing:.05em; line-height:1.1; }
.game-panel-quote{ grid-area:quote; padding:14px 18px; }
.coord-quote p{ text-align:center; color:#d8e0ea; font-family:var(--f-mono); font-size:.92rem; letter-spacing:.15em; }
.coord-quote strong{ color:var(--orange); font-weight:700; }

@media (max-width:1320px){
  .games-title span{ font-size:clamp(1.9rem, 3.7vw, 3.2rem); }
  .games-title strong{ font-size:clamp(2.35rem, 4.6vw, 4.1rem); }
  .games-copy{ max-width:700px; }
}
@media (max-width:1240px){
  .games-hero-inner{
    width:min(1180px, 90%);
    grid-template-columns:1fr;
    grid-template-areas:"copy" "focus" "cards";
    row-gap:36px;
  }
  .games-focus{
    max-width:640px;
  }
  .games-service-cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:1320px){
  .coord-grid{ grid-template-columns:1fr; grid-template-areas:'intro' 'scale' 'what' 'areas' 'quote'; }
  .coord-title span{ font-size:clamp(1.45rem, 3.2vw, 2.5rem); }
  .coord-title strong{ font-size:clamp(2rem, 4vw, 3.3rem); }
}
@media (max-width:980px){
  .coord-metrics{ grid-template-columns:1fr; gap:14px; }
  .coord-metric + .coord-metric{ border-left:0; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
  .coord-tags{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .coord-topline{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:760px){
  .coord-section{ padding:30px 0 56px; }
  .coord-wrap{ width:min(96%, 620px); }
  .coord-intro, .coord-scale, .coord-what, .coord-areas{ padding:16px 14px; }
  .coord-title span{ font-size:clamp(1.45rem, 7vw, 2.25rem); }
  .coord-title strong{ font-size:clamp(1.95rem, 9vw, 2.9rem); }
  .coord-text, .coord-list li, .coord-metric p{ font-size:.84rem; }
  .coord-tags{ grid-template-columns:1fr; gap:12px; }
  .coord-tag span{ font-size:.9rem; }
  .coord-quote p{ font-size:.9rem; line-height:1.55; }
}

@media (max-width:760px){
  .games-hero{
    padding-top:104px;
  }
  .games-hero-inner{
    width:min(94%, 620px);
  }
  .games-title span{ font-size:clamp(2rem, 10vw, 3.3rem); }
  .games-title strong{ font-size:clamp(2.4rem, 12vw, 4rem); }
  .games-roles{
    gap:10px;
    font-size:.8rem;
  }
  .games-actions{
    gap:16px;
  }
  .games-btn{
    width:100%;
    min-width:0;
  }
  .games-focus{
    clip-path:polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  }
  .focus-title{
    padding:28px 24px 14px;
  }
  .focus-list{
    padding:14px 24px 30px;
  }
  .focus-item{
    gap:14px;
  }
  .focus-item svg{
    width:34px;
    height:34px;
  }
  .games-service-cards{
    grid-template-columns:1fr;
    gap:14px;
  }
  .game-service-card{
    min-height:96px;
  }
  .games-frame{
    inset:82px 18px 20px;
    opacity:.75;
  }
}


/* ============ SECCIÓN: PIPELINES & DELIVERY ============ */
.pipe-section{
  position:relative;
  padding:32px 0 72px;
  background:
    radial-gradient(ellipse 44% 34% at 20% 18%, rgba(255,140,46,.045), transparent 62%),
    linear-gradient(180deg, rgba(3,6,11,.98) 0%, rgba(3,6,11,.965) 100%);
}
.pipe-wrap{ width:min(1520px, 94%); }
.pipe-topline{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:18px; color:#dbe2eb; font-family:var(--f-mono); font-size:.84rem; letter-spacing:.18em;
}
.pipe-topline-left{ display:flex; align-items:center; gap:12px; }
.pipe-topline-left i{ width:110px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); }
.pipe-topline-right em{ font-style:normal; color:var(--orange); margin-right:14px; }
.pipe-grid{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,.82fr) minmax(0,.5fr) minmax(0,.5fr);
  grid-template-areas:
    'intro do delivery'
    'stack stack impact';
}
.pipe-intro{ grid-area:intro; padding:22px 22px 18px; }
.pipe-title{ font-family:var(--f-display); line-height:.93; text-transform:uppercase; margin:0 0 14px; }
.pipe-title span{ display:block; color:#eef2f7; font-size:clamp(1.8rem,3.3vw,3.3rem); }
.pipe-title strong{ display:block; color:var(--orange); font-size:clamp(2.2rem,4.3vw,4.2rem); font-weight:400; letter-spacing:.04em; text-shadow:0 0 20px rgba(255,140,46,.18); }
.pipe-text{ max-width:520px; color:#c6d0dd; font-size:.94rem; line-height:1.62; }
.pipe-do{ grid-area:do; padding:20px 20px 16px; }
.pipe-delivery{ grid-area:delivery; padding:20px 20px 16px; }
.pipe-list{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.pipe-list li{ position:relative; padding-left:24px; color:#d8e0ea; font-size:.88rem; line-height:1.52; }
.pipe-list li::before{ content:'›'; position:absolute; left:2px; top:-1px; color:var(--orange); font-size:1.35rem; }
.pipe-stack{ grid-area:stack; padding:18px 18px 18px; }
.pipe-stack-head{
  display:flex; align-items:center; gap:12px; padding:0 4px 14px; margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pipe-stack-title{ margin-bottom:0; flex:none; }
.pipe-stack-head p{ color:#b7c2cf; font-size:.88rem; }
.pipe-tools-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; }
.tool-col{ padding:12px 16px 4px; }
.tool-col + .tool-col{ border-left:1px solid rgba(255,255,255,.08); }
.tool-col h4{ color:#c9d2de; font-size:.72rem; line-height:1.4; letter-spacing:.12em; margin-bottom:16px; min-height:2.6em; }
.tool-item{ display:flex; align-items:center; gap:12px; min-height:38px; color:#e9eff7; margin-bottom:14px; }
.tool-item i{ font-size:1.95rem; width:28px; text-align:center; }
.tool-item span:last-child{ font-size:.84rem; letter-spacing:.01em; }
.tool-badge{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-size:.78rem; font-weight:700; flex:none;
}
.tool-perforce{ background:#18a8f1; color:#06121f; }
.tool-shotgrid{ background:#051820; color:#12d1e9; border:1px solid rgba(18,209,233,.4); }
.tool-miro{ background:#f8d92a; color:#0a0d14; }
.pipe-impact{ grid-area:impact; padding:20px 20px 16px; }
.pipe-impact-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:1px solid rgba(255,255,255,.07); }
.impact-item{ min-height:128px; display:grid; place-items:center; text-align:center; padding:18px 14px; }
.impact-item:nth-child(2n){ border-left:1px solid rgba(255,255,255,.08); }
.impact-item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.08); }
.impact-icon{ color:var(--orange); width:44px; height:44px; display:grid; place-items:center; margin-bottom:14px; }
.impact-icon svg{ width:36px; height:36px; stroke-linecap:round; stroke-linejoin:round; }
.impact-item span{ color:#dce5f1; font-size:.92rem; line-height:1.35; }
.pipe-next{ margin-top:18px; display:grid; grid-template-columns:1.15fr repeat(3,1fr); gap:18px; }
.pipe-next-label, .pipe-next-card{ min-height:80px; display:flex; align-items:center; padding:0 18px; }
.pipe-next-label{ color:#eef3fa; gap:14px; }
.pipe-next-label span{ font-family:var(--f-mono); font-size:.9rem; letter-spacing:.14em; }
.pipe-next-icon{ width:32px; height:32px; color:var(--orange); display:grid; place-items:center; }
.pipe-next-icon svg{ width:24px; height:24px; }
.pipe-next-card{ gap:14px; color:#eef3fa; text-decoration:none; transition:transform .25s ease, filter .25s ease, background .25s ease; }
.pipe-next-card:hover{ transform:translateY(-3px); background-color:rgba(255,140,46,.04); filter:drop-shadow(0 0 16px rgba(255,140,46,.12)); }
.pipe-next-card-icon{ width:32px; height:32px; color:#dce5f1; display:grid; place-items:center; flex:none; }
.pipe-next-card-icon svg{ width:24px; height:24px; stroke-linecap:round; stroke-linejoin:round; }
.pipe-next-card span{ font-family:var(--f-display); font-size:.96rem; letter-spacing:.06em; }
.pipe-next-card i{ margin-left:auto; color:var(--orange); font-style:normal; font-size:1.2rem; }

@media (max-width:1320px){
  .pipe-grid{ grid-template-columns:1fr 1fr; grid-template-areas:'intro intro' 'do delivery' 'stack impact'; }
  .pipe-tools-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; }
  .tool-col:nth-child(4){ border-left:0; }
}
@media (max-width:1080px){
  .pipe-grid{ grid-template-columns:1fr; grid-template-areas:'intro' 'do' 'delivery' 'stack' 'impact'; }
  .pipe-next{ grid-template-columns:1fr; }
  .pipe-tools-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .pipe-section{ padding:26px 0 56px; }
  .pipe-wrap{ width:min(96%, 620px); }
  .pipe-intro,.pipe-do,.pipe-delivery,.pipe-stack,.pipe-impact{ padding:16px 14px; }
  .pipe-topline{ flex-direction:column; align-items:flex-start; }
  .pipe-title span{ font-size:clamp(1.5rem,7vw,2.35rem); }
  .pipe-title strong{ font-size:clamp(1.95rem,9vw,3rem); }
  .pipe-text,.pipe-list li,.pipe-stack-head p,.tool-item span:last-child,.impact-item span{ font-size:.82rem; }
  .pipe-tools-grid,.pipe-impact-grid{ grid-template-columns:1fr; }
  .tool-col + .tool-col,.impact-item:nth-child(2n){ border-left:0; }
  .impact-item:nth-child(n+2), .tool-col{ border-top:1px solid rgba(255,255,255,.08); }
  .pipe-next-label, .pipe-next-card{ min-height:68px; }
}


.coord-metric-wide strong{ font-size:clamp(1.02rem,1.55vw,1.72rem); line-height:1.04; letter-spacing:.04em; }
.coord-metric-wide .coord-metric-icon svg{ width:42px; height:42px; }
.impact-icon svg{ stroke-linecap:round; stroke-linejoin:round; }
.pipe-next{ display:none !important; }

/* ============ RECRUITMENT SECTION ============ */
.recruit-section{
  position:relative;
  padding:34px 0 72px;
  background:linear-gradient(180deg, rgba(3,6,11,.985) 0%, rgba(3,6,11,.965) 100%);
}
.recruit-wrap{ width:min(1520px, 94%); }
.recruit-topline{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:18px; color:#dbe2eb; font-family:var(--f-mono); font-size:.84rem; letter-spacing:.18em;
}
.recruit-topline-left{ display:flex; align-items:center; gap:12px; }
.recruit-topline-left i{ width:110px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); }
.recruit-topline-right em{ font-style:normal; color:var(--orange); margin-right:10px; }
.recruit-grid{
  display:grid; gap:18px;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,1.05fr);
  grid-template-areas:
    'intro stats stats'
    'what source areas';
}
.recruit-intro{ grid-area:intro; padding:20px 20px 18px; }
.recruit-title{ font-family:var(--f-display); line-height:.93; text-transform:uppercase; margin:0 0 14px; }
.recruit-title span{ display:block; color:#eef2f7; font-size:clamp(1.8rem,3.3vw,3.55rem); }
.recruit-title strong{ display:block; color:var(--orange); font-size:clamp(2.15rem,4.15vw,4.45rem); font-weight:400; letter-spacing:.04em; text-shadow:0 0 20px rgba(255,140,46,.16); }
.recruit-copy p{ color:#d0d8e3; font-size:.92rem; line-height:1.55; margin-bottom:10px; }
.recruit-stats{ grid-area:stats; padding:18px 18px 18px; }
.recruit-stats-head{ text-align:right; color:#dfe7f2; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.14em; margin:0 4px 12px 0; }
.recruit-stats-head em{ color:var(--orange); font-style:normal; margin-right:8px; }
.recruit-stat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.recruit-stat{ text-align:center; padding:18px 18px 8px; }
.recruit-stat + .recruit-stat{ border-left:1px solid rgba(255,255,255,.08); }
.recruit-stat-icon{ width:64px; height:64px; margin:0 auto 16px; color:var(--orange); display:grid; place-items:center; }
.recruit-stat-icon svg{ width:52px; height:52px; stroke-linecap:round; stroke-linejoin:round; }
.recruit-stat strong{ display:block; color:var(--orange); font-family:var(--f-display); font-size:clamp(1.28rem,2vw,2.45rem); line-height:1.14; letter-spacing:.04em; margin-bottom:12px; }
.recruit-stat p{ color:#d1d9e3; font-size:.88rem; line-height:1.65; }
.recruit-what{ grid-area:what; padding:18px 18px 16px; }
.recruit-source{ grid-area:source; padding:18px 18px 16px; }
.recruit-source-copy p{ color:#d0d8e3; font-size:.9rem; line-height:1.62; margin-bottom:12px; }
.recruit-areas{ grid-area:areas; padding:18px 18px 16px; }
.recruit-tags{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.recruit-tag{ min-height:58px; display:flex; align-items:center; gap:10px; padding:0 12px; color:#eef3fa; background:rgba(6,10,18,.56); border:1px solid rgba(255,140,46,.16); clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.recruit-tag span:last-child{ font-family:var(--f-display); font-size:.8rem; letter-spacing:.06em; }
.recruit-nav{ margin-top:18px; display:grid; grid-template-columns:1.1fr repeat(3,1fr); gap:18px; }
.recruit-nav-card{ min-height:70px; display:flex; align-items:center; gap:14px; padding:0 16px; color:#eef3fa; text-decoration:none; }
.recruit-nav-card i{ margin-left:auto; color:var(--orange); font-style:normal; font-size:1.2rem; }
.recruit-nav-card small{ display:block; color:#adb9c8; font-size:.68rem; letter-spacing:.16em; margin-bottom:2px; }
.recruit-nav-card span{ font-family:var(--f-display); font-size:.82rem; letter-spacing:.05em; }
.recruit-nav-icon{ width:28px; height:28px; display:grid; place-items:center; color:var(--orange); flex:none; }
.recruit-nav-icon svg{ width:24px; height:24px; stroke-linecap:round; stroke-linejoin:round; }
.recruit-nav-card:hover{ transform:translateY(-2px); background-color:rgba(255,140,46,.035); }
@media (max-width:1320px){
  .recruit-grid{ grid-template-columns:1fr 1fr; grid-template-areas:'intro intro' 'stats stats' 'what source' 'areas areas'; }
}
@media (max-width:1080px){
  .recruit-grid{ grid-template-columns:1fr; grid-template-areas:'intro' 'stats' 'what' 'source' 'areas'; }
  .recruit-stat-grid{ grid-template-columns:1fr; }
  .recruit-stat + .recruit-stat{ border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .recruit-nav{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .recruit-section{ padding:26px 0 56px; }
  .recruit-wrap{ width:min(96%, 620px); }
  .recruit-topline{ flex-direction:column; align-items:flex-start; }
  .recruit-intro,.recruit-stats,.recruit-what,.recruit-source,.recruit-areas{ padding:16px 14px; }
  .recruit-title span{ font-size:clamp(1.45rem,7vw,2.4rem); }
  .recruit-title strong{ font-size:clamp(1.95rem,9vw,3.1rem); }
  .recruit-copy p,.recruit-stat p,.recruit-source-copy p,.recruit-list li{ font-size:.84rem; }
  .recruit-tags{ grid-template-columns:1fr; }
}

.coord-metric-wide strong{ max-width:7.9ch; margin-inline:auto; }
.coord-metric-wide p{ max-width:18.5rem; margin-inline:auto; }


/* ===== v7 refinement overrides ===== */
.coord-metrics{ grid-template-columns:.92fr .98fr 1.18fr; }
.coord-metric-wide strong{
  max-width:100%;
  font-size:clamp(.82rem,1.02vw,1.16rem);
  line-height:1.02;
  letter-spacing:.03em;
}
.coord-metric-wide p{ max-width:17rem; }
.coord-metric-wide .coord-metric-icon{ margin-bottom:12px; }

.recruit-section{ padding:18px 0 64px; }
.recruit-topline{ display:none; }
.recruit-grid{ gap:16px; grid-template-columns:minmax(0,.88fr) minmax(0,1.06fr) minmax(0,1.06fr); }
.recruit-intro{ padding:18px 18px 16px; }
.recruit-title{ margin:0 0 12px; }
.recruit-title span{ font-size:clamp(1.55rem,2.75vw,3rem); }
.recruit-title strong{ font-size:clamp(1.95rem,3.55vw,3.75rem); }
.recruit-copy p{ font-size:.86rem; line-height:1.48; margin-bottom:8px; }
.recruit-stats{ padding:14px 16px 14px; }
.recruit-stats-head{ font-size:.78rem; margin:0 2px 8px 0; }
.recruit-stat{ padding:12px 14px 4px; }
.recruit-stat-icon{ width:54px; height:54px; margin:0 auto 12px; }
.recruit-stat-icon svg{ width:42px; height:42px; }
.recruit-stat strong{ font-size:clamp(1rem,1.42vw,1.78rem); line-height:1.1; margin-bottom:10px; }
.recruit-stat p{ font-size:.8rem; line-height:1.5; max-width:18rem; margin-inline:auto; }
.recruit-what,.recruit-source,.recruit-areas{ padding:16px 16px 14px; }
.recruit-source-copy p{ font-size:.84rem; line-height:1.52; margin-bottom:10px; }
.recruit-tags{ gap:8px; }
.recruit-tag{ min-height:50px; padding:0 10px; }
.recruit-tag span:last-child{ font-size:.74rem; letter-spacing:.05em; }
.recruit-nav{ margin-top:14px; gap:16px; }
.recruit-nav-card{ min-height:64px; padding:0 14px; }
.recruit-nav-card span{ font-size:.78rem; }
@media (max-width:1320px){
  .recruit-grid{ grid-template-columns:1fr; grid-template-areas:'intro' 'stats' 'what' 'source' 'areas'; }
}


/* ===== v8 refinements ===== */
.coord-metrics{ grid-template-columns:.9fr .96fr 1.24fr; }
.coord-metric-wide{ padding-inline:12px; }
.coord-metric-wide strong{
  max-width:10ch;
  font-size:clamp(.66rem,.8vw,.9rem);
  line-height:.95;
  letter-spacing:0;
  word-break:normal;
}
.coord-metric-wide p{ max-width:16rem; font-size:.76rem; }
.coord-metric-wide .coord-metric-icon svg{ width:38px; height:38px; }

.recruit-section{ padding:10px 0 48px; }
.recruit-grid{ align-items:start; gap:14px; grid-template-columns:minmax(0,.96fr) minmax(0,1.02fr) minmax(0,1.02fr); }
.recruit-intro,.recruit-stats,.recruit-what,.recruit-source,.recruit-areas{ align-self:start; }
.recruit-intro{ padding:14px 16px 14px; }
.recruit-title span{ font-size:clamp(1.2rem,2.15vw,2.45rem); }
.recruit-title strong{ font-size:clamp(1.55rem,3vw,3.1rem); }
.recruit-copy p{ font-size:.8rem; line-height:1.42; margin-bottom:6px; }
.recruit-stats{ padding:12px 14px 12px; }
.recruit-stats-head{ display:none; }
.recruit-stat-grid{ gap:0; }
.recruit-stat{ padding:10px 10px 2px; }
.recruit-stat strong{ font-size:clamp(.92rem,1.18vw,1.45rem); line-height:1.04; letter-spacing:.02em; max-width:13rem; margin:0 auto 8px; }
.recruit-stat p{ font-size:.76rem; line-height:1.42; max-width:15.2rem; }
.recruit-stat-icon{ width:48px; height:48px; margin:0 auto 10px; }
.recruit-stat-icon svg{ width:36px; height:36px; }
.recruit-what,.recruit-source,.recruit-areas{ padding:14px 14px 12px; }
.recruit-source-copy p{ font-size:.8rem; line-height:1.45; margin-bottom:8px; }
.recruit-list li{ font-size:.8rem; line-height:1.42; }
.recruit-tags{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.recruit-tag{ min-height:46px; padding:0 8px; }
.recruit-tag span:last-child{ font-size:.68rem; letter-spacing:.035em; }
.recruit-nav{ margin-top:12px; gap:14px; }
.recruit-nav-card{ min-height:60px; }
.recruit-nav-card span{ font-size:.74rem; }

/* ===== trayectoria ===== */
.trajectory-section{
  position:relative;
  padding:22px 0 72px;
  background:linear-gradient(180deg, rgba(3,6,11,.99) 0%, rgba(3,6,11,.965) 100%);
}
.trajectory-wrap{ width:min(1520px,94%); }
.trajectory-topline{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:20px; color:#dbe2eb; font-family:var(--f-mono); font-size:.84rem; letter-spacing:.18em;
}
.trajectory-topline-left{ display:flex; align-items:center; gap:12px; }
.trajectory-topline-left i{ width:110px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); }
.trajectory-topline-right em{ font-style:normal; color:var(--orange); margin-right:10px; }
.trajectory-grid{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:26px; }
.trajectory-intro{ padding:22px 20px 18px; }
.trajectory-title{ margin:0 0 16px; font-family:var(--f-display); line-height:.92; text-transform:uppercase; }
.trajectory-title span,.trajectory-title strong{ font-size:clamp(2.1rem,4.3vw,4.6rem); font-weight:400; letter-spacing:.04em; }
.trajectory-title span{ color:#eef2f7; }
.trajectory-title strong{ color:var(--orange); }
.trajectory-copy p{ color:#d0d8e3; font-size:.92rem; line-height:1.52; margin-bottom:10px; }
.trajectory-base{ margin-top:26px; min-height:96px; display:flex; align-items:center; gap:16px; padding:0 18px; }
.trajectory-base-icon{ width:42px; height:42px; color:var(--orange); display:grid; place-items:center; flex:none; }
.trajectory-base-icon svg{ width:34px; height:34px; stroke-linecap:round; stroke-linejoin:round; }
.trajectory-base strong{ display:block; color:#e9f0f8; font-family:var(--f-display); font-size:1rem; letter-spacing:.05em; margin-bottom:6px; }
.trajectory-base span{ color:#d0d8e3; font-size:.9rem; }
.trajectory-timeline{ position:relative; min-height:650px; padding-top:52px; }
.trajectory-line{ position:absolute; left:8%; right:8%; top:165px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.7), rgba(255,255,255,.1)); }
.trajectory-line::before,.trajectory-line::after{ content:''; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px rgba(255,140,46,.3); }
.trajectory-line::before{ left:0; }
.trajectory-line::after{ right:0; }
.tl-dot{ position:absolute; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,140,46,.2); box-shadow:0 0 0 8px rgba(255,140,46,.05) inset; }
.tl-dot::before{ content:''; position:absolute; inset:18px; border-radius:50%; background:var(--orange); box-shadow:0 0 14px rgba(255,140,46,.35); }
.tl-dot.dot1{ left:18%; }
.tl-dot.dot2{ left:50%; }
.tl-dot.dot3{ left:82%; }
.trajectory-node{ position:absolute; top:24px; transform:translateX(-50%); }
.trajectory-node.node1{ left:18%; }
.trajectory-node.node2{ left:50%; }
.trajectory-node.node3{ left:82%; }
.trajectory-node-icon{ width:58px; height:58px; color:var(--orange); display:grid; place-items:center; }
.trajectory-node-icon svg{ width:44px; height:44px; stroke-linecap:round; stroke-linejoin:round; }
.trajectory-card{ position:absolute; top:210px; width:29%; min-height:250px; padding:22px 22px 18px; }
.trajectory-card.card1{ left:7%; }
.trajectory-card.card2{ left:35.5%; }
.trajectory-card.card3{ right:7%; }
.trajectory-card strong{ display:block; color:var(--orange); font-family:var(--f-display); font-size:clamp(1.35rem,2vw,2rem); font-weight:400; letter-spacing:.04em; }
.trajectory-card i{ display:block; width:88px; height:1px; margin:12px 0 18px; background:linear-gradient(90deg, var(--orange), rgba(255,140,46,.12)); }
.trajectory-card p{ color:#d5dde7; font-size:1rem; line-height:1.65; }
.trajectory-caption{ position:absolute; left:6%; right:6%; bottom:26px; display:flex; align-items:center; gap:14px; color:var(--orange); font-family:var(--f-display); font-size:1rem; letter-spacing:.08em; }
.trajectory-caption span{ flex:1; height:1px; background:linear-gradient(90deg, rgba(255,140,46,.25), rgba(255,140,46,.9), rgba(255,140,46,.25)); position:relative; }
.trajectory-caption span::after{ content:''; position:absolute; right:0; top:-3px; width:7px; height:7px; background:var(--orange); clip-path:polygon(50% 100%, 0 0, 100% 0); }
.trajectory-caption em{ font-style:normal; white-space:nowrap; }
@media (max-width:1320px){
  .trajectory-grid{ grid-template-columns:1fr; }
  .trajectory-timeline{ min-height:auto; padding-top:10px; }
  .trajectory-line,.trajectory-node{ display:none; }
  .trajectory-card{ position:relative; top:auto; left:auto !important; right:auto !important; width:auto; margin-bottom:14px; }
  .trajectory-caption{ position:relative; left:auto; right:auto; bottom:auto; margin-top:16px; }
}
@media (max-width:760px){
  .trajectory-section{ padding:20px 0 56px; }
  .trajectory-wrap{ width:min(96%,620px); }
  .trajectory-topline{ flex-direction:column; align-items:flex-start; }
  .trajectory-intro{ padding:16px 14px; }
  .trajectory-title span,.trajectory-title strong{ font-size:clamp(1.75rem,9vw,2.9rem); }
  .trajectory-copy p,.trajectory-card p,.trajectory-base span{ font-size:.84rem; }
  .trajectory-base{ padding:0 14px; }
  .trajectory-card{ padding:16px 14px; }
  .trajectory-caption{ font-size:.78rem; gap:8px; }
  .trajectory-caption em{ white-space:normal; text-align:center; }
}


/* ===== v9 trajectory + portfolio refinements ===== */
.coord-metrics{ grid-template-columns:.84fr .92fr 1.52fr; }
.coord-metric-wide strong{ max-width:12ch; font-size:clamp(.52rem,.58vw,.68rem); line-height:.94; }
.coord-metric-wide p{ max-width:17rem; font-size:.74rem; }

.trajectory-section{ padding:14px 0 60px; }
.trajectory-grid{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:22px; }
.trajectory-intro{ padding:16px 16px 14px; }
.trajectory-title{ margin:0 0 12px; }
.trajectory-title span,.trajectory-title strong{ font-size:clamp(1.6rem,3vw,3.3rem); }
.trajectory-copy p{ font-size:.82rem; line-height:1.42; margin-bottom:8px; }
.trajectory-base{ margin-top:18px; min-height:82px; padding:0 14px; }
.trajectory-base strong{ font-size:.88rem; }
.trajectory-base span{ font-size:.8rem; }
.trajectory-timeline{ min-height:470px; padding-top:38px; }
.trajectory-line{ top:108px; left:9%; right:9%; }
.tl-dot{ width:44px; height:44px; }
.tl-dot::before{ inset:13px; }
.trajectory-node{ top:6px; }
.trajectory-node-icon{ width:44px; height:44px; }
.trajectory-node-icon svg{ width:30px; height:30px; }
.trajectory-card{ top:154px; width:28.5%; min-height:185px; padding:16px 16px 12px; }
.trajectory-card strong{ font-size:clamp(1rem,1.4vw,1.45rem); }
.trajectory-card i{ width:70px; margin:10px 0 12px; }
.trajectory-card p{ font-size:.84rem; line-height:1.5; }
.trajectory-caption{ bottom:14px; font-size:.78rem; gap:10px; letter-spacing:.06em; }

/* ===== portfolio ===== */
.portfolio-section{ position:relative; padding:18px 0 78px; background:linear-gradient(180deg, rgba(3,6,11,.985) 0%, rgba(3,6,11,.965) 100%); }
.portfolio-wrap{ width:min(1520px,94%); }
.portfolio-topline{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; color:#dbe2eb; font-family:var(--f-mono); font-size:.84rem; letter-spacing:.18em; }
.portfolio-topline-left{ display:flex; align-items:center; gap:12px; }
.portfolio-topline-left i{ width:110px; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); }
.portfolio-topline-right em{ font-style:normal; color:var(--orange); margin-right:10px; }
.portfolio-hero-grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:18px; margin-bottom:18px; }
.portfolio-intro{ padding:18px 18px 16px; }
.portfolio-title{ margin:0 0 12px; font-family:var(--f-display); line-height:.92; text-transform:uppercase; }
.portfolio-title span,.portfolio-title strong{ font-size:clamp(1.9rem,3.8vw,4.4rem); font-weight:400; letter-spacing:.04em; }
.portfolio-title span{ color:#eef2f7; }
.portfolio-title strong{ color:var(--orange); }
.portfolio-copy p{ color:#d0d8e3; font-size:.92rem; line-height:1.56; margin-bottom:8px; }
.portfolio-stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:18px; }
.portfolio-stat{ min-height:78px; padding:10px 10px 8px; display:flex; flex-direction:column; justify-content:center; gap:4px; color:#eef3fa; background:rgba(6,10,18,.55); border:1px solid rgba(255,140,46,.14); clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.portfolio-stat strong{ color:var(--orange); font-family:var(--f-display); font-size:1.7rem; font-weight:400; line-height:1; }
.portfolio-stat span{ font-family:var(--f-mono); font-size:.7rem; line-height:1.35; letter-spacing:.08em; color:#d6dfea; }
.portfolio-stats-simple{ grid-template-columns:repeat(2, minmax(0, 220px)); max-width:460px; }
.portfolio-showreel{ position:relative; min-height:352px; overflow:hidden; padding:0; }
.portfolio-showreel-media{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.95; }
.portfolio-showreel::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,6,11,.08), rgba(3,6,11,.4)); }
.portfolio-showreel > *{ position:relative; z-index:1; }
.portfolio-showreel-head{ display:flex; align-items:center; gap:12px; padding:18px; }
.portfolio-showreel-icon{ width:42px; height:42px; color:var(--orange); border:1px solid rgba(255,140,46,.4); border-radius:10px; display:grid; place-items:center; backdrop-filter:blur(6px); }
.portfolio-showreel-icon svg{ width:22px; height:22px; }
.portfolio-showreel-head strong{ display:block; color:var(--orange); font-family:var(--f-display); font-size:1rem; letter-spacing:.06em; margin-bottom:4px; }
.portfolio-showreel-head span{ color:#eef3fa; font-family:var(--f-mono); font-size:.85rem; letter-spacing:.06em; }
.portfolio-play{ position:absolute; inset:0; display:grid; place-items:center; }
.portfolio-play span{ width:92px; height:92px; border-radius:50%; border:2px solid rgba(255,140,46,.7); box-shadow:0 0 0 16px rgba(255,140,46,.07); position:relative; }
.portfolio-play span::before{ content:''; position:absolute; left:36px; top:28px; width:0; height:0; border-top:18px solid transparent; border-bottom:18px solid transparent; border-left:28px solid var(--orange); }
.portfolio-showreel-foot{ position:absolute; left:18px; right:18px; bottom:16px; display:flex; align-items:center; justify-content:space-between; color:#e7eef7; font-family:var(--f-mono); font-size:.84rem; letter-spacing:.08em; }
.portfolio-showreel-foot em{ font-style:normal; color:var(--orange); font-family:var(--f-display); font-size:1rem; }
.portfolio-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.project-card{ overflow:hidden; padding:0; }
.project-thumb{ height:148px; background-size:cover; background-position:center; border-bottom:1px solid rgba(255,255,255,.06); }
.project-index{ display:block; color:var(--orange); font-family:var(--f-mono); font-size:.82rem; letter-spacing:.1em; padding:10px 14px 0; }
.project-body{ padding:10px 14px 14px; }
.project-body h3{ color:#eff4fb; font-family:var(--f-display); font-size:1rem; line-height:1.24; letter-spacing:.04em; margin:0 0 12px; min-height:50px; }
.project-badge{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid rgba(255,140,46,.5); border-radius:8px; color:var(--orange); font-family:var(--f-mono); font-size:.73rem; letter-spacing:.07em; margin-bottom:12px; }
.project-body p{ color:#d4dde7; font-size:.86rem; line-height:1.5; min-height:74px; }
.project-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.project-meta span{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; color:#dfe7f2; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.07em; }
@media (max-width:1450px){ .portfolio-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1180px){
  .portfolio-hero-grid{ grid-template-columns:1fr; }
  .portfolio-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .portfolio-stats-simple{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
  .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .portfolio-section{ padding:20px 0 56px; }
  .portfolio-wrap{ width:min(96%,620px); }
  .portfolio-topline{ flex-direction:column; align-items:flex-start; }
  .portfolio-intro{ padding:16px 14px; }
  .portfolio-title span,.portfolio-title strong{ font-size:clamp(1.7rem,9vw,3rem); }
  .portfolio-copy p{ font-size:.84rem; }
  .portfolio-stats{ grid-template-columns:1fr 1fr; }
  .portfolio-stats-simple{ grid-template-columns:1fr 1fr; }
  .portfolio-showreel{ min-height:250px; }
  .portfolio-play span{ width:74px; height:74px; }
  .portfolio-play span::before{ left:29px; top:22px; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:22px solid var(--orange); }
  .portfolio-grid{ grid-template-columns:1fr; }
}


/* ===== v10: ajustes de coordinación, stack y reclutamiento ===== */
/* La tercera métrica aprovecha el ancho disponible sin reducir el título. */
.coord-metrics{
  grid-template-columns:minmax(0,.88fr) minmax(0,1fr) minmax(0,1.42fr);
}
.coord-metric-wide{
  padding-inline:clamp(18px,2vw,32px);
}
.coord-metric-wide strong{
  max-width:15ch;
  margin-inline:auto;
  font-size:clamp(1.18rem,1.75vw,2rem);
  line-height:1.08;
  letter-spacing:.035em;
  text-wrap:balance;
}
.coord-metric-wide p{
  max-width:24rem;
  margin-inline:auto;
  font-size:.8rem;
}
.coord-metric-wide .coord-metric-icon{
  margin-bottom:14px;
}
.coord-metric-wide .coord-metric-icon svg{
  width:42px;
  height:42px;
}

/* Logotipos locales para evitar glifos ausentes o marcas incorrectas. */
.tool-logo{
  width:30px;
  height:30px;
  object-fit:contain;
  flex:0 0 30px;
  display:block;
}
.tool-logo-clickup{ width:31px; height:31px; }
.tool-logo-confluence{ width:29px; height:29px; }
.tool-logo-notion{ width:29px; height:29px; }
.tool-logo-discord{ width:31px; height:28px; }

/* Reclutamiento: jerarquía más limpia y paneles con más aire. */
.recruit-section{
  padding:42px 0 84px;
}
.recruit-wrap{
  width:min(1520px,94%);
}
.recruit-grid{
  gap:22px;
  grid-template-columns:minmax(360px,.84fr) minmax(0,1.16fr);
  grid-template-areas:
    'intro stats'
    'what source'
    'areas areas';
  align-items:stretch;
}
.recruit-intro{
  padding:26px 28px 24px;
}
.recruit-title{
  margin:2px 0 20px;
  line-height:.96;
}
.recruit-title span{
  font-size:clamp(1.78rem,2.65vw,3.15rem);
  letter-spacing:.015em;
}
.recruit-title strong{
  font-size:clamp(2rem,3.35vw,3.75rem);
  line-height:1;
  letter-spacing:.025em;
}
.recruit-copy{
  display:grid;
  gap:12px;
}
.recruit-copy p{
  margin:0;
  font-size:.92rem;
  line-height:1.65;
}
.recruit-stats{
  padding:24px 24px 22px;
}
.recruit-stats-head{
  margin:0 4px 18px 0;
}
.recruit-stat-grid{
  min-height:100%;
}
.recruit-stat{
  padding:22px 26px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.recruit-stat-icon{
  width:60px;
  height:60px;
  margin:0 auto 14px;
}
.recruit-stat-icon svg{
  width:46px;
  height:46px;
}
.recruit-stat strong{
  max-width:18ch;
  margin:0 auto 14px;
  font-size:clamp(1.2rem,1.72vw,2rem);
  line-height:1.12;
  text-wrap:balance;
}
.recruit-stat p{
  max-width:23rem;
  margin-inline:auto;
  font-size:.87rem;
  line-height:1.62;
}
.recruit-what,
.recruit-source{
  padding:24px 26px 22px;
}
.recruit-what .panel-title,
.recruit-source .panel-title,
.recruit-areas .panel-title{
  margin-bottom:20px;
}
.recruit-list{
  gap:12px;
}
.recruit-list li{
  font-size:.87rem;
  line-height:1.52;
}
.recruit-source-copy{
  display:grid;
  gap:12px;
}
.recruit-source-copy p{
  margin:0;
  font-size:.88rem;
  line-height:1.65;
}
.recruit-areas{
  padding:24px 26px 26px;
}
.recruit-tags{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.recruit-tag{
  min-height:58px;
  padding:0 14px;
}
.recruit-tag span:last-child{
  font-size:.77rem;
  line-height:1.2;
  text-wrap:balance;
}
.recruit-nav{
  margin-top:22px;
  gap:18px;
}

@media (max-width:1180px){
  .recruit-grid{
    grid-template-columns:1fr;
    grid-template-areas:'intro' 'stats' 'what' 'source' 'areas';
  }
  .recruit-tags{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:980px){
  .coord-metrics{ grid-template-columns:1fr; }
  .coord-metric-wide strong{ max-width:18ch; font-size:clamp(1.35rem,5vw,2.2rem); }
  .recruit-stat-grid{ grid-template-columns:1fr; }
  .recruit-stat + .recruit-stat{ border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .recruit-tags{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px){
  .recruit-section{ padding:30px 0 58px; }
  .recruit-grid{ gap:16px; }
  .recruit-intro,
  .recruit-stats,
  .recruit-what,
  .recruit-source,
  .recruit-areas{ padding:18px 16px; }
  .recruit-title span{ font-size:clamp(1.42rem,7vw,2.2rem); }
  .recruit-title strong{ font-size:clamp(1.68rem,8.4vw,2.65rem); }
  .recruit-copy p,
  .recruit-stat p,
  .recruit-source-copy p,
  .recruit-list li{ font-size:.84rem; }
  .recruit-tags{ grid-template-columns:1fr; }
  .recruit-tag span:last-child{ font-size:.82rem; }
}


/* Ajuste final para títulos largos dentro de métricas. */
.coord-metric-wide strong{
  width:100%;
  max-width:none;
  font-size:clamp(1.08rem,1.35vw,1.45rem);
  line-height:1.08;
  white-space:nowrap;
}
.recruit-stat-grid{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) minmax(0,1.12fr);
}
.recruit-stat:nth-child(3){
  padding-inline:14px;
}
.recruit-stat:nth-child(3) strong{
  max-width:none;
  font-size:clamp(1.02rem,1.08vw,1.3rem);
  line-height:1.12;
  white-space:nowrap;
}
@media (max-width:980px){
  .coord-metric-wide strong,
  .recruit-stat:nth-child(3) strong{
    white-space:normal;
  }
  .recruit-stat-grid{ grid-template-columns:1fr; }
}

/* La métrica de coordinación conserva jerarquía visual sin desbordar. */
.coord-metric-wide strong{
  font-size:clamp(1.28rem,1.55vw,1.7rem);
  letter-spacing:.02em;
}


/* ===== v11 layout balance fixes ===== */
.coord-metrics{ grid-template-columns:.96fr 1fr 1.14fr; align-items:start; }
.coord-metric{ padding:4px 16px 0; }
.coord-metric strong{ font-size:clamp(1.15rem,1.7vw,1.92rem); }
.coord-metric p{ max-width:15rem; margin:12px auto 0; font-size:.8rem; line-height:1.55; }
.coord-metric-wide{ padding-inline:16px; }
.coord-metric-wide strong{
  max-width:11.5ch;
  font-size:clamp(.74rem,.94vw,1.02rem);
  line-height:1.02;
  letter-spacing:.015em;
}
.coord-metric-wide p{ max-width:17rem; font-size:.79rem; }

.recruit-section{ padding:16px 0 52px; }
.recruit-grid{
  align-items:start;
  gap:18px;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.94fr) minmax(0,.94fr);
  grid-template-areas:
    'intro stats stats'
    'what source areas';
}
.recruit-intro,.recruit-stats,.recruit-what,.recruit-source,.recruit-areas{ align-self:start; }
.recruit-intro{ padding:18px 18px 16px; }
.recruit-title{ margin:0 0 14px; }
.recruit-title span{ font-size:clamp(1.3rem,2vw,2.4rem); line-height:.95; }
.recruit-title strong{ font-size:clamp(1.55rem,2.65vw,2.85rem); line-height:.95; }
.recruit-copy p{ font-size:.83rem; line-height:1.5; margin-bottom:8px; }
.recruit-stats{ padding:16px 16px 14px; }
.recruit-stat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; align-items:start; }
.recruit-stat{ padding:14px 14px 6px; }
.recruit-stat-icon{ width:50px; height:50px; margin:0 auto 12px; }
.recruit-stat-icon svg{ width:38px; height:38px; }
.recruit-stat strong{
  font-size:clamp(.88rem,1vw,1.22rem);
  line-height:1.06;
  letter-spacing:.02em;
  max-width:11.8rem;
  margin:0 auto 10px;
}
.recruit-stat p{ font-size:.79rem; line-height:1.48; max-width:15.5rem; }
.recruit-what,.recruit-source,.recruit-areas{ padding:16px 16px 14px; }
.recruit-list li,.recruit-source-copy p{ font-size:.82rem; line-height:1.48; }
.recruit-tags{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.recruit-tag{ min-height:48px; padding:0 10px; }
.recruit-tag span:last-child{ font-size:.72rem; letter-spacing:.04em; }
.recruit-nav{ margin-top:14px; gap:14px; }
.recruit-nav-card{ min-height:62px; padding:0 14px; }
.recruit-nav-card span{ font-size:.76rem; }

.trajectory-grid{ grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:22px; }
.trajectory-intro{ padding:20px 18px 18px; }
.trajectory-title span,.trajectory-title strong{ font-size:clamp(1.85rem,3.75vw,4rem); letter-spacing:.03em; }

@media (max-width:1320px){
  .recruit-grid{
    grid-template-columns:1fr;
    grid-template-areas:'intro' 'stats' 'what' 'source' 'areas';
  }
}
@media (max-width:1080px){
  .recruit-grid{ grid-template-columns:1fr; }
  .recruit-stat-grid{ grid-template-columns:1fr; }
  .recruit-stat + .recruit-stat{ border-left:0; border-top:1px solid rgba(255,255,255,.08); }
  .recruit-nav{ grid-template-columns:1fr; }
  .trajectory-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .coord-metrics{ grid-template-columns:1fr; }
  .coord-metric + .coord-metric{ border-left:0; border-top:1px solid rgba(255,255,255,.08); padding-top:18px; margin-top:18px; }
  .recruit-section{ padding:26px 0 56px; }
  .recruit-intro,.recruit-stats,.recruit-what,.recruit-source,.recruit-areas{ padding:16px 14px; }
  .recruit-title span{ font-size:clamp(1.2rem,7vw,2.1rem); }
  .recruit-title strong{ font-size:clamp(1.5rem,9vw,2.8rem); }
  .recruit-copy p,.recruit-stat p,.recruit-source-copy p,.recruit-list li{ font-size:.84rem; }
  .recruit-tags{ grid-template-columns:1fr; }
  .trajectory-title span,.trajectory-title strong{ font-size:clamp(1.7rem,9vw,3.3rem); }
}


/* ===== v12 alignment and overflow fixes ===== */
.coord-metric-wide strong,
.recruit-stat strong{
  width:100%;
  display:block;
  text-align:center;
  margin-inline:auto;
}
.coord-metric-wide strong{
  max-width:12.5ch;
  font-size:clamp(.72rem,.88vw,.98rem);
  line-height:1.02;
  letter-spacing:.01em;
}
.coord-metric-wide p{ max-width:17rem; }

.recruit-stat-grid .recruit-stat:nth-child(3) strong{
  max-width:11.8rem;
  font-size:clamp(.86rem,1vw,1.14rem);
  line-height:1.06;
}
.recruit-areas .panel-title{ font-size:.82rem; }
.recruit-tags{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.recruit-tag{
  min-height:50px;
  padding:0 10px;
  gap:8px;
}
.recruit-tag .coord-tag-icon{ width:18px; height:18px; }
.recruit-tag .coord-tag-icon svg{ width:16px; height:16px; }
.recruit-tag span:last-child{
  font-size:.72rem;
  line-height:1.08;
  letter-spacing:.03em;
}

.trajectory-grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:24px;
  align-items:start;
}
.trajectory-intro{ padding:18px 18px 18px; }
.trajectory-title{ max-width:100%; line-height:.88; }
.trajectory-title span,
.trajectory-title strong{
  display:block;
  font-size:clamp(1.65rem,3.15vw,3.45rem);
  letter-spacing:.03em;
}
.trajectory-copy p{ font-size:.86rem; line-height:1.5; }
.trajectory-base{ margin-top:20px; min-height:88px; padding:0 16px; }
.trajectory-base strong{ font-size:.94rem; }
.trajectory-base span{ font-size:.84rem; }
.trajectory-timeline{ min-height:600px; padding-top:42px; }
.trajectory-line{ top:140px; left:10%; right:10%; }
.tl-dot{ width:52px; height:52px; }
.tl-dot::before{ inset:16px; }
.trajectory-node{ top:18px; }
.trajectory-card{ top:182px; width:28%; min-height:210px; padding:18px 18px 14px; }
.trajectory-card.card1{ left:6.5%; }
.trajectory-card.card2{ left:36%; }
.trajectory-card.card3{ right:6.5%; }
.trajectory-card strong{ font-size:clamp(1.08rem,1.35vw,1.5rem); }
.trajectory-card p{ font-size:.88rem; line-height:1.55; }
.trajectory-caption{ bottom:16px; font-size:.8rem; }

@media (max-width:1320px){
  .recruit-tags{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1200px){
  .trajectory-grid{ grid-template-columns:1fr; }
  .recruit-tags{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .recruit-tags{ grid-template-columns:1fr; }
  .trajectory-title span,.trajectory-title strong{ font-size:clamp(1.6rem,8.5vw,3rem); }
  .trajectory-base strong{ font-size:.86rem; }
}

@media (max-width:1320px){ .recruit-tags{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ===== v13 final alignment fixes ===== */
.coord-metric-wide strong,
.recruit-stat strong{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
}
.coord-metric-wide strong span,
.recruit-stat strong span{
  display:block;
  width:100%;
  text-align:center;
}
.coord-metric-wide strong span + span,
.recruit-stat strong span + span{
  margin-top:.06em;
}
.coord-metric-wide strong{
  max-width:14ch;
  margin-inline:auto;
  font-size:clamp(.72rem,.88vw,.98rem);
  line-height:1.02;
  letter-spacing:.01em;
}
.recruit-stat-grid .recruit-stat:nth-child(3) strong{
  max-width:14ch;
  margin-inline:auto;
  font-size:clamp(.84rem,.98vw,1.08rem);
  line-height:1.02;
}

.trajectory-title{
  display:flex;
  flex-wrap:nowrap;
  align-items:baseline;
  gap:0;
  white-space:nowrap;
  max-width:100%;
  overflow:visible;
}
.trajectory-title span,
.trajectory-title strong{
  display:inline;
  font-size:clamp(1.45rem,2.75vw,3rem);
  line-height:.92;
  letter-spacing:.02em;
}
.trajectory-intro{ padding:18px 18px 18px; }
.trajectory-copy p{ font-size:.84rem; line-height:1.48; }
.trajectory-base{ margin-top:18px; }
.trajectory-base strong{ font-size:.92rem; }
.trajectory-base span{ font-size:.82rem; }

@media (max-width:760px){
  .trajectory-title{
    display:block;
    white-space:normal;
  }
  .trajectory-title span,
  .trajectory-title strong{
    display:inline;
    font-size:clamp(1.55rem,8.2vw,2.8rem);
  }
}

/* ===== v14 recruitment centering + software page ===== */
.recruit-stat-grid .recruit-stat:nth-child(3) strong{
  display:grid;
  justify-items:center;
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  text-align:center;
  font-size:clamp(.82rem,.94vw,1.05rem);
}
.recruit-stat-grid .recruit-stat:nth-child(3) strong span{
  display:block;
  width:auto;
  max-width:100%;
  margin:0;
  white-space:nowrap;
  text-align:center;
}

.software-page{
  --software-blue:#278fe8;
  --software-blue-soft:rgba(39,143,232,.22);
  background:#02070e;
}
.software-page .nav-link::after{ background:var(--software-blue); }
.software-page .navbar{ background:linear-gradient(180deg,rgba(2,7,14,.98),rgba(2,7,14,.65)); }

.software-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:102px 0 76px;
  background:#02070e;
}
.software-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.software-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.9) contrast(1.08) brightness(.72);
  transform:scale(1.015);
}
.software-hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,7,14,.98) 0%,rgba(2,7,14,.94) 36%,rgba(2,7,14,.55) 66%,rgba(2,7,14,.46) 100%),
    linear-gradient(180deg,rgba(2,7,14,.88) 0%,rgba(2,7,14,.12) 34%,rgba(2,7,14,.2) 68%,rgba(2,7,14,.94) 100%);
}
.software-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 73% 39%,rgba(39,143,232,.13),transparent 34%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(56,139,218,.022) 80px),
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(56,139,218,.018) 80px);
  pointer-events:none;
}
.software-hud-frame{
  position:absolute;
  inset:80px 28px 24px;
  z-index:2;
  pointer-events:none;
  border-left:1px solid rgba(74,158,236,.23);
  border-right:1px solid rgba(74,158,236,.23);
}
.shf-corner{ position:absolute; width:54px; height:54px; }
.shf-tl{ left:-1px; top:0; border-top:1px solid rgba(74,158,236,.42); }
.shf-tr{ right:-1px; top:0; border-top:1px solid rgba(74,158,236,.42); }
.shf-bl{ left:-1px; bottom:0; border-bottom:1px solid rgba(74,158,236,.42); }
.shf-br{ right:-1px; bottom:0; border-bottom:1px solid rgba(74,158,236,.42); }
.shf-line{ position:absolute; top:44%; width:12px; height:84px; border-top:1px solid rgba(74,158,236,.58); border-bottom:1px solid rgba(74,158,236,.58); }
.shf-left{ left:-1px; border-right:1px solid rgba(74,158,236,.58); }
.shf-right{ right:-1px; border-left:1px solid rgba(74,158,236,.58); }

.software-shell{
  position:relative;
  z-index:3;
  width:min(1480px,92%);
  margin:0 auto;
}
.software-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr);
  gap:64px;
  align-items:center;
}
.software-copy{ min-width:0; }
.software-kicker,
.software-panel-label{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#54aeff;
  font-family:var(--f-mono);
  font-size:.9rem;
  letter-spacing:.2em;
}
.software-kicker{ margin-bottom:20px; }
.software-kicker span,
.software-panel-label span{
  width:13px;
  height:18px;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
}
.software-kicker span:first-child,
.software-panel-label span:first-child{ border-left:1px solid currentColor; }
.software-kicker span:last-child,
.software-panel-label span:last-child{ border-right:1px solid currentColor; }
.software-title{
  margin:0 0 22px;
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.055em;
}
.software-title span{
  display:block;
  color:#f1f4f8;
  font-size:clamp(2.45rem,4.15vw,4.55rem);
  text-shadow:0 4px 24px rgba(0,0,0,.62);
}
.software-roles{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#4ca8fc;
  font-family:var(--f-ui);
  font-size:clamp(.8rem,1.05vw,1rem);
  font-weight:600;
  letter-spacing:.12em;
}
.software-roles i{ width:4px; height:4px; border-radius:50%; background:#4ca8fc; }
.software-copy-text{ max-width:760px; }
.software-copy-text p{
  color:#d3dae4;
  font-size:1.05rem;
  line-height:1.52;
  letter-spacing:.01em;
  margin-bottom:10px;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.software-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:24px;
}
.software-btn{
  position:relative;
  min-width:276px;
  min-height:62px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 24px;
  color:#57afff;
  font-family:var(--f-display);
  font-size:.84rem;
  letter-spacing:.09em;
  background:rgba(3,12,24,.72);
  border:1px solid rgba(52,151,239,.55);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
}
.software-btn::after{
  content:'';
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#3a9ff5,transparent);
}
.software-btn svg{ width:28px; height:28px; flex:none; }
.software-btn:hover{ transform:translateY(-3px); background:rgba(12,43,72,.72); box-shadow:0 0 24px rgba(39,143,232,.16); }

.software-focus{
  position:relative;
  min-height:454px;
  padding:28px 30px 22px;
  background:linear-gradient(120deg,rgba(2,12,23,.9),rgba(5,22,40,.64));
  border:1px solid rgba(58,156,239,.5);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  box-shadow:0 18px 55px rgba(0,0,0,.38),inset 0 0 42px rgba(37,131,211,.045);
}
.software-focus::before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(79,165,239,.08);
  pointer-events:none;
}
.software-panel-label{ margin-bottom:18px; }
.focus-list{ display:grid; gap:5px; }
.focus-item{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:18px;
  align-items:center;
  min-height:87px;
}
.focus-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  color:#4eacff;
  background:rgba(3,17,31,.78);
  border:1px solid rgba(60,161,244,.65);
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
}
.focus-icon svg{ width:38px; height:38px; }
.focus-item strong{
  display:block;
  color:#f0f4fa;
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:4px;
}
.focus-item p{ color:#aebbc9; font-size:.86rem; line-height:1.36; }

.software-capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:36px;
}
.software-cap-card{
  position:relative;
  min-height:216px;
  display:grid;
  grid-template-columns:76px minmax(0,1fr) minmax(130px,.72fr);
  gap:6px;
  align-items:start;
  padding:28px 22px 22px;
  overflow:hidden;
  background:linear-gradient(115deg,rgba(3,12,23,.92),rgba(4,20,36,.68));
  border:1px solid rgba(55,153,237,.52);
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
  box-shadow:inset 0 0 36px rgba(39,143,232,.035);
}
.software-cap-card::after{
  content:'';
  position:absolute;
  right:18px;
  top:12px;
  width:74px;
  height:1px;
  background:linear-gradient(90deg,transparent,#369af0);
}
.cap-number{
  color:#2d7ed3;
  font-family:var(--f-display);
  font-size:2.8rem;
  line-height:1;
  text-shadow:0 0 18px rgba(39,143,232,.18);
}
.cap-copy{ position:relative; z-index:2; min-width:0; }
.cap-copy h2{
  min-height:46px;
  color:#f0f4fa;
  font-family:var(--f-display);
  font-size:clamp(.75rem,.88vw,.94rem);
  font-weight:400;
  line-height:1.28;
  letter-spacing:.07em;
}
.cap-copy p{
  max-width:240px;
  margin-top:15px;
  color:#aeb9c7;
  font-size:.88rem;
  line-height:1.48;
}
.cap-copy > span{
  display:block;
  margin-top:13px;
  color:#4aa8fb;
  font-size:1.4rem;
}
.cap-visual{
  position:absolute;
  right:12px;
  bottom:9px;
  width:38%;
  height:82%;
  display:grid;
  place-items:center;
  color:#318fe5;
  opacity:.86;
  filter:drop-shadow(0 0 16px rgba(39,143,232,.2));
}
.cap-visual svg{ width:100%; height:100%; }
.cap-visual::before{
  content:'';
  position:absolute;
  inset:13%;
  background:radial-gradient(circle,rgba(39,143,232,.15),transparent 68%);
  z-index:-1;
}
.software-scroll{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:16px;
  color:#8999ad;
  font-family:var(--f-mono);
  font-size:.8rem;
  letter-spacing:.22em;
  white-space:nowrap;
}
.software-scroll > span{ width:74px; height:1px; background:linear-gradient(90deg,transparent,rgba(62,153,235,.42)); }
.software-scroll > span:last-child{ transform:scaleX(-1); }
.software-scroll i{
  position:relative;
  width:16px;
  height:29px;
  border:1px solid #3b9ce9;
  border-radius:9px;
}
.software-scroll b{
  position:absolute;
  left:50%;
  top:5px;
  width:2px;
  height:6px;
  transform:translateX(-50%);
  background:#48a9fb;
  animation:software-wheel 1.5s ease-in-out infinite;
}
@keyframes software-wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,10px)} }

@media (max-width:1260px){
  .software-hero{ min-height:auto; }
  .software-main-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .software-title span{ font-size:clamp(2.2rem,4vw,3.5rem); }
  .software-cap-card{ grid-template-columns:60px minmax(0,1fr); min-height:220px; }
  .cap-visual{ opacity:.35; width:45%; }
}
@media (max-width:980px){
  .software-hero{ padding-top:100px; }
  .software-main-grid{ grid-template-columns:1fr; }
  .software-focus{ min-height:auto; }
  .software-capability-grid{ grid-template-columns:1fr; }
  .software-cap-card{ min-height:190px; }
  .cap-visual{ width:32%; opacity:.7; }
  .software-scroll{ display:none; }
}
@media (max-width:720px){
  .software-hud-frame{ inset:80px 10px 16px; }
  .software-shell{ width:min(94%,620px); }
  .software-title span{ font-size:clamp(1.75rem,10vw,2.75rem); }
  .software-roles{ font-size:.72rem; gap:7px; }
  .software-copy-text p{ font-size:.95rem; }
  .software-actions{ display:grid; grid-template-columns:1fr; }
  .software-btn{ min-width:0; width:100%; }
  .software-focus{ padding:22px 16px 16px; }
  .focus-item{ grid-template-columns:52px 1fr; gap:13px; min-height:78px; }
  .focus-icon{ width:52px; height:52px; }
  .focus-icon svg{ width:31px; height:31px; }
  .focus-item strong{ font-size:.94rem; }
  .software-cap-card{ grid-template-columns:52px minmax(0,1fr); padding:22px 16px; }
  .cap-number{ font-size:2rem; }
  .cap-visual{ width:42%; opacity:.32; }
}

/* ===== v15 hero placement + software card artwork ===== */
@media (min-width:1241px){
  .games-focus{
    left:112px;
  }
}

.cap-visual{
  right:4px;
  bottom:2px;
  width:43%;
  height:91%;
  opacity:1;
  filter:drop-shadow(0 0 20px rgba(39,143,232,.23));
}
.cap-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.cap-visual::before{ display:none; }
.code-visual{ width:42%; right:2px; }
.architecture-visual{ width:44%; right:-2px; }
.solutions-visual{ width:46%; right:-8px; bottom:-4px; }

@media (max-width:1240px){
  .games-focus{ left:0; }
  .cap-visual{ width:35%; right:10px; }
}
@media (max-width:760px){
  .cap-visual{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    height:150px;
    grid-column:1 / -1;
    margin-top:8px;
  }
  .software-cap-card{
    grid-template-columns:52px minmax(0,1fr);
  }
}

/* ===== v16 software cards refinement + stack section ===== */
.software-cap-card{
  grid-template-columns:80px minmax(0,1fr);
  gap:12px;
  padding:26px 176px 22px 22px;
  min-height:224px;
}
.cap-number{
  font-size:2.9rem;
  align-self:start;
  position:relative;
  z-index:2;
}
.cap-copy h2{
  min-height:auto;
  max-width:230px;
  font-size:clamp(.76rem,.88vw,.96rem);
}
.cap-copy p{
  max-width:220px;
}
.cap-visual{
  right:14px;
  bottom:10px;
  width:150px;
  height:128px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.cap-visual img{
  object-fit:contain;
  object-position:center bottom;
}
.code-visual{ width:132px; height:118px; right:16px; }
.architecture-visual{ width:168px; height:132px; right:4px; bottom:8px; }
.solutions-visual{ width:186px; height:142px; right:-6px; bottom:4px; }

.software-stack-section{
  position:relative;
  overflow:hidden;
  padding:92px 0 68px;
  background:#02070e;
}
.software-stack-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.software-stack-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.85) contrast(1.05) brightness(.48);
}
.software-stack-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(2,7,14,.97) 0%,rgba(2,7,14,.92) 38%,rgba(2,7,14,.5) 70%,rgba(2,7,14,.82) 100%),
    linear-gradient(180deg,rgba(2,7,14,.9) 0%,rgba(2,7,14,.45) 28%,rgba(2,7,14,.32) 58%,rgba(2,7,14,.96) 100%),
    repeating-linear-gradient(90deg,transparent 0 95px,rgba(56,139,218,.018) 96px),
    repeating-linear-gradient(0deg,transparent 0 95px,rgba(56,139,218,.016) 96px);
}
.software-stack-shell{
  position:relative;
  z-index:2;
  width:min(1540px,94%);
  margin:0 auto;
}
.software-stack-top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.82fr);
  gap:34px;
  align-items:start;
}
.stack-copy{ min-width:0; }
.stack-title{
  margin:0 0 20px;
  color:#f0f4f8;
  font-family:var(--f-display);
  font-size:clamp(2.6rem,4.6vw,5.2rem);
  font-weight:400;
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-shadow:0 4px 24px rgba(0,0,0,.56);
}
.stack-copy-text{ max-width:720px; }
.stack-copy-text p{
  color:#d3dae4;
  font-size:1.05rem;
  line-height:1.7;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.stack-focus{
  padding:18px 18px 16px 22px;
  background:linear-gradient(120deg,rgba(3,14,27,.9),rgba(5,22,40,.56));
  border:1px solid rgba(58,156,239,.55);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  box-shadow:0 18px 55px rgba(0,0,0,.28), inset 0 0 40px rgba(37,131,211,.045);
}
.stack-focus-list{ display:grid; gap:0; }
.stack-focus-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:16px;
  align-items:center;
  min-height:72px;
  border-bottom:1px solid rgba(88,164,231,.2);
}
.stack-focus-item:last-child{ border-bottom:0; }
.stack-focus-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  color:#4eacff;
  border:1px solid rgba(60,161,244,.56);
  background:rgba(3,17,31,.66);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
}
.stack-focus-icon svg{ width:28px; height:28px; }
.stack-focus-item strong{
  color:#f0f4fa;
  font-size:1rem;
  font-weight:500;
}
.stack-tech-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:34px;
}
.stack-tech-card{
  min-height:346px;
  padding:18px 18px 18px;
  background:linear-gradient(120deg,rgba(3,14,26,.94),rgba(4,20,36,.72));
  border:1px solid rgba(55,153,237,.52);
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
  box-shadow:inset 0 0 36px rgba(39,143,232,.03);
}
.stack-tech-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.stack-tech-no{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:#49a8ff;
  font-family:var(--f-display);
  font-size:1.55rem;
  border:1px solid rgba(60,161,244,.58);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.stack-tech-icon{
  color:#49a8ff;
  display:grid;
  place-items:center;
}
.stack-tech-icon svg{ width:46px; height:46px; }
.stack-tech-card h3{
  margin:0 0 14px;
  color:#56b3ff;
  font-family:var(--f-display);
  font-size:clamp(1.02rem,1.25vw,1.5rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.stack-tech-list{
  color:#f2f5f8;
  font-size:.92rem;
  line-height:1.6;
  margin-bottom:18px;
}
.stack-tech-card i{
  display:block;
  width:100%;
  height:1px;
  margin:0 0 18px;
  background:linear-gradient(90deg,rgba(80,173,244,.55),rgba(80,173,244,.1));
}
.stack-tech-card p:last-child{
  color:#b4bfcb;
  font-size:.84rem;
  line-height:1.55;
}
.stack-footer-bar{
  display:grid;
  grid-template-columns:56px 1fr 30px;
  gap:14px;
  align-items:center;
  margin-top:28px;
  padding:10px 14px;
  border:1px solid rgba(55,153,237,.42);
  background:rgba(3,12,24,.62);
}
.stack-footer-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#4aa8fb;
  border:1px solid rgba(60,161,244,.42);
}
.stack-footer-icon svg{ width:24px; height:24px; }
.stack-footer-bar p{
  color:#77bfff;
  font-family:var(--f-mono);
  font-size:clamp(.9rem,1.25vw,1.2rem);
  letter-spacing:.12em;
  text-align:center;
}
.stack-footer-side{
  height:100%;
  border-left:1px solid rgba(60,161,244,.36);
  position:relative;
}
.stack-footer-side::before,
.stack-footer-side::after{
  content:'';
  position:absolute;
  right:6px;
  width:10px;
  height:1px;
  background:#4aa8fb;
}
.stack-footer-side::before{ top:12px; }
.stack-footer-side::after{ top:20px; }

@media (max-width:1320px){
  .software-cap-card{ padding-right:148px; }
  .cap-visual{ width:128px; height:112px; }
  .architecture-visual{ width:144px; }
  .solutions-visual{ width:162px; }
  .software-stack-top{ grid-template-columns:1fr; }
  .stack-tech-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1024px){
  .stack-tech-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px){
  .software-capability-grid{ grid-template-columns:1fr; }
  .software-cap-card{
    min-height:200px;
    padding-right:170px;
  }
}
@media (max-width:760px){
  .software-cap-card{
    grid-template-columns:64px minmax(0,1fr);
    padding:20px 16px 18px;
  }
  .cap-number{ font-size:2.3rem; }
  .cap-copy h2{ max-width:none; }
  .cap-visual,
  .code-visual,
  .architecture-visual,
  .solutions-visual{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    height:150px;
    grid-column:1 / -1;
    margin-top:8px;
  }
  .stack-title{ font-size:clamp(2rem,9vw,3.4rem); }
  .stack-copy-text p{ font-size:.95rem; line-height:1.6; }
  .stack-focus-item{ grid-template-columns:50px 1fr; gap:12px; }
  .stack-tech-grid{ grid-template-columns:1fr; }
  .stack-tech-card{ min-height:auto; }
  .stack-footer-bar{ grid-template-columns:1fr; text-align:center; }
  .stack-footer-icon{ margin:0 auto; }
  .stack-footer-side{ display:none; }
}

/* ===== v17 hero artwork scaling + refined stack cards ===== */
.code-visual{
  width:176px;
  height:148px;
  right:8px;
  bottom:8px;
}
.code-visual img{
  transform:scale(1.34);
  transform-origin:center bottom;
}
.architecture-visual{
  width:188px;
  height:146px;
  right:-2px;
  bottom:8px;
}
.architecture-visual img{
  transform:scale(1.16);
  transform-origin:center bottom;
}
.solutions-visual{
  width:186px;
  height:142px;
  right:-6px;
  bottom:4px;
}

.stack-tech-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(74,158,236,.62);
  box-shadow:
    inset 0 0 36px rgba(39,143,232,.03),
    0 0 0 1px rgba(24,79,132,.14);
}
.stack-tech-card::before,
.stack-tech-card::after{
  content:'';
  position:absolute;
  pointer-events:none;
}
.stack-tech-card::before{
  inset:12px;
  border:1px solid rgba(70,148,225,.08);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
}
.stack-tech-card::after{
  left:18px;
  right:18px;
  bottom:18px;
  height:1px;
  background:linear-gradient(90deg,rgba(74,158,236,.18),rgba(74,158,236,.42),rgba(74,158,236,.12));
}
.stack-tech-head{
  position:relative;
  padding-top:4px;
}
.stack-tech-head::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-2px;
  height:1px;
  background:linear-gradient(90deg,rgba(74,158,236,.42),rgba(74,158,236,.08));
}
.stack-tech-no{
  flex:none;
  width:52px;
  height:52px;
  font-size:1.65rem;
  background:rgba(2,11,22,.62);
  box-shadow:inset 0 0 18px rgba(74,158,236,.06);
}
.stack-tech-icon{
  flex:none;
  width:66px;
  height:66px;
  align-self:center;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 12px rgba(74,158,236,.18));
}
.stack-tech-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.stack-tech-card h3{
  margin-top:2px;
  min-height:72px;
}
.stack-tech-list{
  min-height:88px;
}

@media (max-width:1320px){
  .code-visual{ width:158px; height:134px; }
  .architecture-visual{ width:172px; height:136px; }
  .stack-tech-icon{ width:58px; height:58px; }
}
@media (max-width:980px){
  .code-visual{ width:168px; height:136px; }
  .architecture-visual{ width:180px; height:140px; }
}
@media (max-width:760px){
  .code-visual img,
  .architecture-visual img,
  .solutions-visual img{ transform:none; }
  .stack-tech-head{
    gap:12px;
  }
  .stack-tech-icon{
    width:52px;
    height:52px;
  }
  .stack-tech-card h3,
  .stack-tech-list{ min-height:auto; }
}

/* ===== v18 software refinement + architecture section ===== */
/* Hero cards rebuilt with code/SVG visuals */
.cap-visual{
  right:10px;
  bottom:8px;
  display:grid;
  place-items:center;
  overflow:visible;
}
.cap-svg{
  width:100%;
  height:100%;
  color:rgba(76,170,255,.98);
  filter:drop-shadow(0 0 14px rgba(61,152,237,.16));
}
.code-visual{ width:156px; height:128px; right:20px; bottom:10px; }
.architecture-visual{ width:188px; height:136px; right:10px; bottom:6px; }
.solutions-visual{ width:182px; height:130px; right:6px; bottom:10px; }
.cap-copy h2{ max-width:240px; }
.cap-copy p{ max-width:235px; }

.cap-svg-code .code-particles circle,
.cap-svg-arch circle,
.cap-svg-sol circle{ fill:currentColor; }

/* Stack cards: larger icons and safer title fit */
.stack-tech-grid{ gap:14px; }
.stack-tech-card{ padding:18px 16px 18px; min-height:350px; }
.stack-tech-head{ gap:14px; align-items:flex-start; }
.stack-tech-icon{
  width:76px;
  height:76px;
  margin-top:-2px;
}
.stack-tech-icon img{ width:100%; height:100%; object-fit:contain; }
.stack-tech-card h3{
  max-width:100%;
  min-height:80px;
  font-size:clamp(.98rem,1.12vw,1.36rem);
  line-height:1.02;
}
.stack-tech-card:nth-child(5) h3{
  font-size:clamp(.86rem,1vw,1.18rem);
  letter-spacing:.04em;
}
.stack-tech-list{ min-height:98px; }

/* Architecture section */
.architecture-section{
  position:relative;
  overflow:hidden;
  padding:96px 0 72px;
  background:#02070e;
}
.architecture-bg,
.architecture-overlay{ position:absolute; inset:0; }
.architecture-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.86) contrast(1.04) brightness(.42);
}
.architecture-overlay{
  background:
    linear-gradient(90deg,rgba(2,7,14,.97) 0%,rgba(2,7,14,.89) 38%,rgba(2,7,14,.48) 66%,rgba(2,7,14,.9) 100%),
    linear-gradient(180deg,rgba(2,7,14,.78) 0%,rgba(2,7,14,.34) 32%,rgba(2,7,14,.28) 58%,rgba(2,7,14,.95) 100%),
    repeating-linear-gradient(90deg,transparent 0 112px,rgba(56,139,218,.018) 113px),
    repeating-linear-gradient(0deg,transparent 0 112px,rgba(56,139,218,.012) 113px);
}
.architecture-shell{
  position:relative; z-index:2; width:min(1540px,94%); margin:0 auto;
}
.architecture-top{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:34px; align-items:start;
}
.architecture-title{
  margin:0 0 16px; color:#f2f5f8; font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.8rem,4.8vw,5rem); line-height:.92; letter-spacing:.05em; text-transform:uppercase;
  text-shadow:0 4px 24px rgba(0,0,0,.56);
}
.architecture-title span{ display:block; }
.architecture-roles{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:18px;
  color:#56b3ff; font-family:var(--f-mono); font-size:1rem; letter-spacing:.12em;
}
.architecture-roles i{ width:4px; height:4px; border-radius:999px; background:#56b3ff; }
.architecture-copy-text{ max-width:700px; }
.architecture-copy-text p{
  color:#d7dee8; font-size:1.05rem; line-height:1.65; margin-bottom:10px; text-shadow:0 2px 10px rgba(0,0,0,.72);
}
.architecture-side{ display:grid; grid-template-columns:minmax(360px,.8fr) minmax(260px,.6fr); gap:18px; align-items:stretch; }
.architecture-focus{
  padding:18px 18px 16px 22px;
  background:linear-gradient(120deg,rgba(3,14,27,.88),rgba(5,22,40,.52));
  border:1px solid rgba(58,156,239,.55);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  box-shadow:0 18px 55px rgba(0,0,0,.28), inset 0 0 40px rgba(37,131,211,.045);
}
.architecture-focus-list{ display:grid; gap:10px; }
.architecture-focus-item{
  display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; min-height:84px;
}
.architecture-focus-item + .architecture-focus-item{ border-top:1px solid rgba(88,164,231,.2); padding-top:10px; }
.architecture-focus-icon{
  width:58px; height:58px; display:grid; place-items:center; color:#4eacff;
  border:1px solid rgba(60,161,244,.56); background:rgba(3,17,31,.66);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
}
.architecture-focus-icon svg{ width:30px; height:30px; }
.architecture-focus-item strong{ display:block; color:#f0f4fa; font-size:1.05rem; font-weight:500; margin-bottom:4px; }
.architecture-focus-item p{ color:#c0cad4; font-size:.88rem; line-height:1.45; }
.architecture-hero-art{
  display:flex; align-items:flex-end; justify-content:center; min-height:100%;
  padding:12px 6px 0; position:relative;
}
.architecture-hero-art::before{
  content:''; position:absolute; inset:10% 4% 18% 4%;
  background:radial-gradient(circle at center,rgba(73,167,255,.12),transparent 62%);
  filter:blur(18px);
}
.architecture-hero-art img{ position:relative; max-width:100%; max-height:430px; object-fit:contain; filter:drop-shadow(0 0 20px rgba(74,158,236,.22)); }

.architecture-card-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px;
}
.architecture-card{
  position:relative; overflow:hidden; min-height:340px; padding:18px 18px 18px;
  background:linear-gradient(120deg,rgba(3,14,26,.94),rgba(4,20,36,.72));
  border:1px solid rgba(55,153,237,.52);
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
  box-shadow:inset 0 0 36px rgba(39,143,232,.03),0 0 0 1px rgba(24,79,132,.14);
}
.architecture-card::before{
  content:''; position:absolute; inset:12px; border:1px solid rgba(70,148,225,.08);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
}
.architecture-card-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; position:relative; z-index:2; }
.architecture-card-no{
  flex:none; width:56px; height:56px; display:grid; place-items:center; color:#49a8ff; background:rgba(2,11,22,.62);
  font-family:var(--f-display); font-size:1.8rem; border:1px solid rgba(60,161,244,.58);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.architecture-card h3{
  margin:0; color:#f2f5f8; font-family:var(--f-display); font-size:clamp(1rem,1.18vw,1.38rem); font-weight:400;
  letter-spacing:.05em; line-height:1.05; text-transform:uppercase;
}
.architecture-platforms{ display:grid; gap:16px; position:relative; z-index:2; }
.architecture-platform{ display:flex; align-items:center; gap:14px; color:#eaf2fb; }
.architecture-platform strong{
  min-width:52px; color:#56b3ff; font-family:var(--f-display); font-size:1.2rem; font-weight:400; text-transform:uppercase;
}
.architecture-platform span{ font-size:1rem; color:#eaf2fb; }
.architecture-world-art{ position:absolute; right:18px; top:92px; width:44%; max-width:230px; }
.architecture-world-art img,
.architecture-service-art img{ width:100%; height:auto; display:block; object-fit:contain; filter:drop-shadow(0 0 16px rgba(74,158,236,.18)); }
.architecture-card-world p{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; color:#c3cfda; font-size:.92rem; line-height:1.55; max-width:45%; }
.architecture-card-services{ min-height:340px; }
.architecture-services-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; position:relative; z-index:2; max-width:76%;
}
.architecture-service{ display:flex; align-items:flex-start; gap:10px; color:#e7edf5; font-size:.95rem; line-height:1.35; }
.architecture-service svg{ width:24px; height:24px; flex:none; color:#49a8ff; margin-top:1px; }
.architecture-service-art{ position:absolute; right:12px; bottom:6px; width:38%; max-width:225px; }
.architecture-card-devops{ min-height:340px; }
.architecture-devops-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 18px; position:relative; z-index:2; }
.architecture-devops-item{ display:flex; gap:12px; align-items:flex-start; }
.architecture-devops-item svg{ width:28px; height:28px; flex:none; color:#49a8ff; margin-top:1px; }
.architecture-devops-item strong{ display:block; color:#eff4fa; font-size:1rem; font-weight:500; line-height:1.2; }
.architecture-devops-item span{ display:block; color:#c3cfda; font-size:.88rem; line-height:1.35; }
.architecture-footer-bar{
  display:grid; grid-template-columns:66px 1fr 44px; gap:14px; align-items:center;
  margin-top:18px; padding:10px 14px; border:1px solid rgba(55,153,237,.42); background:rgba(3,12,24,.62);
}
.architecture-footer-icon{
  width:46px; height:46px; display:grid; place-items:center; color:#4aa8fb; border:1px solid rgba(60,161,244,.42);
}
.architecture-footer-icon svg{ width:28px; height:28px; }
.architecture-footer-bar p{ color:#77bfff; font-family:var(--f-mono); font-size:clamp(.9rem,1.22vw,1.18rem); letter-spacing:.12em; text-align:center; }
.architecture-footer-arrow{ color:#4aa8fb; font-family:var(--f-display); font-size:2rem; text-align:center; }

@media (max-width:1420px){
  .architecture-side{ grid-template-columns:minmax(340px,.82fr) minmax(220px,.58fr); }
  .architecture-services-grid{ max-width:72%; }
}
@media (max-width:1320px){
  .stack-tech-icon{ width:66px; height:66px; }
  .architecture-card-grid{ grid-template-columns:1fr; }
  .architecture-world-art{ width:32%; }
  .architecture-card-world p{ max-width:50%; }
  .architecture-service-art{ width:28%; }
  .architecture-devops-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1100px){
  .architecture-top{ grid-template-columns:1fr; }
  .architecture-side{ grid-template-columns:1fr; }
  .architecture-hero-art{ justify-content:flex-end; }
}
@media (max-width:980px){
  .architecture-services-grid{ max-width:100%; padding-right:0; }
  .architecture-service-art{ width:34%; opacity:.9; }
}
@media (max-width:760px){
  .code-visual,.architecture-visual,.solutions-visual{ width:100%; height:136px; right:auto; bottom:auto; }
  .stack-tech-card{ min-height:auto; }
  .stack-tech-icon{ width:54px; height:54px; }
  .architecture-section{ padding:72px 0 56px; }
  .architecture-title{ font-size:clamp(2rem,9vw,3.5rem); }
  .architecture-roles{ font-size:.82rem; }
  .architecture-copy-text p{ font-size:.95rem; }
  .architecture-focus-item{ grid-template-columns:56px 1fr; }
  .architecture-card{ min-height:auto; }
  .architecture-world-art,
  .architecture-service-art{ position:relative; right:auto; top:auto; bottom:auto; width:100%; max-width:220px; margin:12px auto 0; }
  .architecture-card-world p{ position:relative; left:auto; right:auto; bottom:auto; max-width:none; margin-top:14px; }
  .architecture-services-grid,
  .architecture-devops-grid{ grid-template-columns:1fr; }
  .architecture-footer-bar{ grid-template-columns:1fr; text-align:center; }
  .architecture-footer-icon{ margin:0 auto; }
}

.architecture-platform i{min-width:52px;color:#56b3ff;font-size:2rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;}

/* ===== v19 refinement: software cards, stack icons, architecture layout ===== */
/* Software capability cards */
.software-capability-grid{
  gap:24px;
}
.software-cap-card{
  position:relative;
  grid-template-columns:72px minmax(0,1fr) 180px;
  gap:18px;
  min-height:258px;
  padding:24px 22px 22px;
  background:linear-gradient(135deg,rgba(3,12,23,.97),rgba(4,20,36,.78));
  border:1px solid rgba(66,160,242,.68);
  box-shadow:inset 0 0 0 1px rgba(19,62,101,.35), inset 0 0 38px rgba(39,143,232,.03), 0 0 0 1px rgba(24,79,132,.12);
}
.software-cap-card::before{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(75,157,234,.12);
  clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  pointer-events:none;
}
.software-cap-card::after{
  right:18px;
  top:14px;
  width:92px;
  background:linear-gradient(90deg,transparent,rgba(89,175,247,.85));
}
.cap-number{
  position:relative;
  z-index:2;
  font-size:3rem;
  align-self:start;
  margin-top:2px;
}
.cap-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
  padding-right:2px;
}
.cap-copy h2{
  max-width:none;
  min-height:52px;
  margin:0;
  color:#f2f5f8;
  font-size:clamp(1rem,1.04vw,1.18rem);
  line-height:1.08;
  letter-spacing:.065em;
}
.cap-copy p{
  max-width:none;
  margin-top:18px;
  margin-bottom:0;
  color:#aeb9c7;
  font-size:.92rem;
  line-height:1.56;
}
.cap-copy > span{
  margin-top:20px;
  font-size:1.35rem;
  line-height:1;
}
.cap-visual{
  position:relative;
  right:auto;
  bottom:auto;
  width:100%;
  height:100%;
  min-height:152px;
  align-self:end;
  justify-self:end;
  color:#49a8ff;
}
.cap-visual::before{ display:none; }
.cap-svg{
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 16px rgba(61,152,237,.18));
}
.code-visual{ width:100%; height:156px; }
.architecture-visual{ width:100%; height:164px; }
.solutions-visual{ width:100%; height:154px; }
.cap-svg-code{ transform:scale(1.12); transform-origin:center center; }
.cap-svg-arch{ transform:scale(1.18); transform-origin:center center; }
.cap-svg-sol{ transform:scale(1.08); transform-origin:center center; }

/* Stack cards */
.stack-tech-grid{ gap:16px; }
.stack-tech-card{
  min-height:356px;
  padding:18px 18px 20px;
}
.stack-tech-head{
  position:relative;
  display:block;
  min-height:104px;
  margin-bottom:14px;
  padding-top:2px;
}
.stack-tech-head::after{
  left:0;
  right:0;
  top:0;
}
.stack-tech-no{
  position:absolute;
  top:0;
  left:0;
  width:54px;
  height:54px;
  font-size:1.8rem;
}
.stack-tech-icon{
  width:94px;
  height:94px;
  margin:10px auto 0;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 14px rgba(74,158,236,.22));
}
.stack-tech-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.stack-tech-card h3{
  min-height:68px;
  margin:0 0 14px;
  text-align:center;
  font-size:clamp(.98rem,1.06vw,1.28rem);
  line-height:1.02;
}
.stack-tech-card:nth-child(4) h3{ font-size:clamp(.92rem,1vw,1.18rem); }
.stack-tech-card:nth-child(5) h3{ font-size:clamp(.9rem,.98vw,1.1rem); }
.stack-tech-list{
  min-height:112px;
  font-size:.9rem;
  line-height:1.62;
}
.stack-tech-card p:last-child{
  font-size:.85rem;
  line-height:1.56;
}

/* Architecture */
.architecture-top{
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:28px;
  align-items:start;
}
.architecture-copy{
  position:relative;
  z-index:3;
  min-width:0;
}
.architecture-title{
  position:relative;
  z-index:3;
  max-width:720px;
  margin:0 0 18px;
  font-size:clamp(2.5rem,4.15vw,4.4rem);
  line-height:.96;
  letter-spacing:.045em;
}
.architecture-title span:first-child{ white-space:nowrap; }
.architecture-copy-text{ max-width:760px; }
.architecture-copy-text p{
  font-size:1.02rem;
  line-height:1.62;
}
.architecture-side{
  grid-template-columns:minmax(380px,.84fr) minmax(320px,.78fr);
  gap:24px;
  align-items:center;
}
.architecture-focus{
  min-height:430px;
  padding:18px 22px 16px;
}
.architecture-hero-art{
  align-items:center;
  justify-content:center;
  min-height:430px;
  padding:18px 0 0;
}
.architecture-hero-art img{
  max-width:118%;
  max-height:560px;
  transform:translateX(-8px);
}
.architecture-card-grid{ gap:20px; }
.architecture-card{
  min-height:350px;
  padding:18px 18px 18px;
}
.architecture-card-head{ margin-bottom:18px; }
.architecture-card h3{ font-size:clamp(1.02rem,1.14vw,1.34rem); }

.architecture-card-world{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,.9fr);
  grid-template-areas:'head head' 'platforms world' 'copy world';
  gap:12px 8px;
  align-items:center;
}
.architecture-card-world .architecture-card-head{ grid-area:head; }
.architecture-card-world .architecture-platforms{ grid-area:platforms; gap:18px; }
.architecture-world-art{
  grid-area:world;
  position:relative;
  right:auto;
  top:auto;
  width:100%;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
}
.architecture-world-art img{
  width:88%;
  max-width:250px;
  margin:0 auto;
}
.architecture-card-world p{
  grid-area:copy;
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  max-width:none;
  margin-top:4px;
}

.architecture-card-services{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,.68fr);
  grid-template-areas:'head head' 'services art';
  gap:8px 14px;
  align-items:start;
}
.architecture-card-services .architecture-card-head{ grid-area:head; }
.architecture-services-grid{
  grid-area:services;
  max-width:none;
  gap:15px 20px;
}
.architecture-service-art{
  grid-area:art;
  position:relative;
  right:auto;
  bottom:auto;
  width:100%;
  max-width:none;
  align-self:end;
  justify-self:end;
  margin-top:10px;
}
.architecture-service-art img{
  width:100%;
  max-width:300px;
  margin-left:auto;
}
.architecture-card-devops{ min-height:350px; }
.architecture-devops-grid{ gap:20px 18px; }

@media (max-width:1420px){
  .software-cap-card{ grid-template-columns:68px minmax(0,1fr) 160px; }
  .architecture-title{
    max-width:650px;
    font-size:clamp(2.35rem,3.8vw,4rem);
  }
  .architecture-side{ grid-template-columns:minmax(340px,.86fr) minmax(280px,.72fr); }
  .architecture-hero-art img{ max-height:520px; }
  .architecture-world-art img{ max-width:220px; }
  .architecture-service-art img{ max-width:250px; }
}
@media (max-width:1320px){
  .stack-tech-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stack-tech-icon{ width:82px; height:82px; }
  .architecture-top{ grid-template-columns:1fr; }
  .architecture-side{ grid-template-columns:minmax(0,1fr) minmax(260px,.7fr); }
  .architecture-title{ max-width:780px; }
  .architecture-card-grid{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .software-cap-card{
    grid-template-columns:68px minmax(0,1fr) 150px;
    min-height:230px;
  }
  .stack-tech-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .architecture-side{ grid-template-columns:1fr; }
  .architecture-hero-art{ min-height:320px; }
  .architecture-hero-art img{
    max-height:420px;
    transform:none;
  }
}
@media (max-width:760px){
  .software-cap-card{
    grid-template-columns:56px minmax(0,1fr);
    min-height:auto;
    gap:12px;
    padding:20px 16px 18px;
  }
  .cap-copy h2,
  .cap-copy p{ max-width:none; }
  .cap-visual,
  .code-visual,
  .architecture-visual,
  .solutions-visual{
    grid-column:1 / -1;
    width:100%;
    min-height:144px;
    height:144px;
    margin-top:10px;
  }
  .cap-svg-code,
  .cap-svg-arch,
  .cap-svg-sol{ transform:none; }
  .stack-tech-grid{ grid-template-columns:1fr; }
  .stack-tech-card{ min-height:auto; }
  .stack-tech-head{ min-height:96px; }
  .stack-tech-icon{ width:72px; height:72px; }
  .stack-tech-card h3,
  .stack-tech-list{ min-height:auto; }
  .architecture-title{ font-size:clamp(2rem,8.5vw,3.25rem); }
  .architecture-title span:first-child{ white-space:normal; }
  .architecture-card-world,
  .architecture-card-services{ display:block; }
  .architecture-world-art,
  .architecture-service-art{
    width:100%;
    margin-top:14px;
  }
  .architecture-world-art img,
  .architecture-service-art img{ max-width:220px; }
}

/* ===== v20 polish: hero cards + stack icons + architecture fixes ===== */
.software-cap-card{
  grid-template-columns:74px minmax(0,1fr) 220px;
  gap:18px;
  min-height:242px;
  padding:22px 24px 18px;
}
.software-cap-card::before{
  inset:14px;
  border-color:rgba(84,170,245,.16);
}
.cap-number{
  font-size:3.1rem;
  line-height:.9;
  padding-top:4px;
}
.cap-copy{
  justify-content:flex-start;
}
.cap-copy h2{
  min-height:0;
  max-width:240px;
  font-size:clamp(1.06rem,1.1vw,1.25rem);
  line-height:1.02;
}
.cap-copy p{
  max-width:235px;
  margin-top:16px;
  font-size:.96rem;
  line-height:1.52;
}
.cap-copy > span{
  margin-top:auto;
  padding-top:22px;
}
.cap-visual{
  width:100%;
  min-height:172px;
  align-self:center;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.code-visual{ width:190px; height:154px; }
.architecture-visual{ width:228px; height:176px; }
.solutions-visual{ width:226px; height:160px; }
.cap-svg-code{ transform:scale(1.34); }
.cap-svg-arch{ transform:scale(1.48); }
.cap-svg-sol{ transform:scale(1.28); }

.stack-tech-head{
  min-height:126px;
  display:block;
}
.stack-tech-icon{
  width:118px;
  height:118px;
  margin:4px auto 0;
}
.stack-tech-card h3{
  text-align:left;
}

.architecture-top{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:22px;
}
.architecture-title{
  max-width:560px;
  font-size:clamp(2.15rem,3.45vw,3.65rem);
  line-height:.94;
  letter-spacing:.035em;
}
.architecture-copy-text{
  max-width:620px;
}
.architecture-side{
  grid-template-columns:minmax(360px,.95fr) minmax(320px,.85fr);
  gap:18px;
}
.architecture-focus{
  min-height:410px;
}
.architecture-hero-art img{
  max-width:106%;
  max-height:500px;
  transform:translateX(0);
}
.architecture-card-world{
  grid-template-columns:minmax(0,1fr) 220px;
  gap:8px 12px;
}
.architecture-world-art{
  align-self:start;
  padding-top:2px;
}
.architecture-world-art img{
  width:100%;
  max-width:285px;
  transform:translateY(-16px);
}
.architecture-card-services{
  grid-template-columns:minmax(0,1fr) 250px;
  gap:8px 18px;
}
.architecture-services-grid{
  gap:16px 24px;
}
.architecture-service-art{
  margin-top:0;
  align-self:end;
  justify-self:end;
}
.architecture-service-art img{
  width:165%;
  max-width:none;
  transform:translate(16px, 6px);
}

@media (max-width:1420px){
  .software-cap-card{
    grid-template-columns:68px minmax(0,1fr) 190px;
  }
  .cap-copy h2{ max-width:210px; }
  .cap-copy p{ max-width:210px; }
  .code-visual{ width:168px; height:142px; }
  .architecture-visual{ width:198px; height:164px; }
  .solutions-visual{ width:194px; height:148px; }
  .architecture-title{
    max-width:500px;
    font-size:clamp(2rem,3.05vw,3.2rem);
  }
  .architecture-world-art img{ max-width:250px; }
  .architecture-service-art img{ width:150%; }
}
@media (max-width:1180px){
  .architecture-top{ grid-template-columns:1fr; }
  .architecture-side{ grid-template-columns:minmax(0,1fr) minmax(240px,.72fr); }
}
@media (max-width:980px){
  .software-cap-card{
    grid-template-columns:60px minmax(0,1fr);
    min-height:auto;
  }
  .cap-visual,
  .code-visual,
  .architecture-visual,
  .solutions-visual{
    grid-column:1 / -1;
    width:100%;
    height:160px;
  }
  .stack-tech-icon{
    width:96px;
    height:96px;
  }
  .architecture-side{ grid-template-columns:1fr; }
  .architecture-card-world,
  .architecture-card-services{ display:block; }
  .architecture-world-art img,
  .architecture-service-art img{
    width:100%;
    max-width:260px;
    transform:none;
  }
}

/* ==========================================================================
   v21 — 1) Navbar / menú móvil   2) Hero Software (referencia)   3) Responsive videojuegos
   Este bloque va al final a propósito: gana sobre los overrides anteriores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAVBAR + MENÚ HAMBURGUESA
   BUG RAÍZ: .navbar tenía backdrop-filter. Un ancestro con backdrop-filter/filter
   se convierte en el bloque contenedor de sus hijos position:fixed, así que
   #navLinks se medía contra la barra (76px) en vez del viewport y colapsaba.
   Solución: el blur pasa a .navbar::before (hermano, no ancestro del panel).
   -------------------------------------------------------------------------- */
.navbar{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.navbar::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(4,6,11,.94),rgba(4,6,11,.6));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .4s ease;
}
.navbar.scrolled::before{ background:rgba(4,6,11,.92); }
.games-page .navbar::before{ background:linear-gradient(180deg,rgba(2,4,8,.92),rgba(2,4,8,.48)); }
.games-page .navbar.scrolled::before{ background:rgba(2,4,8,.94); }
.software-page .navbar::before{ background:linear-gradient(180deg,rgba(2,7,14,.98),rgba(2,7,14,.65)); }
.software-page .navbar.scrolled::before{ background:rgba(2,7,14,.95); }

/* Capa oscura detrás del panel (la inyecta main.js) */
.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(2,4,9,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
  border:0;
  padding:0;
  cursor:pointer;
}
.nav-backdrop.show{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility 0s;
}
body.nav-open{ overflow:hidden; }

.nav-toggle{
  position:relative;
  z-index:130; /* por encima del panel abierto (z-index:120) */
  width:46px;
  height:44px;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{ display:block; }

@media (max-width:980px){
  .nav-links{
    top:0;
    right:0;
    bottom:auto;
    left:auto;
    height:100vh;
    height:100dvh;
    max-height:none;
    width:min(330px,86vw);
    padding:calc(76px + 26px) 24px calc(28px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:120;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(100%);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
    transition:transform .38s cubic-bezier(.2,.7,.2,1), visibility 0s linear .38s;
  }
  .nav-links.open{
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
    transition:transform .38s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s;
  }
  .nav-link{
    display:block;
    padding:16px 12px;
    font-size:1rem;
    letter-spacing:.2em;
  }
  .nav-link:last-child{ border-bottom:0; }
  /* La subrayado animado se ve raro a ancho completo en el panel */
  .nav-links .nav-link::after{ left:12px; right:auto; width:26px; bottom:9px; }
}

/* En 981–1240px los 6 enlaces se apretaban contra el logo */
@media (min-width:981px) and (max-width:1240px){
  .nav-link{ padding:10px 10px; font-size:.74rem; letter-spacing:.16em; }
  .nav-link::after{ left:10px; right:10px; }
}

/* --------------------------------------------------------------------------
   2. HERO SOFTWARE — panel ENFOQUE + tarjetas 01/02/03
   -------------------------------------------------------------------------- */

/* Rieles HUD laterales */
.shf-rail{
  position:absolute;
  top:20%;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.shf-rail-left{ left:9px; align-items:flex-start; }
.shf-rail-right{ right:9px; align-items:flex-end; }
.shf-rail b{ display:block; width:15px; height:2px; background:rgba(74,158,236,.42); }
.shf-rail b:nth-child(2){ width:9px; opacity:.75; }
.shf-rail b:nth-child(3){ width:12px; opacity:.55; }
.shf-rail em{
  display:block;
  width:7px;
  height:7px;
  margin-top:30px;
  border:1px solid rgba(74,158,236,.5);
  border-radius:50%;
}

/* Línea de apoyo bajo el párrafo */
.software-note{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:14px;
  align-items:start;
  max-width:720px;
  margin-top:14px;
}
.software-note-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:30px;
  color:#4ca8fc;
}
.software-note-icon svg{ width:26px; height:26px; }
.software-note p{
  color:#c6d1de;
  font-size:.98rem;
  line-height:1.5;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* Panel ENFOQUE: esquinas redondeadas + nodos + hexágonos */
.software-focus{
  min-height:0;
  padding:24px 26px 20px 32px;
  border:1px solid rgba(74,166,246,.5);
  border-radius:20px;
  clip-path:none;
  background:linear-gradient(140deg,rgba(3,13,25,.9),rgba(5,23,42,.6));
  box-shadow:0 18px 55px rgba(0,0,0,.4),inset 0 0 46px rgba(37,131,211,.05);
}
.software-focus::before{
  inset:9px;
  border:1px solid rgba(79,165,239,.07);
  border-radius:13px;
}
.software-focus .software-panel-label{ margin-bottom:10px; }

.focus-list{ display:grid; gap:0; }
.focus-item{
  position:relative;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:20px;
  align-items:center;
  min-height:0;
  padding:15px 0;
}
.focus-item + .focus-item::after{
  content:'';
  position:absolute;
  left:96px;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(88,170,240,.26),rgba(88,170,240,.06));
}
/* Nodo sobre el borde izquierdo del panel */
.focus-node{
  position:absolute;
  left:-36px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-4.5px;
  border-radius:50%;
  background:#4fb0ff;
  box-shadow:0 0 12px rgba(79,176,255,.65);
}
.focus-node::after{
  content:'';
  position:absolute;
  left:9px;
  top:4px;
  width:22px;
  height:1px;
  background:linear-gradient(90deg,rgba(79,176,255,.7),rgba(79,176,255,0));
}

.focus-icon{
  position:relative;
  width:76px;
  height:84px;
  display:grid;
  place-items:center;
  color:#4fb0ff;
  background:none;
  border:0;
  clip-path:none;
}
.focus-icon .focus-hex{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:rgba(6,22,40,.6);
  stroke:rgba(72,164,244,.72);
  stroke-width:2.4;
}
.focus-icon .focus-glyph{
  position:relative;
  width:34px;
  height:34px;
}
.focus-text{ min-width:0; }
.focus-text strong{
  display:block;
  color:#f0f4fa;
  font-size:1.03rem;
  font-weight:600;
  line-height:1.24;
  margin-bottom:5px;
}
.focus-text p{ color:#a9b7c6; font-size:.86rem; line-height:1.38; }

/* --- Tarjetas 01 / 02 / 03 --- */
.software-capability-grid{ margin-top:32px; gap:20px; }

.software-cap-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:12px;
  align-items:center;
  min-height:214px;
  padding:24px 22px 22px;
}
.cap-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.cap-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.cap-number{
  font-size:clamp(2.3rem,2.7vw,3.05rem);
  line-height:.82;
  padding-top:2px;
  align-self:start;
}
.cap-head h2{
  margin:0;
  padding-top:5px;
  max-width:none;
  color:#f0f4fa;
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(.92rem,1.02vw,1.12rem);
  line-height:1.18;
  letter-spacing:.09em;
}
.cap-body p{
  max-width:none;
  margin-top:16px;
  color:#aeb9c7;
  font-size:.92rem;
  line-height:1.5;
}
.cap-arrow{
  display:block;
  margin-top:auto;
  padding-top:18px;
}
.cap-arrow i{
  position:relative;
  display:block;
  width:38px;
  height:1px;
  background:#4aa8fb;
}
.cap-arrow i::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  width:8px;
  height:8px;
  border-top:1px solid #4aa8fb;
  border-right:1px solid #4aa8fb;
  transform:translateY(-50%) rotate(45deg);
}
.software-cap-card:hover .cap-arrow i{ width:52px; }
.cap-arrow i{ transition:width .28s ease; }

.cap-visual{
  position:relative;
  right:auto;
  bottom:auto;
  width:100%;
  height:auto;
  min-height:0;
  align-self:center;
  justify-self:center;
  display:grid;
  place-items:center;
  opacity:1;
}
.cap-visual .cap-svg{
  width:100%;
  height:auto;
  max-height:172px;
  transform:none;
}
.code-visual,
.architecture-visual,
.solutions-visual{ width:100%; height:auto; right:auto; bottom:auto; }

/* Indicador de scroll con chevrones */
.software-scroll{ gap:13px; }
.scroll-chev{
  width:9px;
  height:9px;
  border-top:1.5px solid rgba(94,172,240,.7);
  border-right:1.5px solid rgba(94,172,240,.7);
  flex:none;
}
.scroll-chev-l{ transform:rotate(-135deg); }
.scroll-chev-r{ transform:rotate(45deg); }

@media (max-width:1420px){
  .software-cap-card{
    grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
    padding:22px 18px 20px;
  }
  .cap-head{ gap:13px; }
  .cap-head h2,
  .cap-body p{ max-width:none; }
  .cap-visual .cap-svg{ max-height:152px; }
  .focus-item{ grid-template-columns:68px minmax(0,1fr); gap:17px; }
  .focus-item + .focus-item::after{ left:85px; }
  .focus-icon{ width:68px; height:76px; }
}
@media (max-width:1260px){
  .software-main-grid{ grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:30px; }
  .software-focus{ padding:22px 20px 18px 28px; }
  .focus-node{ left:-32px; }
  .cap-body p{ font-size:.88rem; }
}
@media (max-width:1080px){
  .software-capability-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .software-cap-card:last-child{ grid-column:1 / -1; }
}
@media (max-width:980px){
  .software-main-grid{ grid-template-columns:1fr; }
  .software-focus{ min-height:0; }
  .software-cap-card{ min-height:196px; }
}
@media (max-width:760px){
  .software-hero{ padding:96px 0 60px; }
  .shf-rail{ display:none; }
  .software-note{ grid-template-columns:26px minmax(0,1fr); gap:10px; }
  .software-note-icon{ width:26px; }
  .software-note-icon svg{ width:22px; height:22px; }
  .software-note p{ font-size:.9rem; }

  .software-focus{ padding:20px 16px 14px 26px; border-radius:16px; }
  .software-focus::before{ inset:7px; border-radius:11px; }
  .focus-item{ grid-template-columns:58px minmax(0,1fr); gap:14px; padding:13px 0; }
  .focus-item + .focus-item::after{ left:72px; }
  .focus-icon{ width:58px; height:65px; }
  .focus-icon .focus-glyph{ width:27px; height:27px; }
  .focus-node{ left:-22px; width:7px; height:7px; margin-top:-3.5px; }
  .focus-node::after{ left:7px; top:3px; width:11px; }
  .focus-text strong{ font-size:.95rem; }
  .focus-text p{ font-size:.82rem; }

  .software-capability-grid{ grid-template-columns:1fr; gap:14px; }
  .software-cap-card{
    grid-template-columns:minmax(0,1fr) 118px;
    gap:12px;
    min-height:0;
    padding:20px 16px 18px;
  }
  .software-cap-card:last-child{ grid-column:auto; }
  .cap-number{ font-size:2.15rem; }
  .cap-head{ gap:12px; }
  .cap-head h2{ font-size:.95rem; padding-top:3px; }
  .cap-body p{ font-size:.88rem; margin-top:12px; }
  .cap-arrow{ padding-top:14px; }
  .cap-visual{ align-self:center; }
  .cap-visual .cap-svg{ max-height:118px; }
}
@media (max-width:400px){
  .software-cap-card{ grid-template-columns:1fr; }
  .cap-visual{ display:none; }
}

/* --------------------------------------------------------------------------
   3. VIDEOJUEGOS — responsive móvil
   -------------------------------------------------------------------------- */

/* 3a. Línea de tiempo: las reglas absolutas de v10 pisaban a las media queries
       y dejaban las tarjetas en 28% de ancho (~90px) superpuestas. */
@media (max-width:1200px){
  .trajectory-timeline{
    position:relative;
    min-height:0;
    padding-top:4px;
    display:grid;
    gap:14px;
  }
  .trajectory-line,
  .trajectory-node,
  .tl-dot{ display:none; }
  .trajectory-card,
  .trajectory-card.card1,
  .trajectory-card.card2,
  .trajectory-card.card3{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    width:auto;
    min-height:0;
    padding:18px 18px 16px;
  }
  .trajectory-card strong{ font-size:1.25rem; }
  .trajectory-card i{ width:64px; margin:9px 0 12px; }
  .trajectory-card p{ font-size:.9rem; line-height:1.55; }
  .trajectory-caption{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:4px;
  }
}
@media (max-width:760px){
  .trajectory-card strong{ font-size:1.12rem; }
  .trajectory-card p{ font-size:.86rem; }
  .trajectory-caption{ flex-direction:column; gap:10px; text-align:center; }
  .trajectory-caption span{ width:100%; flex:none; }
  .trajectory-caption em{ white-space:normal; line-height:1.4; }
}

/* 3b. Hero de juegos: aire lateral y tarjetas de servicio legibles */
@media (max-width:760px){
  .games-hero{ padding:96px 0 44px; }
  .games-hero-inner{ width:min(92%,620px); margin-inline:auto; }
  .game-service-card{
    align-items:center;
    gap:14px;
    min-height:76px;
    padding:12px 14px;
  }
  .gsc-text em{ font-size:.74rem; margin-bottom:3px; }
  .gsc-text strong{ font-size:.86rem; line-height:1.2; }
  .gsc-icon{ width:30px; height:30px; }
  .gsc-icon svg{ width:24px; height:24px; }
  .game-service-card > i{ font-size:1.05rem; }
}

/* 3c. Métricas y encabezados que desbordaban su caja */
@media (max-width:760px){
  .coord-metric-wide strong,
  .coord-metric strong,
  .recruit-stat strong{
    max-width:100%;
    font-size:clamp(.95rem,4.6vw,1.25rem);
    line-height:1.15;
    word-break:normal;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .coord-metric{ padding-inline:8px; }
  .pipe-stack-head{
    flex-wrap:wrap;
    row-gap:10px;
    align-items:flex-start;
  }
  .pipe-stack-head .pipe-stack-title{ flex:1 1 100%; }
  .pipe-stack-head p{ flex:1 1 100%; font-size:.84rem; line-height:1.5; }
  .tool-col{ padding:12px 4px 4px; }
  .tool-col h4{ min-height:0; margin-bottom:12px; }
  .tool-item{ margin-bottom:11px; }
  .panel-title{ gap:12px; }
  .panel-title-line::after,
  .panel-title-line-right::after{ min-width:16px; }
}

/* 3d. Portafolio y bloques generales en pantallas pequeñas */
@media (max-width:760px){
  .portfolio-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-grid{ grid-template-columns:1fr; }
  .portfolio-showreel{ min-height:250px; }
  .portfolio-play span{ width:68px; height:68px; box-shadow:0 0 0 11px rgba(255,140,46,.07); }
  .portfolio-play span::before{ left:26px; top:20px; border-top-width:13px; border-bottom-width:13px; border-left-width:20px; }
  .project-body h3{ min-height:0; }
  .project-body p{ min-height:0; }
  .project-thumb{ height:172px; }
  .impact-item{ min-height:104px; padding:16px 12px; }
}

/* 3e. Guarda anti-desbordamiento horizontal */
@media (max-width:980px){
  main img,
  main svg{ max-width:100%; }
  .games-hero-bg img{ max-width:none; }
}

/* ===== v21a refinements ===== */
.software-cap-card{
  grid-template-columns:minmax(0,1fr) 170px;
  gap:22px;
}
.cap-head{ gap:14px; }
.cap-head h2{
  max-width:220px;
  font-size:clamp(.94rem,1vw,1.1rem);
  line-height:1.12;
}
.cap-body p{
  max-width:255px;
  font-size:.9rem;
  line-height:1.48;
}
.cap-visual{
  align-self:end;
  justify-self:center;
}
.cap-visual .cap-svg{
  max-height:148px;
}
.code-visual{ width:150px; }
.architecture-visual{ width:176px; }
.solutions-visual{ width:178px; }
.cap-svg-code,
.cap-svg-arch,
.cap-svg-sol{
  transform:none !important;
}

/* Architecture services card: cubes lower and to the left */
.architecture-card-services{
  overflow:hidden;
}
.architecture-service-art{
  right:auto !important;
  left:52% !important;
  bottom:-4px !important;
  width:31% !important;
  max-width:240px !important;
}
.architecture-service-art img{
  width:132% !important;
  max-width:none !important;
  transform:translate(-18px, 18px) !important;
}

@media (max-width:1420px){
  .software-cap-card{ grid-template-columns:minmax(0,1fr) 155px; gap:18px; }
  .cap-head h2{ max-width:205px; }
  .cap-body p{ max-width:235px; }
  .code-visual{ width:138px; }
  .architecture-visual{ width:164px; }
  .solutions-visual{ width:166px; }
  .architecture-service-art{ left:50% !important; width:30% !important; }
}
@media (max-width:980px){
  .software-cap-card{ grid-template-columns:minmax(0,1fr) 126px; gap:14px; }
  .cap-body p{ max-width:none; }
  .code-visual{ width:112px; }
  .architecture-visual{ width:126px; }
  .solutions-visual{ width:128px; }
}
@media (max-width:760px){
  .software-cap-card{ grid-template-columns:minmax(0,1fr) 110px; }
  .cap-visual .cap-svg{ max-height:112px; }
  .architecture-service-art{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:220px !important;
    margin:12px auto 0 !important;
  }
  .architecture-service-art img{
    width:100% !important;
    transform:none !important;
  }
}

/* ===== v23 fixes: arquitectura + responsive videojuegos ===== */
.architecture-card-services{
  position:relative;
  overflow:hidden;
  min-height:360px;
}
.architecture-card-services .architecture-card-head,
.architecture-services-grid{
  position:relative;
  z-index:2;
}
.architecture-service-art{
  position:absolute !important;
  left:42% !important;
  right:auto !important;
  bottom:-2px !important;
  width:52% !important;
  max-width:420px !important;
  margin:0 !important;
  z-index:1;
  pointer-events:none;
}
.architecture-service-art img{
  display:block;
  width:100% !important;
  max-width:none !important;
  transform:none !important;
  margin:0 !important;
  opacity:.98;
}

@media (max-width:1480px){
  .architecture-service-art{
    left:44% !important;
    width:50% !important;
    max-width:390px !important;
  }
}
@media (max-width:1180px){
  .architecture-card-services{
    min-height:360px;
  }
  .architecture-service-art{
    left:48% !important;
    width:44% !important;
    max-width:300px !important;
    bottom:0 !important;
  }
}
@media (max-width:760px){
  .architecture-card-services{
    min-height:0;
  }
  .architecture-service-art{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:220px !important;
    margin:14px auto 0 !important;
  }
}

@media (max-width:760px){
  .games-hero{
    padding:88px 0 36px;
    overflow:hidden;
  }
  .games-hero-inner{
    width:min(100%, calc(100% - 28px));
    margin-inline:auto;
    row-gap:24px;
  }
  .games-copy{
    max-width:none;
  }
  .games-kicker{
    gap:10px;
    font-size:.72rem;
    letter-spacing:.22em;
    margin-bottom:18px;
  }
  .games-kicker span{ width:14px; height:14px; }
  .games-title{
    line-height:.9;
    letter-spacing:.03em;
  }
  .games-title span{
    font-size:clamp(1.5rem, 9.8vw, 2.5rem) !important;
  }
  .games-title strong{
    font-size:clamp(2.1rem, 13.4vw, 3.8rem) !important;
    letter-spacing:.025em;
  }
  .games-roles{
    gap:8px;
    font-size:.72rem;
    letter-spacing:.11em;
    line-height:1.45;
  }
  .games-divider{
    margin:16px 0 20px;
  }
  .games-divider span{ width:88px; }
  .games-divider i{ width:32px; height:10px; }
  .games-text{
    font-size:.9rem;
    line-height:1.58;
    max-width:none;
    margin-bottom:16px;
  }
  .games-actions{
    flex-direction:column;
    gap:12px;
  }
  .games-btn{
    width:100%;
    min-width:0;
    height:54px;
    padding:0 18px;
    gap:14px;
    font-size:.86rem;
    letter-spacing:.11em;
  }
  .games-focus{
    width:100%;
    max-width:none;
    justify-self:stretch;
  }
  .focus-title{
    padding:22px 18px 10px;
    gap:12px;
    font-size:.86rem;
    letter-spacing:.2em;
  }
  .focus-title svg{ width:24px; height:24px; }
  .focus-list{
    padding:10px 18px 18px;
    gap:16px;
  }
  .focus-item{
    gap:12px;
  }
  .focus-item svg{
    width:28px;
    height:28px;
  }
  .focus-item strong{
    font-size:.78rem;
    letter-spacing:.08em;
    margin-bottom:4px;
  }
  .focus-item span{
    font-size:.8rem;
    line-height:1.45;
  }
  .games-service-cards{
    grid-template-columns:1fr;
    gap:12px;
  }
  .game-service-card{
    min-height:78px;
    padding:12px 13px;
    gap:12px;
  }
  .gsc-text em{
    font-size:.72rem;
    margin-bottom:2px;
  }
  .gsc-text strong{
    font-size:.8rem;
    line-height:1.14;
  }
  .gsc-icon{ width:28px; height:28px; }
  .gsc-icon svg{ width:22px; height:22px; }
  .games-frame{
    inset:80px 12px 16px;
    opacity:.54;
  }
}

@media (max-width:480px){
  .games-hero-inner{
    width:min(100%, calc(100% - 20px));
  }
  .games-title span{
    font-size:clamp(1.35rem, 9.4vw, 2.1rem) !important;
  }
  .games-title strong{
    font-size:clamp(1.95rem, 12.6vw, 3.15rem) !important;
  }
  .games-roles{
    font-size:.68rem;
    letter-spacing:.08em;
  }
  .games-text{
    font-size:.86rem;
  }
  .games-btn{
    height:50px;
    font-size:.8rem;
  }
}


/* ===== v25 responsive + architecture fixes ===== */
@media (min-width:761px){
  .architecture-card-services{
    overflow:hidden;
  }
  .architecture-service-art{
    left:26% !important;
    right:auto !important;
    bottom:-18px !important;
    width:72% !important;
    max-width:none !important;
  }
  .architecture-service-art img{
    width:220% !important;
    max-width:none !important;
    margin-left:-42% !important;
    margin-bottom:-6% !important;
    opacity:1 !important;
  }
}
@media (min-width:761px) and (max-width:1380px){
  .architecture-service-art{
    left:28% !important;
    width:70% !important;
  }
  .architecture-service-art img{
    width:205% !important;
    margin-left:-36% !important;
  }
}

@media (max-width:760px){
  .games-hero{
    padding:84px 0 34px !important;
  }
  .games-hero-inner{
    width:min(100%, calc(100% - 20px)) !important;
    row-gap:18px !important;
  }
  .games-copy,
  .games-focus,
  .games-service-cards{
    min-width:0;
  }
  .games-title{
    line-height:.92 !important;
    letter-spacing:.015em !important;
    max-width:100%;
    overflow:hidden;
  }
  .games-title span{
    font-size:clamp(1.2rem, 7.2vw, 1.8rem) !important;
    letter-spacing:.03em !important;
  }
  .games-title strong{
    font-size:clamp(2rem, 11.6vw, 3rem) !important;
    letter-spacing:.015em !important;
  }
  .games-roles{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:start;
    gap:6px !important;
    margin-top:16px !important;
    font-size:.64rem !important;
    line-height:1.4 !important;
    letter-spacing:.1em !important;
  }
  .games-roles i{
    display:none !important;
  }
  .games-divider{
    margin:14px 0 18px !important;
  }
  .games-text{
    font-size:.84rem !important;
    line-height:1.65 !important;
    margin-bottom:14px !important;
  }
  .games-text br{
    display:none;
  }
  .games-actions{
    gap:10px !important;
  }
  .games-btn{
    height:50px !important;
    padding:0 16px !important;
    font-size:.78rem !important;
    letter-spacing:.09em !important;
  }
  .games-focus{
    margin-top:4px;
  }
  .focus-title{
    padding:18px 16px 10px !important;
    font-size:.8rem !important;
    letter-spacing:.18em !important;
  }
  .focus-list{
    padding:8px 16px 16px !important;
    gap:12px !important;
  }
  .focus-item{
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:start !important;
  }
  .focus-item svg{
    width:24px !important;
    height:24px !important;
  }
  .focus-item strong,
  .focus-item span{
    word-break:break-word;
  }
  .focus-item strong{
    display:block;
    font-size:.74rem !important;
    line-height:1.35 !important;
    letter-spacing:.06em !important;
    margin-bottom:3px !important;
  }
  .focus-item span{
    display:block;
    font-size:.78rem !important;
    line-height:1.45 !important;
  }
  .games-service-cards{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .game-service-card{
    min-height:74px !important;
    padding:11px 12px !important;
    gap:10px !important;
  }
  .gsc-text{
    min-width:0;
  }
  .gsc-text strong{
    font-size:.78rem !important;
    line-height:1.16 !important;
    word-break:break-word;
  }
  .gsc-text em{
    font-size:.7rem !important;
  }
}

@media (max-width:480px){
  .games-title span{
    font-size:clamp(1.05rem, 6.6vw, 1.5rem) !important;
  }
  .games-title strong{
    font-size:clamp(1.8rem, 10.5vw, 2.55rem) !important;
  }
  .games-roles{
    font-size:.6rem !important;
  }
  .games-text{
    font-size:.81rem !important;
  }
}


/* ===== v29 architecture cubes placement tweak ===== */
@media (min-width:761px){
  .architecture-card-services{
    overflow:hidden;
  }
  .architecture-service-art{
    left:8% !important;
    right:auto !important;
    bottom:-42px !important;
    width:92% !important;
    max-width:none !important;
    pointer-events:none;
  }
  .architecture-service-art img{
    width:320% !important;
    max-width:none !important;
    margin-left:-78% !important;
    margin-bottom:-12% !important;
    transform: translate(-11%, 16%) !important;
    display:block;
  }
}
@media (min-width:761px) and (max-width:1380px){
  .architecture-service-art{
    left:10% !important;
    width:88% !important;
    bottom:-36px !important;
  }
  .architecture-service-art img{
    width:290% !important;
    margin-left:-70% !important;
    transform: translate(-10%, 14%) !important;
  }
}

/* ===== v30 projects section ===== */
.projects-section{
  position:relative;
  padding:92px 0 72px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 15%,rgba(47,145,235,.08),transparent 36%),
    linear-gradient(180deg,#020812 0%,#020711 100%);
}
.projects-section::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(90deg,transparent 0 95px,rgba(71,159,239,.035) 96px),
    repeating-linear-gradient(0deg,transparent 0 95px,rgba(71,159,239,.025) 96px);
}
.projects-shell{
  position:relative;
  z-index:1;
  width:min(1580px,94%);
  margin:0 auto;
}
.projects-head{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(600px,1.14fr);
  gap:42px;
  align-items:center;
}
.projects-intro{ max-width:620px; }
.projects-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  color:#55b3ff;
  font-family:var(--f-mono);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.2em;
}
.projects-kicker span{
  width:18px;
  height:18px;
  border:1px solid rgba(84,178,255,.72);
}
.projects-kicker span:first-child{ border-right:0;border-bottom:0; }
.projects-kicker span:last-child{ border-left:0;border-top:0; }
.projects-intro h2{
  margin:0 0 12px;
  color:#f1f5fa;
  font-family:var(--f-display);
  font-size:clamp(2.9rem,4.5vw,5.3rem);
  font-weight:400;
  line-height:.92;
  letter-spacing:.055em;
}
.projects-intro h3{
  margin:0 0 10px;
  color:#4caeff;
  font-family:var(--f-display);
  font-size:clamp(.9rem,1.15vw,1.2rem);
  font-weight:400;
  letter-spacing:.08em;
}
.projects-intro p{
  margin:0 0 8px;
  color:#bec8d4;
  font-size:.96rem;
  line-height:1.55;
}
.projects-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:142px;
  padding:14px 12px;
  background:linear-gradient(120deg,rgba(3,14,27,.95),rgba(4,20,36,.68));
  border:1px solid rgba(66,160,242,.58);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  box-shadow:inset 0 0 36px rgba(39,143,232,.025);
}
.projects-stats article{
  display:grid;
  grid-template-columns:58px 1fr;
  grid-template-areas:'icon value' 'icon label';
  align-content:center;
  column-gap:12px;
  padding:12px 18px;
  border-left:1px solid rgba(85,163,233,.2);
}
.projects-stats article:first-child{ border-left:0; }
.projects-stats svg,
.projects-stats article > i{
  grid-area:icon;
  width:50px;
  height:50px;
  color:#49a8ff;
  font-size:3rem;
  align-self:center;
}
.projects-stats strong{
  grid-area:value;
  color:#f3f7fb;
  font-family:var(--f-display);
  font-size:2rem;
  font-weight:400;
  line-height:1;
}
.projects-stats span{
  grid-area:label;
  color:#c5cfdb;
  font-family:var(--f-mono);
  font-size:.7rem;
  line-height:1.35;
  letter-spacing:.04em;
}
.projects-filters{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin:28px 0 24px;
}
.project-filter{
  min-height:42px;
  padding:0 24px;
  color:#c2ccd7;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  background:rgba(3,13,24,.62);
  border:1px solid rgba(70,148,225,.25);
  border-radius:4px;
  cursor:pointer;
  transition:.25s ease;
}
.project-filter:hover,
.project-filter.active{
  color:#55b3ff;
  border-color:#4caeff;
  box-shadow:0 0 18px rgba(49,148,235,.12);
}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.project-showcase{
  min-width:0;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(4,17,31,.96),rgba(2,11,21,.98));
  border:1px solid rgba(69,153,231,.34);
  border-radius:9px;
  box-shadow:inset 0 0 32px rgba(43,142,226,.025);
  transition:transform .28s ease,border-color .28s ease,opacity .25s ease;
}
.project-showcase:hover{
  transform:translateY(-6px);
  border-color:rgba(77,175,255,.72);
}
.project-showcase.is-hidden{
  display:none;
}
.project-preview{
  position:relative;
  height:184px;
  overflow:hidden;
  background:#06111e;
  border-bottom:1px solid rgba(78,158,230,.18);
}
.project-showcase-body{ padding:14px 16px 16px; }
.project-category{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  margin-bottom:12px;
  padding:0 8px;
  color:#53b0ff;
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.04em;
  border:1px solid rgba(76,174,255,.7);
  border-radius:3px;
}
.project-showcase h3{
  margin:0 0 10px;
  color:#f1f5f9;
  font-size:1.02rem;
  font-weight:500;
  line-height:1.25;
}
.project-showcase p{
  min-height:82px;
  margin:0 0 14px;
  color:#bdc7d3;
  font-size:.83rem;
  line-height:1.52;
}
.project-showcase small{
  display:block;
  margin-bottom:9px;
  color:#aeb9c6;
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.08em;
}
.project-tech{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:34px;
  margin-bottom:18px;
  color:#55b3ff;
}
.project-tech i{
  font-size:1.65rem;
}
.project-tech span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 7px;
  color:#b9dfff;
  font-family:var(--f-mono);
  font-size:.58rem;
  border:1px solid rgba(75,165,240,.25);
  border-radius:4px;
}
.project-showcase-body > a{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:#50afff;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.04em;
}
.projects-cta{
  display:grid;
  grid-template-columns:64px 1fr 250px;
  gap:18px;
  align-items:center;
  margin-top:20px;
  padding:16px 22px;
  background:linear-gradient(90deg,rgba(3,14,27,.95),rgba(4,20,36,.7));
  border:1px solid rgba(66,160,242,.38);
  border-radius:9px;
}
.projects-cta-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  color:#49a8ff;
}
.projects-cta-icon svg{ width:38px;height:38px; }
.projects-cta strong{
  display:block;
  margin-bottom:4px;
  color:#eff4f9;
  font-size:.92rem;
}
.projects-cta p{
  margin:0;
  color:#b8c3cf;
  font-size:.9rem;
}
.projects-cta > a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:48px;
  color:#54b3ff;
  font-family:var(--f-display);
  font-size:1rem;
  letter-spacing:.05em;
  border:1px solid #4baeff;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}

/* Project preview: CRM */
.preview-crm{ padding:12px; background:radial-gradient(circle at 80% 15%,rgba(47,139,225,.14),transparent 42%),#07101b; }
.preview-window{ height:100%; display:grid; grid-template-columns:34px 1fr; border:1px solid rgba(73,154,225,.25); border-radius:5px; background:#091521; }
.preview-sidebar{ padding:11px 8px; display:grid; align-content:start; gap:14px; border-right:1px solid rgba(67,140,207,.16); }
.preview-sidebar i{ width:16px;height:3px;border-radius:4px;background:#3a78a7;opacity:.7; }
.preview-main{ padding:9px; }
.preview-top{ display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px; }
.preview-top span{ width:16px;height:4px;border-radius:4px;background:#356b94; }
.crm-stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:5px; }
.crm-stats b{ height:30px;border:1px solid rgba(59,144,218,.25);border-radius:3px;background:linear-gradient(135deg,#0e2336,#0a1927); }
.crm-chart{ height:64px;margin:7px 0;display:flex;align-items:flex-end;gap:5px;padding:8px;border:1px solid rgba(59,144,218,.2); }
.crm-chart i{ flex:1;background:linear-gradient(#49a8ff,#174e78);border-radius:2px 2px 0 0; }
.crm-chart i:nth-child(1){height:26%}.crm-chart i:nth-child(2){height:52%}.crm-chart i:nth-child(3){height:40%}.crm-chart i:nth-child(4){height:76%}.crm-chart i:nth-child(5){height:62%}.crm-chart i:nth-child(6){height:88%}
.crm-table{ display:grid;gap:5px; }
.crm-table span{ height:5px;background:linear-gradient(90deg,#2c638e 36%,#15314a 36%);opacity:.75; }
/* POS */
.preview-pos{ padding:10px;background:#edf4f8; }
.pos-shell{ height:100%;display:grid;grid-template-columns:36px 1fr;background:white;border:1px solid #d7e3ea;border-radius:5px;box-shadow:0 10px 25px rgba(2,12,22,.3); }
.pos-nav{padding:12px 8px;display:grid;align-content:start;gap:13px;background:#f4f8fb;border-right:1px solid #e1e9ee;}
.pos-nav i{height:5px;border-radius:4px;background:#83aabc;}
.pos-content{padding:10px;}
.pos-head{display:flex;justify-content:space-between;margin-bottom:8px}.pos-head span{width:50px;height:7px;border-radius:5px;background:#b6d0dc;}
.pos-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.pos-metrics b{height:26px;border-radius:4px;background:linear-gradient(135deg,#f2f7fa,#e2eef3);border:1px solid #d8e7ed;}
.pos-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.pos-cards i{height:40px;border-radius:5px;background:linear-gradient(135deg,#eff9f3,#d9efe2);border:1px solid #c9e4d3}.pos-cards i:nth-child(even){background:linear-gradient(135deg,#fff5ed,#f4e0d1);border-color:#eed3c0}
/* Vision */
.preview-vision{background:linear-gradient(rgba(3,9,15,.22),rgba(3,9,15,.4)),radial-gradient(circle at center,#253240,#0b1118 66%);}
.preview-vision::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 29px,rgba(255,255,255,.018) 30px),repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,255,255,.018) 30px);}
.vision-frame span{position:absolute;border:2px solid #e43b4b;box-shadow:0 0 12px rgba(228,59,75,.22)}.vision-frame span:nth-child(1){left:13%;top:28%;width:23%;height:44%}.vision-frame span:nth-child(2){left:44%;top:18%;width:18%;height:50%}.vision-frame span:nth-child(3){right:8%;top:35%;width:24%;height:38%}.vision-frame span:nth-child(4){left:36%;bottom:10%;width:32%;height:22%}
.vision-frame b{position:absolute;padding:2px 5px;color:#ff5968;font-family:var(--f-mono);font-size:.58rem;background:#16070a}.vision-frame b:nth-of-type(1){left:13%;top:22%}.vision-frame b:nth-of-type(2){right:8%;top:29%}
.vision-hud{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:7px}.vision-hud i{height:4px;flex:1;background:#d33b4b;opacity:.75}
/* LLM */
.preview-llm{display:grid;grid-template-columns:1fr .78fr;gap:8px;padding:12px;background:#07111c;}
.llm-code,.llm-response{padding:9px;border:1px solid rgba(65,149,224,.22);border-radius:4px;background:#091725;}
.llm-code{display:grid;align-content:start;gap:7px}.llm-code span{height:5px;background:linear-gradient(90deg,#f06d52 0 18%,#4aa8ff 18% 42%,#6ecf8c 42% 68%,#243d52 68%);opacity:.78}.llm-code span:nth-child(even){margin-left:13px}
.llm-response strong{display:block;margin-bottom:10px;color:#d8e9f7;font-family:var(--f-mono);font-size:.58rem}.llm-response i{display:block;height:5px;margin-bottom:7px;background:#315a78;opacity:.62}.llm-response i:nth-child(2){width:86%}.llm-response i:nth-child(3){width:68%}.llm-response i:nth-child(4){width:92%}.llm-response i:nth-child(5){width:54%}
/* AWS */
.preview-aws{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(44,121,185,.18),transparent 50%),#06101a;}
.aws-logo{color:#f6f6f6;font-size:1.7rem;font-weight:600}.aws-logo::after{content:'';display:block;width:38px;height:7px;margin:-3px auto 8px;border-bottom:3px solid #ff9d22;border-radius:50%;transform:rotate(-4deg)}
.aws-line{width:72%;height:1px;background:#3d6c8c;position:relative}.aws-line::before{content:'';position:absolute;left:50%;top:-24px;width:1px;height:24px;background:#3d6c8c}
.aws-services{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:92%;margin-top:14px}.aws-services span{height:38px;display:grid;place-items:center;color:white;font-family:var(--f-mono);font-size:.58rem;border:1px solid rgba(94,180,250,.45);border-radius:5px;background:#0b2539}.aws-services span:nth-child(1){background:#44651a}.aws-services span:nth-child(2){background:#a84d18}.aws-services span:nth-child(3){background:#1f4b8a}.aws-services span:nth-child(4){background:#4d3b8f}.aws-services span:nth-child(5){background:#953c77}

@media (max-width:1450px){
  .projects-head{ grid-template-columns:1fr; }
  .projects-intro{ max-width:820px; }
  .projects-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1050px){
  .projects-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .projects-stats article:nth-child(3){ border-left:0;border-top:1px solid rgba(85,163,233,.2); }
  .projects-stats article:nth-child(4){ border-top:1px solid rgba(85,163,233,.2); }
  .projects-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .projects-section{ padding:68px 0 52px; }
  .projects-shell{ width:min(100%,calc(100% - 24px)); }
  .projects-head{ gap:24px; }
  .projects-intro h2{ font-size:clamp(2.25rem,14vw,3.6rem); }
  .projects-intro p{ font-size:.86rem; }
  .projects-stats{ grid-template-columns:1fr; }
  .projects-stats article{ border-left:0;border-top:1px solid rgba(85,163,233,.2); }
  .projects-stats article:first-child{ border-top:0; }
  .projects-filters{ gap:8px; }
  .project-filter{ flex:1 1 calc(50% - 8px);padding:0 10px;font-size:.68rem; }
  .projects-grid{ grid-template-columns:1fr; }
  .project-preview{ height:210px; }
  .project-showcase p{ min-height:0; }
  .projects-cta{ grid-template-columns:52px 1fr; }
  .projects-cta > a{ grid-column:1 / -1; }
}

/* ========================================================================== 
   v31 — Áreas interactivas + expedientes de proyectos
   ========================================================================== */
.coord-tag-action,
.project-card-action{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.coord-tag-action{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  justify-content:flex-start;
  padding-right:42px;
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.coord-tag-action::after{
  content:'→';
  position:absolute;
  top:50%;
  right:14px;
  color:var(--orange);
  font-size:1rem;
  transform:translateY(-50%);
  transition:transform .22s ease;
}
.coord-tag-action:hover,
.coord-tag-action:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,140,46,.72);
  background:rgba(255,140,46,.055);
  box-shadow:0 0 22px rgba(255,140,46,.08);
  outline:none;
}
.coord-tag-action:hover::after,
.coord-tag-action:focus-visible::after{ transform:translate(4px,-50%); }
.coord-tag-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.coord-tag-copy strong{
  color:#f2f5fa;
  font-family:var(--f-display);
  font-size:.9rem;
  font-weight:400;
  letter-spacing:.045em;
  line-height:1.05;
  white-space:normal;
  word-break:normal;
}
.coord-tag-copy small{
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.56rem;
  letter-spacing:.07em;
  line-height:1.25;
}

/* 6 proyectos: 3 x 2 en escritorio */
.portfolio-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.project-card-action{
  position:relative;
  width:100%;
  color:inherit;
  border:0;
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.project-card-action::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 20%,rgba(255,140,46,.1) 48%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.project-card-action:hover,
.project-card-action:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 18px 48px rgba(0,0,0,.3),0 0 24px rgba(255,140,46,.08);
  filter:brightness(1.05);
  outline:none;
}
.project-card-action:hover::after,
.project-card-action:focus-visible::after{ transform:translateX(120%); }
.project-card-action .project-thumb{ height:190px; }
.project-open-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
  padding-top:12px;
  color:var(--orange);
  border-top:1px solid rgba(255,140,46,.16);
  font-family:var(--f-mono);
  font-size:.69rem;
  letter-spacing:.12em;
}
.project-open-hint i{
  font-style:normal;
  font-size:1.05rem;
  transition:transform .22s ease;
}
.project-card-action:hover .project-open-hint i{ transform:translateX(5px); }

/* Modal principal */
body.game-modal-open{ overflow:hidden; }
.game-modal{
  position:fixed;
  inset:0;
  z-index:400;
  display:grid;
  place-items:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.game-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .25s ease,visibility 0s;
}
.game-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,2,6,.84);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.game-modal-dialog{
  position:relative;
  width:min(1180px,96vw);
  max-height:min(900px,92vh);
  color:#dce4ef;
  background:
    radial-gradient(circle at 78% 15%,rgba(255,140,46,.06),transparent 32%),
    linear-gradient(145deg,rgba(5,8,14,.99),rgba(3,6,11,.99));
  border:1px solid rgba(255,140,46,.48);
  clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);
  box-shadow:0 35px 100px rgba(0,0,0,.7),0 0 45px rgba(255,140,46,.05);
  overflow:hidden;
  transform:translateY(18px) scale(.985);
  transition:transform .25s ease;
}
.game-modal.open .game-modal-dialog{ transform:none; }
.game-modal-frame{
  position:absolute;
  inset:12px;
  z-index:0;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
  clip-path:polygon(17px 0,calc(100% - 17px) 0,100% 17px,100% calc(100% - 17px),calc(100% - 17px) 100%,17px 100%,0 calc(100% - 17px),0 17px);
}
.game-modal-close{
  position:absolute;
  top:18px;
  right:20px;
  z-index:5;
  width:44px;
  height:44px;
  color:var(--orange);
  background:rgba(5,8,14,.86);
  border:1px solid rgba(255,140,46,.48);
  font-family:var(--f-display);
  font-size:1.75rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.game-modal-close:hover,
.game-modal-close:focus-visible{
  background:rgba(255,140,46,.1);
  transform:rotate(3deg);
  outline:none;
}
.game-modal-scroll{
  position:relative;
  z-index:1;
  max-height:min(900px,92vh);
  padding:42px 46px 48px;
  overflow-y:auto;
  scrollbar-color:var(--orange) rgba(255,255,255,.04);
  scrollbar-width:thin;
}
.game-modal-header{
  max-width:920px;
  padding-right:55px;
  margin-bottom:30px;
}
.game-modal-eyebrow{
  display:block;
  margin-bottom:13px;
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.2em;
}
.game-modal-header h2{
  margin:0 0 12px;
  color:#f3f5f8;
  font-family:var(--f-display);
  font-size:clamp(2rem,4vw,4rem);
  font-weight:400;
  line-height:.94;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.game-modal-header p{
  max-width:850px;
  color:#bfc8d4;
  font-size:.98rem;
  line-height:1.65;
}
.game-modal-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.game-modal-chips span,
.project-tech-list span{
  padding:7px 10px;
  color:var(--orange);
  background:rgba(255,140,46,.045);
  border:1px solid rgba(255,140,46,.24);
  font-family:var(--f-mono);
  font-size:.63rem;
  letter-spacing:.1em;
}
.game-modal-copy{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:28px;
}
.game-modal-copy p{
  padding:18px;
  color:#c5ceda;
  background:rgba(255,255,255,.018);
  border-left:2px solid rgba(255,140,46,.7);
  font-size:.9rem;
  line-height:1.62;
}
.game-modal-section-title{
  display:flex;
  align-items:center;
  gap:16px;
  margin:25px 0 14px;
  color:#f2f5fa;
  font-family:var(--f-mono);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
}
.game-modal-section-title::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(255,140,46,.48),transparent);
}
.game-modal-section-title em{
  color:var(--orange);
  font-style:normal;
  font-size:.62rem;
}
.game-video-placeholder{
  display:grid;
  grid-template-columns:90px 1fr;
  align-items:center;
  gap:24px;
  min-height:250px;
  padding:30px 38px;
  background:
    linear-gradient(120deg,rgba(3,6,11,.4),rgba(9,12,18,.9)),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,140,46,.025) 55px),
    repeating-linear-gradient(0deg,transparent 0 54px,rgba(255,140,46,.02) 55px);
  border:1px solid rgba(255,140,46,.22);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.game-video-play{
  position:relative;
  width:82px;
  height:82px;
  border:1px solid var(--orange);
  border-radius:50%;
  box-shadow:0 0 0 12px rgba(255,140,46,.045),0 0 28px rgba(255,140,46,.1);
}
.game-video-play::after{
  content:'';
  position:absolute;
  top:25px;
  left:32px;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:23px solid var(--orange);
}
.game-video-placeholder strong{
  display:block;
  color:#f3f5f8;
  font-family:var(--f-display);
  font-size:1.3rem;
  font-weight:400;
  letter-spacing:.07em;
}
.game-video-placeholder small{
  display:block;
  margin-top:8px;
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.14em;
}

.game-video-player{
  display:grid;
  gap:14px;
  padding:18px;
  background:linear-gradient(180deg, rgba(5,8,14,.92), rgba(7,11,18,.9));
  border:1px solid rgba(255,140,46,.22);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.game-video-element{
  width:100%;
  display:block;
  background:#02050a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.game-video-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.game-video-caption strong{
  display:block;
  color:#f3f5f8;
  font-family:var(--f-display);
  font-size:1rem;
  font-weight:400;
  letter-spacing:.07em;
}
.game-video-caption small{
  display:block;
  margin-top:5px;
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.14em;
}
.game-video-volume{
  display:flex;
  align-items:center;
  gap:12px;
  color:#d9e4f2;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.12em;
}
.game-video-volume input{
  width:min(220px, 46vw);
  accent-color:#ff8c2e;
}

/* Galería */
.game-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.game-gallery.compact{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.game-gallery-item{
  position:relative;
  min-height:180px;
  padding:0;
  color:#f2f5fa;
  background:#04070c;
  border:1px solid rgba(255,140,46,.18);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  overflow:hidden;
  cursor:zoom-in;
  text-align:left;
  transition:transform .22s ease,border-color .22s ease;
}
.game-gallery-item:hover,
.game-gallery-item:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(255,140,46,.68);
  outline:none;
}
.game-gallery-item img{
  display:block;
  width:100%;
  height:180px;
  object-fit:cover;
  transition:transform .45s ease,filter .45s ease;
}
.game-gallery.compact .game-gallery-item img{ height:205px; }
.game-gallery-item:hover img{ transform:scale(1.035);filter:brightness(1.08); }
.game-gallery-item span{
  display:block;
  padding:11px 12px 5px;
  font-family:var(--f-mono);
  font-size:.65rem;
  letter-spacing:.09em;
}
.game-gallery-item i{
  display:block;
  padding:0 12px 11px;
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.58rem;
  font-style:normal;
  letter-spacing:.1em;
}

/* Contenido de proyectos */
.project-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.project-modal-panel{
  padding:20px;
  background:rgba(255,255,255,.018);
  border:1px solid rgba(255,140,46,.14);
}
.project-modal-panel .game-modal-section-title{ margin-top:0; }
.project-modal-list{
  display:grid;
  gap:10px;
}
.project-modal-list li{
  position:relative;
  padding-left:22px;
  color:#cbd3de;
  font-size:.88rem;
  line-height:1.5;
}
.project-modal-list li::before{
  content:'›';
  position:absolute;
  left:2px;
  color:var(--orange);
  font-size:1.2rem;
  line-height:1;
}
.project-tech-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Visor de imagen */
.game-media-viewer{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 70px;
  align-items:center;
  gap:14px;
  padding:28px;
  background:rgba(0,2,5,.96);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
.game-media-viewer.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s ease,visibility 0s;
}
.game-media-viewer figure{
  margin:0;
  max-height:90vh;
  display:grid;
  justify-items:center;
  gap:10px;
}
.game-media-viewer img{
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  border:1px solid rgba(255,140,46,.35);
  box-shadow:0 18px 70px rgba(0,0,0,.65);
}
.game-media-viewer figcaption{
  color:#dce4ee;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.12em;
}
.game-media-nav,
.game-media-close{
  color:var(--orange);
  background:rgba(6,9,14,.85);
  border:1px solid rgba(255,140,46,.42);
  cursor:pointer;
}
.game-media-nav{
  width:58px;
  height:58px;
  font-family:var(--f-display);
  font-size:2rem;
}
.game-media-close{
  position:absolute;
  top:20px;
  right:22px;
  width:44px;
  height:44px;
  font-size:1.6rem;
}
.game-media-nav:hover,
.game-media-close:hover,
.game-media-nav:focus-visible,
.game-media-close:focus-visible{
  background:rgba(255,140,46,.1);
  outline:none;
}

@media (max-width:1100px){
  .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-gallery.compact{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .coord-tag-copy strong{ font-size:.88rem; }
  .coord-tag-copy small{ font-size:.55rem; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .project-card-action .project-thumb{ height:190px; }
  .game-modal{ padding:8px; }
  .game-modal-dialog{
    width:100%;
    max-height:96vh;
    clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px),0 15px);
  }
  .game-modal-scroll{
    max-height:96vh;
    padding:28px 18px 30px;
  }
  .game-modal-close{
    top:12px;
    right:12px;
    width:38px;
    height:38px;
  }
  .game-modal-header{ padding-right:36px;margin-bottom:22px; }
  .game-modal-header h2{ font-size:clamp(1.65rem,9vw,2.7rem); }
  .game-modal-header p{ font-size:.88rem;line-height:1.55; }
  .game-modal-copy,
  .project-modal-grid{ grid-template-columns:1fr; }
  .game-modal-copy p{ padding:14px;font-size:.85rem; }
  .game-video-placeholder{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    min-height:235px;
    padding:28px 18px;
  }
  .game-video-play{ width:70px;height:70px; }
  .game-video-play::after{ top:21px;left:28px;border-top-width:13px;border-bottom-width:13px;border-left-width:20px; }
  .game-gallery,
  .game-gallery.compact{ grid-template-columns:1fr; }
  .game-gallery-item img,
  .game-gallery.compact .game-gallery-item img{ height:215px; }
  .game-media-viewer{
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:5px;
    padding:12px;
  }
  .game-media-nav{ width:40px;height:52px; }
  .game-media-close{ top:10px;right:10px; }
}


/* ===== v34 media assets without bundled videos ===== */
.portfolio-showreel-action{
  width:100%;
  padding:0;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.portfolio-showreel-action:hover{
  border-color:rgba(255,140,46,.58);
  box-shadow:0 0 28px rgba(255,140,46,.08);
}
.project-thumb{
  background-size:cover;
  background-repeat:no-repeat;
}


/* ===== v37 fix: imagen visible en VIDEO RESUMEN ===== */
.portfolio-showreel-media{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  width:100%;
  height:100%;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
}
.portfolio-showreel::after{
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(3,6,11,.10) 0%,
    rgba(3,6,11,.20) 55%,
    rgba(3,6,11,.56) 100%
  );
}
.portfolio-showreel-head,
.portfolio-play,
.portfolio-showreel-foot{
  position:absolute;
  z-index:2;
}
.portfolio-showreel-head{
  top:0;
  left:0;
  right:0;
}
.portfolio-play{
  inset:0;
}
.portfolio-showreel-foot{
  left:18px;
  right:18px;
  bottom:16px;
}

/* ===== v38: global overflow, language switch, robust tech icons ===== */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body > *{
  max-width:100%;
}
img,
video{
  max-width:100%;
}
.lang-toggle{
  flex:none;
  display:inline-grid;
  place-items:center;
  min-width:42px;
  height:34px;
  margin-left:auto;
  margin-right:10px;
  padding:0 10px;
  border:1px solid rgba(77,163,255,.38);
  background:rgba(5,10,18,.78);
  color:#72baff;
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.lang-toggle:hover,
.lang-toggle:focus-visible{
  color:#fff;
  border-color:#4da3ff;
  background:rgba(30,91,151,.16);
  transform:translateY(-1px);
  outline:none;
}
.tech-inline-svg{
  width:30px;
  height:30px;
  display:block;
  color:currentColor;
}
@media (min-width:981px){
  .nav-links + .lang-toggle{
    margin-left:12px;
  }
}
@media (max-width:980px){
  .nav-inner{
    justify-content:flex-start;
  }
  .nav-brand{
    margin-right:auto;
  }
  .lang-toggle{
    position:relative;
    z-index:131;
    margin-left:8px;
    margin-right:10px;
  }
}

/* Ajuste de distribución al añadir selector de idioma */
@media (min-width:981px){
  .nav-brand{ margin-right:auto; }
  .lang-toggle{ margin-left:12px; margin-right:0; }
}


/* ===== v39: créditos claros en modales de coordinación ===== */
.game-modal-authorship{
  margin:18px 0 22px;
  padding:16px 18px;
  border:1px solid rgba(255,140,46,.34);
  border-left:3px solid var(--orange);
  background:linear-gradient(90deg,rgba(255,140,46,.07),rgba(8,12,19,.76) 34%,rgba(8,12,19,.62));
}
.game-modal-authorship strong{
  display:block;
  margin-bottom:8px;
  color:var(--orange);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.16em;
}
.game-modal-authorship p{
  margin:0;
  color:#cbd5e1;
  font-size:.9rem;
  line-height:1.62;
}
@media (max-width:760px){
  .game-modal-authorship{
    padding:14px;
    margin:14px 0 18px;
  }
  .game-modal-authorship p{
    font-size:.82rem;
    line-height:1.55;
  }
}