/* ═══════════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════════ */
:root {
  --bg:    #04071C;
  --bg2:   #060A22;
  --bg3:   #080E2A;
  --blue:  #1D5CFF;
  --blue2: #3D7DFF;
  --cyan:  #06C8F0;
  --cyan2: #00E5FF;
  --purple:#7B2FBE;
  --purple2:#A56BE8;  /* variante accesible para texto/iconos: 5,58:1 */
  --gold:  #F59E0B;
  --green: #10B981;
  --txt:   #EEF2FF;
  --txt2:  #8898C0;
  --txt3:  #7C88A8;   /* AA 5,65:1 sobre --bg (antes #555E7A = 3,11:1) */
  --bdr:   rgba(29,92,255,.18);
  --bdr2:  rgba(6,200,240,.15);
  --card:  rgba(8,14,42,.75);
  /* superficies de las tarjetas: se despegan del fondo sin romper la gama */
  --surf-1:#0B1233;
  --surf-2:#0E1640;
  --surf-3:#12194A;
  --r:14px; --rs:8px;
  --font-head:'Space Grotesk';
  --font-body:'Inter';
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body),'Inter',sans-serif;
  background:var(--bg);
  color:var(--txt);
  overflow-x:hidden;
  line-height:1.6;
}
h1,h2,h3,h4,h5 { font-family:var(--font-head),'Space Grotesk',sans-serif; }
a { text-decoration:none; color:inherit; }
img { display:block; }
button { font-family:var(--font-body),'Inter',sans-serif; }

/* ── Canvas ── */
#net-canvas {
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}

