/* NEONOMAD — Fondo Ojo Oráculo
   Implementación del diseño "Ojo oráculo futurista" (Claude Design).
   Tokens tomados del sistema Modernist; el .dc.html original los llevaba
   embebidos como hex en cada elemento. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-300: #ffc4b8;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-neutral-100: #f8f4f4;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-soft: #8d8989;

  --font: "Archivo", Helvetica, Arial, sans-serif;
  --rule: 2px;
}

html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); }
* { box-sizing: border-box; }
::selection { background: var(--color-accent-300); color: var(--color-text); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
button { font: inherit; }

@keyframes nmPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.oo-root {
  position: relative;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  overflow-x: hidden;
}

/* ── Lienzo de partículas ─────────────────────────────────────────── */
.oo-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* ── Retícula vertical de 12 columnas ─────────────────────────────── */
.oo-grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(32, 30, 29, 0.085) 0 1px, transparent 1px 100%);
  background-size: 8.3333% 100%;
}
.oo-root[data-grid="off"] .oo-grid { display: none; }

/* ── Marcador de sondeo sobre el globo ────────────────────────────── */
.oo-mark {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 200ms linear;
}
.oo-mark-h { position: absolute; left: -9px; top: -1px; width: 18px; height: var(--rule); background: var(--color-accent); }
.oo-mark-v { position: absolute; left: -1px; top: -9px; width: var(--rule); height: 18px; background: var(--color-accent); }
.oo-mark-label {
  position: absolute; left: 14px; top: -11px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.oo-mark-leader { width: 26px; height: var(--rule); background: var(--color-accent); }
.oo-mark-card {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(243, 242, 242, 0.82); padding: 3px 6px;
}
.oo-mark-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-accent); }
.oo-mark-name { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }
.oo-mark-meta { display: flex; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--color-neutral-700); }
.oo-mark-clock { color: var(--color-accent-700); font-weight: 700; }

/* ── Escuadras del encuadre óptico ────────────────────────────────── */
.oo-frame {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 240ms linear;
}
.oo-frame i { position: absolute; background: var(--color-text); }
.oo-frame .tl-h, .oo-frame .tr-h, .oo-frame .bl-h, .oo-frame .br-h { width: 20px; height: var(--rule); }
.oo-frame .tl-v, .oo-frame .tr-v, .oo-frame .bl-v, .oo-frame .br-v { width: var(--rule); height: 20px; }
.oo-frame .tl-h, .oo-frame .tl-v { left: 0; top: 0; }
.oo-frame .tr-h, .oo-frame .tr-v { right: 0; top: 0; }
.oo-frame .bl-h, .oo-frame .bl-v { left: 0; bottom: 0; }
.oo-frame .br-h, .oo-frame .br-v { right: 0; bottom: 0; }

/* ── Ficha técnica del objeto óptico ──────────────────────────────── */
.oo-spec {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  opacity: 0; display: flex; align-items: center; gap: 10px;
  transition: opacity 240ms linear;
}
.oo-spec-badge {
  border: var(--rule) solid var(--color-text); padding: 1px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
}
.oo-spec-line {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--color-neutral-700); white-space: nowrap;
}

/* ── Pista de arrastre ────────────────────────────────────────────── */
.oo-hint {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 500ms linear;
}
.oo-hint span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--color-neutral-700); white-space: nowrap;
}

/* ── Etiqueta de país bajo el cursor ──────────────────────────────── */
.oo-hover {
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity 120ms linear;
  display: flex; align-items: center; gap: 8px;
}
.oo-hover-bar { width: 18px; height: var(--rule); background: var(--color-accent); }
.oo-hover-card { background: var(--color-text); padding: 5px 9px; }
.oo-hover-name {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--color-bg); white-space: nowrap;
}
.oo-hover-tag {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--color-accent-300); margin-top: 2px; white-space: nowrap;
}

/* ── Cotas áureas del borde derecho ───────────────────────────────── */
.oo-ratios { position: fixed; right: 0; top: 0; bottom: 0; width: 78px; z-index: 2; pointer-events: none; }
.oo-ratio { position: absolute; right: 16px; display: flex; align-items: center; gap: 8px; }
.oo-ratio i { width: 12px; height: var(--rule); background: rgba(32, 30, 29, 0.4); }
.oo-ratio span { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-soft); }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.oo-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding: 0 clamp(16px, 3vw, 40px);
  border-bottom: var(--rule) solid var(--color-text);
  background: rgba(243, 242, 242, 0.55); backdrop-filter: blur(3px);
}
.oo-brand { display: flex; align-items: baseline; gap: 14px; }
.oo-wordmark { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
/* Oculto tal como se autoró el diseño; quitar esta regla para mostrarlo. */
.oo-tagline { display: none; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--color-neutral-700); }
.oo-header-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.oo-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--color-neutral-700);
}
.oo-status i { width: 7px; height: 7px; background: var(--color-accent); animation: nmPulse 2.4s ease-in-out infinite; }
.oo-lang { display: flex; border: var(--rule) solid var(--color-text); }
.oo-lang button {
  border: 0; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  cursor: pointer; background: transparent; color: var(--color-text);
}
.oo-lang button + button { border-left: var(--rule) solid var(--color-text); }
.oo-lang button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }

