/* Inversiones Panul v2 — generado desde tokens.json */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --brand-petrol: #175563;  /* Azul petróleo, color principal de la marca (web --green). Botones primarios, encabezados,  */
  --brand-petrol-deep: #124650;  /* Azul petróleo profundo (web --deep). Títulos sobre fondos claros, estado hover de botones  */
  --brand-yellow: #F7C52F;  /* Amarillo de acento (web --lime). Uso escaso: un destacado o CTA por pantalla, líneas super */
  --on-brand: #FFFFFF;  /* Texto e íconos sobre brand-petrol y brand-petrol-deep. */
  --logo-navy: #17212D;  /* Fondo del letrero. Placa detrás del logo a color cuando va sobre fondos oscuros o petróleo */
  --logo-turquoise: #02C4C9;  /* Turquesa del isotipo, la línea y las barras del logo. Solo logo, ilustración y detalles gr */
  --logo-cyan: #03BBF5;  /* Celeste de la montaña delantera del isotipo. Solo logo e ilustración. */
  --logo-blue: #0274A5;  /* Azul de las montañas posteriores del isotipo. Solo logo e ilustración; sobre brand-petrol  */
  --surface-100: #FFFFFF;  /* Fondo de página. */
  --surface-200: #EDF5F5;  /* Secciones alternas y paneles (web --pale). */
  --ink: #20383D;  /* Texto principal sobre surface-100 y surface-200 (≥11:1). */
  --ink-muted: #5B6F73;  /* Texto secundario sobre surface-100 y surface-200 (≥4.8:1). La web usa #627579, que no lleg */
  --link: #175563;  /* Enlaces y acciones de texto (≥6:1). */
  --border: #D8E5E6;  /* Bordes de tarjetas y divisores decorativos (web --line). */
  --border-strong: #7C9396;  /* Bordes de campos y controles (≥3:1). */
  --danger: #B42318;  /* Errores y valores negativos. Solo estados. */
  --success: #1F7A4D;  /* Confirmaciones y variaciones positivas. Solo estados. */
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-logo: "Raleway", "Inter", Arial, sans-serif;  /* solo logotipo, no usar en textos */
  --text-display-size: 64px; --text-display-line: 66px; --text-display-weight: 800;
  --text-h1-size: 42px; --text-h1-line: 48px; --text-h1-weight: 800;
  --text-h2-size: 28px; --text-h2-line: 34px; --text-h2-weight: 700;
  --text-h3-size: 21px; --text-h3-line: 26px; --text-h3-weight: 700;
  --text-body-size: 16px; --text-body-line: 26px; --text-body-weight: 400;
  --text-small-size: 14px; --text-small-line: 22px; --text-small-weight: 400;
  --text-eyebrow-size: 12px; --text-eyebrow-line: 16px; --text-eyebrow-weight: 800;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-20: 80px;
  --radius-sm: 9px;
  --radius-md: 18px;
  --radius-lg: 22px;
}

/* Tema oscuro: opcional */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #0E2F36;
    --surface-200: #124650;
    --ink: #EAF3F3;
    --ink-muted: #A9C3C6;
    --link: #7FD3DA;
    --border: #2A5B66;
    --border-strong: #7FA0A7;
    --danger: #F97066;
    --success: #5FCB8F;
  }
}
:root[data-theme="dark"] {
  --surface-100: #0E2F36;
  --surface-200: #124650;
  --ink: #EAF3F3;
  --ink-muted: #A9C3C6;
  --link: #7FD3DA;
  --border: #2A5B66;
  --border-strong: #7FA0A7;
  --danger: #F97066;
  --success: #5FCB8F;
}

/* Base sugerida */
body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--ink); background: var(--surface-100); }
h1, .display { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: 800; letter-spacing: -0.045em; color: var(--brand-petrol-deep); }
h2 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: 800; letter-spacing: -0.03em; color: var(--brand-petrol-deep); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: 700; color: var(--brand-petrol-deep); }
.eyebrow { font-size: var(--text-eyebrow-size); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-petrol); }
.muted { color: var(--ink-muted); }
a { color: var(--link); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 12px 19px; border-radius: var(--radius-sm); background: var(--brand-petrol); color: var(--on-brand); border: 1px solid var(--brand-petrol); font-weight: 700; font-size: 14px; text-decoration: none; }
.btn:hover { background: var(--brand-petrol-deep); }
.btn.secondary { background: transparent; color: var(--brand-petrol); }
.card { background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); }
.section-alt { background: var(--surface-200); }
.band { background: linear-gradient(120deg, var(--brand-petrol-deep), var(--brand-petrol)); color: var(--on-brand); }
.logo-plate { background: var(--logo-navy); border-radius: var(--radius-md); }