/* ── PORTFOLIO / PROYECTOS ── */
#projects-wrap { margin-top:64px; }
.proj-head { margin-bottom:30px; }
.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.proj-card {
  background:var(--card); border:1px solid var(--bdr); border-radius:var(--r);
  padding:22px; display:flex; flex-direction:column; gap:10px;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.proj-card:hover { transform:translateY(-4px); border-color:var(--cyan); box-shadow:0 14px 40px rgba(6,200,240,.18); }
.proj-cat {
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--cyan);
}
.proj-name { font-family:'Space Grotesk',sans-serif; font-size:1.08rem; font-weight:700; color:var(--txt); }
.proj-desc { font-size:.84rem; color:var(--txt2); line-height:1.55; flex:1; }
.proj-btn {
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:6px; padding:10px 20px; border-radius:50px; border:none; cursor:pointer;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.82rem; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); transition:opacity .25s, transform .25s;
}
.proj-btn:hover { opacity:.88; transform:translateY(-2px); }
.proj-empty { color:var(--txt3); font-size:.85rem; }
/* admin projects manager */
.pj-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border:1px solid var(--bdr); border-radius:10px; margin-bottom:8px; font-size:.78rem; }
.pj-item a { color:var(--cyan); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.pj-del { background:none; border:none; color:#ff6b6b; cursor:pointer; font-size:.9rem; }

/* ── NOC DASHBOARD ── */
.map-box { position:relative; }
#noc-map { width:100%; height:auto; display:block; }
#noc-map .noc-grid line { stroke:rgba(29,92,255,0.05); stroke-width:1; }
#noc-map .continents path.continent { fill:rgba(29,92,255,0.08); stroke:rgba(61,125,255,0.55); stroke-width:1.1; }
#noc-map .and-outer path { /* glow handled inline */ }
#noc-map .province {
  fill:rgba(6,200,240,0.10);
  stroke:rgba(6,200,240,0.45);
  stroke-width:1.1;
  cursor:pointer;
  transition:fill .25s, stroke .25s, filter .25s;
}
#noc-map .province:hover {
  fill:rgba(0,229,255,0.35);
  stroke:#00E5FF;
  stroke-width:1.6;
  filter:drop-shadow(0 0 8px rgba(0,229,255,0.7));
}
#noc-map .conn-line, #noc-map .conn-curve {
  fill:none; stroke:#06C8F0; stroke-width:1.4;
  stroke-dasharray:6 4; opacity:0.7;
}
#noc-map .conn-curve { stroke-width:1.6; stroke-dasharray:8 6; opacity:0.55; }
#noc-map .city-dot { fill:#3D7DFF; }
#noc-map .city-halo { fill:none; stroke:#3D7DFF; stroke-width:1; opacity:0.5; }
#noc-map .city-label {
  font-family:'Space Grotesk',sans-serif; font-size:7px; font-weight:600;
  fill:#EEF2FF; pointer-events:none;
  text-shadow:0 0 3px rgba(4,7,28,0.95);
}
#noc-map .gl-label { font-size:9px; fill:#CFE4FF; }
#noc-map .ring { fill:none; stroke:#00E5FF; stroke-width:1.4; }
#noc-map #noc-hub:hover .ring { stroke-width:2; }
#noc-map .hub-name {
  font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:800;
  fill:#00E5FF; letter-spacing:1px;
  text-shadow:0 0 5px rgba(0,229,255,0.9);
}
#noc-map .hub-sub {
  font-family:'Inter',sans-serif; font-size:7px; font-weight:600;
  fill:#CFE4FF; letter-spacing:0.6px;
}
#noc-map .hub-tag {
  font-family:'JetBrains Mono',monospace; font-size:6px;
  fill:rgba(0,229,255,0.75); letter-spacing:1.5px;
}
#noc-map .noc-title {
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:800;
  fill:#FFFFFF; letter-spacing:1.6px;
  text-shadow:0 0 7px rgba(6,200,240,0.8);
}
#noc-map .noc-subtitle {
  font-family:'Inter',sans-serif; font-size:7px; font-weight:500;
  fill:#9CB4D8; letter-spacing:0.8px;
}
#noc-map .noc-legend text {
  font-family:'JetBrains Mono',monospace; font-size:6px;
  fill:#9CB4D8; letter-spacing:0.3px;
}
.noc-tooltip {
  position:absolute; pointer-events:none; z-index:50;
  background:rgba(5,12,34,0.96); backdrop-filter:blur(10px);
  border:1px solid rgba(0,229,255,0.5); border-radius:10px;
  padding:10px 14px; min-width:200px; opacity:0;
  transition:opacity .15s;
  box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 18px rgba(0,229,255,0.25);
  font-family:'Inter',sans-serif;
}
.noc-tooltip.on { opacity:1; }
.noc-tooltip .ntt-title {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem;
  color:#00E5FF; margin-bottom:4px; letter-spacing:0.8px;
}
.noc-tooltip .ntt-row {
  display:flex; justify-content:space-between; gap:14px;
  font-size:.72rem; color:#CFE4FF; padding:2px 0;
}
.noc-tooltip .ntt-row span { color:#7E94BD; font-family:'JetBrains Mono',monospace; }
.noc-info-panel {
  position:absolute; top:14px; right:14px;
  width:260px;
  background:rgba(5,12,34,0.92); backdrop-filter:blur(12px);
  border:1px solid rgba(0,229,255,0.4); border-radius:14px;
  padding:16px 18px; opacity:0; transform:translateY(-6px);
  transition:opacity .25s, transform .25s;
  pointer-events:none; z-index:40;
  box-shadow:0 14px 40px rgba(0,0,0,0.7), 0 0 22px rgba(0,229,255,0.2);
}
.noc-info-panel.on { opacity:1; transform:translateY(0); }
.noc-info-panel .nip-title {
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1.05rem;
  color:#00E5FF; letter-spacing:1.6px;
  text-shadow:0 0 10px rgba(0,229,255,0.6);
}
.noc-info-panel .nip-sub {
  font-size:.72rem; color:#9CB4D8; margin-bottom:10px;
  font-family:'JetBrains Mono',monospace; letter-spacing:.5px;
}
.noc-info-panel .nip-row {
  display:flex; justify-content:space-between; gap:10px;
  font-size:.74rem; color:#EEF2FF; padding:4px 0;
  border-top:1px solid rgba(0,229,255,0.08);
}
.noc-info-panel .nip-row:first-of-type { border-top:none; }
.noc-info-panel .nip-row span {
  color:#7E94BD; font-family:'JetBrains Mono',monospace;
}
@media (max-width: 720px) {
  .noc-info-panel { width:auto; left:8px; right:8px; top:8px; padding:10px 12px; }
  .noc-info-panel .nip-title { font-size:.92rem; }
  #noc-map .noc-title { font-size:18px; }
  #noc-map .noc-subtitle { font-size:10px; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue); border-radius:4px; }

/* ═══════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:0 5%;
  height:104px;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .4s;
}
#nav.scrolled {
  background:rgba(4,7,28,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
}
.nav-logo {
  height:72px; width:auto; object-fit:contain;
}
#wm-scroll {
  position:fixed; z-index:0; pointer-events:none;
  width:min(940px,92vw); height:auto;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  opacity:0.06;
  will-change:transform;
  transition:transform .15s linear;
}
@keyframes wmFloat {
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  35%{transform:translate(-48%,-54%) scale(1.06) rotate(0.4deg);}
  70%{transform:translate(-53%,-48%) scale(1.03) rotate(-0.3deg);}
}
.nav-menu { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-menu a {
  font-size:.83rem; font-weight:500; letter-spacing:.4px;
  color:var(--txt2); transition:color .25s;
  position:relative;
}
.nav-menu a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:1px; background:var(--cyan);
  transform:scaleX(0); transition:transform .3s; transform-origin:left;
}
.nav-menu a:hover, .nav-menu a.active { color:var(--txt); }
.nav-menu a:hover::after, .nav-menu a.active::after { transform:scaleX(1); }
.nav-btn {
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border:none; color:#fff;
  padding:9px 22px; border-radius:50px;
  font-size:.82rem; font-weight:600;
  cursor:pointer; letter-spacing:.3px;
  transition:opacity .25s, transform .25s;
  white-space:nowrap;
}
.nav-btn:hover { opacity:.85; transform:translateY(-1px); }
.nav-ham { display:none; background:none; border:none; cursor:pointer; padding:4px; flex-direction:column; gap:5px; }
.nav-ham span { display:block; width:22px; height:2px; background:var(--txt); border-radius:2px; transition:all .3s; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
#hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:130px 6% 60px;
  position:relative; z-index:1;
}
.hero-label {
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem; color:var(--cyan); margin-bottom:28px;
  letter-spacing:2px;
}
.hero-label span { width:32px; height:1px; background:var(--cyan); }
.hero-h1 {
  font-size:clamp(2.8rem,6vw,5.5rem);
  font-weight:800; line-height:1.06;
  letter-spacing:-1.5px; margin-bottom:24px;
}
.hero-h1 em { font-style:normal; }
.grd { background:linear-gradient(100deg,var(--blue),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grd2 { background:linear-gradient(100deg,var(--purple),var(--blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub {
  font-size:1.05rem; color:var(--txt2); max-width:560px;
  line-height:1.72; margin-bottom:40px;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:72px; }

.btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-weight:600; transition:all .25s; white-space:nowrap; font-family:'Space Grotesk',sans-serif; }
.btn-a { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; padding:13px 28px; border-radius:50px; font-size:.88rem; }
.btn-a:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(29,92,255,.45); }
.btn-b { background:transparent; border:1px solid var(--bdr); color:var(--txt2); padding:13px 28px; border-radius:50px; font-size:.88rem; }
.btn-b:hover { border-color:var(--cyan); color:var(--cyan); }

/* Hero stats strip */
.hero-stats {
  display:flex; gap:0;
  border:1px solid var(--bdr);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--card);
  backdrop-filter:blur(12px);
  max-width:680px;
}
.h-stat {
  flex:1; padding:22px 24px;
  border-right:1px solid var(--bdr);
  position:relative;
}
.h-stat:last-child { border-right:none; }
.h-stat .n {
  font-family:'Space Grotesk',sans-serif;
  font-size:2rem; font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.h-stat .l { font-size:.75rem; color:var(--txt2); margin-top:2px; letter-spacing:.3px; }

/* ═══════════════════════════════════════════════
   SECTION HEADER UTIL
═══════════════════════════════════════════════ */
.sec-header { margin-bottom:52px; }
.sec-num {
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem; color:var(--txt3); letter-spacing:3px;
  margin-bottom:12px; display:block;
}
.sec-h2 {
  font-size:clamp(1.9rem,3.5vw,3rem);
  font-weight:800; letter-spacing:-.5px; line-height:1.1;
  margin-bottom:14px;
}
.sec-p { font-size:.95rem; color:var(--txt2); line-height:1.72; max-width:560px; }

/* ═══════════════════════════════════════════════
   TICKER STRIP
═══════════════════════════════════════════════ */
.ticker-wrap {
  position:relative; z-index:1;
  border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  background:var(--bg2);
  padding:14px 0; overflow:hidden;
}
.ticker-inner {
  display:flex; gap:0;
  animation:tickerScroll 28s linear infinite;
  width:max-content;
}
.ticker-item {
  display:flex; align-items:center; gap:14px;
  padding:0 40px;
  font-size:.78rem; font-weight:600; color:var(--txt2);
  letter-spacing:1px; text-transform:uppercase; white-space:nowrap;
}
.ticker-item i { color:var(--cyan); font-size:.7rem; }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════ */
#services { padding:90px 6%; position:relative; z-index:1; }
.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.svc-card {
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:36px;
  backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s;
}
.svc-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  opacity:0; transition:opacity .3s;
}
.svc-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(29,92,255,.06),transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.svc-card:hover { border-color:rgba(6,200,240,.3); transform:translateY(-4px); }
.svc-card:hover::before { opacity:1; }
.svc-card:hover::after { opacity:1; }

/* Corner brackets */
.svc-card .corner {
  position:absolute; width:14px; height:14px;
  border-color:rgba(6,200,240,.3); border-style:solid;
  opacity:0; transition:opacity .3s;
}
.svc-card:hover .corner { opacity:1; }
.corner.tl { top:10px; left:10px; border-width:2px 0 0 2px; }
.corner.br { bottom:10px; right:10px; border-width:0 2px 2px 0; }

/* Iconos 3D isometricos: sin fondo ni marco, la pieza se sostiene sola */
.svc-icon-wrap {
  width:82px; height:88px;
  display:flex; align-items:center; justify-content:center;
  margin:-6px 0 14px -8px;
  background:none; border:none;
}
.svc-icon-wrap img {
  width:100%; height:100%;
  object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.svc-card:hover .svc-icon-wrap img { transform:translateY(-5px) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .svc-card:hover .svc-icon-wrap img { transform:none; }
}
@media (max-width:920px) {
  .svc-icon-wrap { width:70px; height:75px; }
}
.svc-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:10px; }
.svc-card > p { font-size:.84rem; color:var(--txt2); line-height:1.68; margin-bottom:20px; }
.svc-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px; }
.tag {
  font-size:.7rem; font-weight:600; letter-spacing:.4px;
  padding:4px 12px; border-radius:20px;
  background:rgba(29,92,255,.1); border:1px solid rgba(29,92,255,.2);
  color:var(--blue2);
}
.svc-items { list-style:none; margin-bottom:28px; display:flex; flex-direction:column; gap:9px; }
.svc-items li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.83rem; color:var(--txt2); line-height:1.5;
}
.svc-items li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); flex-shrink:0; margin-top:7px;
}
.svc-items strong { color:var(--txt); font-weight:600; }
.btn-consult {
  width:100%; padding:11px; border-radius:50px;
  border:1px solid rgba(29,92,255,.3);
  background:rgba(29,92,255,.08);
  color:var(--cyan); font-size:.82rem; font-weight:600;
  cursor:pointer; letter-spacing:.3px; transition:all .25s;
  font-family:'Space Grotesk',sans-serif;
}
.btn-consult:hover {
  background:rgba(29,92,255,.2); border-color:var(--cyan);
  box-shadow:0 0 18px rgba(6,200,240,.15);
}

