/* ══════════════════════════════════════════════════════════════
   IDEOFRAGMA · design-system.css · Dirección UMBRAL
   Fuente única de verdad. Primitivos OKLCH → tokens semánticos.
   Contrato: design-system/MASTER.md
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Primitivos de color ─────────────────────────────────── */
  --p-ink-1000: oklch(0.10 0.003 40);   /* letterbox */
  --p-ink-950:  oklch(0.155 0.006 40);  /* campo */
  --p-ink-900:  oklch(0.19 0.007 40);
  --p-ink-800:  oklch(0.24 0.008 40);
  --p-ink-700:  oklch(0.32 0.008 40);
  --p-paper-100: oklch(0.94 0.014 85);  /* papel de copia */
  --p-paper-300: oklch(0.80 0.012 80);
  --p-paper-500: oklch(0.70 0.010 75);
  --p-magenta-500: oklch(0.635 0.247 350.1);  /* = #ED259F, magenta exacto del logo */
  --p-magenta-400: oklch(0.70 0.23 350);

  /* ── Tokens semánticos de color ──────────────────────────── */
  --c-bg: var(--p-ink-950);
  --c-bg-raised: var(--p-ink-900);
  --c-bg-sunk: var(--p-ink-1000);
  --c-line: var(--p-ink-700);
  --c-line-soft: var(--p-ink-800);
  --c-text: var(--p-paper-100);
  --c-text-2: var(--p-paper-300);
  --c-text-3: var(--p-paper-500);
  --c-accent: var(--p-magenta-500);
  --c-accent-hover: var(--p-magenta-400);
  --c-on-accent: var(--p-ink-1000);
  --c-focus: var(--p-magenta-400);

  /* ── Metraje (color de IMAGEN, no de interfaz) ───────────── */
  --f-tungsten-a: oklch(0.55 0.13 55);
  --f-tungsten-b: oklch(0.30 0.08 35);
  --f-night-a: oklch(0.45 0.09 220);
  --f-night-b: oklch(0.22 0.05 250);
  --f-neon-a: oklch(0.55 0.20 350);
  --f-neon-b: oklch(0.28 0.10 300);
  --f-dusk-a: oklch(0.62 0.12 70);
  --f-dusk-b: oklch(0.35 0.09 20);
  --f-forest-a: oklch(0.48 0.09 150);
  --f-forest-b: oklch(0.22 0.04 170);
  --f-steel-a: oklch(0.60 0.02 240);
  --f-steel-b: oklch(0.25 0.015 250);

  /* ── Tipografía ──────────────────────────────────────────── */
  --font-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --wdth-display: 125;
  --wdth-body: 100;
  --wdth-condensed: 72;

  /* Escala 1.333 (cuarta justa), base 17px */
  --fs-label: 0.8125rem;                                   /* 13 · mono */
  --fs-0: 1.0625rem;                                       /* 17 · cuerpo */
  --fs-1: clamp(1.25rem, 1.12rem + 0.55vw, 1.4167rem);     /* 22.7 */
  --fs-2: clamp(1.5rem, 1.25rem + 1.1vw, 1.8889rem);       /* 30.2 */
  --fs-3: clamp(1.875rem, 1.45rem + 1.9vw, 2.5185rem);     /* 40.3 */
  --fs-4: clamp(2.25rem, 1.55rem + 3.2vw, 3.3580rem);      /* 53.7 */
  --fs-5: clamp(2.625rem, 1.5rem + 5vw, 4.4774rem);        /* 71.6 */
  --fs-6: clamp(3rem, 1.3rem + 7.6vw, 5.9699rem);          /* 95.5 */
  --fs-mega: clamp(3.5rem, 17vw, 17rem);                   /* wordmark a sangre, solo 1 vez por página */
  --lh-mega: 0.8;
  --tracking-mega: -0.04em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 850;

  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --tracking-display: -0.02em;
  --tracking-label: 0.08em;

  /* ── Espaciado · unidad 8pt (4 = medio paso) ─────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 62ch;
  --max: 1440px;
  --letterbox: clamp(40px, 7vh, 72px);

  /* ── Forma · solo dos radios ─────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;

  /* ── Motion ──────────────────────────────────────────────── */
  --dur-fast: 200ms;
  --dur-med: 300ms;
  --dur-reveal: 600ms;
  --dur-loop-fade: 800ms;   /* fundido de relevo del bucle del hero */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 24px;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-variation-settings: 'wdth' var(--wdth-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
a, button, [role="button"], label, select, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-1); }
::selection { background: var(--c-accent); color: var(--c-on-accent); }

