/* ═══════════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════════ */
:root {
  /* ── Color. Nombres semánticos: el tema claro solo redefine estos ── */
  --bg:    #05081A;
  --bg2:   #070B22;
  --bg3:   #090F2A;
  --blue:  #1D5CFF;
  --blue2: #5B8CFF;
  --cyan:  #06C8F0;
  --cyan2: #4FE3FF;
  --purple:#7B2FBE;
  --purple2:#A56BE8;
  --gold:  #F59E0B;
  --green: #10B981;
  --txt:   #F2F5FF;
  --txt2:  #A3B2D4;   /* subido de #8898C0: 7,1:1 sobre el fondo */
  --txt3:  #8592B4;
  --bdr:   rgba(120,150,235,.20);
  --bdr2:  rgba(6,200,240,.18);
  --card:  rgba(8,14,42,.75);
  --surf-1:#0B1233;
  --surf-2:#0E1640;
  --surf-3:#12194A;

  /* Acento único. El degradado se reserva para 2-3 palabras y los botones. */
  --acento:        var(--blue);
  --acento-suave:  rgba(29,92,255,.12);
  --acento-borde:  rgba(29,92,255,.30);
  --sombra:        0 18px 42px rgba(2,5,20,.45);
  --sombra-alta:   0 26px 60px rgba(2,5,20,.60);
  --brillo:        rgba(6,200,240,.13);

  /* ── Tipografía: escala fluida, razón 1.22 ── */
  --paso--2: clamp(.70rem, .68rem + .08vw, .76rem);
  --paso--1: clamp(.81rem, .78rem + .14vw, .88rem);
  --paso-0:  clamp(.94rem, .91rem + .18vw, 1.01rem);
  --paso-1:  clamp(1.08rem, 1.02rem + .28vw, 1.22rem);
  --paso-2:  clamp(1.28rem, 1.15rem + .55vw, 1.55rem);
  --paso-3:  clamp(1.6rem, 1.32rem + 1.1vw, 2.2rem);
  --paso-4:  clamp(2rem, 1.55rem + 2vw, 3rem);
  --paso-5:  clamp(2.3rem, 1.6rem + 3.1vw, 4.1rem);

  /* ── Ritmo vertical y ancho de lectura ──
     El contenido deja de estirarse hasta el borde en pantallas anchas:
     se centra dentro de --ancho sin necesidad de envolver nada en HTML. */
  --ancho:  1240px;
  --gut:    clamp(20px, 5vw, 56px);
  --pad-x:  max(var(--gut), calc((100% - var(--ancho)) / 2));
  --sec-y:  clamp(64px, 6.5vw, 100px);
  --medida: 68ch;

  --r:16px; --rs:10px;
  --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:52px; }
.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 var(--pad-x);
  height:88px;
  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;
}
/* La marca de agua gigante se retiro: repetia el logotipo a gran escala
   detras del texto y restaba legibilidad sin aportar marca. En su lugar,
   una malla de puntos casi imperceptible que solo da textura al fondo. */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(160,200,255,.5) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.045;
}
.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:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,380px);
  grid-template-areas:'texto arte' 'datos arte';
  align-content:center; align-items:center;
  column-gap:40px; row-gap:0;
  padding:clamp(104px,12vw,140px) var(--pad-x) var(--sec-y);
  position:relative; z-index:1;
}
.hero-txt   { grid-area:texto; }
.hero-stats { grid-area:datos; }

/* La asistente ocupa el hueco que antes quedaba vacio a la derecha del
   titular. Antes iba flotando fija sobre todo el contenido y tapaba texto. */
.hero-art {
  grid-area:arte; position:relative;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.hero-art::before {
  content:''; position:absolute; inset:6% 4%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(29,92,255,.30), rgba(6,200,240,.10) 62%, transparent 78%);
  filter:blur(6px);
}
.hero-art img {
  position:relative;
  width:100%; height:auto; max-height:66vh; object-fit:contain;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.55));
  animation:heroArtFlota 7s ease-in-out infinite;
}
@keyframes heroArtFlota {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img { animation:none; }
}
/* En pantallas estrechas no hay hueco: manda el texto */
@media (max-width:980px) {
  #hero {
    grid-template-columns:1fr;
    grid-template-areas:'texto' 'datos';
    padding:clamp(96px,20vw,120px) var(--pad-x) var(--sec-y);
  }
  .hero-art { display:none; }
}
.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;
}
/* Solo la rayita: antes esta regla alcanzaba tambien al <span> del texto,
   que al tener fondo cian y 1px de alto pintaba una linea larga de lado a lado. */
.hero-label .hl-dash { width:32px; height:1px; background:var(--cyan); }
.hero-h1 {
  /* antes llegaba a 5.5rem: en portatiles se comia la pantalla entera y
     obligaba a partir las frases en sitios raros */
  font-size:var(--paso-5);
  font-weight:800; line-height:1.12;
  letter-spacing:-1px; margin-bottom:22px;
  text-wrap:balance;
}
.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:var(--paso-1);
  color:var(--txt2); max-width:52ch;
  line-height:1.7; margin-bottom:32px; font-weight:300;
}
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