/* ═══════════════════════════════════════════════
   WHY US
═══════════════════════════════════════════════ */
#why { padding:0 6% 90px; position:relative; z-index:1; }
/* ═══════════════════════════════════════════════
   POR QUE ELEGIRNOS — tarjetas que giran
   El titulo va delante; la explicacion, detras.
   Debajo de cada tarjeta se apilan dos capas
   desplazadas para dar sensacion de superposicion.
═══════════════════════════════════════════════ */
.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:26px 24px;
  perspective:1600px;
}

.why-card {
  position:relative;
  height:276px;
  border-radius:20px;
}

/* las dos capas apiladas detras */
.why-card::before, .why-card::after {
  content:''; position:absolute; inset:0;
  border-radius:20px;
  background:linear-gradient(150deg, var(--surf-2), var(--surf-1));
  border:1px solid rgba(96,132,220,.14);
  transition:transform .55s cubic-bezier(.22,.9,.28,1), opacity .55s;
  pointer-events:none;
}
.why-card::before { transform:translate(7px,7px) scale(.982);  opacity:.6; }
.why-card::after  { transform:translate(14px,14px) scale(.964); opacity:.32; }
.why-card:hover::before, .why-card:focus-within::before { transform:translate(10px,10px) scale(.978); opacity:.72; }
.why-card:hover::after,  .why-card:focus-within::after  { transform:translate(20px,20px) scale(.956); opacity:.42; }

/* el elemento que gira */
.why-flip {
  position:relative; z-index:1;
  display:block; width:100%; height:100%;
  padding:0; margin:0; border:none; background:none;
  font-family:inherit; text-align:left; cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.22,.9,.28,1);
}
.why-card:hover .why-flip,
.why-card.is-flipped .why-flip { transform:rotateY(180deg); }
.why-flip:focus-visible { outline:none; }
.why-card:focus-within .why-flip { transform:rotateY(180deg); }

.why-face {
  position:absolute; inset:0;
  isolation:isolate;
  display:flex; flex-direction:column;
  padding:26px 26px 22px;
  border-radius:20px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(120,158,240,.22);
  box-shadow:0 18px 42px rgba(2,5,20,.55), inset 0 1px 0 rgba(150,200,255,.10);
  overflow:hidden;
  /* Cuatro capas superpuestas, de arriba abajo:
     1. halo de color que sale de la esquina del icono
     2. rayas diagonales finas, el "tejido" futurista
     3. rejilla técnica muy tenue
     4. degradado base de la tarjeta                              */
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(6,200,240,.13) 0%, transparent 52%),
    repeating-linear-gradient(115deg,
      rgba(125,240,255,.055) 0px, rgba(125,240,255,.055) 1px,
      transparent 1px,          transparent 9px),
    repeating-linear-gradient(0deg,
      rgba(120,158,240,.035) 0px, rgba(120,158,240,.035) 1px,
      transparent 1px,           transparent 34px),
    linear-gradient(155deg, var(--surf-1) 0%, var(--surf-2) 100%);
}

/* filo de luz superior, como el canto de una tarjeta fisica */
.why-face::before {
  content:''; position:absolute; top:0; left:22px; right:22px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,200,255,.6),transparent);
  z-index:3;
}

/* Barrido de luz que cruza la tarjeta al pasar el raton.
   Va en un elemento aparte para no interferir con el fondo. */
