@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

  /* Identidad oscura fija a propósito — el público de bienestar/biohacking
     en redes sociales responde mejor a este lenguaje visual que a un tema
     claro/oscuro alternable. Ver decisions/log.md 2026-07-08. */
  :root {
    --ink: #f5f3ee;
    --amber: #f2794a;
    --indigo: #6c7aff;
    --paper: #070b16;
    --graphite: #a0a7bd;
    --panel: #10152a;
    --line: #232a42;
    --on-ink: #070b16;
    --focus: #f2794a;
    --glass-bg: rgba(245, 243, 238, 0.045);
    --glass-border: rgba(245, 243, 238, 0.1);
  }

  * { box-sizing: border-box; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  html, body {
    margin: 0;
    overflow-x: hidden;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--amber); }
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
  }

  .eyebrow {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--amber);
  }

  h1, h2, h3 {
    font-family: "Montserrat", sans-serif;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
    letter-spacing: 0.005em;
  }

  p { margin: 0; }

  /* ============ BOTON / MICROCOPY (compartido) ============ */

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 30px;
    background: var(--amber);
    color: var(--on-ink);
    border: none;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 16px 34px -14px rgba(242, 121, 74, 0.55);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    background: #ff9163;
    box-shadow: 0 20px 40px -14px rgba(242, 121, 74, 0.7);
  }

  .btn-primary svg { width: 16px; height: 16px; }

  .btn-pulse { animation: btn-pulse-glow 2.6s ease-in-out infinite; }
  .btn-pulse:hover { animation: none; }

  @keyframes btn-pulse-glow {
    0%, 100% { box-shadow: 0 16px 34px -14px rgba(242, 121, 74, 0.55), 0 0 0 0 rgba(242, 121, 74, 0.4); }
    50% { box-shadow: 0 16px 34px -14px rgba(242, 121, 74, 0.55), 0 0 0 12px rgba(242, 121, 74, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-pulse { animation: none; }
  }

  .microcopy {
    font-size: 0.8rem;
    color: var(--graphite);
    letter-spacing: 0.03em;
  }

  /* ============ VIDRIO ESMERILADO ============ */

  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
  }