.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:760px;
}
.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;
  /* la primera cifra puede ser una palabra ("A medida"), no solo un numero */
  font-size:clamp(1.35rem,1.7vw,1.9rem); font-weight:800; line-height:1.18;
  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:.73rem; color:var(--txt2); margin-top:4px; letter-spacing:.3px; line-height:1.4; }

/* ═══════════════════════════════════════════════
   SECTION HEADER UTIL
═══════════════════════════════════════════════ */
.sec-header { margin-bottom:38px; }
.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:var(--paso-4);
  font-weight:800; letter-spacing:-.6px; line-height:1.12;
  margin-bottom:14px; text-wrap:balance;
}
.sec-p { font-size:var(--paso-0); color:var(--txt2); line-height:1.75; max-width:58ch; }

/* ═══════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════ */
#services { padding:var(--sec-y) var(--pad-x); 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 {
  /* mismo encuadre que .why-ico: los iconos deben leerse como una familia */
  width:92px; height:92px;
  display:flex; align-items:center; justify-content:center;
  margin:-6px 0 14px -8px;
  background:none; border:none;
}
.svc-icon-wrap img, .why-ico img {
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  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:76px; height:76px; }
}
.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);
}
/* Antes cada punto era «Término — descripción» en una sola línea corrida.
   En una tarjeta a dos columnas el guion caía a mitad de renglón y dejaba
   la lista descuadrada, con palabras partidas. Ahora son dos líneas fijas. */
.svc-items { list-style:none; margin-bottom:28px; display:flex; flex-direction:column; gap:14px; }
.svc-items li {
  position:relative; padding-left:16px;
  font-size:.83rem; line-height:1.5;
  hyphens:none; -webkit-hyphens:none;
  overflow-wrap:break-word; word-break:normal;
}
.svc-items li::before {
  content:''; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan);
}
.svc-items .si-t {
  display:block; color:var(--txt); font-weight:600;
  letter-spacing:-.1px; margin-bottom:2px;
}
.svc-items .si-d {
  display:block; color:var(--txt2); font-size:.8rem; line-height:1.6;
}
.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 var(--pad-x) var(--sec-y); position:relative; z-index:1; }
/* ═══════════════════════════════════════════════
   POR QUE ELEGIRNOS — tarjetas planas
   Antes giraban y escondian la explicacion en el dorso. En movil
   ese texto era practicamente invisible: si merece leerse, se lee.
═══════════════════════════════════════════════ */
.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.why-card {
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:26px 26px 24px;
  border-radius:20px;
  border:1px solid rgba(120,158,240,.22);
  box-shadow:0 18px 42px rgba(2,5,20,.45), inset 0 1px 0 rgba(150,200,255,.10);
  overflow:hidden;
  transition:border-color .3s, box-shadow .3s, transform .3s;
  /* Tres capas: halo de color desde la esquina del icono, rejilla tecnica
     muy tenue y degradado base. */
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(6,200,240,.12) 0%, transparent 52%),
    repeating-linear-gradient(0deg,
      rgba(120,158,240,.032) 0px, rgba(120,158,240,.032) 1px,
      transparent 1px,           transparent 34px),
    linear-gradient(155deg, var(--surf-1) 0%, var(--surf-2) 100%);
}
.why-card:hover {
  transform:translateY(-4px);
  border-color:rgba(6,200,240,.42);
  box-shadow:0 22px 52px rgba(2,5,20,.55),
             inset 0 1px 0 rgba(150,200,255,.16),
             0 0 24px rgba(6,200,240,.10);
}

/* filo de luz superior, como el canto de una tarjeta fisica */
.why-card::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;
}

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

.why-num, .why-ico, .why-title, .why-texto { position:relative; z-index:4; }

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

.why-ico {
  display:block; width:92px; height:92px;
  margin:-6px 0 10px -10px;
}
.why-ico img { width:100%; height:100%; object-fit:contain; }

.why-title {
  font-family:var(--font-head),'Space Grotesk',sans-serif;
  font-size:1.1rem; font-weight:700; line-height:1.3;
  color:var(--txt); letter-spacing:-.2px;
  margin-bottom:9px; padding-right:26px;
}
.why-texto {
  font-size:.845rem; color:var(--txt2); line-height:1.72;
  hyphens:none; -webkit-hyphens:none;
}

@media (max-width:920px) { .why-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) {
  .why-grid { grid-template-columns:1fr; gap:16px; }
  .why-card { padding:22px 22px 20px; }
  .why-ico { width:76px; height:76px; }
  .why-texto { font-size:.82rem; }
}

/* ═══════════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════════ */
#reviews {
  padding:var(--sec-y) var(--pad-x);
  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:var(--sec-y) var(--pad-x); 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:var(--sec-y) var(--pad-x); 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:26px var(--pad-x);
  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); }

/* ═══════════════════════════════════════════════
   ASISTENTE — burbuja de 64px, anclada, sin tapar nada
   Antes era un recorte de 158px que seguia el scroll y se
   superponia al texto de servicios. Ahora es un avatar.
═══════════════════════════════════════════════ */
#robot-wrap {
  position:fixed; right:24px; bottom:24px; top:auto; z-index:800;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  cursor:default;
}