.why-brillo {
  position:absolute; inset:-40% -60%;
  /* sin esto, el barrido de la cara frontal se cuela por el dorso al girar */
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(105deg,
    transparent 38%,
    rgba(125,240,255,.10) 47%,
    rgba(190,255,255,.20) 50%,
    rgba(125,240,255,.10) 53%,
    transparent 62%);
  transform:translateX(-115%);
  transition:transform 0s;
  pointer-events:none; z-index:2;
}
.why-card:hover .why-brillo,
.why-card:focus-within .why-brillo {
  transform:translateX(115%);
  transition:transform 1.15s cubic-bezier(.3,.7,.3,1) .12s;
}

/* Escuadras de esquina, guino a una interfaz tecnica */
.why-face::after {
  content:''; position:absolute; right:16px; bottom:16px;
  width:20px; height:20px; z-index:3;
  border-right:1.5px solid rgba(6,200,240,.42);
  border-bottom:1.5px solid rgba(6,200,240,.42);
  border-bottom-right-radius:5px;
  transition:width .4s, height .4s, border-color .4s;
}
.why-card:hover .why-face::after,
.why-card:focus-within .why-face::after {
  width:30px; height:30px; border-color:rgba(0,229,255,.75);
}

/* El contenido va por encima de las capas decorativas */
.why-num, .why-ico, .why-title, .why-hint, .why-back p { position:relative; z-index:4; }
.why-card:hover .why-face,
.why-card:focus-within .why-face {
  border-color:rgba(6,200,240,.45);
  box-shadow:0 22px 52px rgba(2,5,20,.6),
             inset 0 1px 0 rgba(150,200,255,.16),
             0 0 24px rgba(6,200,240,.10);
}

.why-front { align-items:flex-start; justify-content:space-between; }
.why-back  {
  transform:rotateY(180deg);
  justify-content:center;
  /* trama inclinada al reves: al girar se nota que es la otra cara */
  background:
    radial-gradient(110% 80% at 92% 100%, rgba(123,47,190,.16) 0%, transparent 55%),
    repeating-linear-gradient(65deg,
      rgba(125,240,255,.05) 0px, rgba(125,240,255,.05) 1px,
      transparent 1px,          transparent 10px),
    linear-gradient(155deg, var(--surf-2) 0%, var(--surf-3) 100%);
}
/* filete de marca en el canto del dorso, para que el giro se note */
.why-back::after {
  /* Este pseudoelemento tambien lo usa .why-face::after para la escuadra de
     esquina, asi que hay que anular esas propiedades o se mezclan las dos. */
  content:''; position:absolute;
  left:0; top:0; bottom:0; right:auto;
  width:3px; height:auto;
  border:none; border-radius:0;
  background:linear-gradient(180deg, var(--cyan), var(--blue) 55%, var(--purple2));
  opacity:.9;
}
.why-card:hover .why-back::after,
.why-card:focus-within .why-back::after { width:3px; height:auto; }
/* eco del icono al fondo del dorso, muy tenue */
.why-back .why-ghost {
  position:absolute; right:-16px; bottom:-18px;
  width:132px; height:140px; opacity:.07;
  pointer-events:none;
}
.why-back .why-ghost img { width:100%; height:100%; object-fit:contain; }

.why-ico { width:122px; height:130px; margin:-16px 0 -6px -18px; background:none; border:none; }
.why-ico img { width:100%; height:100%; object-fit:contain; }

.why-title {
  font-family:var(--font-head),'Space Grotesk',sans-serif;
  font-size:1.16rem; font-weight:700; line-height:1.25;
  color:var(--txt); letter-spacing:-.2px;
}
.why-front .why-title { margin-top:auto; }

.why-hint {
  display:flex; align-items:center; gap:7px;
  margin-top:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:.63rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--cyan);
}
.why-hint::after {
  content:''; width:16px; height:1px; background:currentColor;
  transition:width .35s;
}
.why-card:hover .why-hint::after { width:26px; }

.why-back .why-title { font-size:.94rem; margin-bottom:12px; color:var(--cyan2); }
.why-back p { font-size:.845rem; color:var(--txt2); line-height:1.72; }

/* numero de orden, muy tenue, refuerza que son piezas de una serie */
.why-num {
  position:absolute; top:20px; right:22px;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem; letter-spacing:1px;
  color:rgba(136,152,192,.62);
}

@media (max-width:920px) { .why-card { height:266px; } .why-ico { width:104px; height:111px; } }
@media (max-width:640px) {
  .why-card { height:262px; }
  .why-ico { width:96px; height:102px; margin:-12px 0 -4px -14px; }
  .why-back p { font-size:.82rem; }
}

/* sin animacion: se cruza el contenido en lugar de girar */
@media (prefers-reduced-motion: reduce) {
  .why-flip { transition:none; }
  .why-card:hover .why-flip,
  .why-card.is-flipped .why-flip,
  .why-card:focus-within .why-flip { transform:none; }
  .why-face { backface-visibility:visible; -webkit-backface-visibility:visible; transition:opacity .2s; }
  .why-back { transform:none; opacity:0; }
  .why-card:hover .why-back,
  .why-card.is-flipped .why-back,
  .why-card:focus-within .why-back { opacity:1; }
  .why-card:hover .why-front,
  .why-card.is-flipped .why-front,
  .why-card:focus-within .why-front { opacity:0; }
  .why-card::before, .why-card::after { transition:none; }
  .why-brillo { display:none; }
}

/* ═══════════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════════ */
#reviews {
  padding:80px 6%;
  background:var(--bg2);
  border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  position:relative; z-index:1;
}
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.rev-card {
  background:var(--card); border:1px solid var(--bdr);
  border-radius:var(--r); padding:28px 26px;
  backdrop-filter:blur(10px);
}
.rev-stars { color:var(--gold); font-size:.78rem; letter-spacing:3px; margin-bottom:14px; }
.rev-q { font-size:1.4rem; color:var(--cyan); margin-bottom:10px; opacity:.4; }
.rev-text { font-size:.84rem; color:var(--txt2); line-height:1.72; margin-bottom:20px; font-style:italic; }
.rev-by { display:flex; align-items:center; gap:12px; }
.rev-ava {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700;
}
.rev-name { font-size:.85rem; font-weight:600; }
.rev-role { font-size:.72rem; color:var(--txt2); }