/* ── Componentes comunes ───────────────────────────────────── */
.display {
  font-weight: var(--fw-black);
  font-variation-settings: 'wdth' var(--wdth-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.heading {
  font-weight: var(--fw-bold);
  font-variation-settings: 'wdth' var(--wdth-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-3);
  line-height: 1.4;
}
.lede { font-size: var(--fs-1); color: var(--c-text-2); max-width: var(--measure); line-height: 1.45; text-wrap: pretty; }
.body { max-width: var(--measure); color: var(--c-text-2); text-wrap: pretty; }

/* El único botón de la página */
.cta {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-accent); color: var(--c-on-accent);
  font-family: var(--font-sans); font-size: var(--fs-0); font-weight: var(--fw-bold);
  font-variation-settings: 'wdth' var(--wdth-display);
  border: 0; border-radius: var(--r-0); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.cta:hover { background: var(--c-accent-hover); }
.cta::after { content: '→'; font-family: var(--font-mono); transition: transform var(--dur-fast) var(--ease-out); }
.cta:hover::after { transform: translateX(4px); }

/* Logo: monograma IF (vector medido del logo original) + wordmark */
.logo { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-text); }
.logo svg { height: 1.75em; width: auto; display: block; }
.logo .if-cream { fill: var(--c-text); }
.logo .if-mag { fill: var(--c-accent); }
.logo .word { font-weight: var(--fw-bold); font-variation-settings: 'wdth' var(--wdth-display); letter-spacing: 0.32em; text-transform: uppercase; font-size: var(--fs-label); line-height: 1; }
.lockup { display: inline-grid; justify-items: center; gap: var(--s-3); color: var(--c-text); }
.lockup svg { height: var(--s-7); width: auto; }
.lockup .word { font-size: var(--fs-1); letter-spacing: 0.34em; margin-right: -0.34em; }
.lockup .sub { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.5em; color: var(--c-text-2); }
.lockup .sub::before, .lockup .sub::after { content: ''; width: var(--s-6); height: 2px; background: var(--c-accent); }

/* Fragmento: el cuadro magenta del sistema */
.frag-mark { display: inline-block; width: 0.32em; height: 0.32em; background: var(--c-accent); vertical-align: 0.9em; margin-left: 0.06em; }

/* Letterbox */
.lb { background: var(--c-bg-sunk); height: var(--letterbox); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-inline: var(--gutter); }

/* Metraje simulado en CSS (C3 sin assets). Se reemplaza por video en C4 */
.footage {
  --a: var(--f-tungsten-a); --b: var(--f-tungsten-b);
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 80% at 30% 40%, var(--a), transparent 70%),
    radial-gradient(70% 90% at 80% 70%, var(--b), transparent 75%),
    var(--c-bg-sunk);
  background-size: 140% 140%, 160% 160%, auto;
  animation: drift 18s var(--ease-inout) infinite alternate;
}
.footage::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--c-bg-sunk) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: normal;
}
.footage > * { position: relative; z-index: 2; }
.scene-tungsten { --a: var(--f-tungsten-a); --b: var(--f-tungsten-b); }
.scene-night  { --a: var(--f-night-a);  --b: var(--f-night-b); }
.scene-neon   { --a: var(--f-neon-a);   --b: var(--f-neon-b); }
.scene-dusk   { --a: var(--f-dusk-a);   --b: var(--f-dusk-b); }
.scene-forest { --a: var(--f-forest-a); --b: var(--f-forest-b); }
.scene-steel  { --a: var(--f-steel-a);  --b: var(--f-steel-b); }
@keyframes drift { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 100% 60%, 0% 30%, 0 0; } }

/* Medios reales (C4) */
.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-media { position: relative; overflow: hidden; background: var(--c-bg-sunk); }

/* Hoja de contactos fragmentada: una imagen partida en 3×3 fotogramas */
/* En reposo la imagen se ve entera; al pasar el cursor se abre en fragmentos */
.tiles { --img: none; --tile-ratio: 9 / 16; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--c-bg-sunk); padding: 0; transition: gap var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out); }
.tiles:hover, .tiles:focus-within { gap: var(--s-1); padding: var(--s-1); }
.tiles > i { aspect-ratio: var(--tile-ratio); background-image: var(--img); background-size: 300% 300%; transition: filter var(--dur-med) var(--ease-out); }
.tiles > i:nth-child(1) { background-position: 0 0; }     .tiles > i:nth-child(2) { background-position: 50% 0; }   .tiles > i:nth-child(3) { background-position: 100% 0; }
.tiles > i:nth-child(4) { background-position: 0 50%; }   .tiles > i:nth-child(5) { background-position: 50% 50%; } .tiles > i:nth-child(6) { background-position: 100% 50%; }
.tiles > i:nth-child(7) { background-position: 0 100%; }  .tiles > i:nth-child(8) { background-position: 50% 100%; } .tiles > i:nth-child(9) { background-position: 100% 100%; }
.tiles:hover > i { filter: brightness(0.7); }
.tiles:hover > i:hover { filter: none; }

/* Entradas */
.reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* Formulario */
.field { display: grid; gap: var(--s-2); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: var(--s-2); }
.field input, .field textarea {
  width: 100%; background: transparent; color: var(--c-text);
  font: inherit; font-size: var(--fs-0);
  border: 0; border-bottom: 1px solid var(--c-line); border-radius: var(--r-0);
  padding: var(--s-2) 0; transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--c-accent); }
.field textarea { min-height: 7rem; resize: vertical; }
.choice { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
  display: inline-block; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--c-text-2); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.choice input:checked + span { border-color: var(--c-accent); color: var(--c-text); }
.choice input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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