/* Invitacion: sale una sola vez y se va sola */
.rbt-bubble {
  background:rgba(10,18,50,.94);
  border:1px solid rgba(6,200,240,.35);
  backdrop-filter:blur(14px);
  color:var(--txt); font-size:.74rem; font-weight:600;
  padding:9px 14px; border-radius:14px 14px 4px 14px;
  text-align:right; max-width:190px; line-height:1.45;
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.rbt-bubble.on { opacity:1; transform:none; }
.rbt-bubble small { display:block; color:var(--cyan); margin-top:2px; font-size:.66rem; font-weight:500; }

/* El avatar */
#rbt-float { position:relative; }
#rbt-frame {
  width:64px; height:64px;
  position:relative; overflow:hidden;
  border-radius:50%;
  border:2px solid rgba(6,200,240,.55);
  background:linear-gradient(160deg,#0b1637,#050a1f);
  box-shadow:0 6px 22px rgba(0,0,0,.5), 0 0 0 4px rgba(6,200,240,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#robot-wrap:hover #rbt-frame {
  transform:scale(1.06);
  border-color:var(--cyan);
  box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 0 6px rgba(6,200,240,.14);
}
#rbt-btn:focus-visible + #rbt-frame,
#robot-wrap:focus-within #rbt-frame { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(6,200,240,.35); }

/* El retrato es 420x596; se escala a 150px de ancho y se desplaza para
   que la cara quede centrada dentro del circulo de 64px. */
#rbt-canvas, #rbt-img {
  position:absolute;
  width:150px; height:auto;
  left:-41px; top:-32px;
  display:block; pointer-events:none; user-select:none;
}

/* Los overlays de boca, parpadeo, escaneo y halo estaban calculados sobre
   el retrato completo: dentro del circulo caerian fuera de sitio. El canvas
   ya dibuja pupilas, boca y parpadeo por su cuenta. */
#rbt-scan, #rbt-mouth-ov, #rbt-blink, #rbt-halo { display:none !important; }

/* Punto de "en linea" */
#rbt-float::after {
  content:''; position:absolute; right:2px; bottom:2px;
  width:13px; height:13px; border-radius:50%;
  background:#22d37a; border:2.5px solid var(--bg);
  z-index:6; pointer-events:none;
}

#rbt-btn {
  position:absolute; inset:0; z-index:7;
  background:none; border:none; padding:0; margin:0;
  cursor:pointer; border-radius:50%;
}

@media (max-width:600px) {
  #robot-wrap { right:14px; bottom:14px; }
  #rbt-frame { width:56px; height:56px; }
  #rbt-canvas, #rbt-img { width:131px; left:-36px; top:-28px; }
  .rbt-bubble { max-width:160px; font-size:.7rem; }
}

/* ═══════════════════════════════════════════════
   CHAT PANEL
═══════════════════════════════════════════════ */
#chat {
  position:fixed; right:24px; bottom:104px; 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
═══════════════════════════════════════════════ */
/* Aparicion al entrar en pantalla. Antes duraba .7s con 28px de recorrido:
   al bajar rapido daba la sensacion de que faltaba contenido. */
.fadein { opacity:0; transform:translateY(14px); transition:opacity .42s ease-out, transform .42s ease-out; }
.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); }
  #chat { right:12px; width:290px; }
}


/* ═══════════════════════════════════════════════
   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; }
.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; }
  body::before { display: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:760px; margin:0 auto; padding:140px var(--gut) 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) {
  /* Antes en movil el punto se cambiaba por una barra vertical: era un parche
     del maquetado viejo y ahora convivian los dos estilos en la misma web. */
  .svc-items li { padding-left:15px; }
}
@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;
  }
  .nav-logo { height:54px; }
  .hero-label { font-size:.6rem; letter-spacing:1.2px; flex-wrap:wrap; }
  .hero-label .hl-dash { width:18px; }
  #hero { padding-top:112px; }
  .legal-wrap { padding-top:120px; }
}
/* iconos de contacto (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); }

/* 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) {
  .hero-label { line-height:1.5; }
}

/* ── 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:var(--sec-y) var(--pad-x); 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 var(--pad-x) var(--sec-y); 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; }

/* ═══════════════════════════════════════════════
   BLOQUES NUEVOS · CONVERSIÓN
   Proceso, preguntas frecuentes, garantías y la
   barra de acción fija en móvil.
═══════════════════════════════════════════════ */

/* ── Garantías bajo los botones de portada ──
   Tres frases cortas que responden a las tres dudas que frenan a alguien
   antes de escribir: cuánto me comprometo, cuándo me contestan, cuánto cuesta. */
.hero-garantias {
  list-style:none; display:flex; flex-wrap:wrap;
  gap:8px 22px; margin:0 0 40px;
  font-size:var(--paso--1); color:var(--txt2);
}
.hero-garantias li { display:flex; align-items:center; gap:8px; }
.hero-garantias li::before {
  content:''; width:15px; height:15px; flex-shrink:0; border-radius:50%;
  background:var(--acento-suave);
  border:1px solid var(--acento-borde);
  box-shadow:inset 0 0 0 2.5px var(--bg);
}

/* Las secciones nuevas comparten el mismo ritmo y el mismo ancho de lectura
   que las que ya existían. Sin esto se pegaban al borde de la pantalla. */