/* ═══════════════════════════════════════════════
   ABOUT / MAP
═══════════════════════════════════════════════ */
#about { padding:90px 6%; position:relative; z-index:1; }
.about-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; }
.about-text .sec-header { margin-bottom:28px; }
.about-text p { font-size:.9rem; color:var(--txt2); line-height:1.78; margin-bottom:16px; }
.about-metrics {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:28px;
}
.metric {
  background:var(--card); border:1px solid var(--bdr);
  border-radius:var(--rs); padding:16px 14px; text-align:center;
}
.metric .n { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,var(--blue),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.metric .l { font-size:.7rem; color:var(--txt2); margin-top:3px; }

/* Map container */
.map-box {
  background:var(--card); border:1px solid var(--bdr);
  border-radius:20px; padding:24px;
  backdrop-filter:blur(14px);
}
.map-label {
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; color:var(--cyan); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:14px; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.map-label::before, .map-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--bdr2)); }
#and-map { width:100%; height:auto; }
.map-legend {
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:center; margin-top:14px;
}
.leg-item { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--txt2); }
.leg-dot { width:8px; height:8px; border-radius:50%; }

/* ═══════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════ */
#contact { padding:90px 6%; position:relative; z-index:1; text-align:center; }
.contact-card {
  background:var(--card); border:1px solid var(--bdr);
  border-radius:24px; padding:60px 48px; max-width:600px;
  margin:0 auto; backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
}
.contact-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--purple),var(--blue),var(--cyan));
}
.sig { font-size:1.6rem; font-weight:800; margin:14px 0 6px; }
.sig-sub { font-size:.83rem; color:var(--txt2); margin-bottom:34px; }
.cinfo { display:flex; flex-direction:column; gap:14px; }
.crow {
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:.9rem; color:var(--txt2);
}
.crow i {
  width:34px; height:34px; border-radius:50%;
  background:rgba(29,92,255,.1); border:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; color:var(--cyan); flex-shrink:0;
}
.contact-cta {
  width:100%; margin-top:32px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border:none; color:#fff; padding:14px;
  border-radius:50px; font-size:.9rem; font-weight:700;
  cursor:pointer; font-family:'Space Grotesk',sans-serif;
  transition:opacity .25s, transform .25s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.contact-cta:hover { opacity:.85; transform:translateY(-2px); }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer {
  background:#020615; border-top:1px solid var(--bdr);
  padding:24px 6%;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; position:relative; z-index:1;
}
.ft-logo { height:34px; object-fit:contain; }
.ft-copy { font-size:.75rem; color:var(--txt3); }
.ft-adm { font-size:.7rem; color:rgba(255,255,255,.08); background:none; border:none; cursor:pointer; transition:color .3s; font-family:inherit; }
.ft-adm:hover { color:var(--txt2); }

/* ═══════════════════════════════════════════════
   ROBOT — IMAGEN REAL 3D + PERSPECTIVA
═══════════════════════════════════════════════ */
#robot-wrap {
  position:fixed; right:26px; z-index:800;
  display:flex; flex-direction:column; align-items:center; gap:0;
  transition:top .5s cubic-bezier(.25,.8,.25,1);
  cursor:pointer; top:50vh;
}

/* Speech bubble */
.rbt-bubble {
  background:rgba(10,18,50,.92);
  border:1px solid rgba(6,200,240,.4);
  backdrop-filter:blur(14px);
  color:var(--txt); font-size:.68rem; font-weight:600;
  padding:8px 13px; border-radius:12px 12px 0 12px;
  text-align:center; max-width:135px; line-height:1.45;
  margin-bottom:6px;
  box-shadow:0 4px 20px rgba(6,200,240,.2),0 0 0 1px rgba(6,200,240,.1);
  animation:bubbleFade 1s ease-out both;
}
.rbt-bubble small { display:block; color:var(--cyan); margin-top:3px; font-size:.62rem; }
@keyframes bubbleFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Float wrapper — separado del tilt 3D */
#rbt-float {
  animation:rbtFloat 5s ease-in-out infinite;
}
@keyframes rbtFloat {
  0%,100%{ transform:translateY(0px); }
  50%    { transform:translateY(-13px); }
}

/* Image frame — recibe el tilt 3D por JS */
#rbt-frame {
  width:158px;
  position:relative;
  filter:
    drop-shadow(0 0 22px rgba(6,200,240,.28))
    drop-shadow(0 24px 44px rgba(0,0,0,.55))
    drop-shadow(0 0 6px rgba(6,200,240,.12));
  transition:transform .10s ease-out;
  transform-style:preserve-3d;
}

/* La imagen en sí */
#rbt-img {
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* Overlay scan-line que recorre verticalmente */
#rbt-scan {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(6,200,240,.04) 48%,
    rgba(6,200,240,.09) 50%,
    rgba(6,200,240,.04) 52%,
    transparent 100%
  );
  animation:scanMove 5s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes scanMove {
  0%  { transform:translateY(-100%); opacity:.6; }
  50% { opacity:1; }
  100%{ transform:translateY(100%); opacity:.6; }
}

/* Overlay de boca — animación "hablando" suave */
#rbt-mouth-ov {
  position:absolute;
  left:50%; top:36.1%;      /* boca en 215/596 del nuevo retrato */
  transform:translateX(-50%);
  width:22px; height:5px;
  border-radius:50%;
  background:rgba(185,100,65,.18);
  animation:mouthTalk 3.2s ease-in-out infinite;
  pointer-events:none; z-index:2;
}
@keyframes mouthTalk {
  0%,100%{ height:5px; opacity:.3; }
  12%    { height:9px; opacity:.55; }
  24%    { height:4px; opacity:.2; }
  38%    { height:8px; opacity:.5; }
  50%    { height:5px; opacity:.3; }
  64%    { height:10px; opacity:.6; }
  76%    { height:4px; opacity:.2; }
  88%    { height:7px; opacity:.45; }
}

/* Parpadeo de ojos — overlay sutil */
#rbt-blink {
  position:absolute;
  left:50%; top:24.3%;      /* ojos en 145/596 del nuevo retrato */
  transform:translateX(-50%);
  width:50px; height:0px;
  background:rgba(240,220,190,.0);
  pointer-events:none; z-index:2;
  animation:eyeBlink 5.5s ease-in-out infinite;
  border-radius:50%;
}
@keyframes eyeBlink {
  0%,87%,95%,100%{ height:0px; background:rgba(240,220,190,0); }
  90%            { height:10px; background:rgba(240,220,190,.55); }
}

/* Halo cian bajo el personaje */
#rbt-halo {
  width:90px; height:12px;
  background:radial-gradient(ellipse,rgba(6,200,240,.35) 0%,transparent 72%);
  margin-top:-6px;
  animation:haloBreath 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes haloBreath {
  0%,100%{ opacity:.6; transform:scaleX(1); }
  50%    { opacity:1;  transform:scaleX(1.2); }
}

