/* ==========================================================================
   AF brand — landing pública DeCA Server
   Tokens copiados de frontend/src/assets/brand/tokens.css (mismos nombres y
   valores). Solo los 4 HEX de AF + blanco; sin tonos intermedios ni alfa.
   ========================================================================== */

/* Geist y Geist Mono: SIL Open Font License (ver OFL.txt junto a cada fichero). */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono/GeistMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* TODO(licencia): Britti Sans queda fuera hasta tener la versión con licencia.
   La TRIAL (fonts/britti-sans-TRIAL) solo trae 132 glifos: sin tildes, ñ, € ni ·,
   así que cada título en castellano salía mezclado con Geist letra a letra.
   Para recuperarla: añadir aquí su @font-face con los archivos comerciales
   (comprobar que cubren Latin-1) y anteponer 'Britti Sans' en --font-display. */

:root {
  /* AF — primarios */
  --af-llama: #F25D31;
  --af-grafito: #1E1E1E;

  /* AF — secundarios */
  --af-arena: #CFCCB1;
  --af-niebla: #D2D6D9;

  /* No es color de paleta: relleno del logo AF "Negro reverso". */
  --af-blanco: #FFFFFF;

  /* Surfaces */
  --ui-canvas: var(--af-blanco);
  --ui-surface: var(--af-blanco);
  --ui-surface-muted: var(--af-niebla);
  --ui-surface-highlight: var(--af-arena);
  --ui-surface-inverse: var(--af-grafito);

  /* Lines */
  --ui-border: var(--af-niebla);
  --ui-border-strong: var(--af-grafito);

  /* Text: jerarquía por tamaño, peso y familia, no por grises. */
  --ui-text: var(--af-grafito);
  --ui-text-inverse: var(--af-blanco);
  --ui-text-inverse-muted: var(--af-niebla);

  /* Accent. Llama sobre blanco = 3.3:1 → solo iconos, bordes, foco y texto grande. */
  --ui-accent: var(--af-llama);
  --ui-on-accent: var(--af-grafito);
  --ui-focus: var(--af-llama);

  /* States: icono + texto; el color solo refuerza. */
  --ui-state-ok-surface: var(--af-niebla);
  --ui-state-ok-icon: var(--af-grafito);
  --ui-state-attention-surface: var(--af-arena);
  --ui-state-attention-icon: var(--af-llama);

  /* Typography.
     TODO(licencia): Britti Sans TRIAL — ver assets/brand/fonts.css */
  --font-display: 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { scroll-behavior: smooth; }
body { background: var(--ui-canvas); color: var(--ui-text); font-family: var(--font-body); }
::selection { background: var(--ui-surface-highlight); color: var(--ui-text); }
/* TODO(licencia): Britti Sans TRIAL — ver assets/brand/fonts.css */
h1, h2 { font-family: var(--font-display); font-weight: 400; }

.eyebrow { font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.text-balance { text-wrap: balance; }
.ring-focus:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Header nav on Grafito. Hover: Niebla plate with Grafito text (11:1).
   Active section: white text with a 2px Llama underline (no plate, so it
   never competes with the Llama "Solicitar demo" button). */
.nav-link { position: relative; padding-inline: .75rem; color: var(--ui-text-inverse); transition: background-color .2s ease, color .2s ease; }
.nav-link::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px; background: var(--ui-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link:hover { background: var(--ui-text-inverse-muted); color: var(--ui-text); }
.nav-link:hover::after { transform: scaleX(0); }
.nav-link.active { color: var(--ui-text-inverse); }
.nav-link.active::after { transform: scaleX(1); }
.nav-link.active:hover { color: var(--ui-text); }

.doc-card { transform: translate3d(0,0,0) rotate(-2deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-visual:hover .doc-card { transform: translate3d(-8px,-5px,0) rotate(-3.5deg); }
.hero-visual:hover .server-card { transform: translate3d(8px,-4px,0); }
.server-card { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

.scan-line { animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 0%,100% { transform: translateY(0); opacity:.15; } 50% { transform: translateY(116px); opacity:.75; } }

.flow-tab[aria-selected="true"] { background: var(--ui-surface-inverse); color: var(--ui-text-inverse); border-color: var(--ui-border-strong); }
.law-tab[aria-selected="true"] { color: var(--ui-text); background: var(--ui-surface); }
.mode-card { position: relative; min-width: 0; background: var(--ui-surface); }
.mode-card:hover { background: var(--ui-surface-muted); }
/* Indicador activo: franja superior Llama (no es sombra decorativa) + marca ✓. */
.mode-card[aria-pressed="true"] { background: var(--ui-surface-highlight); box-shadow: inset 0 3px 0 var(--ui-accent); }
.mode-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; border-radius: .6rem; background: var(--ui-surface-muted); color: var(--ui-text); transition: background .22s ease, color .22s ease, transform .22s ease; }
.mode-card[aria-pressed="true"] .mode-icon { background: var(--ui-surface-inverse); color: var(--ui-accent); transform: scale(1.04); }
.mode-check { position: absolute; right: 1rem; top: 1rem; display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: var(--ui-accent); color: var(--ui-on-accent); font-size: .65rem; font-weight: 800; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.mode-card[aria-pressed="true"] .mode-check { opacity: 1; transform: scale(1); }
.inspection-result > div { transition: opacity .18s ease, transform .18s ease; }
.inspection-result.is-changing > div:first-child { opacity: .25; transform: translateY(3px); }

.timeline-track::before { content:""; position:absolute; left:18px; top:26px; bottom:26px; width:1px; background:var(--ui-border-strong); }
.step-dot { transition: transform .25s ease, background .25s ease; }
.flow-tab[aria-selected="true"] .step-dot { transform: scale(1.12); background:var(--ui-accent); color:var(--ui-on-accent); }

.legal-link:hover .arrow { transform: translate(3px,-3px); }
.arrow { transition: transform .2s ease; }

/* Press feedback: links styled as buttons and real buttons sink a little
   while pressed, so a click always visibly lands. */
a.rounded-lg:active, button:active { transform: scale(.97); transition: transform 100ms ease; }

/* Primary CTAs: a band of light crosses the button as its fill turns from
   Llama to Arena on hover. It runs once per hover, never on a loop, so it
   draws the eye without nagging. */
.cta-sweep { position: relative; overflow: hidden; isolation: isolate; }
.cta-sweep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.cta-sweep:hover::after { transform: translateX(120%); transition: transform .6s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  a.rounded-lg:active, button:active { transform: none; }
  .cta-sweep::after { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 767px) {
  .reveal { transform: translateY(10px); }
}