@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   IRON PIXEL — DESIGN TOKENS
   Fuente de verdad de valores. Cargar ANTES que components.css.
   Import de fuentes (Google Fonts):
   Space Grotesk (display) · Inter (body) · Space Mono (mono/labels)
   ========================================================================== */

:root {
  /* ---------- COLOR · superficies ---------- */
  --ink:      #090c1a;   /* fondo base de la página */
  --ink-2:    #0d1124;   /* tarjetas, footer, superficies */
  --ink-3:    #131936;   /* superficie en hover */
  --panel:    #111633;   /* paneles alternativos */

  /* ---------- COLOR · líneas ---------- */
  --line:     rgba(255,255,255,.07);  /* hairlines / divisores */
  --line-2:   rgba(255,255,255,.12);  /* bordes visibles */

  /* ---------- COLOR · marca ---------- */
  --navy:     #243395;
  --navy-2:   #3346c9;

  /* ---------- COLOR · texto ---------- */
  --txt:      #eaeefb;
  --txt-dim:  #9aa3c7;
  --txt-mute: #616a94;

  /* ---------- COLOR · acentos ---------- */
  --accent:     #8ccf3f;  /* lima — acento primario  (rgb 140 207 63) */
  --accent-2:   #a3e057;
  --accent-ink: #0a0d1c;  /* texto sobre fondo lima */
  --teal:       #22b8c4;
  --sky:        #18a0f0;
  --amber:      #f8a840;  /* (rgb 248 168 64) */
  --orange:     #f09018;

  /* ---------- COLOR · paleta de píxeles ----------
     Bloques del hero y emblema del logo. Usar como sistema, no sueltos. */
  --px-1:#80c040; --px-2:#088840; --px-3:#30b048; --px-4:#006038;
  --px-5:#20b078; --px-6:#08a0a0; --px-7:#18a0f0; --px-8:#d0d820;
  --px-9:#f0e830; --px-10:#f8a840; --px-11:#f09018;

  /* ---------- COLOR · acento por área/taller ----------
     Convención: cada área del negocio tiene un color fijo. */
  --c-software:    var(--sky);     /* Kulün Hub */
  --c-diseno:      var(--accent);  /* RitualSoft */
  --c-objetos:     var(--amber);   /* Makoto Dezain */
  --c-audiovisual: var(--teal);

  /* ---------- TIPOGRAFÍA · familias ---------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* ---------- TIPOGRAFÍA · escala (fluida) ---------- */
  --fs-display-xl: clamp(2.3rem, 6vw, 4.6rem); /* @kind font */    /* hero H1 */
  --fs-display-l:  clamp(1.9rem, 4.5vw, 3.1rem); /* @kind font */  /* títulos de sección / nombres grandes */
  --fs-display-m:  clamp(1.6rem, 3.4vw, 2.5rem); /* @kind font */  /* frases lead / banda destacada */
  --fs-h3:         1.4rem;    /* nombres (tarjetas de equipo) */
  --fs-lg:         1.25rem;   /* títulos de tarjeta */
  --fs-body:       1rem;
  --fs-sm:         0.9rem;    /* ~14.5px, texto secundario */
  --fs-label:      0.78rem;   /* ~12.5px, etiquetas mono */
  --fs-xs:         0.72rem;   /* ~11.5px, chips */

  /* ---------- TIPOGRAFÍA · tracking / line-height ---------- */
  --tracking-label:  .14em;   /* eyebrows / labels mono en mayúsculas */
  --tracking-wide:   .06em;
  --tracking-tight: -.02em;   /* titulares display */
  --lh-tight: 1.05; /* @kind other */
  --lh-body:  1.6; /* @kind other */

  /* ---------- ESPACIADO ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --pad:       clamp(20px, 5vw, 72px);   /* padding lateral del contenedor */
  --maxw:      1180px;                    /* ancho máximo de contenido */
  --section-y: clamp(80px, 12vh, 150px); /* @kind spacing */ /* padding vertical de secciones */

  /* ---------- RADIOS ---------- */
  --radius:    3px;   /* casi recto: lenguaje de píxel */
  --radius-pill: 20px;

  /* ---------- SOMBRAS (DURAS, sin blur) ----------
     Firma del sistema: offset sólido, nunca desenfoque.
     Patrón: <x> <y> 0 rgba(<color-acento>, .25–.4). */
  --shadow-hard:        6px 6px 0 rgba(140,207,63,.28);  /* lima, reposo */
  --shadow-hard-hover:  8px 8px 0 rgba(140,207,63,.40);  /* lima, hover */
  --shadow-hard-amber:       6px 6px 0 rgba(248,168,64,.25);
  --shadow-hard-amber-hover: 8px 8px 0 rgba(248,168,64,.40);
  --shadow-soft: 0 40px 80px -30px rgba(0,0,0,.7);       /* profundidad (mockups) */

  /* ---------- MOVIMIENTO ---------- */
  --ease-out: cubic-bezier(.22,1,.36,1); /* @kind other */
  --dur-fast: .12s; /* @kind other */
  --dur:      .25s; /* @kind other */
  --dur-slow: .7s; /* @kind other */

  /* ---------- Z-INDEX ---------- */
  --z-nav: 50; /* @kind other */
}