/* Responsive */
@media(max-width:600px){
  #robot-wrap{ right:8px; }
  #rbt-frame { width:130px; }
}

/* ═══════════════════════════════════════════════
   CHAT PANEL
═══════════════════════════════════════════════ */
#chat {
  position:fixed; right:26px; bottom:160px; z-index:801;
  width:306px;
  background:rgba(5,9,28,.97);
  border:1px solid var(--bdr); border-radius:20px;
  overflow:hidden; display:none; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  backdrop-filter:blur(20px);
}
.chat-hd {
  padding:14px 18px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:space-between;
}
.chat-hd-l { display:flex; align-items:center; gap:10px; }
.chat-hd-l span { font-size:.85rem; font-weight:700; }
.chat-online { width:8px; height:8px; border-radius:50%; background:#00FF88; box-shadow:0 0 6px #00FF88; }
.chat-x { background:none; border:none; color:#fff; font-size:1rem; cursor:pointer; padding:0 2px; }
.chat-body { height:200px; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.cm { max-width:88%; padding:9px 13px; border-radius:14px; font-size:.79rem; line-height:1.5; }
.cm.b { background:rgba(29,92,255,.14); border:1px solid rgba(29,92,255,.2); align-self:flex-start; border-bottom-left-radius:3px; }
.cm.u { background:rgba(29,92,255,.55); align-self:flex-end; border-bottom-right-radius:3px; }
.chat-opts { padding:0 14px 10px; display:flex; flex-direction:column; gap:6px; }
.copt {
  background:rgba(29,92,255,.08); border:1px solid rgba(29,92,255,.18);
  color:var(--cyan); font-size:.74rem; padding:7px 12px;
  border-radius:20px; cursor:pointer; text-align:left;
  transition:background .2s; font-family:inherit;
}
.copt:hover { background:rgba(29,92,255,.22); }
.chat-inp-row {
  display:flex; gap:6px; padding:10px 14px;
  border-top:1px solid var(--bdr);
}
.chat-inp {
  flex:1; background:rgba(255,255,255,.05);
  border:1px solid var(--bdr); color:var(--txt);
  border-radius:20px; padding:8px 14px; font-size:.78rem;
  font-family:inherit; outline:none;
}
.chat-inp:focus { border-color:var(--blue); }
.chat-send {
  width:32px; height:32px; border-radius:50%;
  background:var(--blue); border:none; color:#fff;
  cursor:pointer; font-size:.82rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ═══════════════════════════════════════════════
   FORM MODAL
═══════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.78);
  z-index:1200; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.overlay.open { display:flex; }
.mbox {
  background:#050C24; border:1px solid var(--bdr);
  border-radius:22px; padding:44px; width:90%; max-width:500px;
  max-height:90vh; overflow-y:auto;
}
.mbox h3 { font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.mbox .msub { font-size:.82rem; color:var(--txt2); margin-bottom:26px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:.72rem; font-weight:600; color:var(--txt2); letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; }
.fg input, .fg textarea, .fg select {
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--bdr);
  border-radius:var(--rs); padding:10px 14px; color:var(--txt);
  font-family:inherit; font-size:.86rem; outline:none; transition:border .25s;
}
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color:var(--blue); }
.fg textarea { height:90px; resize:vertical; }
.fg select option { background:#050C24; }
.mbtns { display:flex; gap:12px; margin-top:22px; }
.mbtn-sub { flex:1; background:linear-gradient(135deg,var(--blue),var(--cyan)); border:none; color:#fff; padding:12px; border-radius:50px; font-weight:700; font-family:'Space Grotesk',sans-serif; cursor:pointer; font-size:.88rem; }
.mbtn-can { flex:1; background:transparent; border:1px solid var(--bdr); color:var(--txt2); padding:12px; border-radius:50px; font-weight:600; font-family:'Space Grotesk',sans-serif; cursor:pointer; font-size:.88rem; }
.mbtn-can:hover { border-color:var(--txt2); }

/* ═══════════════════════════════════════════════
   ACCESO OCULTO AL PANEL (doble clic en el logo del pie)
═══════════════════════════════════════════════ */
.ft-logo {
  cursor:default;
  -webkit-user-select:none; user-select:none;
  transition:filter .25s, transform .25s;
}
/* Señal discreta: solo aparece al enfocar con el teclado, para que el
   acceso siga siendo invisible al visitante pero alcanzable sin ratón. */
.ft-logo:focus-visible {
  outline:2px solid var(--cyan); outline-offset:6px; border-radius:6px;
}
.ft-logo.abriendo {
  filter:drop-shadow(0 0 14px rgba(6,200,240,.55));
  transform:scale(1.04);
}

/* ═══════════════════════════════════════════════
   FADE ANIM
═══════════════════════════════════════════════ */
.fadein { opacity:0; transform:translateY(28px); transition:opacity .7s, transform .7s; }
.fadein.vis { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:920px){
  .svc-grid { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .rev-grid { grid-template-columns:1fr; }
  .hero-stats { flex-direction:column; }
  .h-stat { border-right:none; border-bottom:1px solid var(--bdr); }
  .h-stat:last-child { border-bottom:none; }
}
@media(max-width:640px){
  .nav-menu, .nav-btn { display:none; }
  .nav-ham { display:flex; }
  #hero { padding:80px 5% 50px; }
  .why-grid { grid-template-columns:1fr; }
  section { padding:60px 5%; }
  .about-metrics { grid-template-columns:repeat(3,1fr); }
  #robot-wrap { right:12px; }
  #chat { right:12px; width:290px; }
}

      #rbt-canvas {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
      }


/* ═══════════════════════════════════════════════
   ICONOS SVG PROPIOS (sustituyen a Font Awesome)
═══════════════════════════════════════════════ */
.ic {
  width:1em; height:1em; display:inline-block; vertical-align:-.125em;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.why-ico .ic { width:24px; height:24px; }
.ct-ico .ic { width:17px; height:17px; }
.ticker-item .ic { width:11px; height:11px; }
.proj-btn .ic { width:13px; height:13px; }
.btn .ic, .btn-consult .ic, .mbtn-sub .ic { width:15px; height:15px; }

/* ═══════════════════════════════════════════════
   ACCESIBILIDAD
═══════════════════════════════════════════════ */
.skip-link {
  position:absolute; left:12px; top:-100px; z-index:1200;
  background:var(--cyan); color:#04071C;
  padding:11px 20px; border-radius:0 0 10px 10px;
  font-weight:700; font-size:.86rem; transition:top .2s;
}
.skip-link:focus { top:0; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline:3px solid var(--cyan2);
  outline-offset:3px;
  border-radius:4px;
}
.province:focus-visible, .prov-city:focus-visible, #noc-hub:focus-visible {
  outline:none;
  filter:drop-shadow(0 0 7px var(--cyan2));
}
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html { scroll-behavior:auto !important; }
  #net-canvas { display:none; }
  .ticker-inner { animation:none; }
  #wm-scroll { transition:none; }
}

/* ═══════════════════════════════════════════════
   FORMULARIOS: CONSENTIMIENTO Y ESTADOS
═══════════════════════════════════════════════ */
.fg-check {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.78rem; color:var(--txt2); line-height:1.55; margin:6px 0 4px;
}
.fg-check input[type=checkbox] {
  width:17px; height:17px; margin-top:2px; flex-shrink:0;
  accent-color:var(--cyan); cursor:pointer;
}
.fg-check a { color:var(--cyan); text-decoration:underline; }
.f-status { font-size:.82rem; margin-top:12px; text-align:center; min-height:1.2em; }
.f-status.err { color:#FF8FA3; }
.f-status.ok  { color:var(--green); }
.mbtn-sub[aria-busy="true"] { opacity:.6; pointer-events:none; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ═══════════════════════════════════════════════
   PIE: ENLACES LEGALES
═══════════════════════════════════════════════ */
.ft-legal {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  margin-top:14px; font-size:.76rem;
}
.ft-legal a { color:var(--txt2); transition:color .25s; }
.ft-legal a:hover { color:var(--cyan); }

/* ═══════════════════════════════════════════════
   PAGINAS LEGALES
═══════════════════════════════════════════════ */
.legal-wrap { max-width:820px; margin:0 auto; padding:150px 6% 90px; position:relative; z-index:1; }
.legal-wrap h1 { font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; margin-bottom:10px; }
.legal-wrap .updated { font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--txt3); margin-bottom:44px; }
.legal-wrap h2 { font-size:1.22rem; font-weight:700; margin:38px 0 12px; }
.legal-wrap h3 { font-size:1rem; font-weight:600; margin:24px 0 8px; }
.legal-wrap p, .legal-wrap li { font-size:.9rem; color:var(--txt2); line-height:1.8; }
.legal-wrap p { margin-bottom:14px; }
.legal-wrap ul { margin:0 0 16px 20px; }
.legal-wrap li { margin-bottom:7px; }
.legal-wrap a { color:var(--cyan); text-decoration:underline; }
.legal-wrap strong { color:var(--txt); font-weight:600; }
.legal-wrap table { width:100%; border-collapse:collapse; margin-bottom:20px; font-size:.84rem; }
.legal-wrap th, .legal-wrap td { border:1px solid var(--bdr); padding:10px 12px; text-align:left; color:var(--txt2); }
.legal-wrap th { color:var(--txt); font-weight:600; background:rgba(29,92,255,.06); }
.legal-back { display:inline-block; margin-bottom:26px; font-size:.84rem; color:var(--cyan); }
.legal-note { border:1px solid var(--gold); border-radius:var(--r); padding:16px 20px; margin-bottom:32px; background:rgba(245,158,11,.07); }
.legal-note p { color:#FFD79A; margin:0; font-size:.85rem; }

/* ═══════════════════════════════════════════════
   CORRECCIONES RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:920px) {
  .svc-items li { flex-direction:column; gap:2px; padding-left:12px; border-left:2px solid var(--bdr2); }
  .svc-items li::before { display:none; }
  .svc-items strong { display:block; }
}
@media (max-width:720px) {
  .nav-menu.open {
    display:flex; flex-direction:column;
    position:fixed; top:64px; left:0; right:0;
    background:rgba(4,7,28,.98); backdrop-filter:blur(20px);
    padding:20px 24px; border-bottom:1px solid var(--bdr);
    z-index:899; gap:20px;
  }
  #robot-wrap { width:96px; }
  #rbt-bub { font-size:.62rem; padding:6px 9px; max-width:118px; }
  .nav-logo { height:54px; }
  .hero-label { font-size:.6rem; letter-spacing:1.2px; flex-wrap:wrap; }
  .hero-label span { width:18px; }
  #hero { padding-top:112px; }
  .legal-wrap { padding-top:120px; }
}
@media (max-width:420px) {
  #robot-wrap { width:78px; }
  #rbt-bub { display:none; }
}

/* iconos de contacto y ticker (antes eran etiquetas <i> de Font Awesome) */
.ct-ico {
  width:34px; height:34px; border-radius:50%;
  background:rgba(29,92,255,.1); border:1px solid var(--bdr);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--cyan); flex-shrink:0;
}
.crow a { color:var(--txt2); transition:color .25s; }
.crow a:hover { color:var(--cyan); }
.ticker-item .ic { color:var(--cyan); }

/* el asistente es un botón real, accesible por teclado */
#robot-wrap { cursor:default; }
#rbt-btn {
  position:absolute; inset:0; z-index:5;
  background:none; border:none; padding:0; cursor:pointer;
  border-radius:16px;
}

/* el texto superior se cortaba por el borde derecho en movil */
.hero-label .hl-txt { flex:1 1 auto; min-width:0; }
.hero-label .hl-dash { flex:0 0 auto; }

@media (max-width:720px) {
  /* el asistente se ancla abajo a la derecha y deja de tapar el titular */
  #robot-wrap { top:auto !important; bottom:14px; right:10px; transition:none; }
  #wm-scroll { opacity:.035; width:min(560px,80vw); }
  .hero-label { line-height:1.5; }
}


/* el nuevo retrato es mas alto que ancho: el marco sigue el ancho del contenedor */
@media (max-width:720px) {
  #rbt-frame { width:96px; }
  #rbt-halo  { width:64px; }
}
@media (max-width:420px) {
  #rbt-frame { width:78px; }
  #rbt-halo  { width:52px; }
}

/* ── ASISTENTE: indicador de "escribiendo" ── */
.cm-typing { display:flex; align-items:center; gap:5px; min-height:19px; }
.cm-typing span {
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); opacity:.45;
  animation:cmDot 1.25s ease-in-out infinite;
}
.cm-typing span:nth-child(2){ animation-delay:.16s; }
.cm-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes cmDot {
  0%,60%,100%{ transform:translateY(0);   opacity:.35; }
  30%        { transform:translateY(-4px); opacity:1;   }
}
.chat-inp:disabled { opacity:.55; cursor:not-allowed; }
.chat-send:disabled { opacity:.4; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .cm-typing span { animation:none; opacity:.6; }
}

/* aviso legal breve dentro del chat */
.chat-nota {
  font-size:.62rem; line-height:1.45; color:var(--txt3);
  padding:0 14px 8px; text-align:center;
}
.chat-nota a { color:var(--txt2); text-decoration:underline; }


/* ── Iconos 3D renderizados ──
   Los renders son cuadrados y llevan su propio halo, asi que necesitan un
   encuadre distinto al de los SVG isometricos que habia antes. */
.svc-icon-wrap img[src$=.webp],
.why-ico img[src$=.webp] { filter:drop-shadow(0 10px 18px rgba(2,6,24,.55)); }
.why-ico:has(img[src$=".webp"]) { width:136px; height:136px; margin:-18px 0 -8px -18px; }
.svc-icon-wrap:has(img[src$=".webp"]) { width:106px; height:106px; margin:-10px 0 10px -10px; }
@media (max-width:920px) {
  .why-ico:has(img[src$=".webp"]) { width:116px; height:116px; }
  .svc-icon-wrap:has(img[src$=".webp"]) { width:92px; height:92px; }
}

/* ── Cabecera del chat: nombre y rol de Marcela ── */
.chat-hd-l { display:flex; align-items:baseline; gap:7px; }
.chat-nombre { font-weight:700; letter-spacing:.2px; }
.chat-rol {
  font-size:.62rem; letter-spacing:.8px; text-transform:uppercase;
  color:var(--txt2); font-weight:500;
}
@media (max-width:420px) { .chat-rol { display:none; } }

/* ═══════════════════════════════════════════════
   PRODUCTOS / PAQUETES
═══════════════════════════════════════════════ */
#productos { padding:90px 6%; position:relative; z-index:1; }
/* auto-fit y no auto-fill: con uno o dos productos las tarjetas se reparten
   el ancho en vez de quedarse encogidas en una esquina. El max de 420px evita
   que una sola se estire hasta parecer un cartel. */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.prod-grid:has(.prod-card:only-child) { grid-template-columns:minmax(300px,420px); justify-content:center; }
.prod-grid:has(.prod-card:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(300px,440px)); justify-content:center; }
.prod-card {
  position:relative; display:flex; flex-direction:column;
  padding:26px 24px; border-radius:18px;
  border:1px solid rgba(120,158,240,.20);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(6,200,240,.10) 0%, transparent 52%),
    repeating-linear-gradient(115deg, rgba(125,240,255,.045) 0 1px, transparent 1px 9px),
    linear-gradient(155deg, var(--surf-1), var(--surf-2));
  box-shadow:0 16px 38px rgba(2,5,20,.5);
  transition:transform .3s, border-color .3s, box-shadow .3s;
  overflow:hidden;
}
.prod-card:hover { transform:translateY(-4px); border-color:rgba(6,200,240,.45); box-shadow:0 22px 50px rgba(2,5,20,.6),0 0 22px rgba(6,200,240,.10); }
.prod-dest { border-color:rgba(6,200,240,.45); }
.prod-badge {
  position:absolute; top:0; right:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#04071C; font-size:.62rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  padding:5px 14px; border-radius:0 18px 0 12px;
}
.prod-img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:12px; margin-bottom:16px; }
.prod-cat {
  font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--cyan); margin-bottom:8px;
}
.prod-name { font-size:1.14rem; font-weight:700; margin-bottom:9px; line-height:1.3; }
.prod-desc { font-size:.85rem; color:var(--txt2); line-height:1.68; margin-bottom:16px; }
.prod-incluye { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:22px; flex:1; }
.prod-incluye li { display:flex; align-items:flex-start; gap:9px; font-size:.82rem; color:var(--txt2); line-height:1.5; }
.prod-incluye .ic { width:14px; height:14px; color:var(--green); margin-top:3px; }
.prod-btn {
  margin-top:auto; width:100%; padding:12px; border:none; border-radius:50px; cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.85rem;
  transition:opacity .25s, transform .25s;
}
.prod-btn:hover { opacity:.88; transform:translateY(-2px); }

