/* ══════════════════════════════════════════════════════════════════════
   MarketBrain · hoja de estilos compartida
   Recreación estática del handoff de Claude Design "Market Brain Launch Site".
   Tokens del design system + base + componentes + estados :hover.
   Paleta de reposo: AZURE (la que el prototipo hornea sobre el teal del DS).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fuentes (Hanken Grotesk display/body + IBM Plex Mono datos) ── */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* — Base neutrals — */
  --paper:        #FBFAF7;
  --paper-soft:   #F4F6F5;
  --line:         #E2E6E4;

  /* — Ink + teal: AZURE horneado (override del prototipo sobre el DS) — */
  --teal:         #2F74C0;
  --teal-soft:    #8FB4DE;
  --teal-tint:    #E8F0FA;
  --ink:          #173E63;
  --ink-panel:    #173E63;
  --ink-panel-dk: #102D4C;
  --ink-muted:    #4F6663;
  --ink-subtle:   #84958F;

  /* — On dark (azure) — */
  --on-dark:      #EFF5FC;
  --on-dark-mut:  #B6D0EE;

  /* — Orange (acción alternativa del DS; conservado aunque los CTA usan teal) — */
  --accent:       #C9633A;
  --accent-hover: #A94F2C;
  --accent-tint:  #F6E9E1;

  /* — Semáforo de condiciones — */
  --cond-go:      #43A35A;  --cond-go-br:   #5BC47A;
  --cond-cond:    #DEA33C;  --cond-cond-br: #EFAE3C;
  --cond-no:      #D85A6E;  --cond-no-br:   #F0617A;

  /* — Aliases semánticos — */
  --bg-page:       var(--paper);
  --bg-alt:        var(--paper-soft);
  --surface-card:  var(--paper);
  --surface-panel: var(--ink-panel);
  --surface-tint:  var(--teal-tint);
  --text-strong:   var(--ink);
  --text-body:     var(--ink-muted);
  --text-subtle:   var(--ink-subtle);
  --text-on-panel: var(--on-dark);
  --border-hairline: var(--line);
  --action:        var(--accent);
  --action-hover:  var(--accent-hover);
  --action-tint:   var(--accent-tint);
  --brand-accent:  var(--teal);

  /* — Tipografía — */
  --font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* — Sombras / bordes / foco — */
  --shadow-panel: 0 24px 60px -28px rgba(14, 59, 56, 0.5);
  --shadow-soft:  0 1px 2px rgba(14, 59, 56, 0.06);
  --shadow-pop:   0 12px 32px -16px rgba(14, 59, 56, 0.28);
  --focus-ring:   0 0 0 3px rgba(47, 116, 192, 0.28);

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* — Reveal (los valores reales los fija el JS por página) — */
  --rv-dist: 18px;
  --rv-dur:  .7s;
  --rv-ease: cubic-bezier(.22,.8,.28,1);
  --bar-dur: 1.1s;
}

/* ── Base ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-muted);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--teal-tint); color: var(--ink); }
a { color: var(--teal); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
input { font-family: inherit; }

/* ── Reveal en scroll ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--rv-dist));
  transition: opacity var(--rv-dur) var(--rv-ease),
              transform var(--rv-dur) var(--rv-ease);
}
[data-reveal][data-shown="1"] { opacity: 1; transform: none; }
/* Estado de reposo bloqueado: garantiza visibilidad aunque el compositor
   no avance la transición. */
[data-reveal][data-done="1"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Barras SOM ── */
[data-bar] { width: 0; transition: width var(--bar-dur) var(--rv-ease); }
[data-bar][data-fill="1"] { width: var(--w, 0%); }
[data-bar][data-done="1"] { width: var(--w, 0%) !important; transition: none !important; }

/* ── Navegación (landing) ── */
.mb-nav { display: none; align-items: center; gap: 18px; }
.mb-nav a { transition: color .15s var(--ease-out); }
.mb-nav a:hover { color: var(--teal); }
@media (min-width: 980px) { .mb-nav { display: flex; } }

/* ── Grid del hero (landing) ── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 44px);
  align-items: center;
}
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1fr 1.3fr; } }

/* ── Botones con hover (convertidos de los style-hover del prototipo) ── */
.mb-cta { transition: background .18s var(--ease-out); }
.mb-cta:hover { background: #245C9A; }
.mb-cta-tint { transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.mb-cta-tint:hover { background: var(--teal-tint); }

/* ── Tarjetas "why" (landing) ── */
.mb-card-why { transition: border-color .18s var(--ease-out), transform .18s var(--ease-out); }
.mb-card-why:hover { border-color: var(--ink); transform: translateY(-1px); }

/* ── Tabla del caso A2 ── */
.a2-td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  vertical-align: top;
}
.a2-th {
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  text-align: left;
  font-weight: 500;
}
.a2-num { font-family: var(--font-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }

/* ── Formulario (Open Case) ── */
.oc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
/* Pitch a la izquierda, tarjeta de captura a la derecha en desktop
   (el prototipo nombró .oc-grid pero olvidó la media query → quedaba a 1 columna). */
@media (min-width: 880px) {
  .oc-grid { grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr); }
}
.oc-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .15s var(--ease-out);
}
.oc-input::placeholder { color: var(--ink-subtle); }
.oc-input:focus { border-color: var(--teal); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-bar] { transition: none !important; }
}