/* ============================================================
   MOOVI SOLUTIONS — dirección visual: sala de control de movilidad
   Fondo perlado. Las superficies no son grises planos: son vidrio
   esmerilado sobre un papel nacarado, y el color entra por los acentos,
   los bordes en degradé y los halos, no por el relleno. Los neones se
   entonan un punto más profundos para que se lean sobre claro.
   ============================================================ */
:root{
  color-scheme: light;

  /* Fondo y superficies: papel nacarado, cada escalón un poco más blanco */
  --paper:      #F2F0EB;
  --paper-2:    #FAF9F6;
  --mist:       #E9E6E0;
  --line:       rgba(24,32,64,.14);
  --line-soft:  rgba(24,32,64,.07);

  /* Neutros: tinta navy sesgada hacia el acento */
  --text:       #0E1530;
  --text-2:     #3B4562;
  --text-3:     #5D6782;

  /* Señal: sobre perla el turquesa baja un tono para leerse */
  --signal:     #0E9F8E;
  --signal-dim: #0B8274;
  --signal-lit: #10B3A0;
  --pulse:      #7C5CE6;
  --azure:      #1B6FE0;
  --amber:      #C27A10;
  /* Paleta tecnológica: los mismos neones, entonados para fondo claro */
  --cyan:       #0893B5;
  --magenta:    #D43F8D;
  --lime:       #5E9B0B;
  --grad-tech:  linear-gradient(90deg, #34CFBE, #22D3EE, #0D8BFF, #A78BFA, #F472B6);

  /* Neones plenos: solo para botones, halos y luces, nunca para texto */
  --neon-signal:  #34CFBE;
  --neon-cyan:    #22D3EE;
  --neon-azure:   #0D8BFF;
  --neon-pulse:   #A78BFA;
  --neon-magenta: #F472B6;

  /* Alias semánticos: los componentes siguen leyendo estos nombres */
  --ink:        var(--paper);
  --ink-deep:   var(--paper-2);
  --surface:    var(--mist);
  --chalk:      var(--text);
  --haze:       var(--text-2);
  --haze-dim:   var(--text-3);

  /* Tarjetas: vidrio esmerilado, un escalón por encima del fondo */
  --card:        #FFFFFF;
  --card-2:      #F6F4F0;
  --card-line:   rgba(24,32,64,.10);
  --card-text:   #0E1530;
  --card-text-2: #3B4562;
  --card-text-3: #5D6782;
  --card-violet: #7C5CE6;
  --card-accent: #0E9F8E;

  /* Panel de código: isla oscura deliberada sobre el papel */
  --code-bg:    #0B1020;
  --code-bar:   #151D36;
  --code-line:  #242E4E;
  --code-text:  #E7EBF7;
  --code-dim:   #7F89AB;
  --code-num:   #333F66;

  /* Tipografía */
  --display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Helvetica, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;

  /* Escala */
  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(.98rem, .95rem + .16vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.7rem, 1.9rem + 3.6vw, 5.4rem);

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Retícula de coordenadas de fondo */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(52,207,190,.055) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(52,207,190,.04)  0 1px, transparent 1px 96px);
  -webkit-mask-image: radial-gradient(ellipse 120% 78% at 50% 0%, #000 0%, rgba(0,0,0,.35) 55%, transparent 92%);
          mask-image: radial-gradient(ellipse 120% 78% at 50% 0%, #000 0%, rgba(0,0,0,.35) 55%, transparent 92%);
}

img{ max-width: 100%; display: block; }

::selection{ background: var(--signal); color: var(--ink-deep); }

a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Primitivos ---------- */
.wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.eyebrow{
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--pulse), var(--cyan), var(--signal));
  flex: none;
}

h1, h2, h3, .display{
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-1); font-variation-settings: 'wdth' 106; letter-spacing: -.01em; line-height: 1.16; }

p{ margin: 0; }

.lede{
  color: var(--haze);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.55;
  max-width: 62ch;
}

.muted{ color: var(--haze); max-width: 66ch; }

.rule{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,207,190,.32) 18%, rgba(13,139,255,.28) 42%,
              rgba(167,139,250,.28) 66%, rgba(244,114,182,.22) 84%, transparent);
  border: 0;
  margin: 0;
}

/* ---------- Cabecera ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5,8,15,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.topbar.stuck{
  border-bottom-color: var(--line);
  background: rgba(5,8,15,.92);
}
.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 60px;
}

.brand{ display: flex; align-items: center; gap: .7rem; }
.brand-logo{ height: 22px; width: auto; display: block; flex: none; }

.nav{ display: flex; align-items: center; gap: 1.85rem; }
.nav a{
  font-family: var(--mono);
  white-space: nowrap;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--haze);
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--ease);
}
.nav a::after{
  content:"";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--signal);
  transition: width .3s var(--ease);
}
.nav a:hover{ color: var(--chalk); }
.nav a:hover::after{ width: 100%; }

/* Botones: redondeados y con halo propio siempre encendido. Al pasar el
   mouse crecen, el halo se intensifica y un brillo los cruza; al
   apretarlos se hunden. La flecha avanza hacia donde lleva el botón. */
.btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .82rem 1.5rem;
  border: 1px solid var(--signal);
  border-radius: 12px;
  color: var(--ink-deep);
  /* Degradé más ancho que el botón: el hover lo corre hacia el azul */
  background: linear-gradient(110deg, var(--signal) 0%, var(--cyan) 50%, var(--azure) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0 0 26px -4px rgba(52,207,190,.38);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease),
              background .5s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
/* Brillo que cruza el botón de lado a lado */
.btn::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%) skewX(-12deg);
  opacity: 0;
}
.btn:hover::before, .btn:focus-visible::before{ animation: shimmer-sweep .9s ease-out; }
.btn:not(.btn-ghost)::after{
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transition: transform .3s var(--ease);
}
.btn:hover{
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(34,211,238,.45), 0 10px 50px -18px rgba(167,139,250,.7);
  background-position: 100% 0;
  border-color: var(--cyan);
}
.btn:hover::after{ transform: translateX(4px); }
.btn:active{ transform: scale(.95); transition-duration: .1s; }
@keyframes shimmer-sweep{
  0%{   transform: translateX(-100%) skewX(-12deg); opacity: 0; }
  15%{  opacity: 1; }
  85%{  opacity: 1; }
  100%{ transform: translateX(250%) skewX(-12deg); opacity: 0; }
}
.nav .btn::after{ content: none; }
/* .nav a le gana a .btn por especificidad: el boton perdia su color propio */
.nav .btn, .nav .btn:hover{ color: var(--ink-deep); }
.btn:disabled{
  opacity: .55;
  cursor: progress;
  transform: none;
  box-shadow: none;
  background: var(--signal);
}
.btn:disabled::before{ animation: none; }
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--chalk);
  border-color: rgba(255,255,255,.2);
  box-shadow: none;
}
.btn-ghost::before{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.btn-ghost:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 0 28px -6px rgba(255,255,255,.25);
  color: #FFFFFF;
}
/* ---------- Solapa desplegable del menú ---------- */
.has-menu{ position: relative; display: flex; align-items: center; }
.chev{
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: .5rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.has-menu:hover .chev, .has-menu:focus-within .chev{ transform: translateY(0) rotate(225deg); }

.submenu{
  position: absolute;
  top: 100%; left: 50%;
  margin-top: 14px;
  transform: translate(-50%, 8px);
  min-width: 244px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 26px 54px -26px rgba(0,0,0,.8);
  padding: .4rem;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* Puente invisible: cruzar el hueco hacia el panel no cancela el hover */
.submenu::before{ content:""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-menu:hover .submenu,
.has-menu:focus-within .submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav .submenu-card{
  display: grid;
  gap: .3rem;
  padding: .85rem .9rem;
  font-family: var(--body);
  text-transform: none;
  letter-spacing: normal;
  color: var(--chalk);
  transition: background .25s var(--ease);
}
.nav .submenu-card::after{ content: none; }
.nav .submenu-card:hover{ background: var(--mist); color: var(--chalk); }
.submenu-logo{ height: 26px; width: auto; display: block; margin-bottom: .3rem; }
.submenu-name{
  font-family: var(--display);
  font-variation-settings: "wdth" 106;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--chalk);
}
.submenu-desc{
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--haze-dim);
}

.nav-toggle{ display: none; }

/* ---------- Héroe ---------- */
.hero{
  position: relative;
  padding-block: clamp(4.5rem, 10vh, 8rem) clamp(3rem, 6vh, 5rem);
  overflow: hidden;
}
#net{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .85;
}
.hero .wrap{ z-index: 2; }
.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.hero h1{
  font-size: var(--step-4);
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  margin-block: 1.5rem 1.6rem;
  letter-spacing: -.03em;
}
/* Degradé tecnológico que se desplaza lento sobre las letras */
.hero h1 em{
  font-style: normal;
  color: var(--signal);
  font-variation-settings: 'wdth' 90;
  font-weight: 300;
  background: linear-gradient(90deg, var(--signal), var(--cyan), var(--azure), var(--pulse), var(--magenta), var(--signal));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 9s ease-in-out infinite;
}
@keyframes gradient-shift{
  0%, 100%{ background-position: 0% 50%; }
  50%{      background-position: 100% 50%; }
}
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.4rem;
}
.hero-side{
  border-left: 1px solid var(--line);
  padding-left: clamp(1.2rem, 2vw, 2rem);
  display: grid;
  gap: 1.6rem;
  padding-bottom: .4rem;
}
.hero-side dl{ margin: 0; display: grid; gap: .3rem; }
.hero-side dt{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--haze-dim);
}
.hero-side dd{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--chalk);
}

/* Ticker de tecnologías */
.ticker{
  border-block: 1px solid var(--line);
  overflow: hidden;
  margin-top: clamp(3rem, 7vh, 5.5rem);
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.03);
}
.ticker-track{
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}
.ticker-track span{
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--haze-dim);
  padding: .95rem 0;
  margin-right: 3rem;
  white-space: nowrap;
}
.ticker-track span::before{
  content:"\25C8";
  color: var(--signal-dim);
  margin-right: 3rem;
}
@keyframes slide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.section.section-tight{ padding-block: clamp(3rem, 7vh, 5rem); }
.section{
  padding-block: clamp(4.5rem, 11vh, 8.5rem);
  position: relative;
}
.section-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head h2{ margin-top: 1.1rem; }

/* ---------- Tarjetas: vidrio con acento propio ----------
   Cada tarjeta tiene un color de acento (--acc) y todo lo demás se
   deriva de él con color-mix: el borde, el tinte al pasar el mouse, la
   sombra, el halo del ícono y la línea de luz inferior. Cambiar el
   acento cambia la tarjeta entera. En las rejillas los acentos rotan
   entre turquesa, violeta y azul; en el portafolio es el color de marca. */
.pillar, .case, .rel-card{
  --acc:        var(--signal);
  --acc-2:      var(--pulse);
  --c-fg:       var(--card-text);
  --c-fg-2:     var(--card-text-2);
  --c-fg-3:     var(--card-text-3);
  --c-line:     color-mix(in srgb, var(--acc) 16%, rgba(255,255,255,.08));
  --c-accent:   var(--acc);
  --c-violet:   var(--acc-2);
  --c-band:     rgba(255,255,255,.035);
  --c-fill:     rgba(255,255,255,.06);
  --c-on:       color-mix(in srgb, var(--acc) 18%, transparent);
  --c-out:      color-mix(in srgb, var(--acc-2) 20%, transparent);
}
.pillar:nth-child(6n+1), .case:nth-child(6n+1), .rel-card:nth-child(6n+1){ --acc: var(--signal);  --acc-2: var(--cyan); }
.pillar:nth-child(6n+2), .case:nth-child(6n+2), .rel-card:nth-child(6n+2){ --acc: var(--pulse);   --acc-2: var(--magenta); }
.pillar:nth-child(6n+3), .case:nth-child(6n+3), .rel-card:nth-child(6n+3){ --acc: var(--azure);   --acc-2: var(--cyan); }
.pillar:nth-child(6n+4), .case:nth-child(6n+4), .rel-card:nth-child(6n+4){ --acc: var(--magenta); --acc-2: var(--pulse); }
.pillar:nth-child(6n+5), .case:nth-child(6n+5), .rel-card:nth-child(6n+5){ --acc: var(--cyan);    --acc-2: var(--azure); }
.pillar:nth-child(6n),   .case:nth-child(6n),   .rel-card:nth-child(6n){   --acc: var(--lime);    --acc-2: var(--signal); }

.pillar, .case, .rel-card, .folio-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  color: var(--c-fg);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Al pasar el mouse la tarjeta se levanta: se tiñe de su acento, el
   borde se enciende y proyecta una sombra de su propio color. */
.pillar:hover, .case:hover, .rel-card:hover, .folio-card:hover,
.pillar:focus-within, .case:focus-within, .rel-card:focus-within, .folio-card:focus-within{
  --c-fg-2: #C9D3E6;
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border-color: color-mix(in srgb, var(--acc) 50%, transparent);
  transform: scale(1.02);
  box-shadow: 0 20px 60px -10px color-mix(in srgb, var(--acc) 19%, transparent);
}
.pillar h3, .case h3, .rel-card h3, .folio-card h3{ transition: color .3s var(--ease); }
.pillar:hover h3, .case:hover h3, .rel-card:hover h3, .folio-card:hover h3{ color: var(--acc); }