/* ═══════════════════════════════════════════════
   NUESTRAS APLICACIONES
═══════════════════════════════════════════════ */
#aplicaciones { padding:0 6% 90px; position:relative; z-index:1; }
.app-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.app-grid:has(.app-card:only-child) { grid-template-columns:minmax(320px,520px); justify-content:center; }
.app-card {
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; border-radius:16px;
  border:1px solid rgba(120,158,240,.18);
  background:linear-gradient(150deg, var(--surf-1), var(--surf-2));
  transition:transform .28s, border-color .28s, box-shadow .28s;
  color:inherit; text-decoration:none;
}
.app-card:hover { transform:translateY(-3px); border-color:rgba(6,200,240,.45); box-shadow:0 16px 36px rgba(2,5,20,.5); }
.app-logo {
  width:54px; height:54px; flex-shrink:0; border-radius:13px;
  background:rgba(29,92,255,.10); border:1px solid var(--bdr2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.app-logo img { width:100%; height:100%; object-fit:contain; padding:7px; }
.app-inicial { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:800; color:var(--cyan); }
.app-txt { flex:1; min-width:0; }
.app-name { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; }
.app-desc { font-size:.79rem; color:var(--txt2); line-height:1.55; margin-top:2px; }
.app-ir { color:var(--txt2); flex-shrink:0; transition:color .25s, transform .25s; }
.app-ir .ic { width:16px; height:16px; }
.app-card:hover .app-ir { color:var(--cyan); transform:translate(2px,-2px); }

/* imagen en las tarjetas de proyecto */
.proj-img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:11px; margin-bottom:12px; }

@media (max-width:640px) {
  .prod-grid, .app-grid { grid-template-columns:1fr; }
}


/* ═══════════════════════════════════════════════
   PÁGINAS LEGALES · datos aún sin rellenar
   Se ve claramente que falta algo, en vez de aparentar
   que la página está completa cuando no lo está.
═══════════════════════════════════════════════ */
.falta {
  display:inline-block;
  background:rgba(245,158,11,.13);
  border:1px dashed rgba(245,158,11,.55);
  color:#F6C566;
  border-radius:7px;
  padding:2px 9px;
  font-size:.86em;
}
.legal-note.aviso-falta {
  border-color:rgba(245,158,11,.45);
  background:rgba(245,158,11,.08);
}
.legal-note.aviso-falta strong { color:#F6C566; }