/* ==========================================================================
   IRON PIXEL — COMPONENTS & UTILITIES
   Requiere tokens.css cargado antes.
   Estilo: oscuro, técnico, "píxel": sombras duras (offset, sin blur),
   etiquetas en monoespaciada, esquinas casi rectas, motivos 3×3.
   ========================================================================== */

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--txt);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
::selection{ background: var(--accent); color: var(--accent-ink); }

/* ---------- Layout ---------- */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.section{
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}
.section--divided{ border-top: 1px solid var(--line); }

/* ---------- Tipografía helpers ---------- */
.mono{ font-family: var(--font-mono); }
.display-xl{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.display-l { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.display-m { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-m);  line-height: 1.2;            letter-spacing: -.015em;             margin: 0; }
.lead{ color: var(--txt-dim); font-size: var(--fs-sm); }

/* ---------- Eyebrow (mono, acento, con cuadrito) ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before{ content: ""; width: 9px; height: 9px; background: var(--accent); display: block; }

/* ---------- Section label (numerada, con hairline) ---------- */
.sec-label{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--txt-mute);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-5);
}
.sec-label .idx{ color: var(--accent); }         /* el número */
.sec-label::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Botones (sombra dura) ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  background: var(--accent); color: var(--accent-ink);
  padding: 14px 26px; border-radius: var(--radius); border: 0; cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-hover); }
.btn:active{ transform: translate(3px,3px);  box-shadow: 2px 2px 0 rgba(140,207,63,.35); }
.btn .sq{ width: 8px; height: 8px; background: var(--accent-ink); }  /* cuadrito decorativo */

.btn-ghost{ background: transparent; color: var(--txt); border: 1px solid var(--line-2); box-shadow: none; }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(140,207,63,.18); }

.btn-amber{ background: var(--amber); color: #1a1205; box-shadow: var(--shadow-hard-amber); }
.btn-amber:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-amber-hover); }
.btn-amber .sq{ background: #1a1205; }

/* CTA compacto (nav) */
.cta-sm{
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .03em; background: var(--accent); color: var(--accent-ink);
  padding: 9px 16px; border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(140,207,63,.25);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.cta-sm:hover{ transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(140,207,63,.35); }

/* ---------- Card ---------- */
.card{
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  overflow: hidden;
  transition: transform var(--dur) ease, border-color var(--dur) ease, background var(--dur) ease;
}
.card:hover{ transform: translateY(-4px); border-color: var(--line-2); background: var(--ink-3); }
.card h3{ font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); margin: 0 0 12px; letter-spacing: -.01em; }
.card p{ color: var(--txt-dim); font-size: var(--fs-sm); margin: 0; }
.card .no{ position: absolute; top: 24px; right: 26px; font-family: var(--font-mono); font-size: 12px; color: var(--txt-mute); }
/* barra de acento inferior que crece en hover */
.card::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); transition: width .35s ease; }
.card:hover::after{ width: 100%; }