#proceso, #faq { padding:var(--sec-y) var(--pad-x); position:relative; z-index:1; }
#faq { background:var(--bg2); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); }

/* ── Cómo trabajamos ── */
.pasos {
  list-style:none; counter-reset:paso;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.paso {
  position:relative; padding:26px 22px 24px;
  border-radius:var(--r);
  border:1px solid var(--bdr);
  background:linear-gradient(155deg,var(--surf-1),var(--surf-2));
  box-shadow:var(--sombra);
}
/* la línea que enlaza un paso con el siguiente */
.paso:not(:last-child)::after {
  content:''; position:absolute; top:42px; right:-20px; width:20px; height:1px;
  background:linear-gradient(90deg,var(--acento-borde),transparent);
}
.paso-n {
  display:inline-block; margin-bottom:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--paso--2); letter-spacing:1.5px;
  color:var(--cyan2);
  padding:4px 10px; border-radius:20px;
  background:var(--acento-suave); border:1px solid var(--acento-borde);
}
.paso-t {
  font-size:var(--paso-1); font-weight:700; line-height:1.3;
  color:var(--txt); margin-bottom:8px; letter-spacing:-.2px;
}
.paso-d { font-size:var(--paso--1); color:var(--txt2); line-height:1.7; }

.proceso-cta {
  margin-top:38px; padding:26px 30px;
  border-radius:var(--r); border:1px solid var(--bdr);
  background:var(--acento-suave);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.proceso-cta p {
  font-family:var(--font-head),sans-serif;
  font-size:var(--paso-2); font-weight:700; color:var(--txt); margin:0;
}

/* ── Preguntas frecuentes ──
   <details> nativo: funciona sin JavaScript y los lectores de pantalla
   ya saben anunciarlo como plegable. */
.faq-lista { max-width:80ch; }
.faq-item {
  border:1px solid var(--bdr); border-radius:var(--r);
  background:var(--surf-1);
  margin-bottom:12px; overflow:hidden;
  transition:border-color .25s, background .25s;
}
.faq-item[open] { border-color:var(--acento-borde); background:var(--surf-2); }
.faq-item summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 22px;
  font-family:var(--font-head),sans-serif;
  font-size:var(--paso-0); font-weight:600; color:var(--txt);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--cyan2); }
.faq-mas {
  position:relative; width:16px; height:16px; flex-shrink:0;
}
.faq-mas::before, .faq-mas::after {
  content:''; position:absolute; inset:0; margin:auto;
  background:var(--cyan2); border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.faq-mas::before { width:14px; height:2px; }
.faq-mas::after  { width:2px; height:14px; }
.faq-item[open] .faq-mas::after { transform:rotate(90deg); opacity:0; }
.faq-r { padding:0 22px 20px; }
.faq-r p {
  font-size:var(--paso--1); color:var(--txt2); line-height:1.78; max-width:70ch;
}

/* ── Qué pasa después de escribir ── */
.despues {
  list-style:none; counter-reset:d;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:18px; max-width:940px; margin:40px auto 0; text-align:left;
}
.despues li {
  counter-increment:d; position:relative;
  padding:18px 20px 18px 54px;
  border-radius:var(--rs); border:1px solid var(--bdr);
  background:var(--surf-1);
}
.despues li::before {
  content:counter(d); position:absolute; left:18px; top:17px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:600;
  color:var(--cyan2);
  background:var(--acento-suave); border:1px solid var(--acento-borde);
}
.despues strong { display:block; font-size:var(--paso-0); color:var(--txt); margin-bottom:3px; }
.despues span   { display:block; font-size:var(--paso--1); color:var(--txt2); line-height:1.6; }

.contact-nota { margin-top:14px; font-size:var(--paso--1); color:var(--txt3); }
.fg .opc { font-weight:400; color:var(--txt3); font-size:.86em; }

/* ── Barra de acción fija en móvil ──
   Solo aparece cuando el visitante ha pasado la portada: hasta entonces
   los botones del titular ya están a la vista y taparía contenido. */
#barra-movil {
  position:fixed; left:0; right:0; bottom:0; z-index:850;
  display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(5,8,26,.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--bdr);
  transform:translateY(110%); transition:transform .3s ease;
}
#barra-movil.on { transform:none; }
.bm-tel, .bm-cta {
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border-radius:26px; font-weight:600; font-size:.86rem;
  font-family:var(--font-head),sans-serif; cursor:pointer;
}
.bm-tel { flex:0 0 38%; border:1px solid var(--bdr); color:var(--txt2); background:transparent; }
.bm-cta { border:none; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; }

@media (max-width:720px) {
  #barra-movil { display:flex; }
  /* el avatar sube para no quedar debajo de la barra */
  #robot-wrap { bottom:78px; }
}

/* ── Foco visible en todo lo que se puede enfocar ──
   Sin esto, quien navega con teclado no sabe dónde está. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--cyan2);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Responsive de los bloques nuevos ── */
