/*
 * PHVPro — capa de estilo «editorial» (inspirada en la referencia Rampa).
 * Se carga después de styles.css y sólo redefine tokens y acabados:
 * lienzo crema, tarjetas blancas con borde fino y sin sombras, una sola familia
 * tipográfica (Figtree) y la paleta de marca original: azul noche, azul de acción y colores de fase;
 * el logo PHV/PRO mantiene su degradado.
 */
:root,
:root[data-theme="light"] {
  --font-display: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --bg: #f4f2f0;
  --surface: #ffffff;
  --surface-2: #f4f2f0;
  --line: #e5e3df;
  --line-strong: #cfccc6;
  --text: #0c0a08;
  --text-2: #4a4846;
  --text-3: #6d6c6b;

  --ink: #0c0a08;
  --accent: #2b4a8b;
  --accent-ink: #ffffff;
  --hero-bg: #0d1431;
  --hero-bg-2: #1b2660;
  --hero-ink: #ffffff;
  --hero-ink-2: #b9c1e6;
  --hero-glow: #4b6cf0;

  --pre: #2a78d6;
  --circa: #eb6834;
  --post: #1baf7a;
  --pre-soft: rgba(42, 120, 214, 0.10);
  --circa-soft: rgba(235, 104, 52, 0.11);
  --post-soft: rgba(27, 175, 122, 0.11);

  --curve: #0c0a08;
  --grid: #ebe8e4;
  --shadow: none;
  --radius: 16px;
}

body { font-size: 15px; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.015em; }
h2 { font-weight: 500; }
h3, h4, legend { font-weight: 600; }
.phase-name, .bio-num, .kr-num { font-weight: 600; letter-spacing: -0.03em; }
.kpi-value, .extra .v, .mini-kpis .v, .kr-val { font-weight: 600; }

/* Etiquetas pequeñas: mayúsculas con tracking abierto */
.eyebrow, .eyebrow-sm, .kpi-label, .bio-top .k, .kr-top .k, .mini-kpis .k, .extra .k, .methods th {
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem;
}

/* ---------- Cabecera: panel oscuro plano, sin degradados ---------- */
.hero { background: var(--hero-bg); } /* azul noche plano */
.brand { font-weight: 600; }
.brand-main { letter-spacing: -0.05em; } /* conserva el degradado original del logo */
/* Etiqueta PRO con los tres colores de fase (pre → circa → post) */
.brand-pro,
.appbar-brand .brand-pro,
.gate-card .brand-pro {
  background: linear-gradient(90deg, var(--pre), var(--circa) 55%, var(--post));
  color: #0d1431; font-weight: 700; letter-spacing: .12em; border-radius: 6px; border: 0;
}
.slogan { font-weight: 400; color: var(--hero-ink); }
.chips li { background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; font-weight: 500; backdrop-filter: none; color: var(--hero-ink-2); }
.hero-curve { opacity: .85; }

/* ---------- Tarjetas: borde fino en lugar de sombra ---------- */
.panel, .formulas article, .gate-card { box-shadow: none; border: 1px solid var(--line); }
fieldset, .kpi, .extra { background: var(--surface-2); border-color: transparent; border-radius: 12px; }
.legend-num, legend .num { background: var(--ink) !important; }

/* ---------- Botones ---------- */
.btn { border-radius: 6px; font-weight: 500; box-shadow: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; filter: none; }
.btn.primary:hover { background: #213a6e; filter: none; }
.btn.ghost, .btn:not(.primary):not(.whatsapp) { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.btn.whatsapp { background: #ffffff; border: 1px solid var(--line-strong); color: var(--ink); }

/* ---------- Formularios ---------- */
input, select, textarea { border-radius: 10px; border-color: var(--line-strong); background: var(--surface); }
input:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px rgba(43, 74, 139, .18); border-color: var(--accent); }
.segmented { background: var(--surface-2); border-color: transparent; border-radius: 10px; }
.segmented span { border-radius: 6px; font-weight: 500; }
.segmented input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }

/* ---------- Pastillas y etiquetas: sin formas de cápsula ---------- */
.pill, .status-pill, .opt { border-radius: 6px; }
.tooltip { box-shadow: none; }

/* ---------- Barra de la aplicación ---------- */
.appbar { background: var(--hero-bg) !important; }
.appbar .tabs button[aria-selected="true"] { background: #ffffff; color: var(--ink); }
.appbar .tabs, .appbar .tabs button { border-radius: 6px; }