/* Card con acento por área: <article class="card card--accent" style="--c:var(--sky)"> */
.card--accent{ border-top: 3px solid var(--c, var(--accent)); }
.card--accent .studio{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--accent)); margin-bottom: 14px; }
.card--accent::after{ background: var(--c, var(--accent)); }

/* ---------- Pixel motif (3×3) ----------
   <span class="pixel"><i></i>×9</span>  ·  colorear celdas con nth-child o inline. */
.pixel{ display: grid; grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(3, 9px); gap: 3px; }
.pixel i{ width: 9px; height: 9px; display: block; background: var(--txt-mute); opacity: .35; transition: opacity var(--dur), transform var(--dur); }
.pixel--brand i:nth-child(1){ background: var(--accent); opacity: 1; }
.pixel--brand i:nth-child(5){ background: var(--teal);   opacity: 1; }
.pixel--brand i:nth-child(9){ background: var(--amber);  opacity: 1; }
:hover > .pixel i{ opacity: 1; }  /* revela al pasar sobre el contenedor */

/* Fila de píxeles de colores (divisor decorativo) */
.pixel-row{ display: flex; gap: 4px; }
.pixel-row i{ width: 10px; height: 10px; display: block; }

/* ---------- Tags / chips ---------- */
.tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.tags span, .tag{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--txt-dim); border: 1px solid var(--line-2); border-radius: 2px; padding: 4px 9px;
}

/* ---------- Grid background (con máscara) ---------- */
.grid-bg{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}

/* ==========================================================================
   PATRONES DE FIRMA (opcionales)
   ========================================================================== */

/* Filas editoriales: índice de capacidades.
   <div class="cap-row" style="--c:var(--sky)">
     <span class="cap-tag">/software</span>
     <span class="cap-name">Software</span>
     <span class="cap-desc">…</span>
   </div>  */
.cap-row{
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 40px; padding: 34px 4px; border-top: 1px solid var(--line);
  overflow: hidden; transition: padding-left .3s ease;
}
.cap-row:last-child{ border-bottom: 1px solid var(--line); }
.cap-row::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c); opacity: .09; transition: width .4s var(--ease-out); }
.cap-row::after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); transform: scaleY(0); transform-origin: top; transition: transform .35s ease; }
.cap-row:hover{ padding-left: 22px; }
.cap-row:hover::before{ width: 100%; }
.cap-row:hover::after{ transform: scaleY(1); }
.cap-tag{ font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .05em; color: var(--c); flex: 0 0 116px; position: relative; z-index: 1; }
.cap-name{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-l); letter-spacing: var(--tracking-tight); line-height: 1; flex: 1 1 240px; position: relative; z-index: 1; }
.cap-desc{ color: var(--txt-dim); font-size: 15px; max-width: 34ch; margin-left: auto; position: relative; z-index: 1; }
@media (max-width: 720px){ .cap-desc, .cap-tag{ flex-basis: 100%; margin-left: 0; } }

/* Franja de datos (grilla con hairlines).
   .facts > .fact > (.fk etiqueta, .fv valor) */
.facts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact{ background: var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.fact .fk{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.fact .fv{ color: var(--txt-dim); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 720px){ .facts{ grid-template-columns: 1fr; } }

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

/* Reveal on scroll: añadir clase .is-in por IntersectionObserver */
.reveal{ opacity: 0; transform: translateY(26px); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease; }
.reveal.is-in{ opacity: 1; transform: none; }

/* Piso de accesibilidad */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .reveal{ opacity: 1; transform: none; transition: none; }
}