/* Línea de luz que se abre desde el centro en el borde inferior */
.pillar::after, .case::after, .rel-card::after, .folio-card::after{
  content:"";
  position: absolute;
  left: 2rem; right: 2rem; bottom: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acc) 30%, var(--acc-2, var(--cyan)) 70%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .5s ease-out;
}
.pillar:hover::after, .case:hover::after, .rel-card:hover::after, .folio-card:hover::after{
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--acc) 25%, transparent);
}
/* Las ilustraciones acompañan el cambio en vez de saltar */
.pillar .illus rect, .pillar .illus path, .pillar .illus circle,
.pillar .illus line, .pillar .illus text, .case-glyph path, .case-glyph circle, .case-glyph rect{
  transition: fill .45s var(--ease), stroke .45s var(--ease);
}

/* Pilares de servicio */
.pillars{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.pillar{
  padding: clamp(1.8rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.pillar-idx{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-fg-3);
}
.pillar h3{ font-size: var(--step-2); font-variation-settings: 'wdth' 110; font-weight: 700; }
.pillar p{ color: var(--c-fg-2); }
.deliverables{
  list-style: none;
  margin: .4rem 0 0;
  padding: 1.35rem 0 0;
  display: grid;
  gap: .55rem;
  border-top: 1px solid var(--c-line);
}
.deliverables li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: .7rem;
  align-items: baseline;
  font-size: var(--step--1);
  font-family: var(--mono);
  color: var(--c-fg-2);
  line-height: 1.6;
}
.deliverables li::before{
  content:"\2192";
  color: var(--c-accent);
}

/* Casos de uso */
.cases{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.case{
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Ícono en pastilla que flota; cada tarjeta desfasa su flotación */
.case-glyph{
  position: relative;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  margin-bottom: .4rem;
  animation: icon-float 3s ease-in-out calc(var(--i, 0) * -400ms) infinite;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
/* Halo detrás del ícono: crece y se enciende con el hover */
.case-glyph::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 12px;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 25%, transparent) 0%, transparent 70%);
  filter: blur(6px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.case:hover .case-glyph{
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  border-color: color-mix(in srgb, var(--acc) 50%, transparent);
}
.case:hover .case-glyph::before{ opacity: 1; transform: scale(2.2); }
.case-glyph svg{ width: 30px; height: 30px; }
.case h3{ font-size: var(--step-1); }
.case p{ color: var(--c-fg-2); font-size: var(--step--1); line-height: 1.75; flex: 1; }
.tags{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}
.tag{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-fg-3);
  border: 1px solid var(--c-line);
  padding: .3rem .55rem;
}

/* Soluciones relacionadas: índice compacto de variantes a medida */
.rel-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.rel-card{
  padding: 1.15rem 1.3rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 78px;
}
.rel-card::before{
  content:"";
  width: 9px; height: 9px;
  flex: none;
  border-radius: 3px;
  background: var(--acc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 14%, transparent);
  animation: icon-float 3s ease-in-out calc(var(--i, 0) * -400ms) infinite;
  transition: box-shadow .5s var(--ease);
}
.rel-card:hover::before{
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 22%, transparent),
              0 0 16px color-mix(in srgb, var(--acc) 60%, transparent);
}
.rel-card h3{
  font-size: .95rem;
  font-variation-settings: 'wdth' 102;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
}

/* Proceso — es una secuencia real, por eso va numerado */
.steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
}
.step{
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: grid;
  gap: .7rem;
  align-content: start;
  position: relative;
}
.step::before{
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--signal);
}
.step::after{
  content:"";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 1px;
  background: var(--signal);
}
.step h3{ font-size: 1.12rem; font-variation-settings: 'wdth' 104; }
.step p{ color: var(--haze); font-size: var(--step--1); line-height: 1.75; }

/* Stack */
.stack-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stack-col h3{
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--haze-dim);
  font-variation-settings: normal;
  line-height: 1.4;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.stack-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.stack-col li{ font-size: var(--step--1); color: var(--haze); }
.stack-col li strong{ color: var(--chalk); font-weight: 500; }

/* Contacto */
.contact{
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(167,139,250,.13), transparent 58%),
    radial-gradient(100% 120% at 92% 100%, rgba(34,211,238,.11), transparent 60%),
    radial-gradient(60% 70% at 100% 0%, rgba(244,114,182,.08), transparent 65%),
    var(--paper-2);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.contact-copy{
  padding: clamp(1.9rem, 3.6vw, 3.4rem);
  display: grid;
  align-content: start;
  gap: 1.3rem;
  border-right: 1px solid var(--line);
}
.contact-copy h2{ font-size: var(--step-2); }
.contact-list{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
.contact-list a, .contact-list span{
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--haze);
  display: flex;
  gap: .8rem;
  align-items: center;
  transition: color .25s var(--ease);
}
.contact-list a:hover{ color: var(--signal); }
.contact-list b{
  color: var(--haze-dim);
  font-weight: 400;
  min-width: 86px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .68rem;
}

form{
  padding: clamp(1.9rem, 3.6vw, 3.4rem);
  display: grid;
  gap: 1.15rem;
  align-content: start;
}
.field{ display: grid; gap: .45rem; }
.field label{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--haze-dim);
}
.field input, .field select, .field textarea{
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--chalk);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize: vertical; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder{ color: var(--haze-dim); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--signal);
  background: var(--paper-2);
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
form .btn{ justify-content: center; }
.form-note{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--haze-dim);
  line-height: 1.6;
}
.sent{
  border: 1px solid var(--signal-dim);
  background: rgba(52,207,190,.10);
  padding: .9rem 1rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--signal);
  line-height: 1.65;
}
.sent[data-state="error"]{
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(180,114,12,.07);
}
[hidden]{ display: none !important; }

/* Pie */
.footer{
  border-top: 1px solid var(--line);
  padding-block: 2.6rem 3.2rem;
  margin-top: clamp(3rem, 8vh, 6rem);
}
.footer-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.footer-links{ display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer small, .footer a{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--haze-dim);
  text-transform: uppercase;
}
.footer a:hover{ color: var(--signal); }

/* ---------- Ilustraciones de línea ---------- */
.illus{ margin: 0; }
.illus svg{
  display: block;
  width: 100%;
  height: 100px;
  overflow: visible;
}
.illus .lbl{
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .16em;
  fill: var(--haze-dim);
  text-transform: uppercase;
}
.illus .box{ fill: var(--paper-2); stroke: var(--line); stroke-width: 1.1; }
.illus .box-name{
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  fill: var(--haze);
}
/* Paquetes de datos recorriendo el circuito */
.illus .wire{ fill: none; stroke: var(--signal); stroke-width: 1.3; stroke-dasharray: 3 7; }
.illus .wire{ animation: wire 2.6s linear infinite; }
.illus .wire.slow{ animation-duration: 4s; stroke: var(--pulse); }
@keyframes wire{ to{ stroke-dashoffset: -20; } }
.illus .arrow{ fill: var(--signal); }

/* Ilustración en el encabezado de cada pilar */
.pillar > .illus{
  margin: calc(-1 * clamp(1.8rem, 3vw, 3rem)) calc(-1 * clamp(1.8rem, 3vw, 3rem)) 0;
  padding: 1.5rem clamp(1.8rem, 3vw, 3rem);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(80% 120% at 28% 0%, rgba(90,69,240,.07), transparent 68%),
    var(--c-band);
}

/* Las ilustraciones viven sobre pizarra: se reencuadran para ese fondo */
.pillar .illus .box{ fill: var(--c-fill); stroke: var(--c-line); }
.pillar .illus .box-name{ fill: var(--c-fg-2); }
.pillar .illus .lbl{ fill: var(--c-fg-3); }
.pillar .illus .dot{ fill: var(--c-fg-3); }
.case-glyph .ac-s{ stroke: var(--c-violet); }
.case-glyph .ac-f{ fill: var(--c-violet); }
.pillar .illus .wire{ stroke: var(--c-accent); }
.pillar .illus .wire.slow{ stroke: var(--c-violet); }
.pillar .illus .arrow{ fill: var(--c-accent); }
.pillar .illus .edge{ stroke: var(--c-fg-3); opacity: .45; }
.pillar .illus .edge.live{ stroke: var(--c-accent); }
.pillar .illus .neuron{ fill: var(--c-fill); stroke: var(--c-fg-3); }
.pillar .illus .neuron.on{ fill: var(--c-on); stroke: var(--c-accent); }
.pillar .illus .neuron.out{ fill: var(--c-out); stroke: var(--c-violet); }

/* Red de inferencia */
.illus .edge{ stroke: var(--haze-dim); stroke-width: .8; opacity: .4; }
.illus .edge.live{
  stroke: var(--signal);
  stroke-width: 1;
  animation: spark 3.4s ease-in-out infinite;
}
@keyframes spark{ 0%, 100%{ opacity: .12; } 45%{ opacity: .9; } }
.illus .neuron{ fill: var(--ink-deep); stroke: var(--haze-dim); stroke-width: 1.2; }
.illus .neuron.on{
  fill: rgba(13,155,135,.14);
  stroke: var(--signal);
  animation: breathe 3.4s ease-in-out infinite;
}
.illus .neuron.out{ stroke: var(--pulse); fill: rgba(90,69,240,.14); }
@keyframes breathe{ 0%, 100%{ stroke-opacity: .45; } 45%{ stroke-opacity: 1; } }

/* ---------- Panel de código en construcción ---------- */
.codepanel{
  margin: 0;
  border: 1px solid var(--code-line);
  background: var(--code-bg);
  box-shadow: -34px 30px 80px -50px rgba(167,139,250,.45),
               34px 30px 80px -50px rgba(34,211,238,.45);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}