@media (max-width:980px) {
  .pasos { grid-template-columns:repeat(2,1fr); }
  .paso:not(:last-child)::after { display:none; }
  .despues { grid-template-columns:1fr; gap:12px; }
}
@media (max-width:600px) {
  .pasos { grid-template-columns:1fr; }
  .proceso-cta { flex-direction:column; align-items:flex-start; }
  .proceso-cta .btn { width:100%; justify-content:center; }
  .hero-garantias { flex-direction:column; gap:9px; margin-bottom:32px; }
}

/* ═══════════════════════════════════════════════
   TEMA CLARO · propuesta editorial
   Se activa con  <html data-tema="claro">.
   No es el tema oscuro invertido: el neón desaparece,
   las sombras se vuelven neutras y el acento es uno solo.
═══════════════════════════════════════════════ */
[data-tema="claro"] {
  --bg:    #FFFFFF;
  --bg2:   #F5F7FB;
  --bg3:   #EDF1F8;
  --blue:  #1745D8;
  --blue2: #1745D8;
  --cyan:  #0B7FA8;
  --cyan2: #0B6A8E;
  --purple:#6D28D9;
  --purple2:#6D28D9;
  --txt:   #0C1222;
  --txt2:  #4B5771;
  --txt3:  #6B7690;
  --bdr:   rgba(12,18,34,.11);
  --bdr2:  rgba(12,18,34,.09);
  --card:  #FFFFFF;
  --surf-1:#FFFFFF;
  --surf-2:#F7F9FD;
  --surf-3:#F0F4FA;
  --acento:       var(--blue);
  --acento-suave: rgba(23,69,216,.06);
  --acento-borde: rgba(23,69,216,.20);
  --sombra:      0 1px 2px rgba(12,18,34,.05), 0 10px 28px rgba(12,18,34,.06);
  --sombra-alta: 0 2px 4px rgba(12,18,34,.05), 0 22px 48px rgba(12,18,34,.10);
  --brillo:      transparent;
}

/* La constelación de puntos es un recurso de fondo oscuro: en claro
   ensucia. Fuera, y de paso la web carga sin ese bucle de dibujado. */
[data-tema="claro"] #net-canvas,
[data-tema="claro"] body::before { display:none; }

[data-tema="claro"] body { background:var(--bg); color:var(--txt); }

/* Tipografía: más peso en los titulares y algo más de aire entre líneas,
   que es lo que hace que un fondo claro se lea como editorial y no como folleto. */
[data-tema="claro"] .hero-h1 { letter-spacing:-1.8px; font-weight:800; }
[data-tema="claro"] .sec-h2  { letter-spacing:-1px; }
[data-tema="claro"] .hero-sub { color:var(--txt2); font-weight:400; }

/* Degradados de texto: los del tema oscuro no tienen contraste sobre blanco */
/* background-image, no background: la forma corta reinicia background-clip
   y el texto en degradado se convertiria en un rectangulo de color. */
