/* ── Tipografías ────────────────────────────────────────────────── */
  @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/spacegrotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
  @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/spacegrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrainsmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrainsmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

  :root {
    --bg: #05070d;
    --bg-2: #080b13;
    --panel: #0c1019;
    --panel-2: #10151f;
    --line: #1b2333;
    --line-2: #263049;

    /* Un solo acento. El verde y el ámbar solo dicen estado, nunca decoran. */
    --cyan: #45e0f5;
    --ok: #43d787;
    --warn: #ffc247;

    /* Contraste medido: el cuerpo estaba en 3,6:1 y ahora pasa de 7:1. */
    --text: #e6ecf5;
    --text-2: #9fb0c8;
    --text-3: #6b7c94;

    --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

    --wrap: 1120px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }

  /* ── Fondo: luz, no rejilla ─────────────────────────────────────── */
  /* La rejilla en perspectiva se sustituye por dos focos muy suaves y un grano
     finísimo. Da profundidad sin gritar "terminal". */
  /* Fuera de `.bg`, y no por estilo: dentro se anidaba como `.bg a:focus-visible`
     y `.bg` no contiene ni uno de los 18 enlaces de la página, así que el
     contorno no llegaba a aplicarse nunca. Quedaba el del navegador —1px casi
     negro sobre un fondo casi negro—, invisible: quien navega con el teclado no
     podía saber dónde estaba. */
  a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

  .bg {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(60rem 40rem at 12% -8%, #0d3b4733 0%, transparent 60%),
      radial-gradient(50rem 34rem at 92% 8%, #1b1f5233 0%, transparent 60%),
      var(--bg);
  }
  .grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  }

  .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

  /* ── Navegación ─────────────────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: blur(14px);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .nav .wrap { display: flex; align-items: center; gap: 1.25rem; height: 60px; }
  .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
  .brand .mark { display: block; width: 26px; height: 26px; }
  .brand .mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .nav nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; font-size: .875rem; }
  .nav nav a { padding: .45rem .75rem; border-radius: 8px; color: var(--text-2); transition: color .15s, background .15s; }
  .nav nav a:hover { color: var(--text); background: #ffffff0a; }
  .nav .cta {
    border: 1px solid var(--line-2); color: var(--text);
    background: linear-gradient(180deg, #ffffff0d, #ffffff03);
  }
  .nav .cta:hover { border-color: var(--cyan); color: var(--cyan); }
  @media (max-width: 640px) { .nav nav a.hide-sm { display: none; } }

  /* ── Secciones ──────────────────────────────────────────────────── */
  section { padding: 4.5rem 0; }
  .eyebrow {
    display: flex; align-items: center; gap: .7rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--cyan); margin-bottom: 1rem;
  }
  .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .5; }
  .eyebrow .n { color: var(--text-3); }
  h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.65rem, 3.4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15; }
  .lede { margin-top: .9rem; max-width: 56ch; color: var(--text-2); font-size: 1.02rem; }

  /* ── Hero ───────────────────────────────────────────────────────── */
  .hero { padding: 4.5rem 0 3rem; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(22rem, .92fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
  .hero .badge {
    display: inline-flex; align-items: center; gap: .55rem;
    border: 1px solid var(--line-2); border-radius: 999px;
    padding: .34rem .8rem; font-family: var(--mono); font-size: .7rem;
    letter-spacing: .1em; color: var(--text-2); background: #ffffff06;
  }
  .hero .badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px #45e0f522; }
  .hero h1 {
    margin-top: 1.4rem;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.5rem, 6.6vw, 4.5rem); line-height: 1.03; letter-spacing: -.035em;
    max-width: 18ch;
  }
  .hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--cyan), #8fa4ff 70%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero p.sub { margin-top: 1.4rem; max-width: 54ch; font-size: 1.08rem; color: var(--text-2); }
  .hero .actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 46px; padding: 0 1.35rem; border-radius: 11px;
    font-weight: 500; font-size: .95rem;
    transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--cyan); color: #04121a; box-shadow: 0 8px 30px -12px #45e0f5aa; }
  .btn-primary:hover { background: #6ae9fa; box-shadow: 0 10px 34px -10px #45e0f5cc; }
  .btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: #ffffff06; }
  .btn-ghost:hover { border-color: var(--text-3); background: #ffffff0d; }

  .hero .meta { margin-top: 1.1rem; font-family: var(--mono); font-size: .74rem; color: var(--text-3); }
  .hero-proof { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 20px; padding: 1.7rem; background: linear-gradient(145deg, #101722, #090c14); box-shadow: 0 32px 80px -42px #45e0f588; }
  .hero-proof::before { content: ""; position: absolute; inset: -5rem -4rem auto auto; width: 12rem; height: 12rem; border-radius: 50%; background: var(--cyan); filter: blur(75px); opacity: .11; }
  .proof-head { position: relative; display: flex; align-items: center; gap: .9rem; padding-bottom: 1.35rem; border-bottom: 1px solid var(--line); }
  .proof-head img { width: 40px; height: 40px; object-fit: contain; }
  .proof-head strong { display: block; font-family: var(--display); font-size: 1.08rem; }
  .proof-head span { display: block; margin-top: .15rem; font-family: var(--mono); font-size: .7rem; color: var(--text-3); }
  .proof-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 1.45rem 0; }
  .proof-stat { min-width: 0; }
  .proof-stat b { display: block; font-family: var(--display); font-size: 1.65rem; line-height: 1; color: var(--text); }
  .proof-stat span { display: block; margin-top: .45rem; font-family: var(--mono); font-size: .62rem; line-height: 1.35; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
  .proof-note { position: relative; color: var(--text-2); font-size: .9rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
  .proof-note strong { color: var(--cyan); font-weight: 500; }
  @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-proof { max-width: 34rem; } }

  /* ── Rejilla de servicios ───────────────────────────────────────── */
  .services { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.6rem; }
  .services .card:first-child { grid-column: 1 / -1; }
  @media (max-width: 780px) { .services { grid-template-columns: 1fr; } }

  .card {
    position: relative; overflow: hidden; display: block;
    border: 1px solid var(--line); border-radius: 16px;
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    transition: border-color .18s, transform .18s, box-shadow .18s;
  }
  /* Luz de borde: una línea clara arriba hace que el panel parezca material
     iluminado, no un rectángulo con un borde. */
  .card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, #ffffff26 30%, #ffffff26 70%, transparent);
  }
  .card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 22px 50px -30px #000, 0 0 0 1px #45e0f51f; }

  /* La tarjeta ya no ES un enlace, porque hacían falta dos destinos —el servicio
     y su código— y un ancla no puede anidarse dentro de otra: el navegador las
     separa y el marcado deja de ser válido.

     En su lugar, el enlace del título se estira por encima de toda la tarjeta,
     así que sigue clicándose entera igual que antes. El enlace al repositorio se
     levanta un nivel para quedar por encima de esa capa y poder pulsarse. */
  .card-main { position: static; color: inherit; }
  .card-main::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card .src {
    position: relative; z-index: 2;
    font-family: var(--mono); font-size: .74rem; color: var(--text-3);
    white-space: nowrap; transition: color .15s;
  }
  .card .src:hover { color: var(--cyan); }
  /* El foco tiene que rodear la tarjeta, no las letras del título: al estirarse
     el enlace, lo que se pulsa es la tarjeta y eso es lo que debe verse.

     Va dentro de un `@supports` a propósito. Sin él, un navegador sin `:has()`
     se saltaría la primera regla pero sí aplicaría el `outline: none` de la
     segunda, y el foco se quedaría **sin ningún indicador**: peor que no haber
     tocado nada, y sin dar la cara. Así, si no hay `:has()`, el contorno rodea
     el título; si lo hay, la tarjeta entera. */
  .card-main:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
  @supports selector(:has(*)) {
    .card:has(.card-main:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 4px; }
    .card-main:focus-visible { outline: none; }
  }

  .card .body { padding: 1.35rem 1.4rem 1.5rem; }
  .card h3 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
  .card p { margin-top: .5rem; color: var(--text-2); font-size: .93rem; }
  .card .row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
  .card .foot { margin-top: 1.1rem; }
  .card .host { font-family: var(--mono); font-size: .74rem; color: var(--text-3); transition: color .15s; }
  .card:hover .host { color: var(--cyan); }

  .pill {
    font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .2em .55em; border-radius: 5px; white-space: nowrap; border: 1px solid currentColor;
  }
  .pill.live { color: var(--ok); }
  .pill.soon { color: var(--warn); }

  /* La captura se recorta por abajo: arriba está lo que identifica la app. */
  .shot { position: relative; background: var(--bg-2); overflow: hidden; }
  .shot img { display: block; width: 100%; height: auto; opacity: .92; transition: opacity .18s, transform .4s; }
  .card:hover .shot img { opacity: 1; transform: scale(1.015); }
  .card .shot { max-height: 170px; border-bottom: 1px solid var(--line); }

  .card .split { display: grid; grid-template-columns: 1.05fr 1fr; }
  .card .split .shot { max-height: 320px; border-bottom: none; border-left: 1px solid var(--line); }
  @media (max-width: 780px) {
    .card .split { grid-template-columns: 1fr; }
    .card .split .shot { border-left: none; border-top: 1px solid var(--line); max-height: 200px; }
  }
  @media (max-width: 520px) { section { padding: 3.5rem 0; } .hero { padding-top: 3.25rem; } .hero h1 { font-size: clamp(2.35rem, 11.5vw, 3.15rem); } .hero-proof { padding: 1.1rem; } .proof-head { gap: .8rem; padding-bottom: 1.15rem; } .proof-head img { width: 34px; height: 34px; } .proof-head strong { font-size: .96rem; } .proof-head span { font-size: .66rem; } .proof-grid { gap: .55rem; padding: 1.15rem 0; } .proof-stat b { font-size: 1.35rem; } .proof-stat span { font-size: .59rem; } .proof-note { padding-top: 1rem; font-size: .82rem; } .card .shot { max-height: 125px; } .card .split .shot { max-height: 150px; } .card .body { padding: 1.1rem 1.15rem 1.25rem; } }

  /* ── Cómo está montado ─────────────────────────────────────────── */
  .how { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.4rem; }
  @media (max-width: 860px) { .how { grid-template-columns: 1fr; } }
  .how article { border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.35rem; background: linear-gradient(180deg, var(--panel), transparent); }
  .how .k { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
  .how h3 { margin-top: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
  .how a { display: inline-block; margin-top: .7rem; color: var(--cyan); font-family: var(--mono); font-size: .72rem; }
  .how p { margin-top: .45rem; color: var(--text-2); font-size: .9rem; }

  .stack { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
  .stack span {
    font-family: var(--mono); font-size: .72rem; color: var(--text-3);
    border: 1px solid var(--line); border-radius: 7px; padding: .35rem .7rem; background: #ffffff05;
  }

  /* ── Pie ────────────────────────────────────────────────────────── */
  footer { border-top: 1px solid var(--line); padding: 3rem 0 3.5rem; }
  .foot-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr; }
  @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
  footer h4 { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: .8rem; }
  footer li { list-style: none; margin-bottom: .45rem; }
  footer a.link { color: var(--text-2); font-size: .9rem; transition: color .15s; }
  footer a.link:hover { color: var(--cyan); }
  .foot-bar { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--text-3); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }

  /* ── Añadidos para las páginas interiores (/projects/, /about/) ──── */
  /* Solo reglas NUEVAS: nada de lo anterior cambia. */
  .card .links { position: relative; z-index: 2; display: flex; gap: .95rem; white-space: nowrap; }
  /* Con tres elementos en la fila del pie, a 320px no caben en una línea:
     que envuelva ahí, en vez de salirse (lo cazó check-layout). */
  @media (max-width: 380px) { .card .row.foot { flex-wrap: wrap; row-gap: .35rem; } }
  .crumb { font-family: var(--mono); font-size: .72rem; color: var(--text-3); margin-bottom: 1.2rem; }
  .crumb a { color: var(--text-3); transition: color .15s; }
  .crumb a:hover { color: var(--cyan); }
  .prose { max-width: 62ch; }
  .prose p { margin-top: .9rem; color: var(--text-2); }
  .prose h3 { margin-top: 2.4rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
  .prose ul { margin: .8rem 0 0 1.15rem; color: var(--text-2); }
  .prose li { margin-bottom: .45rem; }
  .prose a { color: var(--cyan); }
  pre {
    margin-top: 1rem; padding: 1rem 1.2rem;
    border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
    font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: var(--text-2);
    overflow-x: auto;
  }
  .page-shot { margin-top: 2.4rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-2); }
  .page-shot img { display: block; width: 100%; height: auto; }
  .page-title { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -.03em; line-height: 1.08; margin-top: .5rem; max-width: 22ch; }
  .page-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }

  /* Los encabezados de tarjeta en las páginas interiores son h2, no h3: allí no
     hay un h2 de sección entre medias, y saltar de h1 a h3 rompe la jerarquía
     que anuncia un lector de pantalla (lo cazó Lighthouse: 90 en accesibilidad).
     Estas reglas les devuelven el tamaño de tarjeta, que el h2 global es el de
     los titulares de sección de la portada. */
  .how h2 { margin-top: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: normal; line-height: 1.4; }
  .card h2 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.4; }
  .prose h2 { margin-top: 2.4rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.4; }
  /* Un enlace dentro de un párrafo no puede distinguirse solo por el color:
     quien no perciba ese contraste no lo ve. Subrayado, que es lo que un enlace
     en texto corrido ha significado siempre. */
  .prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  /* El pie de las páginas interiores usa h3, no h4: allí sus secciones son h2 y
     un h4 saltaría un nivel. Mismo aspecto, jerarquía correcta en cada página. */
  footer h3 { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: .8rem; font-weight: 400; line-height: 1.65; }
  /* A 320px la barra no admite cuatro destinos: "Services" es el que menos se
     echa en falta ahí —la portada entera es eso, y está a un toque en la marca—
     mientras que "For teams" y "About" son los que llevan a otro sitio. Los
     nombres no se acortan: "Teams" a secas no dice de qué va. */
  @media (max-width: 359px) { .nav nav a.hide-xs { display: none; } }
  /* Tres caminos, tres columnas. `.how` es de dos; esta variante los pone en
     fila en pantalla ancha y los apila en cuanto no caben. */
  .how.three { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 860px) { .how.three { grid-template-columns: 1fr; } }