.code-bar{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .9rem;
  border-bottom: 1px solid var(--code-line);
  background: var(--code-bar);
}
.code-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--signal-lit); flex: none; }
.code-file{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--code-text);
}
.code-lang{
  margin-left: auto;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--code-dim);
  white-space: nowrap;
}
.code-body{ overflow-x: auto; padding: .85rem 0; }
.code-lines{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.8;
  height: 12.6em;      /* alto fijo: los fragmentos cambian sin mover el layout */
  counter-reset: cl;
}
.code-lines li{
  display: grid;
  grid-template-columns: 2.7em 1fr;
  gap: .5rem;
}
.code-lines li::before{
  counter-increment: cl;
  content: counter(cl);
  text-align: right;
  padding-right: .55rem;
  color: var(--code-num);
  border-right: 1px solid var(--code-line);
  font-variant-numeric: tabular-nums;
}
.code-lines code{
  font: inherit;
  white-space: pre;
  padding-right: .9rem;
}
.tk-kw{ color: #9C8DFF; }
.tk-fn{ color: var(--code-text); }
.tk-str{ color: var(--signal-lit); }
.tk-num{ color: #FFB661; }
.tk-tag{ color: #7FB2FF; }
.tk-com{ color: #46527A; }
.tk-pun{ color: var(--code-dim); }
.tk-var{ color: #B9C2DC; }
.caret{
  display: inline-block;
  width: .5em;
  height: 1.05em;
  vertical-align: -.2em;
  background: var(--signal-lit);
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }
.code-status{
  display: flex;
  align-items: center;
  gap: .55rem;
  border-top: 1px solid var(--code-line);
  padding: .58rem .9rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--code-dim);
}
.code-status .pip{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FFB661;
  flex: none;
  animation: pip 1s ease-in-out infinite;
}
.code-status[data-state="ok"]{ color: var(--signal-lit); }
.code-status[data-state="ok"] .pip{ background: var(--signal-lit); animation: none; }
@keyframes pip{ 50%{ opacity: .2; } }
.code-status .right{ margin-left: auto; color: var(--code-dim); }

/* Stack: panel de código + columnas */
.stack-layout{
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.stack-layout .stack-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Revelado en scroll */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.in{ opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px){
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases{ grid-template-columns: 1fr; }
  .rel-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid{ grid-template-columns: 1fr; align-items: start; }
  .hero-side{
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.8rem;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .contact{ grid-template-columns: 1fr; }
  .contact-copy{ border-right: 0; border-bottom: 1px solid var(--line); }
  .stack-layout{ grid-template-columns: 1fr; }
  .codepanel{ max-width: 460px; }
}
/* Con el logo a 65px, el menú completo ya no convive con él por debajo de
   1100px: en vez de comprimir ambos, se pasa al menú desplegable antes. */
@media (max-width: 1260px){
  .nav{
    position: fixed;
    inset: 60px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-deep);
    border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.6rem;
    transform: translateY(-130%);
    transition: transform .45s var(--ease);
  }
  .nav[data-open="true"]{ transform: none; }
  .nav a{ padding-block: .95rem; border-bottom: 1px solid var(--line-soft); }
  .nav .btn{ margin-top: 1.1rem; border-bottom: 0; justify-content: center; }
  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: .6rem 0 .6rem .6rem;
    cursor: pointer;
  }
  .nav-toggle i{
    display: block;
    width: 24px; height: 1.5px;
    background: var(--chalk);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] i:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] i:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

  /* En el desplegable no hay hover: la solapa se muestra anidada */
  .has-menu{ display: block; }
  .chev{ display: none; }
  .submenu{
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 .4rem 1.1rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .submenu::before{ content: none; }
  .nav .submenu-card{ padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav .submenu-card:hover{ background: transparent; }
}

@media (max-width: 780px){
  .pillars{ grid-template-columns: 1fr; }
  .rel-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .section-head{ grid-template-columns: 1fr; }
  .hero-side{ grid-template-columns: 1fr; gap: 1.2rem; }
  .field-row{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .stack-layout .stack-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal{ opacity: 1; transform: none; }
}

/* ---------- Páginas interiores ---------- */
.nav a[aria-current="page"]{ color: var(--signal); }
.nav a[aria-current="page"]::after{ width: 100%; }

.page-hero{
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2.5rem, 5vh, 4rem);
}
.page-hero h1{
  font-size: var(--step-3);
  font-variation-settings: 'wdth' 114;
  font-weight: 800;
  margin-block: 1.2rem 1.3rem;
}
.page-hero .lede{ max-width: 64ch; }

/* Ficha del proyecto */
.spec{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
}
.spec > div{
  background: var(--paper);
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: .4rem;
  align-content: start;
}
.spec dt{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--haze-dim);
}
.spec dd{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.35;
}

/* Texto corrido de la página de proyecto */
.prose{ display: grid; gap: 1.1rem; max-width: 68ch; }
.prose p{ color: var(--haze); }
.prose strong{ color: var(--chalk); font-weight: 500; }

/* Panel de contacto de una sola columna (páginas interiores) */
.contact.solo{ grid-template-columns: 1fr; }
.contact.solo .contact-copy{ border-right: 0; border-bottom: 0; }
.band-gap{ margin-top: 1.5rem; }


/* ---------- Capturas dentro del contenido ---------- */
.shot{
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.shot img{
  display: block;
  width: 100%;
  height: auto;
  background: var(--mist);
}
.shot figcaption{
  border-top: 1px solid var(--line);
  padding: .72rem 1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  line-height: 1.65;
  color: var(--haze);
}
.shot figcaption b{
  color: var(--chalk);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .13em;
  margin-right: .5rem;
}
/* Ancho contenido: una captura no tiene que gritar más que el texto */
.shot-band{ margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.shot-mid{ max-width: 760px; }

/* Texto con una captura angosta al costado */
.split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 252px);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
  .split .shot{ max-width: 300px; }
}


/* ============================================================
   PORTAFOLIO — banda oscura
   El resto del sitio es papel claro. El portafolio invierte el
   mundo a propósito: es el corazón de la página y se separa por
   color, no por una línea. Las tarjetas dejan de heredar la
   paleta clara de .case y definen la suya.
   ============================================================ */
.folio-band{
  position: relative;
  background: var(--paper-2);
  color: #E7EBF7;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* Retícula de coordenadas, más marcada que la del cuerpo claro */
.folio-band::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(53,224,198,.07) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg,  rgba(53,224,198,.05) 0 1px, transparent 1px 74px);
  -webkit-mask-image: radial-gradient(ellipse 110% 65% at 50% 0%, #000 0%, rgba(0,0,0,.4) 55%, transparent 88%);
          mask-image: radial-gradient(ellipse 110% 65% at 50% 0%, #000 0%, rgba(0,0,0,.4) 55%, transparent 88%);
}

/* Dos halos que se cruzan arriba: el aqua de la marca y el violeta */
.folio-band::after{
  content:"";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: -18% -12% auto -12%;
  height: 62%;
  background:
    radial-gradient(ellipse 46% 62% at 22% 0%, rgba(90,69,240,.30), transparent 68%),
    radial-gradient(ellipse 30% 42% at 50% 0%, rgba(244,114,182,.13), transparent 70%),
    radial-gradient(ellipse 42% 56% at 76% 6%, rgba(13,155,135,.28), transparent 70%),
    radial-gradient(ellipse 28% 46% at 98% 22%, rgba(13,139,255,.2), transparent 70%);
}
.folio-band > .wrap{ z-index: 1; }

/* Los primitivos del sitio, repintados para fondo oscuro */
.folio-band h2{ color: #F4F6FC; }
.folio-band .muted{ color: #9AA4BE; }
.folio-band .eyebrow{ color: var(--signal-lit); }
.folio-band .eyebrow::before{ background: linear-gradient(90deg, var(--pulse), var(--cyan), var(--signal-lit)); }

/* ---------- Barra de filtros ---------- */
.folio-bar{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.chip{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: #9AA4BE;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.13);
  padding: .55rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.chip:hover{
  color: #F2F4FA;
  border-color: rgba(53,224,198,.45);
  background: rgba(53,224,198,.07);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(53,224,198,.6);
}
.chip:active{ transform: scale(.94); transition-duration: .1s; }
/* Cada familia tiene su color: el filtro activo se enciende en ese tono */
.chip{ --chip: var(--signal-lit); }
.chip[data-fam="ia"]{  --chip: var(--pulse); }
.chip[data-fam="fin"]{ --chip: #3B9BFF; }
.chip[data-fam="com"]{ --chip: var(--amber); }
.chip[data-fam="dat"]{ --chip: var(--cyan); }
.chip[data-fam="pub"]{ --chip: var(--lime); }
.chip[data-fam="per"]{ --chip: var(--magenta); }
.chip:hover{
  border-color: color-mix(in srgb, var(--chip) 50%, transparent);
  background: color-mix(in srgb, var(--chip) 9%, transparent);
  box-shadow: 0 8px 20px -10px var(--chip);
}
.chip[aria-pressed="true"]{
  color: #06121A;
  background: linear-gradient(120deg, var(--chip), color-mix(in srgb, var(--chip) 55%, #FFFFFF));
  border-color: var(--chip);
  box-shadow: 0 0 22px -6px var(--chip);
}
.chip .chip-em{ margin-right: .38rem; font-size: .84rem; }

.folio-count{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6F7893;
  margin-left: auto;
}

/* ---------- Rejilla ---------- */
.folio{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* ---------- Tarjeta ----------
   Comparte el vidrio y el hover de las demás tarjetas (ver "Tarjetas"
   más arriba); acá solo cambia el acento, que es el color de su marca. */
.folio-card{
  --acc:      var(--brand-lt, var(--signal-lit));
  --c-fg:     #F2F4FA;
  --c-fg-2:   #AEB7CE;
  --c-fg-3:   #7C87A5;
  --c-line:   color-mix(in srgb, var(--acc) 18%, rgba(255,255,255,.08));
  --c-accent: var(--acc);

  padding: clamp(1.3rem, 2.1vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.folio-card:hover,
.folio-card:focus-within{
  --c-fg-2: #C9D0E4;
  --c-line: color-mix(in srgb, var(--acc) 38%, transparent);
}

/* Halo del color de la marca que se enciende arriba al pasar el mouse */
.folio-card::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.folio-card:hover::before,
.folio-card:focus-within::before{ opacity: 1; }
.folio-card > *{ position: relative; z-index: 1; }

/* ---------- Identidad de marca de cada proyecto ----------
   Cada producto tiene su logo: un símbolo propio y un wordmark con su
   propio tratamiento tipográfico, sobre su color de marca. No comparten
   estilo a propósito: veintiún productos distintos se ven como veintiuna
   marcas distintas, que es lo que pasaría si fueran de dueños distintos.

   El símbolo viene en tres formatos, como en el mundo real:
     .folio-tile        pastilla redondeada con el glifo en blanco
     .folio-tile.round  medallón circular
     .folio-free        marca suelta, sin contenedor, en color de marca   */
.folio-viz{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 20 / 7;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(#070C18, #0A1020);
  overflow: hidden;
  margin-bottom: .25rem;
  transition: border-color .45s var(--ease);
}
/* Halo del color de la marca detrás del logo */
.folio-viz::before{
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 115% at 50% 50%, var(--brand), transparent 70%);
  opacity: .14;
  transition: opacity .45s var(--ease);
}
.folio-card:hover .folio-viz{ border-color: rgba(255,255,255,.2); }
.folio-card:hover .folio-viz::before{ opacity: .24; }

.folio-logo{
  position: relative;
  display: flex;
  align-items: center;
  gap: .68rem;
  transition: transform .5s var(--ease);
}
.folio-card:hover .folio-logo{ transform: scale(1.045); }

/* Pastilla y medallón */
.folio-tile{
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(142deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px -8px var(--brand), inset 0 1px 0 rgba(255,255,255,.28);
}
.folio-tile.round{ border-radius: 50%; }
.folio-glyph{ width: 25px; height: 25px; display: block; }

/* Marca suelta */
.folio-free{ width: 44px; height: 44px; flex: none; display: block; }

/* Trazos del glifo en blanco sobre la pastilla */
.folio-glyph .g{
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.folio-glyph .gf{ fill: #FFFFFF; stroke: none; }
.folio-glyph .gd{ fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.2; }

/* Trazos de la marca suelta, en color de marca */
.folio-free .m{
  fill: none;
  stroke: var(--brand);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.folio-free .mf{ fill: var(--brand); stroke: none; }
.folio-free .m2f{ fill: var(--brand-2); stroke: none; }
.folio-free .mw{
  fill: none;
  stroke: rgba(255,255,255,.94);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Wordmarks ----------
   Cada marca eligió su tratamiento: unas van compactas y pesadas, otras
   abiertas en versalitas, otras en minúscula. Archivo es variable, así
   que el ancho y el peso cambian de verdad, no por simulación. */
.folio-word{
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -.022em;
  line-height: 1;
  color: #F4F6FC;
  white-space: nowrap;
}
/* Versalitas abiertas: autoridad, criterio, norma */
.folio-word.caps{
  text-transform: uppercase;
  font-size: .98rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 118;
  letter-spacing: .15em;
}
/* Minúscula: producto cercano, conversacional */
.folio-word.low{
  text-transform: lowercase;
  font-weight: 600;
  letter-spacing: -.035em;
}
/* Ligera y ancha: producto técnico, de precisión */
.folio-word.thin{
  font-weight: 400;
  font-size: 1.24rem;
  font-variation-settings: 'wdth' 120;
  letter-spacing: .015em;
}
/* Segunda mitad del nombre en el color de la marca */
.folio-word em{ font-style: normal; color: var(--brand); }

/* ---------- Colores de marca ----------
   Elegidos para leerse sobre el fondo oscuro y para no repetirse entre
   proyectos vecinos de la rejilla. */
[data-brand="kognia"]      { --brand:#6366F1; --brand-2:#A855F7; --brand-lt:#7375F2; }
[data-brand="arbitrium"]   { --brand:#FBBF24; --brand-2:#B45309; --brand-lt:#FBBF24; }
[data-brand="replica"]     { --brand:#22D3EE; --brand-2:#0E7490; --brand-lt:#22D3EE; }
[data-brand="indicio"]     { --brand:#E11D48; --brand-2:#881337; --brand-lt:#E63F63; }
[data-brand="telar"]       { --brand:#8B5CF6; --brand-2:#5B21B6; --brand-lt:#9164F6; }
[data-brand="solvenz"]     { --brand:#2563EB; --brand-2:#1E3A8A; --brand-lt:#467AEE; }
[data-brand="collectiq"]   { --brand:#14B8A6; --brand-2:#0F766E; --brand-lt:#14B8A6; }
[data-brand="umbral"]      { --brand:#38BDF8; --brand-2:#0369A1; --brand-lt:#38BDF8; }
[data-brand="veritas"]     { --brand:#EF4444; --brand-2:#991B1B; --brand-lt:#EF4444; }
[data-brand="mercurio"]    { --brand:#F97316; --brand-2:#C2410C; --brand-lt:#F97316; }
[data-brand="brujula"]     { --brand:#A3E635; --brand-2:#4D7C0F; --brand-lt:#A3E635; }
[data-brand="hilo"]        { --brand:#22C55E; --brand-2:#15803D; --brand-lt:#22C55E; }
[data-brand="timpano"]     { --brand:#D946EF; --brand-2:#86198F; --brand-lt:#D946EF; }
[data-brand="mirador"]     { --brand:#0EA5E9; --brand-2:#075985; --brand-lt:#0EA5E9; }
[data-brand="codice"]      { --brand:#D97706; --brand-2:#78350F; --brand-lt:#D97706; }
[data-brand="clausula"]    { --brand:#7C3AED; --brand-2:#4C1D95; --brand-lt:#9661F1; }
[data-brand="agora"]       { --brand:#0D9488; --brand-2:#115E59; --brand-lt:#0D9488; }
[data-brand="ventanilla"]  { --brand:#FB7185; --brand-2:#BE123C; --brand-lt:#FB7185; }
[data-brand="surco"]       { --brand:#84CC16; --brand-2:#3F6212; --brand-lt:#84CC16; }
[data-brand="cantera"]     { --brand:#A8A29E; --brand-2:#57534E; --brand-lt:#A8A29E; }
[data-brand="preceptor"]   { --brand:#EC4899; --brand-2:#9D174D; --brand-lt:#EC4899; }


.folio-card[hidden]{ display: none !important; }

.folio-empty{
  border: 1px solid rgba(255,255,255,.11);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: #9AA4BE;
  font-size: var(--step--1);
}

@media (max-width: 1040px){
  .folio{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px){
  .folio{ grid-template-columns: 1fr; }
  .folio-count{ margin-left: 0; width: 100%; }
}

/* ---------- Tarjeta clicable ---------- */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* La tarjeta es solo la marca: el logo grande y el botón "Ver proyecto".
   Toda la tarjeta abre la ficha (app.js); el botón es el control que
   ven el teclado y el lector de pantalla. */
.folio-card{ cursor: pointer; gap: 1rem; }
.folio-card .folio-viz{ aspect-ratio: 16 / 9; margin-bottom: 0; }
.folio-card .folio-logo{ transform: scale(1.3); }
.folio-card:hover .folio-logo{ transform: scale(1.4); }

.folio-open{
  position: relative;
  z-index: 4;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1rem;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  border-radius: 12px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 24%, transparent), color-mix(in srgb, var(--acc) 8%, transparent));
  box-shadow: 0 0 22px -8px var(--acc);
  cursor: pointer;
  transition: background .35s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.folio-open::after{ content: "\2192"; font-size: 1.05em; transition: transform .3s var(--ease); }
/* Brillo que cruza el botón, el mismo de .btn */
.folio-open::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%) skewX(-12deg);
  opacity: 0;
}
.folio-card:hover .folio-open{
  color: #06121A;
  border-color: var(--acc);
  background: linear-gradient(120deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #FFFFFF));
  box-shadow: 0 0 32px -4px var(--acc);
}
.folio-card:hover .folio-open::before{ animation: shimmer-sweep .9s ease-out; }
.folio-card:hover .folio-open::after{ transform: translateX(4px); }
.folio-open:active{ transform: scale(.96); transition-duration: .1s; }
.folio-open:focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

/* ---------- Ficha de proyecto ---------- */
.pdlg{
  width: min(1000px, 94vw);
  max-width: none;
  max-height: 90vh;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--paper-2);
  color: #E7EBF7;
  overflow: hidden;
}
.pdlg::backdrop{
  background: rgba(3,6,13,.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pdlg-body{
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pdlg-close{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 6;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: #E7EBF7;
  background: rgba(9,14,28,.86);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              transform .35s var(--ease), box-shadow .3s var(--ease);
}
.pdlg-close:hover{
  background: #1A2340;
  border-color: var(--brand, #FFFFFF);
  transform: rotate(90deg);
  box-shadow: 0 0 22px -6px var(--brand, #FFFFFF);
}
.pdlg-close:active{ transform: rotate(90deg) scale(.9); }

/* El logo de la tarjeta encabeza la ficha, más bajo que en la rejilla */
.pdlg-body .folio-viz{
  aspect-ratio: auto;
  height: clamp(96px, 16vw, 132px);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin: 0;
}

.pd{
  display: block;
  padding: clamp(1.5rem, 4vw, 2.8rem);
}
.pd-rubro{
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B95B2;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .8rem;
}
.pd-rubro .em{ font-size: .95rem; letter-spacing: 0; }
.pd h2{
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  color: #F4F6FC;
  margin: 0;
}
.pd-lede{
  color: #AEB7CE;
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: 62ch;
  margin: .9rem 0 0;
}

.pd-spec{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
}
.pd-spec > div{
  background: #0C1224;
  padding: .95rem 1.1rem;
  display: grid;
  gap: .35rem;
  align-content: start;
}
.pd-spec dt{
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7C87A5;
}
.pd-spec dd{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  color: #E7EBF7;
}

.pd-sec{ margin-top: clamp(2rem, 4vw, 2.9rem); }
.pd-sec h3{
  font-size: 1.28rem;
  color: #F4F6FC;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 1.15rem;
}
.pd-sec > p{
  color: #AEB7CE;
  font-size: var(--step--1);
  line-height: 1.8;
  max-width: 72ch;
}
.pd-sec > p + p{ margin-top: .9rem; }

.pd-caps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
}
.pd-cap{
  background: #0C1224;
  padding: 1.15rem 1.25rem;
}
.pd-cap h4{
  font-family: var(--display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--brand-lt, var(--signal-lit));
  margin: 0 0 .55rem;
}
.pd-cap p{
  color: #AEB7CE;
  font-size: .82rem;
  line-height: 1.72;
}

.pd-stack{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.4vw, 2rem);
}
.pd-stack h4{
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brand-lt, var(--signal-lit));
  margin: 0 0 .75rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pd-stack ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.pd-stack li{
  color: #AEB7CE;
  font-size: .81rem;
  line-height: 1.5;
  padding-left: .9rem;
  position: relative;
}
.pd-stack li::before{
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 4px; height: 4px;
  background: var(--brand-lt, var(--signal-lit));
}

.pd-foot{ margin-top: clamp(2rem, 4vw, 2.8rem); }

@media (max-width: 860px){
  .pd-caps{ grid-template-columns: 1fr; }
  .pd-stack{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .pd-stack{ grid-template-columns: 1fr; }
}

/* ============================================================
   TARJETAS — entrada escalonada y flotación
   Las tarjetas entran de a una con un pequeño rebote. Es una animación
   y no una transición a propósito: una transición con demora también
   demoraría el hover para siempre; la animación termina y la tarjeta
   vuelve a responder al instante. --i y --col los pone app.js.
   ============================================================ */
@keyframes card-in{
  from{ opacity: 0; transform: translateY(40px); }
  to{   opacity: 1; transform: none; }
}
@keyframes icon-float{
  0%, 100%{ transform: translateY(0); }
  50%{      transform: translateY(-4px); }
}

/* Rejillas que se revelan enteras: la rejilla queda quieta y entran sus tarjetas */
.pillars.reveal, .cases.reveal, .rel-grid.reveal{ opacity: 1; transform: none; }
.pillars.reveal:not(.in) > *, .cases.reveal:not(.in) > *, .rel-grid.reveal:not(.in) > *{ opacity: 0; }
.pillars.reveal.in > *, .cases.reveal.in > *, .rel-grid.reveal.in > *{
  animation: card-in .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 60ms + 80ms) backwards;
}

/* Portafolio: cada tarjeta se revela sola, escalonada por columna.
   Al filtrar, las que reaparecen vuelven a entrar con la misma animación. */
.folio-card.reveal{
  transform: none;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
.folio-card.reveal:not(.in){ opacity: 0; }
.folio-card.reveal.in{
  animation: card-in .7s cubic-bezier(.34,1.56,.64,1) calc(var(--col, 0) * 70ms + 60ms) backwards;
}
.folio-card.reveal:hover, .folio-card.reveal:focus-within{ transform: scale(1.02); }

.folio-card .folio-viz{ border-radius: 12px; }
.folio-card .folio-tile, .folio-card .folio-free{
  animation: icon-float 3s ease-in-out calc(var(--i, 0) * -400ms) infinite;
}
.pdlg{ border-radius: 16px; }

@media (prefers-reduced-motion: reduce){
  .pillars.reveal > *, .cases.reveal > *, .rel-grid.reveal > *, .folio-card.reveal,
  .case-glyph, .rel-card::before, .folio-card .folio-tile, .folio-card .folio-free{ animation: none !important; }
  .pillar:hover, .case:hover, .rel-card:hover, .folio-card.reveal:hover{ transform: none; }
}

/* ============================================================
   COLOR TECNOLÓGICO
   Neones repartidos donde ordenan la lectura: cada etapa, cada
   columna del stack y cada tarjeta tiene su tono.
   ============================================================ */

/* Anillo de luz que recorre el borde de la tarjeta al pasar el mouse.
   Es un degradé cónico que gira, recortado con una máscara al grosor
   del borde para que respete las esquinas redondeadas. */
@property --ring{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ring-spin{ to{ --ring: 360deg; } }

.folio-card{ --acc-2: color-mix(in srgb, var(--acc) 45%, #FFFFFF); }

.pillar::before, .case::before, .folio-card::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--ring), transparent 0 58%, var(--acc) 76%, var(--acc-2) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .4s var(--ease);
  animation: ring-spin 3.2s linear infinite paused;
}
.pillar:hover::before, .case:hover::before, .folio-card:hover::before,
.folio-card:focus-within::before{
  opacity: 1;
  animation-play-state: running;
}

/* Etapas del proceso: una por color, la barra se extiende con el hover */
.step:nth-child(1){ --step-c: var(--signal); }
.step:nth-child(2){ --step-c: var(--cyan); }
.step:nth-child(3){ --step-c: var(--azure); }
.step:nth-child(4){ --step-c: var(--pulse); }
.step::before{ color: var(--step-c, var(--signal)); }
.step::after{
  width: 56px;
  background: linear-gradient(90deg, var(--step-c, var(--signal)), transparent);
  transition: width .6s var(--ease);
}
.step:hover::after{ width: 100%; }

/* Columnas del stack */
.stack-col:nth-child(1){ --col-c: var(--cyan); }
.stack-col:nth-child(2){ --col-c: var(--azure); }
.stack-col:nth-child(3){ --col-c: var(--pulse); }
.stack-col:nth-child(4){ --col-c: var(--lime); }
.stack-col h3{
  color: var(--col-c, var(--haze-dim));
  border-image: linear-gradient(90deg, var(--col-c, var(--line)), transparent) 1;
}

/* Rombos del ticker en colores alternados */
.ticker-track span:nth-child(5n+2)::before{ color: var(--cyan); }
.ticker-track span:nth-child(5n+3)::before{ color: var(--azure); }
.ticker-track span:nth-child(5n+4)::before{ color: var(--pulse); }
.ticker-track span:nth-child(5n)::before{   color: var(--magenta); }

/* Filo de color en la columna lateral del héroe */
.hero-side{ border-image: linear-gradient(180deg, var(--signal), var(--azure) 50%, var(--pulse)) 1; }
@media (max-width: 1040px){
  .hero-side{ border-image: linear-gradient(90deg, var(--signal), var(--azure) 50%, var(--pulse)) 1; }
}

/* Ficha del portafolio: cada dato con un filo de color arriba */
.spec > div{ position: relative; }
.spec > div::before{
  content:"";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 2px;
  background: var(--spec-c, var(--signal));
}
.spec > div:nth-child(2){ --spec-c: var(--cyan); }
.spec > div:nth-child(3){ --spec-c: var(--pulse); }
.spec > div:nth-child(4){ --spec-c: var(--magenta); }

@media (prefers-reduced-motion: reduce){
  .hero h1 em{ animation: none; }
  .pillar::before, .case::before, .folio-card::before{ animation: none; }
}

/* ============================================================
   CAPA FUTURISTA
   El color deja de esperar al hover: está siempre. Una aurora de
   neones se mueve detrás de toda la página, las tarjetas vienen
   teñidas con borde en degradé, los títulos brillan y los paneles
   llevan esquinas de visor (HUD). Todo va al final a propósito:
   pisa lo anterior sin tener que tocarlo.
   ============================================================ */

/* ---------- Aurora de fondo (la inserta app.js) ---------- */
.aurora{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora i{
  position: absolute;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  opacity: .75;
  will-change: transform;
  animation: aurora-drift 30s ease-in-out infinite alternate;
}
.aurora i:nth-child(1){ left: -20vmax; top: -24vmax; background: radial-gradient(circle, rgba(34,211,238,.30), transparent 62%); }
.aurora i:nth-child(2){ right: -24vmax; top: 8vh; background: radial-gradient(circle, rgba(167,139,250,.30), transparent 62%); animation-duration: 36s; animation-delay: -9s; }
.aurora i:nth-child(3){ left: 12vw; bottom: -34vmax; background: radial-gradient(circle, rgba(13,139,255,.28), transparent 62%); animation-duration: 42s; animation-delay: -18s; }
.aurora i:nth-child(4){ right: 8vw; bottom: -12vmax; width: 42vmax; height: 42vmax; background: radial-gradient(circle, rgba(244,114,182,.20), transparent 62%); animation-duration: 32s; animation-delay: -5s; }
@keyframes aurora-drift{
  0%{   transform: translate3d(0, 0, 0) scale(1); }
  50%{  transform: translate3d(7vw, 5vh, 0) scale(1.14); }
  100%{ transform: translate3d(-5vw, 9vh, 0) scale(.94); }
}

/* Retícula más viva, en cian y violeta */
body::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(34,211,238,.075) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(167,139,250,.055) 0 1px, transparent 1px 96px);
}
#net{ opacity: 1; }
.rule{ position: relative; z-index: 1; }

/* Barra de progreso de lectura (la inserta app.js) */
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 70;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-tech);
  box-shadow: 0 0 12px rgba(34,211,238,.8);
}

::selection{ background: var(--cyan); color: #04121A; }
html{ scrollbar-color: #2A9FC0 var(--paper); }

/* ---------- Cabecera ---------- */
.topbar{ background: rgba(9,14,32,.62); border-bottom-color: transparent; }
.topbar.stuck{ background: rgba(9,14,32,.86); border-bottom-color: transparent; }
.topbar::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #34CFBE, #22D3EE, #0D8BFF, #A78BFA, #F472B6, transparent);
  background-size: 200% 100%;
  opacity: .7;
  animation: gradient-shift 10s ease-in-out infinite;
}
.brand-logo{ filter: drop-shadow(0 0 10px rgba(34,211,238,.45)); }
.nav a:hover, .nav a[aria-current="page"]{ color: var(--cyan); text-shadow: 0 0 12px rgba(34,211,238,.6); }
.nav a::after{ background: var(--grad-tech); box-shadow: 0 0 8px rgba(34,211,238,.7); }
.nav .btn:hover{ text-shadow: none; }

/* ---------- Títulos con brillo ---------- */
.eyebrow{ color: var(--cyan); text-shadow: 0 0 14px rgba(34,211,238,.55); }
.folio-band .eyebrow{ color: var(--cyan); }

.hero h1{
  background: linear-gradient(180deg, #FFFFFF 40%, #A5F3FC 120%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(34,211,238,.25));
}
h2, .page-hero h1{
  background: linear-gradient(95deg, #FFFFFF 0%, #E8FBFF 38%, #7DE8F7 64%, #B9A6FF 84%, #F5A3D0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(125,232,247,.14));
}

/* ---------- Héroe ---------- */
.hero-side{
  position: relative;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(160deg, rgba(34,211,238,.09), rgba(13,139,255,.05) 50%, rgba(167,139,250,.09));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.hero-side dt{ color: var(--cyan); opacity: .85; }

.ticker{
  background: linear-gradient(90deg, rgba(34,211,238,.10), rgba(13,139,255,.07), rgba(167,139,250,.10), rgba(244,114,182,.08));
  border-block-color: rgba(34,211,238,.25);
}
.ticker-track span{ color: #C3CEE6; }

/* ---------- Esquinas de visor (HUD) ---------- */
.codepanel, .contact, .spec{ position: relative; }
.hero-side::after, .codepanel::after, .contact::after, .spec::after{
  --hc: rgba(34,211,238,.9);
  --hl: 16px;
  content:"";
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--hc), var(--hc)) left top     / var(--hl) 1px no-repeat,
    linear-gradient(var(--hc), var(--hc)) left top     / 1px var(--hl) no-repeat,
    linear-gradient(var(--hc), var(--hc)) right top    / var(--hl) 1px no-repeat,
    linear-gradient(var(--hc), var(--hc)) right top    / 1px var(--hl) no-repeat,
    linear-gradient(var(--hc), var(--hc)) left bottom  / var(--hl) 1px no-repeat,
    linear-gradient(var(--hc), var(--hc)) left bottom  / 1px var(--hl) no-repeat,
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--hl) 1px no-repeat,
    linear-gradient(var(--hc), var(--hc)) right bottom / 1px var(--hl) no-repeat;
  filter: drop-shadow(0 0 4px var(--hc));
}
.contact::after{ --hc: rgba(167,139,250,.9); }

/* ---------- Tarjetas: color en reposo ---------- */
.pillar, .case, .rel-card, .folio-card{
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--acc) 17%, transparent), transparent 58%),
    linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.02) 60%, color-mix(in srgb, var(--acc-2, var(--acc)) 10%, transparent));
  border-color: color-mix(in srgb, var(--acc) 36%, transparent);
  box-shadow: 0 26px 60px -36px color-mix(in srgb, var(--acc) 60%, transparent);
}
/* Luz que sigue al cursor (app.js pone --mx / --my) */
.pillar:hover, .case:hover, .rel-card:hover, .folio-card:hover,
.pillar:focus-within, .case:focus-within, .rel-card:focus-within, .folio-card:focus-within{
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 26%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, transparent), rgba(255,255,255,.04) 55%, color-mix(in srgb, var(--acc-2, var(--acc)) 14%, transparent));
  border-color: color-mix(in srgb, var(--acc) 60%, transparent);
  box-shadow: 0 24px 70px -18px color-mix(in srgb, var(--acc) 38%, transparent);
}

/* Borde en degradé siempre visible; con el hover se vuelve anillo giratorio */
.pillar::before, .case::before, .folio-card::before{
  background: linear-gradient(135deg, var(--acc), transparent 38%, transparent 62%, var(--acc-2));
  opacity: .85;
}
.pillar:hover::before, .case:hover::before, .folio-card:hover::before,
.folio-card:focus-within::before{
  background:
    conic-gradient(from var(--ring), transparent 0 55%, var(--acc) 75%, var(--acc-2) 90%, transparent 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--acc) 45%, transparent), transparent 40% 60%, color-mix(in srgb, var(--acc-2) 45%, transparent));
  opacity: 1;
}

/* La línea inferior queda encendida a media luz */
.pillar::after, .case::after, .rel-card::after, .folio-card::after{ opacity: .45; transform: scaleX(.55); }

.pillar-idx{ color: var(--acc); text-shadow: 0 0 12px color-mix(in srgb, var(--acc) 50%, transparent); }
.pillar > .illus{
  background:
    radial-gradient(80% 130% at 25% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 70%),
    radial-gradient(60% 120% at 90% 100%, color-mix(in srgb, var(--acc-2) 14%, transparent), transparent 70%),
    rgba(255,255,255,.03);
}

.case-glyph{
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  border-color: color-mix(in srgb, var(--acc) 48%, transparent);
  box-shadow: 0 0 24px -4px color-mix(in srgb, var(--acc) 60%, transparent);
}
.case-glyph::before{ opacity: .55; transform: scale(1.5); }

.case .tag, .folio-card .tag{
  color: color-mix(in srgb, var(--acc) 72%, #FFFFFF);
  border-color: color-mix(in srgb, var(--acc) 36%, transparent);
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border-radius: 999px;
}
.rel-card h3{ color: #FFFFFF; }

/* Portafolio: la banda deja pasar la aurora y los logos brillan más */
.folio-band{ background: linear-gradient(180deg, rgba(12,19,42,.55), rgba(10,15,34,.72)); }
.folio-card .folio-viz{
  border-color: color-mix(in srgb, var(--acc) 26%, transparent);
  background: linear-gradient(160deg, #0A1124, #070C1B);
}
.folio-viz::before{ opacity: .32; }
.folio-card:hover .folio-viz::before{ opacity: .5; }

/* Filtros teñidos de su familia aún sin tocarlos */
.chip{
  color: color-mix(in srgb, var(--chip) 68%, #FFFFFF);
  border-color: color-mix(in srgb, var(--chip) 38%, transparent);
  background: color-mix(in srgb, var(--chip) 8%, transparent);
}
.chip[aria-pressed="true"]{ color: #06121A; }

.btn-ghost{
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 0 22px -8px rgba(34,211,238,.6);
}

/* ---------- Proceso y stack: paneles de vidrio de color ---------- */
.step{
  padding: 1.5rem 1.35rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--step-c) 30%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--step-c) 13%, transparent), rgba(255,255,255,.02) 75%);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--step-c) 60%, transparent);
  box-shadow: 0 22px 50px -24px var(--step-c);
}
.step::before{
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--step-c) 75%, transparent);
}
.step::after{
  left: 1.35rem;
  height: 2px;
  box-shadow: 0 0 10px var(--step-c);
}
.step:hover::after{ width: calc(100% - 2.7rem); }
.step p{ color: var(--text-2); }

.stack-col{
  padding: 1.3rem 1.3rem 1.4rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--col-c) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--col-c) 11%, transparent), rgba(255,255,255,.02) 75%);
}
.stack-col h3{ text-shadow: 0 0 14px color-mix(in srgb, var(--col-c) 60%, transparent); }

.codepanel{ border-color: rgba(34,211,238,.35); }

/* ---------- Contacto ---------- */
.contact{ border-color: rgba(167,139,250,.35); }
.contact-copy{ border-right-color: rgba(167,139,250,.25); }
.contact-list a{ color: var(--cyan); }
.field input, .field select, .field textarea{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.15);
  border-radius: 10px;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--cyan);
  background: rgba(34,211,238,.06);
  box-shadow: 0 0 0 3px rgba(34,211,238,.16), 0 0 26px -6px rgba(34,211,238,.7);
}
.field label{ color: var(--cyan); opacity: .85; }

/* ---------- Ficha y pie ---------- */
.spec > div{ background: rgba(12,19,42,.72); }
.pdlg{
  border-color: color-mix(in srgb, var(--brand, #22D3EE) 45%, transparent);
  box-shadow: 0 0 90px -24px var(--brand, #22D3EE);
}
.footer{ position: relative; border-top-color: transparent; }
.footer::before{
  content:"";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #34CFBE, #0D8BFF, #A78BFA, #F472B6, transparent);
  opacity: .6;
}

@media (prefers-reduced-motion: reduce){
  .aurora i, .topbar::after{ animation: none; }
}

/* ============================================================
   INDUSTRIAS
   Enfoque con los cuatro problemas de fondo, un panel de alcance con
   contadores y la rejilla de rubros. Los colores rotan con los mismos
   seis neones que el resto de las tarjetas.
   ============================================================ */
.ind-top{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ind-approach{ display: grid; gap: 1.1rem; align-content: center; }
.ind-approach h3{ font-size: var(--step-2); }
.ind-approach > p{ color: var(--text-2); max-width: 58ch; }

/* Problemas de fondo: píldoras con un punto que late */
.ind-pills{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.ind-pill{
  --acc: var(--signal);
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  border-radius: 14px;
  font-size: .92rem;
  color: #E6ECF8;
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ind-pill:nth-child(2){ --acc: var(--azure); }
.ind-pill:nth-child(3){ --acc: var(--pulse); }
.ind-pill:nth-child(4){ --acc: var(--magenta); }
.ind-pill::before{
  content:"";
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  animation: pulse-dot 2.4s ease-in-out calc(var(--i, 0) * -600ms) infinite;
}
.ind-pill:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--acc) 62%, transparent);
  box-shadow: 0 12px 30px -14px var(--acc);
}
@keyframes pulse-dot{
  0%, 100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 20%, transparent), 0 0 10px var(--acc); }
  50%{      box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 5%, transparent),  0 0 18px var(--acc); }
}

/* Panel de alcance */
.ind-stats{
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: 18px;
  background:
    radial-gradient(90% 60% at 60% 0%, rgba(34,211,238,.18), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(167,139,250,.14), transparent 70%),
    linear-gradient(160deg, rgba(13,20,44,.92), rgba(8,12,28,.92));
  border: 1px solid rgba(34,211,238,.42);
  box-shadow: 0 0 80px -24px rgba(34,211,238,.45), inset 0 1px 0 rgba(34,211,238,.18);
}
.ind-stats p{ margin: 0; }
.ind-stats-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ind-dots{ display: flex; gap: 5px; }
.ind-dots i{ width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.ind-dots i:nth-child(2){ background: var(--azure); box-shadow: 0 0 8px var(--azure); }
.ind-dots i:nth-child(3){ background: var(--pulse); box-shadow: 0 0 8px var(--pulse); }
.ind-big{
  font-family: var(--display);
  font-variation-settings: 'wdth' 100;
  font-weight: 800;
  font-size: clamp(4rem, 3rem + 3vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(34,211,238,.35);
}
.ind-big-cap{ color: var(--text-2); font-size: .92rem; }
.ind-mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ind-mini b{
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.ind-mini p:nth-child(1) b{ color: var(--cyan); }
.ind-mini p:nth-child(2) b{ color: #6FB6FF; }
.ind-mini b em{ font-style: normal; color: var(--pulse); }
.ind-mini small{
  display: block;
  margin-top: .4rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--text-3);
}
.ind-bars{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.ind-bars div{ display: flex; gap: 3px; flex: 1; }
.ind-bars i{
  height: 4px;
  flex: 1;
  border-radius: 4px;
  transform-origin: 0 50%;
  animation: bar-glow 2.8s ease-in-out infinite;
}
.ind-bars i:nth-child(1){ background: var(--signal);  animation-delay: 0s; }
.ind-bars i:nth-child(2){ background: var(--cyan);    animation-delay: .25s; }
.ind-bars i:nth-child(3){ background: var(--azure);   animation-delay: .5s; }
.ind-bars i:nth-child(4){ background: var(--pulse);   animation-delay: .75s; }
.ind-bars i:nth-child(5){ background: var(--magenta); animation-delay: 1s; }
.ind-bars i:nth-child(6){ background: var(--lime);    animation-delay: 1.25s; }
.ind-bars span{
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
@keyframes bar-glow{
  0%, 100%{ opacity: .45; }
  50%{      opacity: 1; box-shadow: 0 0 10px currentColor; }
}

/* Rejilla de industrias */
.ind-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.ind-card{
  --acc: var(--signal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease), background .3s var(--ease);
}
.ind-card:nth-child(6n+2){ --acc: var(--pulse); }
.ind-card:nth-child(6n+3){ --acc: var(--azure); }
.ind-card:nth-child(6n+4){ --acc: var(--magenta); }
.ind-card:nth-child(6n+5){ --acc: var(--cyan); }
.ind-card:nth-child(6n){   --acc: var(--lime); }
/* Filo de luz arriba, encendido a media potencia */
.ind-card::after{
  content:"";
  position: absolute;
  top: 0; left: 1.4rem; right: 1.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: .55;
  transition: opacity .3s var(--ease), box-shadow .3s var(--ease);
}
.ind-card:hover{
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--acc) 62%, transparent);
  box-shadow: 0 20px 46px -18px color-mix(in srgb, var(--acc) 60%, transparent);
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.ind-card:hover::after{ opacity: 1; box-shadow: 0 0 10px var(--acc); }
.ind-ico{
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow: 0 0 20px -6px color-mix(in srgb, var(--acc) 70%, transparent);
  transition: transform .4s var(--ease), box-shadow .3s var(--ease);
}
.ind-ico svg{
  width: 23px; height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ind-card:hover .ind-ico{
  transform: translateY(-2px) rotate(-6deg) scale(1.08);
  box-shadow: 0 0 28px -2px var(--acc);
}
.ind-card h3{
  font-size: 1.06rem;
  line-height: 1.25;
  font-variation-settings: 'wdth' 104;
  color: #FFFFFF;
  transition: color .3s var(--ease);
}
.ind-card:hover h3{ color: color-mix(in srgb, var(--acc) 65%, #FFFFFF); }
.ind-card p{ font-size: .86rem; line-height: 1.65; color: var(--text-2); }

/* Cierre de la sección */
.ind-cta{
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding: 1.3rem 1.6rem;
  border-radius: 16px;
  border: 1px dashed rgba(34,211,238,.4);
  background: linear-gradient(90deg, rgba(34,211,238,.08), rgba(167,139,250,.08));
}
.ind-cta p{ color: var(--text-2); max-width: 70ch; }
.ind-cta strong{ color: #FFFFFF; font-weight: 500; }

/* Entrada escalonada, igual que las otras rejillas */
.ind-grid.reveal{ opacity: 1; transform: none; }
.ind-grid.reveal:not(.in) > *{ opacity: 0; }
.ind-grid.reveal.in > *{
  animation: card-in .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 50ms + 60ms) backwards;
}

@media (max-width: 1040px){
  .ind-top{ grid-template-columns: 1fr; }
  .ind-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px){
  .ind-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-pills{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .ind-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ind-pill::before, .ind-bars i, .ind-grid.reveal > *{ animation: none !important; }
  .ind-card:hover, .ind-pill:hover{ transform: none; }
}

/* ============================================================
   MODELOS DE TRABAJO
   Tres tarjetas de modelo, una comparativa en tabla, la lista de lo
   que no cambia entre modelos y un cierre. El panel de cifras reutiliza
   .ind-stats de Industrias.
   ============================================================ */
.mdl-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mdl-hero .hero-actions{ margin-top: 2rem; }

/* Tarjetas de modelo */
.mdl-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.mdl-card{
  --acc: var(--cyan);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 1.7rem 1.8rem;
  border-radius: 18px;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--acc) 70%, transparent);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.mdl-card:nth-child(2){ --acc: var(--azure); }
.mdl-card:nth-child(3){ --acc: var(--pulse); }
/* Franja de luz arriba */
.mdl-card::before{
  content:"";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  box-shadow: 0 0 18px var(--acc);
}
.mdl-card:hover{
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--acc) 65%, transparent);
  box-shadow: 0 34px 70px -30px color-mix(in srgb, var(--acc) 80%, transparent);
}
.mdl-ico{
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--acc) 75%, transparent);
  transition: transform .4s var(--ease), box-shadow .3s var(--ease);
}
.mdl-ico svg, .mdl-item-ico svg{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mdl-ico svg{ width: 26px; height: 26px; }
.mdl-card:hover .mdl-ico{ transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 32px -2px var(--acc); }
.mdl-tag{
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 75%, #FFFFFF);
  padding: .38rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 36%, transparent);
}
.mdl-card h3{ font-size: var(--step-1); color: #FFFFFF; }
.mdl-card > p{ color: var(--text-2); font-size: .92rem; line-height: 1.7; }
.mdl-card ul{
  list-style: none;
  margin: .2rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--acc) 24%, transparent);
  display: grid;
  gap: .6rem;
  align-content: start;
  flex: 1;
}
.mdl-card li{
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .88rem;
  line-height: 1.5;
  color: #D5DDEE;
}
.mdl-card li::before{
  content:"";
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
  transform: translateY(-2px);
}
.mdl-link{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-top: .4rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc);
  transition: gap .3s var(--ease), text-shadow .3s var(--ease);
}
.mdl-link::after{ content: "\2192"; }
.mdl-card:hover .mdl-link{ gap: .85rem; text-shadow: 0 0 12px var(--acc); }

/* Comparativa: la tabla se desplaza de costado en pantallas chicas */
.mdl-table-wrap{
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,16,36,.6);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.mdl-table{ width: 100%; min-width: 760px; border-collapse: collapse; }
.mdl-table th, .mdl-table td{
  text-align: left;
  vertical-align: top;
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .9rem;
  line-height: 1.5;
  transition: background .25s var(--ease);
}
.mdl-table tr > :nth-child(2){ --acc: var(--cyan); }
.mdl-table tr > :nth-child(3){ --acc: var(--azure); }
.mdl-table tr > :nth-child(4){ --acc: var(--pulse); }
.mdl-table thead th{
  font-family: var(--display);
  font-variation-settings: 'wdth' 104;
  font-weight: 700;
  font-size: 1rem;
  color: var(--acc, var(--text-3));
  background: color-mix(in srgb, var(--acc, #FFFFFF) 8%, transparent);
  border-bottom-color: rgba(255,255,255,.12);
}
.mdl-table thead th:first-child, .mdl-table tbody th{
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mdl-table tbody th{ width: 16%; }
.mdl-table td{ color: #DCE3F1; }
.mdl-table td::before, .mdl-table thead th:not(:first-child)::before{
  content:"";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: .6rem;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
}
.mdl-table tbody tr:hover > *{ background: rgba(255,255,255,.04); }
.mdl-table tbody tr:last-child > *{ border-bottom: 0; }

/* Lo que no cambia entre modelos */
.mdl-promise{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.mdl-promise-copy{
  position: sticky;
  top: 90px;
  display: grid;
  gap: 1.1rem;
}
.mdl-3x{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: .6rem;
  padding: 1.3rem 1.5rem;
  border-radius: 16px;
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.3);
  box-shadow: 0 0 40px -12px rgba(34,211,238,.4);
}
.mdl-3x b{
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: #FFFFFF;
  text-shadow: 0 0 30px rgba(34,211,238,.5);
}
.mdl-3x b em{ font-style: normal; color: var(--cyan); }
.mdl-3x p{ color: var(--text-2); font-size: .92rem; }

.mdl-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.mdl-item{
  --acc: var(--cyan);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem 1rem 1.3rem;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease), box-shadow .3s var(--ease);
}
.mdl-item:nth-child(3n+2){ --acc: var(--azure); }
.mdl-item:nth-child(3n){   --acc: var(--pulse); }
/* Barra de color a la izquierda que crece con el hover */
.mdl-item::before{
  content:"";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 3px;
  background: var(--acc);
  opacity: .5;
  transform: scaleY(.35);
  transition: transform .35s var(--ease), opacity .35s var(--ease), box-shadow .35s var(--ease);
}
.mdl-item:hover{
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  background: color-mix(in srgb, var(--acc) 8%, transparent);
  box-shadow: 0 12px 30px -18px var(--acc);
}
.mdl-item:hover::before{ opacity: 1; transform: scaleY(1); box-shadow: 0 0 10px var(--acc); }
.mdl-item-ico{
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
}
.mdl-item-ico svg{ width: 20px; height: 20px; }
.mdl-item p{ color: #E2E8F4; font-size: .95rem; line-height: 1.45; }
.mdl-item-tag{
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--acc) 70%, #FFFFFF);
  padding: .3rem .65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
}

/* Cierre */
.mdl-cta{
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: 24px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(34,211,238,.18), transparent 70%),
    linear-gradient(135deg, rgba(34,211,238,.08), rgba(167,139,250,.11));
  border: 1px solid rgba(34,211,238,.32);
  box-shadow: 0 0 90px -40px rgba(34,211,238,.6);
}
.mdl-cta h2{ font-size: var(--step-3); }
.mdl-cta .muted{ max-width: 56ch; }
.mdl-cta .btn{ margin-top: .6rem; }

/* Entrada escalonada */
.mdl-grid.reveal, .mdl-list.reveal{ opacity: 1; transform: none; }
.mdl-grid.reveal:not(.in) > *, .mdl-list.reveal:not(.in) > *{ opacity: 0; }
.mdl-grid.reveal.in > *, .mdl-list.reveal.in > *{
  animation: card-in .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 70ms + 60ms) backwards;
}

@media (max-width: 1040px){
  .mdl-hero{ grid-template-columns: 1fr; }
  .mdl-promise{ grid-template-columns: 1fr; }
  .mdl-promise-copy{ position: static; }
}
@media (max-width: 900px){
  .mdl-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .mdl-item{ grid-template-columns: auto minmax(0, 1fr); }
  .mdl-item-tag{ grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce){
  .mdl-grid.reveal > *, .mdl-list.reveal > *{ animation: none !important; }
  .mdl-card:hover, .mdl-item:hover{ transform: none; }
}

/* ============================================================
   MAQUETAS DE PROYECTO
   Vista ilustrativa del producto dentro de cada ficha del
   portafolio. El acento toma el color de marca del proyecto
   (--brand-lt, que el diálogo recibe por data-brand).
   ============================================================ */
.pd-mock{
  --mk-bg:     #0A1222;
  --mk-bg-2:   #0F1A2F;
  --mk-line:   rgba(255,255,255,.09);
  --mk-line-2: rgba(255,255,255,.16);
  --mk-text:   #EEF2F7;
  --mk-text-2: #AEB8C8;
  --mk-text-3: #8491A6;
  --mk-acc:    var(--brand-lt, #45CFB7);
  --mk-amber:  #E0A33B;
  --mk-red:    #E0705F;
  --mk-blue:   #5B8DEF;
}
.pd-mock .mock{
  background: var(--mk-bg);
  color: var(--mk-text);
  border: 1px solid var(--mk-line-2);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  min-width: 0;
}
.pd-mock .mock-bar{
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem;
  background: var(--mk-bg-2);
  border-bottom: 1px solid var(--mk-line);
}
.pd-mock .mock-brand{ display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: .92rem; color: #FFFFFF; white-space: nowrap; }
.pd-mock .mock-brand em{ font-style: normal; color: var(--mk-acc); }
.pd-mock .mock-dot{ width: 12px; height: 12px; border-radius: 4px; flex: none; background: linear-gradient(142deg, var(--brand, #14B8A6), var(--brand-2, #0F766E)); }
.pd-mock .mock-crumb{ font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--mk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mock .mock-tag{
  margin-left: auto;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mk-text-3);
  border: 1px dashed var(--mk-line-2);
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pd-mock .mock-body{ padding: 1rem; display: grid; gap: .8rem; }
.pd-mock .mock-kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.pd-mock .kpi{ padding: .65rem .7rem .6rem; border-radius: 9px; background: var(--mk-bg-2); border: 1px solid var(--mk-line); display: grid; gap: .45rem; min-width: 0; }
.pd-mock .kpi span{ font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mock .kpi svg{ width: 100%; height: 26px; display: block; }
.pd-mock .spark{ fill: none; stroke: var(--mk-acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-mock .spark.amber{ stroke: var(--mk-amber); }
.pd-mock .spark.blue{ stroke: var(--mk-blue); }
.pd-mock .area{ fill: color-mix(in srgb, var(--mk-acc) 14%, transparent); }
.pd-mock .bar{ fill: rgba(255,255,255,.14); }
.pd-mock .bar.on{ fill: var(--mk-acc); }

.pd-mock .mock-table{ border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; }
.pd-mock .mrow{
  display: grid;
  grid-template-columns: 1.15fr 1.05fr 1.1fr 1.1fr .95fr;
  gap: .6rem;
  align-items: center;
  padding: .55rem .75rem;
  border-top: 1px solid var(--mk-line);
  white-space: nowrap;
}
.pd-mock .mrow:first-child{ border-top: 0; }
.pd-mock .mrow.head{ background: var(--mk-bg-2); font-family: var(--mono); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--mk-text-3); }
.pd-mock .mrow > *{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-mock .case-id{ color: #FFFFFF; font-weight: 500; }
.pd-mock .dim{ color: var(--mk-text-2); }
.pd-mock .action{ color: #FFFFFF; }
.pd-mock .action::before{ content: "\2192  "; color: var(--mk-acc); }
.pd-mock .prio{ font-family: var(--mono); font-size: .68rem; color: var(--mk-acc); }
.pd-mock .pill{ display: inline-block; font-style: normal; padding: .12rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 500; border: 1px solid; }
.pd-mock .pill.low{ color: var(--mk-acc); border-color: color-mix(in srgb, var(--mk-acc) 40%, transparent); background: color-mix(in srgb, var(--mk-acc) 9%, transparent); }
.pd-mock .pill.mid{ color: var(--mk-amber); border-color: rgba(224,163,59,.35); background: rgba(224,163,59,.08); }
.pd-mock .pill.high{ color: var(--mk-red); border-color: rgba(224,112,95,.35); background: rgba(224,112,95,.08); }
.pd-mock .mbar{ display: flex; align-items: center; gap: .45rem; }
.pd-mock .mbar svg{ flex: 1; min-width: 24px; height: 4px; }
.pd-mock .mbar .t{ fill: rgba(255,255,255,.1); }
.pd-mock .mbar .v{ fill: var(--mk-acc); }
.pd-mock .mbar .v.amber{ fill: var(--mk-amber); }
.pd-mock .mbar .v.red{ fill: var(--mk-red); }
.pd-mock .mbar b{ font-weight: 500; font-size: .72rem; color: var(--mk-text); font-variant-numeric: tabular-nums; }
/* Marcas cálidas: la barra positiva no puede confundirse con la de advertencia */
[data-brand="codice"] .pd-mock .mbar .v:not(.amber):not(.red),
[data-brand="arbitrium"] .pd-mock .mbar .v:not(.amber):not(.red),
[data-brand="mercurio"] .pd-mock .mbar .v:not(.amber):not(.red){ fill: #45CFB7; }

.pd-mock .mock-bottom{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .6rem; }
.pd-mock .copilot{
  padding: .75rem .85rem;
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mk-acc) 10%, transparent), color-mix(in srgb, var(--mk-acc) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--mk-acc) 30%, transparent);
  display: grid;
  gap: .5rem;
}
.pd-mock .copilot p{ margin: 0; font-size: .78rem; line-height: 1.5; }
.pd-mock .copilot-h{ font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-acc); }
.pd-mock .copilot-q{ color: #FFFFFF; font-weight: 500; }
.pd-mock .copilot-a{ color: var(--mk-text-2); }
.pd-mock .copilot-a b{ color: var(--mk-text); font-weight: 500; }
.pd-mock .strategies{ display: grid; gap: .45rem; align-content: start; }
.pd-mock .strategy{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border-radius: 8px; background: var(--mk-bg-2); border: 1px solid var(--mk-line); color: var(--mk-text-2); }
.pd-mock .strategy b{ color: var(--mk-text); font-weight: 500; }
.pd-mock .strategy small{ font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-text-3); white-space: nowrap; }
.pd-mock-note{ margin-top: .6rem; font-size: .76rem; color: #7C87A5; }

@media (max-width: 760px){
  .pd-mock .mrow{ grid-template-columns: 1.1fr 1.1fr 1.1fr .9fr; }
  .pd-mock .mrow > :nth-child(2){ display: none; }
  .pd-mock .mock-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-mock .mock-bottom{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .pd-mock .mrow{ grid-template-columns: 1fr 1fr .9fr; }
  .pd-mock .mrow > :nth-child(4){ display: none; }
  .pd-mock .mrow:not(.head){ white-space: normal; align-items: start; line-height: 1.35; }
  .pd-mock .mrow:not(.head) > *{ overflow: visible; overflow-wrap: anywhere; }
}

/* ============================================================
   CAPA PERLADA
   El sitio pasa de la sala oscura a un papel nacarado sin perder la
   capa futurista: tarjetas de vidrio con borde en degradé, halos de
   color, aurora, retícula, visor HUD y botones de neón siguen igual.
   Cambia lo que se apoyaba en el negro: los rellenos blancos
   translúcidos pasan a vidrio esmerilado claro, el texto claro pasa a
   tinta y las mezclas de color con blanco pasan a mezclarse con tinta.
   Va al final a propósito: pisa lo anterior sin tener que tocarlo.
   El panel de código y la maqueta de producto siguen oscuros: son
   pantallas dentro de la página.
   ============================================================ */

/* ---------- Fondo: nácar con reflejos ---------- */
body{ background: var(--paper); }
body::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(8,147,181,.09) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(124,92,230,.07) 0 1px, transparent 1px 96px);
}
/* La aurora sobre perla hace el tornasol del nácar */
.aurora i{ opacity: .5; }
html{ scrollbar-color: #9FB9C4 var(--paper); }
::selection{ background: #A5F3FC; color: #0E1530; }

/* ---------- Cabecera ---------- */
.topbar{ background: rgba(250,249,246,.66); }
.topbar.stuck{ background: rgba(250,249,246,.9); }
.brand-logo{ filter: drop-shadow(0 0 10px rgba(34,211,238,.25)); }
.nav a:hover, .nav a[aria-current="page"]{ color: var(--cyan); text-shadow: 0 0 12px rgba(34,211,238,.35); }
.submenu{ box-shadow: 0 26px 54px -26px rgba(24,32,64,.35); }

/* ---------- Títulos: tinta con brillo de color ---------- */
.eyebrow, .folio-band .eyebrow{ color: var(--cyan); text-shadow: 0 0 14px rgba(34,211,238,.35); }
.hero h1{
  background: linear-gradient(180deg, #0E1530 45%, #0B5E73 125%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 0 30px rgba(34,211,238,.18));
}
h2, .page-hero h1{
  background: linear-gradient(95deg, #0E1530 0%, #16244A 38%, #0B7F9C 66%, #6A4FD8 86%, #C23C86 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 0 24px rgba(34,211,238,.12));
}

/* ---------- Botones: los mismos neones de siempre ---------- */
.btn{
  color: #06121A;
  border-color: var(--neon-signal);
  background: linear-gradient(110deg, var(--neon-signal) 0%, var(--neon-cyan) 50%, var(--neon-azure) 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 26px -4px rgba(52,207,190,.55), 0 8px 22px -12px rgba(13,139,255,.5);
}
.btn:hover{
  background-position: 100% 0;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 40px rgba(34,211,238,.5), 0 10px 50px -18px rgba(167,139,250,.8);
}
.nav .btn, .nav .btn:hover{ color: #06121A; }
.btn:disabled{ background: var(--neon-signal); }
.btn-ghost{
  color: var(--text);
  background: rgba(255,255,255,.55);
  border-color: rgba(8,147,181,.45);
  box-shadow: 0 0 22px -8px rgba(34,211,238,.6);
}
.btn-ghost::before{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }
.btn-ghost:hover{
  color: var(--text);
  background: rgba(255,255,255,.85);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 28px -6px rgba(34,211,238,.55);
}

/* ---------- Héroe ---------- */
.hero-side{
  background: linear-gradient(160deg, rgba(34,211,238,.12), rgba(255,255,255,.55) 50%, rgba(167,139,250,.12));
}
.ticker{
  background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(13,139,255,.08), rgba(167,139,250,.12), rgba(244,114,182,.10));
  border-block-color: rgba(8,147,181,.25);
}
.ticker-track span{ color: var(--text-2); }

/* ---------- Tarjetas: vidrio esmerilado claro ---------- */
.pillar, .case, .rel-card, .folio-card{
  --c-line: color-mix(in srgb, var(--acc) 24%, rgba(24,32,64,.08));
  --c-band: rgba(255,255,255,.4);
  --c-fill: rgba(255,255,255,.75);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 58%),
    linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.55) 60%, color-mix(in srgb, var(--acc-2, var(--acc)) 10%, transparent));
  border-color: color-mix(in srgb, var(--acc) 40%, transparent);
  box-shadow: 0 26px 60px -36px color-mix(in srgb, var(--acc) 65%, transparent), 0 1px 0 rgba(255,255,255,.9) inset;
}
.pillar:hover, .case:hover, .rel-card:hover, .folio-card:hover,
.pillar:focus-within, .case:focus-within, .rel-card:focus-within, .folio-card:focus-within{
  --c-fg-2: var(--text-2);
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--acc) 12%, #FFFFFF), rgba(255,255,255,.75) 55%, color-mix(in srgb, var(--acc-2, var(--acc)) 12%, transparent));
  border-color: color-mix(in srgb, var(--acc) 65%, transparent);
  box-shadow: 0 24px 70px -18px color-mix(in srgb, var(--acc) 42%, transparent);
}
.pillar > .illus{
  background:
    radial-gradient(80% 130% at 25% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%),
    radial-gradient(60% 120% at 90% 100%, color-mix(in srgb, var(--acc-2) 12%, transparent), transparent 70%),
    rgba(255,255,255,.45);
}
.illus .neuron{ fill: #FFFFFF; }
.case .tag, .folio-card .tag{
  color: color-mix(in srgb, var(--acc) 75%, #0E1530);
  background: color-mix(in srgb, var(--acc) 10%, rgba(255,255,255,.6));
}
.rel-card h3{ color: var(--text); }

/* ---------- Proceso y stack ---------- */
.step{ background: linear-gradient(180deg, color-mix(in srgb, var(--step-c) 13%, #FFFFFF), rgba(255,255,255,.55) 75%); }
.stack-col{ background: linear-gradient(180deg, color-mix(in srgb, var(--col-c) 11%, #FFFFFF), rgba(255,255,255,.55) 75%); }
.step::before{ text-shadow: 0 0 22px color-mix(in srgb, var(--step-c) 45%, transparent); }
.stack-col h3{ text-shadow: 0 0 14px color-mix(in srgb, var(--col-c) 35%, transparent); }
.codepanel{ box-shadow: -34px 30px 80px -50px rgba(167,139,250,.6), 34px 30px 80px -50px rgba(34,211,238,.6); }

/* ---------- Contacto ---------- */
.contact{
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(167,139,250,.16), transparent 58%),
    radial-gradient(100% 120% at 92% 100%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(60% 70% at 100% 0%, rgba(244,114,182,.10), transparent 65%),
    rgba(255,255,255,.6);
}
.field input, .field select, .field textarea{
  background: rgba(255,255,255,.75);
  border-color: rgba(24,32,64,.16);
}
.field input:focus, .field select:focus, .field textarea:focus{ background: #FFFFFF; }

/* ---------- Visor HUD y pie ---------- */
.hero-side::after, .codepanel::after, .contact::after, .spec::after{ --hc: rgba(8,147,181,.85); }
.contact::after{ --hc: rgba(124,92,230,.85); }
.spec > div{ background: rgba(255,255,255,.7); }

/* ---------- Portafolio ---------- */
.folio-band{
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(236,240,246,.55));
}
.folio-band::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(8,147,181,.09) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg,  rgba(8,147,181,.07) 0 1px, transparent 1px 74px);
}
.folio-band::after{ opacity: .6; }
.folio-band h2{ color: var(--text); }
.folio-band .muted{ color: var(--text-2); }

.chip{
  color: color-mix(in srgb, var(--chip) 72%, #0E1530);
  border-color: color-mix(in srgb, var(--chip) 40%, transparent);
  background: color-mix(in srgb, var(--chip) 8%, rgba(255,255,255,.7));
}
.chip:hover{ color: var(--text); }
.chip[aria-pressed="true"]{
  color: #FFFFFF;
  background: linear-gradient(120deg, var(--chip), color-mix(in srgb, var(--chip) 70%, #0E1530));
}
.folio-count{ color: var(--text-3); }

.folio-card{
  --c-fg:   var(--text);
  --c-fg-2: var(--text-2);
  --c-fg-3: var(--text-3);
}
.folio-card .folio-viz{
  border-color: color-mix(in srgb, var(--acc) 30%, transparent);
  background: linear-gradient(160deg, #FFFFFF, #F1EFEA);
}
.folio-viz::before{ opacity: .22; }
.folio-card:hover .folio-viz::before{ opacity: .38; }
.folio-card:hover .folio-viz{ border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.folio-word{ color: var(--text); }
.folio-word em{ color: var(--brand-2); }
.folio-open{
  color: var(--text);
  background: linear-gradient(120deg, color-mix(in srgb, var(--acc) 20%, #FFFFFF), color-mix(in srgb, var(--acc) 6%, #FFFFFF));
}
.folio-empty{ color: var(--text-2); border-color: var(--line); }

/* Ficha de proyecto */
.pdlg{
  background:
    radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--brand, #22D3EE) 10%, transparent), transparent 70%),
    var(--paper-2);
  color: var(--text);
  box-shadow: 0 0 90px -30px var(--brand, #22D3EE), 0 40px 80px -40px rgba(24,32,64,.45);
}
.pdlg::backdrop{ background: rgba(40,46,70,.45); }
.pdlg-close{ color: var(--text); background: rgba(255,255,255,.9); border-color: var(--line); }
.pdlg-close:hover{ background: #FFFFFF; }
.pdlg-body .folio-viz{ background: linear-gradient(160deg, #FFFFFF, #F1EFEA); border-bottom-color: var(--line); }
.pd-rubro{ color: var(--text-3); }
.pd h2{ color: var(--text); }
.pd-lede, .pd-sec > p, .pd-cap p, .pd-stack li{ color: var(--text-2); }
.pd-spec, .pd-caps{ background: var(--line); border-color: var(--line); }
.pd-spec > div, .pd-cap{ background: rgba(255,255,255,.8); }
.pd-spec dt{ color: var(--text-3); }
.pd-spec dd{ color: var(--text); }
.pd-sec h3{ color: var(--text); border-bottom-color: var(--line); }
.pd-cap h4, .pd-stack h4{ color: var(--brand-2, var(--signal)); }
.pd-stack h4{ border-bottom-color: var(--line); }
.pd-stack li::before{ background: var(--brand, var(--signal)); }
.pd-mock-note{ color: var(--text-3); }

/* ---------- Industrias ---------- */
.ind-pill{
  color: var(--text);
  background: color-mix(in srgb, var(--acc) 10%, rgba(255,255,255,.7));
}
.ind-stats{
  background:
    radial-gradient(90% 60% at 60% 0%, rgba(34,211,238,.18), transparent 70%),
    radial-gradient(70% 60% at 100% 100%, rgba(167,139,250,.16), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.88), rgba(246,244,240,.8));
  border-color: rgba(8,147,181,.4);
  box-shadow: 0 0 80px -24px rgba(34,211,238,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
.ind-big{ color: var(--text); text-shadow: 0 0 40px rgba(34,211,238,.3); }
.ind-mini{ border-top-color: var(--line); }
.ind-mini b{ color: var(--text); }
.ind-mini p:nth-child(2) b{ color: var(--azure); }
.ind-bars{ border-top-color: var(--line-soft); }
.ind-card{
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
  box-shadow: 0 20px 46px -30px color-mix(in srgb, var(--acc) 55%, transparent);
}
.ind-card:hover{
  background:
    radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.65));
}
.ind-card h3{ color: var(--text); }
.ind-card:hover h3{ color: color-mix(in srgb, var(--acc) 80%, #0E1530); }
.ind-cta{ background: linear-gradient(90deg, rgba(34,211,238,.10), rgba(255,255,255,.5), rgba(167,139,250,.10)); }
.ind-cta strong{ color: var(--text); }

/* ---------- Modelos ---------- */
.mdl-card{
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
}
.mdl-tag{ color: color-mix(in srgb, var(--acc) 80%, #0E1530); }
.mdl-card h3{ color: var(--text); }
.mdl-card li{ color: var(--text-2); }
.mdl-table-wrap{ background: rgba(255,255,255,.7); border-color: var(--line); }
.mdl-table th, .mdl-table td{ border-bottom-color: var(--line-soft); }
.mdl-table thead th{ background: color-mix(in srgb, var(--acc, #0E1530) 8%, transparent); border-bottom-color: var(--line); }
.mdl-table td{ color: var(--text-2); }
.mdl-table tbody tr:hover > *{ background: rgba(34,211,238,.06); }
.mdl-3x{ background: rgba(34,211,238,.10); border-color: rgba(8,147,181,.3); }
.mdl-3x b{ color: var(--text); text-shadow: 0 0 30px rgba(34,211,238,.35); }
.mdl-item{ background: rgba(255,255,255,.65); border-color: var(--line-soft); }
.mdl-item:hover{ background: color-mix(in srgb, var(--acc) 8%, #FFFFFF); }
.mdl-item p{ color: var(--text); }
.mdl-item-tag{ color: color-mix(in srgb, var(--acc) 80%, #0E1530); }
.mdl-cta{
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(34,211,238,.18), transparent 70%),
    linear-gradient(135deg, rgba(34,211,238,.10), rgba(255,255,255,.55), rgba(167,139,250,.14));
  border-color: rgba(8,147,181,.32);
}

/* ---------- Maqueta de producto: pantalla oscura dentro de la ficha ---------- */
.pd-mock .mock{ box-shadow: 0 24px 50px -30px rgba(24,32,64,.55); }

/* ============================================================
   SERVICIOS — TRES FORMAS DE TENER TU SOFTWARE
   A medida, híbrido y prediseñado. Cada tarjeta tiene su acento
   (--acc) y todo se deriva de él: el ícono, el filo del borde, el
   halo, las barras y la notebook ilustrada. Las barras se llenan
   cuando la rejilla entra en pantalla.
   ============================================================ */
.offers-head{
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
  max-width: 1120px;
  margin: 0 auto clamp(2.6rem, 5vw, 4rem);
}
.offers-head .eyebrow::after{
  content:"";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--signal), var(--cyan), var(--pulse));
  flex: none;
}
.offers-head h2{
  font-size: clamp(2.2rem, 1.5rem + 3.1vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #0E1530, #1B2A55);
  -webkit-background-clip: text;
          background-clip: text;
}
.offers-head h2 em{
  display: block;
  font-style: normal;
  background: linear-gradient(95deg, var(--signal), var(--cyan) 35%, var(--azure) 65%, var(--pulse));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.offers-head .lede{ max-width: 56ch; }

.offers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.offer{
  --acc: var(--signal);
  --acc-2: var(--cyan);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.4rem, 2.2vw, 1.9rem) 0;
  border-radius: 18px;
  color: var(--text);
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.85), rgba(255,255,255,.55) 55%, color-mix(in srgb, var(--acc) 12%, rgba(255,255,255,.4)));
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--acc) 38%, transparent);
  box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--acc) 70%, transparent), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.offer[data-offer="hybrid"]{ --acc: var(--azure); --acc-2: var(--cyan); }
.offer[data-offer="ready"]{  --acc: var(--pulse); --acc-2: var(--magenta); }

/* Borde en degradé, igual que el resto de las tarjetas */
.offer::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--acc), transparent 38%, transparent 62%, var(--acc-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .8;
}
/* Luz que sigue al cursor (app.js pone --mx / --my) */
.offer::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 20%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.offer:hover, .offer:focus-within{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--acc) 62%, transparent);
  box-shadow: 0 34px 70px -28px color-mix(in srgb, var(--acc) 60%, transparent);
}
.offer:hover::after{ opacity: 1; }

.offer-head{ display: flex; align-items: center; gap: 1rem; }
.offer-ico{
  width: 64px; height: 64px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #FFFFFF;
  background: linear-gradient(142deg, color-mix(in srgb, var(--acc) 80%, #FFFFFF), var(--acc) 55%, color-mix(in srgb, var(--acc) 70%, #0E1530));
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc) 12%, transparent),
              0 12px 28px -8px color-mix(in srgb, var(--acc) 80%, transparent),
              inset 0 1px 0 rgba(255,255,255,.35);
  animation: icon-float 3s ease-in-out calc(var(--i, 0) * -500ms) infinite;
}
.offer-ico svg{ width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.offer h3{ font-size: 1.3rem; line-height: 1.12; color: var(--text); }
.offer h3 span{ display: block; color: color-mix(in srgb, var(--acc) 85%, #0E1530); }

.offer-desc{
  position: relative;
  padding-top: 1.15rem;
  font-size: .94rem;
  line-height: 1.65;
  color: var(--text-2);
}
.offer-desc::before{
  content:"";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acc), transparent);
  box-shadow: 0 0 10px var(--acc);
  transition: width .5s var(--ease);
}
.offer:hover .offer-desc::before{ width: 96px; }

.offer-key{
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .6rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-2);
}
.offer-key::before{
  content:"";
  width: 18px; height: 18px;
  margin-top: .12rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--acc) 85%, #0E1530);
  background: no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230E1530' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.offer-key strong{ font-weight: 600; color: color-mix(in srgb, var(--acc) 85%, #0E1530); }

/* Barras de presupuesto, tiempo y personalización */
.offer-meters{
  list-style: none;
  margin: .1rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.offer-meters li{
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text);
}
.offer-meters i{
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--acc) 16%, rgba(24,32,64,.06));
  overflow: hidden;
}
.offer-meters i::after{
  content:"";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v, .5) * 100%);
  border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 75%, #FFFFFF), var(--acc));
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 70%, transparent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.22,.68,.28,1);
}
.offer-meters li:nth-child(2) i::after{ transition-delay: .12s; }
.offer-meters li:nth-child(3) i::after{ transition-delay: .24s; }
.offers.in .offer-meters i::after{ transform: scaleX(1); }

/* Notebook ilustrada */
.offer-art{
  margin: auto calc(-1 * clamp(1.4rem, 2.2vw, 1.9rem)) 0;
  padding-top: .6rem;
}
.offer-art svg{ display: block; width: 100%; height: auto; overflow: visible; }
.offer-art .laptop{ transition: transform .5s var(--ease); }
.offer:hover .offer-art .laptop{ transform: translateY(-5px); }
.offer-art .frame{ fill: #1A2138; }
.offer-art .screen{ fill: #FFFFFF; }
.offer-art .side{ fill: color-mix(in srgb, var(--acc) 75%, #0E1530); }
.offer-art .side-dot{ fill: rgba(255,255,255,.7); }
.offer-art .w{ fill: #F6F7FB; stroke: #E6E9F2; stroke-width: .8; }
.offer-art .soft{ fill: color-mix(in srgb, var(--acc) 30%, #DDE2EE); }
.offer-art .bars rect{ fill: var(--acc); }
.offer-art .bars rect:nth-child(odd){ fill: color-mix(in srgb, var(--acc) 55%, #FFFFFF); }
.offer-art .line{ fill: none; stroke: color-mix(in srgb, var(--acc) 50%, #FFFFFF); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.offer-art .line.strong{ stroke: var(--acc); stroke-width: 1.8; }
.offer-art .donut-t{ fill: none; stroke: color-mix(in srgb, var(--acc) 18%, #FFFFFF); stroke-width: 5; }
.offer-art .donut{ fill: none; stroke: var(--acc); stroke-width: 5; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.offer-art .base{ fill: #C9CEDA; }
.offer-art .notch{ fill: #A9B0C0; }
.offer-art .dots circle{ fill: color-mix(in srgb, var(--acc) 55%, transparent); }
.offer-art .link{ fill: none; stroke: color-mix(in srgb, var(--acc) 60%, transparent); stroke-width: 1.2; stroke-dasharray: 3 4; animation: wire 2.6s linear infinite; }
.offer-art .badge{ fill: var(--acc); filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--acc) 55%, transparent)); }
.offer-art .badge-g{ fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offer-art .rocket .badge-g{ stroke: color-mix(in srgb, var(--acc) 80%, #0E1530); stroke-width: 1.5; }
.offer-art .float{ animation: icon-float 3.4s ease-in-out infinite; }
.offer[data-offer="hybrid"] .offer-art .float{ animation-delay: -1.1s; }
.offer[data-offer="ready"] .offer-art .float{ animation-delay: -2.2s; }

/* Entrada escalonada, igual que las otras rejillas */
.offers.reveal{ opacity: 1; transform: none; }
.offers.reveal:not(.in) > *{ opacity: 0; }
.offers.reveal.in > *{
  animation: card-in .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 90ms + 80ms) backwards;
}

@media (max-width: 1040px){
  .offers{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 420px){
  .offer-head{ gap: .8rem; }
  .offer-ico{ width: 54px; height: 54px; }
  .offer-meters li{ grid-template-columns: 6.2rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  .offers.reveal > *, .offer-ico, .offer-art .float, .offer-art .link{ animation: none !important; }
  .offer:hover, .offer:hover .offer-art .laptop{ transform: none; }
  .offer-meters i::after{ transform: scaleX(1); transition: none; }
}

/* ============================================================
   CINTA DE PROYECTOS
   Los logos del portafolio, chicos, desfilando como la cinta de
   tecnologías del héroe. Cada uno es su marca real (mismo símbolo y
   colores que en portafolio.html) y abre su ficha. La lista va dos
   veces en el HTML y la pista se corre la mitad: el bucle no salta.
   Al pasar el mouse la cinta se frena para poder elegir.
   ============================================================ */
.logos-band{
  position: relative;
  padding-block: clamp(3rem, 7vh, 5rem) clamp(1rem, 3vh, 2rem);
}
.logos-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  margin-bottom: 1.6rem;
}
.logos-more{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: gap .3s var(--ease), text-shadow .3s var(--ease);
}
.logos-more::after{ content: "\2192"; }
.logos-more:hover{ gap: .85rem; text-shadow: 0 0 12px rgba(34,211,238,.45); }

.logo-ticker{
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid rgba(8,147,181,.22);
  background: linear-gradient(90deg, rgba(34,211,238,.08), rgba(255,255,255,.45) 30%, rgba(255,255,255,.45) 70%, rgba(167,139,250,.10));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track{
  display: flex;
  width: max-content;
  animation: slide 75s linear infinite;
}
.logo-ticker:hover .logo-track, .logo-ticker:focus-within .logo-track{ animation-play-state: paused; }
.logo-set{
  list-style: none;
  margin: 0;
  padding: 0 .9rem 0 0;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.logo-chip{
  display: flex;
  align-items: center;
  padding: .6rem 1.15rem;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--brand) 80%, transparent);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.logo-chip:hover, .logo-chip:focus-visible{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 65%, transparent);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 75%, transparent);
}
.logo-chip:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

/* El logo del portafolio, en tamaño cinta */
.logo-chip .folio-logo{ gap: .5rem; }
.logo-chip .folio-tile{ width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 5px 12px -6px var(--brand), inset 0 1px 0 rgba(255,255,255,.28); }
.logo-chip .folio-tile.round{ border-radius: 50%; }
.logo-chip .folio-glyph{ width: 16px; height: 16px; }
.logo-chip .folio-free{ width: 28px; height: 28px; }
.logo-chip .folio-word{ font-size: .98rem; }
.logo-chip .folio-word.caps{ font-size: .74rem; }
.logo-chip .folio-word.thin{ font-size: .94rem; }

@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; }
  .logo-ticker{ overflow-x: auto; }
}

/* ============================================================
   SOLUCIONES
   Cinco tarjetas en dos filas: las dos primeras anchas y las tres
   siguientes en tercios. Reusan la tarjeta de vidrio de .case; acá
   solo cambian la rejilla y el orden de los acentos.
   ============================================================ */
.sol-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sol-grid .case{ grid-column: span 2; min-height: 250px; justify-content: flex-start; }
.sol-grid .case:nth-child(-n+2){ grid-column: span 3; }
.sol-grid .case:nth-child(1){ --acc: var(--signal); --acc-2: var(--cyan); }
.sol-grid .case:nth-child(2){ --acc: var(--pulse);  --acc-2: var(--magenta); }
.sol-grid .case:nth-child(3){ --acc: var(--azure);  --acc-2: var(--cyan); }
.sol-grid .case:nth-child(4){ --acc: var(--signal); --acc-2: var(--lime); }
.sol-grid .case:nth-child(5){ --acc: var(--pulse);  --acc-2: var(--azure); }
.sol-grid .case-glyph{ width: 48px; height: 48px; margin-bottom: 1.2rem; }
.sol-grid .case-glyph svg{ width: 22px; height: 22px; }
.sol-grid .case h3{ font-size: 1.22rem; }
.sol-grid .case p{ flex: 0 1 auto; font-size: .95rem; line-height: 1.6; max-width: 46ch; }
@media (max-width: 1040px){
  .sol-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-grid .case, .sol-grid .case:nth-child(-n+2){ grid-column: span 1; min-height: 0; }
  .sol-grid .case:nth-child(5){ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .sol-grid{ grid-template-columns: 1fr; }
  .sol-grid .case:nth-child(5){ grid-column: auto; }
}