[data-tema="claro"] .grd  { background-image:linear-gradient(100deg,#1745D8,#0B7FA8); }
[data-tema="claro"] .grd2 { background-image:linear-gradient(100deg,#6D28D9,#1745D8); }
[data-tema="claro"] .metric .n { background-image:linear-gradient(135deg,#1745D8,#0B7FA8); }

/* ── Navegación y pie ── */
[data-tema="claro"] #nav.scrolled {
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--bdr);
  box-shadow:0 1px 20px rgba(12,18,34,.05);
}
[data-tema="claro"] .nav-menu.open { background:rgba(255,255,255,.98); }
[data-tema="claro"] .nav-ham span { background:var(--txt); }
[data-tema="claro"] footer { background:var(--bg2); border-top:1px solid var(--bdr); }
[data-tema="claro"] .ft-adm { color:rgba(12,18,34,.10); }

/* ── Portada ── */
[data-tema="claro"] #hero { background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FD 100%); }
[data-tema="claro"] .hero-art::before {
  background:radial-gradient(closest-side, rgba(23,69,216,.10), transparent 74%);
}
[data-tema="claro"] .hero-art img { filter:drop-shadow(0 22px 44px rgba(12,18,34,.20)); }
[data-tema="claro"] .hero-stats { border-color:var(--bdr); }
[data-tema="claro"] .h-stat { border-right-color:var(--bdr); }
[data-tema="claro"] .hero-garantias li::before { box-shadow:inset 0 0 0 2.5px #fff; }

/* ── Botones: uno lleno y uno de contorno, sin degradado de tres colores ── */
[data-tema="claro"] .btn-a,
[data-tema="claro"] .nav-btn,
[data-tema="claro"] .contact-cta,
[data-tema="claro"] .mbtn-sub,
[data-tema="claro"] .bm-cta,
[data-tema="claro"] .proj-btn { background:var(--acento); color:#fff; }
[data-tema="claro"] .btn-a:hover { box-shadow:0 8px 24px rgba(23,69,216,.28); }
[data-tema="claro"] .btn-b { border-color:var(--bdr); color:var(--txt); }
[data-tema="claro"] .btn-b:hover { border-color:var(--acento); color:var(--acento); }

/* ── Tarjetas: blancas, borde fino, sombra neutra. Cero texturas ── */
[data-tema="claro"] .svc-card,
[data-tema="claro"] .why-card,
[data-tema="claro"] .paso,
[data-tema="claro"] .faq-item,
[data-tema="claro"] .despues li,
[data-tema="claro"] .proj-card,
[data-tema="claro"] .prod-card,
[data-tema="claro"] .app-card,
[data-tema="claro"] .contact-card {
  background:#fff;
  border:1px solid var(--bdr);
  box-shadow:var(--sombra);
}
[data-tema="claro"] .why-card::before,
[data-tema="claro"] .svc-card::before,
[data-tema="claro"] .svc-card::after,
[data-tema="claro"] .contact-card::before { display:none; }
[data-tema="claro"] .why-card::after { border-color:var(--acento-borde); }
[data-tema="claro"] .why-card:hover,
[data-tema="claro"] .svc-card:hover,
[data-tema="claro"] .proj-card:hover {
  border-color:var(--acento-borde);
  box-shadow:var(--sombra-alta);
}
[data-tema="claro"] .svc-card .corner { border-color:var(--acento-borde); }
[data-tema="claro"] .faq-item[open] { background:#fff; border-color:var(--acento-borde); }
[data-tema="claro"] .proceso-cta { background:var(--bg3); border-color:var(--bdr); }
[data-tema="claro"] .paso-n,
[data-tema="claro"] .despues li::before { color:var(--acento); }

/* Los iconos 3D vienen con luz pensada para fondo oscuro: sobre blanco la
   sombra dura canta, así que se suaviza. */
[data-tema="claro"] .svc-icon-wrap img,
[data-tema="claro"] .why-ico img { filter:drop-shadow(0 8px 14px rgba(12,18,34,.14)); }

[data-tema="claro"] .tag {
  background:var(--acento-suave);
  border-color:var(--acento-borde);
  color:var(--acento);
}
[data-tema="claro"] .sec-num { color:var(--txt3); }
[data-tema="claro"] .btn-consult { border-color:var(--bdr); color:var(--acento); }
[data-tema="claro"] .btn-consult:hover { background:var(--acento-suave); border-color:var(--acento-borde); }
[data-tema="claro"] .proj-cat { color:var(--txt3); }
[data-tema="claro"] #reviews { background:var(--bg2); border-color:var(--bdr); }

/* ── El mapa de Andalucía: su paleta estaba calculada sobre fondo oscuro ── */
[data-tema="claro"] .map-box { background:var(--bg3); border-radius:var(--r); padding:14px; }
[data-tema="claro"] #noc-map .noc-grid line { stroke:rgba(12,18,34,.05); }
[data-tema="claro"] #noc-map .continents path.continent { fill:rgba(23,69,216,.06); stroke:rgba(23,69,216,.35); }
[data-tema="claro"] #noc-map .city-label { fill:#2B3652; text-shadow:0 0 3px rgba(255,255,255,.95); }
[data-tema="claro"] #noc-map .gl-label { fill:#5B6883; }
[data-tema="claro"] #noc-map .ring { stroke:var(--acento); }
[data-tema="claro"] #noc-map .city-dot,
[data-tema="claro"] #noc-map .city-halo { fill:var(--acento); stroke:var(--acento); }
[data-tema="claro"] #noc-map .hub-name,
[data-tema="claro"] #noc-map .noc-title { fill:#0C1222; }
[data-tema="claro"] #noc-map .hub-sub,
[data-tema="claro"] #noc-map .noc-subtitle,
[data-tema="claro"] #noc-map .noc-legend text { fill:#5B6883; }
[data-tema="claro"] .noc-tooltip,
[data-tema="claro"] .noc-info-panel {
  background:rgba(255,255,255,.97); border:1px solid var(--bdr);
  color:var(--txt); box-shadow:var(--sombra);
}
[data-tema="claro"] .noc-tooltip .ntt-row span,
[data-tema="claro"] .noc-info-panel .nip-row span,
[data-tema="claro"] .noc-info-panel .nip-sub { color:var(--txt3); }

/* ── Asistente, chat y formulario ── */
[data-tema="claro"] #rbt-frame {
  background:#EDF1F8; border-color:var(--acento-borde);
  box-shadow:0 6px 20px rgba(12,18,34,.16), 0 0 0 4px rgba(23,69,216,.06);
}
[data-tema="claro"] #rbt-float::after { border-color:#fff; }
[data-tema="claro"] .rbt-bubble {
  background:#fff; border:1px solid var(--bdr); color:var(--txt);
  box-shadow:var(--sombra);
}
[data-tema="claro"] .rbt-bubble small { color:var(--acento); }
[data-tema="claro"] #chat,
[data-tema="claro"] .mbox {
  background:#fff; border:1px solid var(--bdr); box-shadow:var(--sombra-alta);
}
[data-tema="claro"] .cm.b { background:var(--bg3); color:var(--txt); }
[data-tema="claro"] .chat-inp,
[data-tema="claro"] .fg input, [data-tema="claro"] .fg select, [data-tema="claro"] .fg textarea {
  background:#fff; border:1px solid var(--bdr); color:var(--txt);
}
[data-tema="claro"] .fg input::placeholder,
[data-tema="claro"] .fg textarea::placeholder,
[data-tema="claro"] .chat-inp::placeholder { color:#94A0B8; }
[data-tema="claro"] .chat-nota { color:var(--txt3); }
[data-tema="claro"] #barra-movil {
  background:rgba(255,255,255,.96); border-top:1px solid var(--bdr);
  box-shadow:0 -4px 20px rgba(12,18,34,.07);
}
[data-tema="claro"] .bm-tel { color:var(--txt2); border-color:var(--bdr); }
[data-tema="claro"] .mbtn-can { border-color:var(--bdr); color:var(--txt2); }


/* ═══════════════════════════════════════════════
   VARIANTE METAL · <html data-tema="metal">
   El plateado NO toca el texto: los titulares y las cifras
   conservan su color de siempre. El metal vive donde vive en
   el mundo real — en los cantos, los bordes, las superficies
   y los recuadros. Forma, brillo y textura; nunca lectura.
═══════════════════════════════════════════════ */
[data-tema="metal"] {
  /* Fondo un punto más neutro que el azul original: sobre azul saturado
     el metal se tiñe y deja de parecer metal. */
  --bg:    #050813;
  --bg2:   #070B18;
  --bg3:   #0A0F1E;
  --surf-1:#0C1224;
  --surf-2:#111830;
  --surf-3:#161E38;
  --bdr:   rgba(206,218,240,.14);
  --bdr2:  rgba(206,218,240,.10);

  /* La gama metálica: solo para superficies y cantos */
  --met-alto:  rgba(236,242,252,.62);   /* canto iluminado */
  --met-medio: rgba(190,203,228,.22);
  --met-bajo:  rgba(120,134,166,.10);   /* canto en sombra */
  --met-luz:   rgba(255,255,255,.075);  /* reflejo especular */
  --met-veta:  rgba(255,255,255,.017);  /* veta del cepillado */

  --sombra:      0 16px 38px rgba(0,0,0,.52);
  --sombra-alta: 0 26px 60px rgba(0,0,0,.66);
}

/* ── El canto metálico: brillante arriba, apagado abajo ──
   Dos capas de fondo: la superficie va en padding-box y el degradado
   del borde en border-box. Así el borde es un degradado real, no un
   color plano, que es lo que separa el metal del gris. */
[data-tema="metal"] .svc-card,
[data-tema="metal"] .why-card,
[data-tema="metal"] .paso,
[data-tema="metal"] .faq-item,
[data-tema="metal"] .despues li,
[data-tema="metal"] .proj-card,
[data-tema="metal"] .prod-card,
[data-tema="metal"] .app-card,
[data-tema="metal"] .contact-card,
[data-tema="metal"] .proceso-cta,
[data-tema="metal"] .hero-stats {
  border:1px solid transparent;
  background-image:
    /* 1 · reflejo especular: la banda de luz que cruza la pieza */
    linear-gradient(118deg,
      transparent 16%,
      rgba(236,242,252,.035) 34%,
      var(--met-luz) 43%,
      rgba(236,242,252,.028) 51%,
      transparent 68%),
    /* 2 · veta del cepillado: líneas finísimas, casi imperceptibles */
    repeating-linear-gradient(101deg,
      var(--met-veta) 0px, var(--met-veta) 1px,
      transparent 1px, transparent 4px),
    /* 3 · la chapa */
    linear-gradient(158deg, var(--surf-1) 0%, var(--surf-2) 100%);
  background-origin:padding-box;
  background-clip:padding-box;
  box-shadow:
    inset 0 1px 0 rgba(240,246,255,.20),      /* canto superior encendido */
    inset 0 -1px 0 rgba(0,0,0,.45),           /* canto inferior en sombra */
    var(--sombra);
  position:relative;
  transition:box-shadow .3s ease, transform .3s ease;
}

/* El degradado del borde va en una capa aparte para poder animarlo
   sin tocar la superficie. */
[data-tema="metal"] .svc-card::before,
[data-tema="metal"] .why-card::before,
[data-tema="metal"] .paso::before,
[data-tema="metal"] .faq-item::before,
[data-tema="metal"] .despues li::before,
[data-tema="metal"] .proj-card::before,
[data-tema="metal"] .contact-card::before,
[data-tema="metal"] .proceso-cta::before,
[data-tema="metal"] .hero-stats::before {
  content:''; position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(158deg,
    var(--met-alto) 0%,
    var(--met-medio) 22%,
    var(--met-bajo) 52%,
    var(--met-medio) 78%,
    rgba(236,242,252,.40) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:2;
  transition:opacity .3s ease;
  opacity:.85;
}
[data-tema="metal"] .svc-card:hover::before,
[data-tema="metal"] .why-card:hover::before,
[data-tema="metal"] .proj-card:hover::before,
[data-tema="metal"] .paso:hover::before { opacity:1; }

[data-tema="metal"] .svc-card:hover,
[data-tema="metal"] .why-card:hover,
[data-tema="metal"] .proj-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(240,246,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.5),
    var(--sombra-alta);
}

/* El contador de la lista «qué pasa después» usaba ::before, que ahora
   es el canto. Se pasa a ::after para no pisarlo. */
[data-tema="metal"] .despues li::before { content:''; padding:1px; }
[data-tema="metal"] .despues li::after {
  content:counter(d); position:absolute; left:18px; top:17px; z-index:3;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:600;
  color:var(--cyan2);
  background:rgba(206,218,240,.07);
  box-shadow:inset 0 1px 0 rgba(240,246,255,.25), inset 0 -1px 0 rgba(0,0,0,.4);
}
/* La tarjeta «por qué» tenía su escuadra de esquina en ::after: se mantiene,
   pero en tono metálico. */
[data-tema="metal"] .why-card::after { border-color:rgba(226,234,248,.40); z-index:3; }
[data-tema="metal"] .why-card:hover::after { border-color:rgba(246,250,255,.72); }
[data-tema="metal"] .svc-card .corner { border-color:rgba(226,234,248,.42); z-index:3; }
[data-tema="metal"] .svc-card::after { display:none; }

/* Contenido siempre por encima de las capas metálicas.
   OJO: .why-num ya está posicionado en absoluto; si aquí se le pusiera
   position:relative saltaría de la esquina al centro de la tarjeta. */
[data-tema="metal"] .why-num { z-index:3; }
[data-tema="metal"] .why-ico,
[data-tema="metal"] .why-title, [data-tema="metal"] .why-texto,
[data-tema="metal"] .paso-n, [data-tema="metal"] .paso-t, [data-tema="metal"] .paso-d,
[data-tema="metal"] .faq-item summary, [data-tema="metal"] .faq-r,
[data-tema="metal"] .despues strong, [data-tema="metal"] .despues span,
[data-tema="metal"] .proceso-cta p, [data-tema="metal"] .proceso-cta .btn,
[data-tema="metal"] .h-stat { position:relative; z-index:3; }

/* ── Recuadros de texto: fresados en la chapa, no pegados encima ── */
[data-tema="metal"] .fg input,
[data-tema="metal"] .fg select,
[data-tema="metal"] .fg textarea,
[data-tema="metal"] .chat-inp {
  background-image:linear-gradient(180deg, rgba(0,0,0,.30), rgba(255,255,255,.014) 70%);
  background-color:#0A0F1E;
  border:1px solid rgba(206,218,240,.13);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.45),          /* hundido */
    inset 0 -1px 0 rgba(240,246,255,.10),     /* canto inferior iluminado */
    0 1px 0 rgba(240,246,255,.05);            /* filo exterior */
}
[data-tema="metal"] .fg input:focus,
[data-tema="metal"] .fg select:focus,
[data-tema="metal"] .fg textarea:focus,
[data-tema="metal"] .chat-inp:focus {
  border-color:rgba(226,234,248,.35);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45), 0 0 0 3px rgba(206,218,240,.10);
}

/* ── Insignias y etiquetas: pequeñas piezas metálicas ── */
[data-tema="metal"] .tag,
[data-tema="metal"] .paso-n {
  background-image:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0));
  border-color:rgba(206,218,240,.20);
  box-shadow:inset 0 1px 0 rgba(240,246,255,.20);
}
[data-tema="metal"] .hero-garantias li::before {
  background:rgba(206,218,240,.10);
  border-color:rgba(206,218,240,.32);
  box-shadow:inset 0 0 0 2.5px var(--bg), inset 0 1px 0 rgba(240,246,255,.3);
}

/* ── Botones: el principal conserva su color; los secundarios pasan a metal ── */
[data-tema="metal"] .btn-a,
[data-tema="metal"] .nav-btn,
[data-tema="metal"] .contact-cta,
[data-tema="metal"] .mbtn-sub,
[data-tema="metal"] .bm-cta {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 8px 24px rgba(29,92,255,.32);
}
[data-tema="metal"] .btn-b,
[data-tema="metal"] .btn-consult,
[data-tema="metal"] .proj-btn,
[data-tema="metal"] .bm-tel,
[data-tema="metal"] .mbtn-can {
  border-color:rgba(206,218,240,.22);
  background-image:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(240,246,255,.16);
}
[data-tema="metal"] .btn-b:hover,
[data-tema="metal"] .btn-consult:hover,
[data-tema="metal"] .proj-btn:hover { border-color:rgba(226,234,248,.48); }

/* ── Barras y separadores: filo de chapa ── */
[data-tema="metal"] #nav.scrolled {
  background:rgba(5,8,19,.94);
  border-bottom:1px solid transparent;
  box-shadow:0 1px 0 rgba(206,218,240,.14), 0 10px 30px rgba(0,0,0,.5);
}
[data-tema="metal"] #barra-movil {
  background:rgba(5,8,19,.95);
  border-top:1px solid transparent;
  box-shadow:0 -1px 0 rgba(206,218,240,.16);
}
[data-tema="metal"] footer {
  background:#03050D;
  border-top:1px solid transparent;
  box-shadow:0 -1px 0 rgba(206,218,240,.12);
}
[data-tema="metal"] #faq, [data-tema="metal"] #reviews {
  border-top:1px solid rgba(206,218,240,.10);
  border-bottom:1px solid rgba(206,218,240,.10);
}
[data-tema="metal"] #chat, [data-tema="metal"] .mbox {
  border-color:rgba(206,218,240,.16);
  box-shadow:inset 0 1px 0 rgba(240,246,255,.14), var(--sombra-alta);
}
[data-tema="metal"] #rbt-frame {
  border-color:rgba(226,234,248,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 22px rgba(0,0,0,.6), 0 0 0 4px rgba(206,218,240,.06);
}