/* Fuentes propias (sin Google Fonts): variables, subconjunto latino. */
    @font-face {
      font-family: 'Archivo';
      src: url('/static/fonts/archivo-latin-var.woff2') format('woff2');
      font-weight: 100 900;
      font-stretch: 62% 125%;
      font-display: swap;
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'JetBrains Mono';
      src: url('/static/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
      font-weight: 100 800;
      font-display: swap;
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* ─────────────────────────────────────────────────────────────
       Tokens. Dos temperaturas de luz y nada más:
       --structure (frío) es la estructura; --current (cálido) es la
       inteligencia que corre por ella. En el texto, lo cálido sólo
       marca a la IA.
    ───────────────────────────────────────────────────────────── */
    :root {
      --void: #050607;
      --graphite: #0d0f12;
      --bone: #ebe8e1;
      --ash: rgba(235, 232, 225, 0.6);
      --faint: rgba(235, 232, 225, 0.36);
      --line: rgba(235, 232, 225, 0.14);
      --line-strong: rgba(235, 232, 225, 0.32);
      --structure: #b4c8ff;
      --current: #ffc978;
      --error: #ff9b8a;
      --gutter: clamp(1rem, 5.5vw, 6.5rem);
      --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    html { background: var(--void); color-scheme: dark; -webkit-text-size-adjust: 100%; }

    body {
      background: var(--void);
      color: var(--bone);
      font-family: var(--display);
      font-stretch: 100%;
      font-weight: 360;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    ::selection { background: rgba(255, 201, 120, 0.28); color: var(--bone); }

    a { color: inherit; }

    :focus-visible { outline: 1px solid var(--current); outline-offset: 4px; }

    .ia { color: var(--current); }

    /* ─────────────── escena ─────────────── */
    #scene {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100lvh;
      z-index: 0;
      display: block;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    #scene.on { opacity: 1; }

    .no-gl body {
      background:
        radial-gradient(60rem 40rem at 78% 40%, rgba(180, 200, 255, 0.08), transparent 70%),
        radial-gradient(30rem 20rem at 78% 42%, rgba(255, 201, 120, 0.06), transparent 70%),
        var(--void);
      background-attachment: fixed;
    }

    /* ─────────────── barra superior ─────────────── */
    .top {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: max(1.1rem, env(safe-area-inset-top)) var(--gutter) 1.1rem;
      background: linear-gradient(180deg, rgba(5, 6, 7, 0.82), rgba(5, 6, 7, 0));
      opacity: 0;
      animation: fade 1.2s ease 3s forwards;
    }

    .mark {
      font-weight: 560;
      font-stretch: 112%;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
      text-decoration: none;
    }

    .top nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); }

    .top nav a {
      font-size: 0.9rem;
      color: var(--ash);
      text-decoration: none;
      transition: color 0.25s ease;
    }
    .top nav a:hover { color: var(--bone); }
    .top nav a.to-contact { color: var(--bone); }
    .top nav a.to-contact::after {
      content: '';
      display: inline-block;
      width: 6px; height: 6px;
      margin-left: 0.55rem;
      border-radius: 50%;
      background: var(--current);
      vertical-align: 0.1em;
      box-shadow: 0 0 10px rgba(255, 201, 120, 0.8);
    }

    @keyframes fade { to { opacity: 1; } }

    main { position: relative; z-index: 1; }

    /* ─────────────── héroe ─────────────── */
    .hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 7rem var(--gutter) clamp(3.5rem, 11vh, 8rem);
    }

    .hero h1 {
      font-weight: 300;
      font-stretch: 108%;
      font-size: clamp(2.55rem, 5.8vw, 6.8rem);
      line-height: 0.98;
      letter-spacing: -0.03em;
    }

    /* ─────────────── tipografía viva ───────────────
       Cada letra es un nodo más de la escena: el láser la imprime
       (nace pesada y caliente y se enfría), la linterna del cursor la
       engrosa y la entibia, y el scroll la despega en profundidad. */
    .kt { perspective: 900px; perspective-origin: 30% 50%; }
    .kt .row { display: block; position: relative; white-space: nowrap; }
    .kt .w { display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
    .kt .ch { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; }
    .kt .row { opacity: 0; animation: kt-fallback 0.6s ease 3.2s forwards; }
    @keyframes kt-fallback { to { opacity: 1; } }
    .kt-on .kt .row { opacity: 1; animation: none; }
    .kt-on .kt .ch { opacity: 0; }
    .hero h1 .row.dim { color: var(--ash); }
    .beam {
      position: absolute;
      top: 0.06em; bottom: 0.04em; left: 0;
      width: 2px;
      background: #fff1d6;
      box-shadow: 0 0 10px 2px rgba(255, 201, 120, 0.95), 0 0 42px 8px rgba(255, 160, 70, 0.4);
      opacity: 0;
      pointer-events: none;
      will-change: transform, opacity;
    }

    /* espacio donde la cámara hace la grúa hacia los planos */
    .stage { height: 70vh; }


    /* ─────────────── consulta ─────────────── */
    .contact {
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: clamp(2rem, 6vw, 7rem);
      align-items: start;
      padding: 22vh var(--gutter) 10vh;
    }

    .contact-head h2 {
      font-weight: 300;
      font-stretch: 106%;
      font-size: clamp(2.2rem, 4.4vw, 4.6rem);
      line-height: 1.02;
      letter-spacing: -0.03em;
    }


    .panel {
      position: relative;
      padding: clamp(1.4rem, 3vw, 2.8rem);
      background: rgba(10, 12, 15, 0.9);
      border: 1px solid var(--line);
    }

    .field { position: relative; display: block; }
    .field + .field { margin-top: 1.7rem; }

    .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem; }
    .pair + .field, .field + .pair { margin-top: 1.7rem; }
    .pair .field + .field { margin-top: 0; }

    .field .label {
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.02em;
      color: var(--ash);
      margin-bottom: 0.55rem;
    }
    .field .label em { font-style: normal; color: var(--faint); }

    .field input,
    .field textarea {
      width: 100%;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--line-strong);
      border-radius: 0;
      color: var(--bone);
      caret-color: var(--current);
      font-family: var(--display);
      font-weight: 380;
      font-size: 1.12rem;
      line-height: 1.45;
      padding: 0.35rem 0 0.6rem;
      transition: border-color 0.25s ease;
      -webkit-appearance: none;
      appearance: none;
    }
    .field textarea { resize: none; min-height: 7.5rem; overflow: hidden; }
    .field input::placeholder, .field textarea::placeholder { color: rgba(235, 232, 225, 0.26); }
    .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--current); }
    .field input:focus-visible, .field textarea:focus-visible { outline: none; }
    .field[data-invalid] input, .field[data-invalid] textarea { border-bottom-color: var(--error); }

    .count { font-variant-numeric: tabular-nums; }
    .count.over { color: var(--error); }

    .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

    .actions {
      margin-top: 2.2rem;
      display: flex;
      align-items: center;
      gap: 1.4rem;
      flex-wrap: wrap;
    }

    .send {
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
      padding: 1rem 1.5rem 1rem 1.6rem;
      border: 0;
      border-radius: 0;
      background: var(--bone);
      color: var(--void);
      font-family: var(--display);
      font-weight: 560;
      font-stretch: 108%;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .send:hover { background: var(--current); }
    .send:active { transform: translateY(1px); }
    .send[disabled] { cursor: progress; background: rgba(235, 232, 225, 0.55); }
    .send svg { width: 1.05rem; height: 1.05rem; transition: transform 0.3s var(--ease); }
    .send:hover svg { transform: translateX(3px); }

    .status {
      font-size: 0.95rem;
      line-height: 1.4;
      color: var(--ash);
      min-height: 1.4em;
    }
    .status.error { color: var(--error); }

    .sent { display: none; }
    .panel.done form { display: none; }
    .panel.done .sent { display: block; animation: rise-in 1s var(--ease) both; }
    @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

    .sent h3 {
      font-weight: 320;
      font-stretch: 106%;
      font-size: clamp(2rem, 3.4vw, 3.2rem);
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .sent:focus { outline: none; }
    .sent p { margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.5; color: var(--ash); overflow-wrap: anywhere; }
    .sent p strong { color: var(--bone); font-weight: 450; }
    .again {
      margin-top: 2rem;
      background: none;
      border: 0;
      border-bottom: 1px solid var(--line-strong);
      color: var(--ash);
      font: inherit;
      font-size: 0.95rem;
      padding-bottom: 0.2rem;
      cursor: pointer;
    }
    .again:hover { color: var(--bone); border-bottom-color: var(--bone); }

    /* ─────────────── pie ─────────────── */
    footer {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 2.5rem var(--gutter) max(2.5rem, env(safe-area-inset-bottom));
      font-family: var(--mono);
      font-size: 0.74rem;
      color: var(--faint);
    }

    /* ─────────────── responsive ─────────────── */
    @media (max-width: 900px) {
      .contact { grid-template-columns: 1fr; padding-top: 16vh; }
    }

    @media (max-width: 640px) {
      .top nav a.login { display: none; }
      .hero { padding-bottom: 4.5rem; }
      .hero h1 { font-stretch: 100%; font-size: clamp(2.3rem, 10.4vw, 3.2rem); }
      .hero h1 { text-shadow: 0 0 24px rgba(5, 6, 7, 0.9); }
      .pair { grid-template-columns: 1fr; }
      .panel { padding: 1.4rem 1.1rem 1.6rem; margin: 0 -0.25rem; }
      .send { width: 100%; justify-content: space-between; }
      footer { flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      .kt .row { opacity: 1; animation: none; }
      .stage { height: 30vh; }
      .top { animation: none; opacity: 1; }
      #scene { transition: none; }
    }