/* ── Hero ─────────────────────────────────────────────────────────── */
.oo-hero {
  position: relative; z-index: 3; min-height: 100vh;
  display: grid; align-content: end;
  padding: 88px clamp(16px, 3vw, 40px) clamp(150px, 19vh, 210px);
}
.oo-root[data-layout="split"] .oo-hero { align-content: center; }
.oo-root[data-layout="topStack"] .oo-hero { align-content: start; padding-top: clamp(104px, 14vh, 150px); }

.oo-hero-box { max-width: 660px; pointer-events: auto; }
.oo-root[data-layout="split"] .oo-hero-box { max-width: min(560px, 46vw); }

.oo-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.oo-kicker i { width: 34px; height: var(--rule); background: var(--color-accent); }
.oo-kicker span { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-accent-700); }

.oo-headline {
  margin: 0; font-size: clamp(38px, 5.4vw, 78px); line-height: 0.98;
  font-weight: 800; letter-spacing: -0.035em; text-wrap: balance;
}
.oo-sub {
  margin: 22px 0 0; max-width: 46ch;
  font-size: clamp(15px, 1.25vw, 19px); line-height: 1.45; font-weight: 400;
  color: var(--color-neutral-800); text-wrap: pretty;
}

.oo-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.oo-cta {
  padding: 15px 22px; min-width: 210px; text-align: left;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
  border: 0; background: var(--color-accent); color: var(--color-neutral-100);
}
.oo-cta:hover { background: var(--color-accent-600); }
.oo-cta:focus-visible { outline: var(--rule) solid var(--color-text); outline-offset: 2px; }
.oo-cta-ghost {
  padding: 13px 22px; min-width: 180px;
  border: var(--rule) solid var(--color-text); background: transparent; color: var(--color-text);
}
.oo-cta-ghost:hover { background: var(--color-text); color: var(--color-bg); }
.oo-cta-ghost:focus-visible { outline: var(--rule) solid var(--color-accent); outline-offset: 2px; }

/* ── Riel de destinos ─────────────────────────────────────────────── */
.oo-rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  border-top: var(--rule) solid var(--color-text);
  background: rgba(243, 242, 242, 0.62); backdrop-filter: blur(3px);
}
.oo-rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px clamp(16px, 3vw, 40px) 0;
}
.oo-rail-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-neutral-700); }
.oo-rail-hint { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--color-neutral-600); }
.oo-rail-list { display: flex; overflow-x: auto; padding: 8px clamp(16px, 3vw, 40px) 12px; }
.oo-country {
  flex: 0 0 auto; border: 0; border-left: var(--rule) solid rgba(32, 30, 29, 0.35);
  background: transparent; padding: 6px 18px 6px 12px; text-align: left;
  cursor: pointer; color: var(--color-text);
}
.oo-country:hover { background: var(--color-surface); }
.oo-country[aria-pressed="true"] {
  background: var(--color-text); color: var(--color-bg); border-left-color: var(--color-accent);
}
.oo-country-code { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--color-neutral-600); }
.oo-country-name { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }

/* ── Bajo el pliegue ──────────────────────────────────────────────── */
.oo-below {
  position: relative; z-index: 3;
  background: rgba(243, 242, 242, 0.92);
  border-top: var(--rule) solid var(--color-text);
}
.oo-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.oo-cell {
  padding: clamp(28px, 4vw, 52px) clamp(20px, 2.6vw, 40px);
  border-left: var(--rule) solid var(--color-text);
}
.oo-cell-n { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-accent); margin-bottom: 22px; }
.oo-cell h2 {
  margin: 0 0 10px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em;
}
.oo-cell p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--color-neutral-800); text-wrap: pretty; }

.oo-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-top: var(--rule) solid var(--color-text); padding: 16px clamp(20px, 3vw, 40px);
}
.oo-foot-note { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-neutral-700); }
.oo-foot-credit { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--color-neutral-600); }

/* ── Pantallas estrechas ──────────────────────────────────────────── */
/* Añadido en la implementación: el diseño original no lleva media queries y
   la cabecera pide 395 px, así que por debajo de ~400 px empuja scroll
   horizontal. Se recorta el rótulo y queda el punto de señal — el mismo
   recurso que el diseño ya usa con .oo-tagline. */
@media (max-width: 420px) {
  .oo-status span { display: none; }
  .oo-rail-hint { display: none; }
}

/* ── Movimiento reducido ──────────────────────────────────────────── */
/* Añadido en la implementación (el diseño original no lo contempla): el campo
   de partículas se congela y el ojo deja de parpadear y de girar solo. El
   arrastre, el clic y el hover siguen funcionando. */
@media (prefers-reduced-motion: reduce) {
  .oo-status i { animation: none; }
  .oo-mark, .oo-frame, .oo-spec, .oo-hint, .oo-hover { transition: none; }
}