/* Alkymia · estilos compartidos (portada y app) */
:root {
  --fondo: #0B0C0E;
  --fondo-2: #0E0F12;
  --tarjeta: #131519;
  --tarjeta-2: #16181C;
  --linea: #1F2227;
  --linea-2: #33363D;
  --texto: #F4F4F2;
  --texto-2: #C9CBD0;
  --texto-3: #A3A6AD;
  --texto-4: #8C9098;
  --acento: #D9F94A;
  --acento-hover: #E6FF6E;
  --error: #FF8A7A;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --cuerpo: 'Geist', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); }
a { color: var(--texto); }
img, video { display: block; max-width: 100%; }
button { font: inherit; }
.oculto { display: none !important; }

.marca { text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--texto); }
.marca span { color: var(--acento); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 12px; border: 0; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  background: var(--acento); color: var(--fondo); }
.btn:hover { background: var(--acento-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sec { background: transparent; color: var(--texto); border: 1px solid var(--linea-2); font-weight: 600; }
.btn-sec:hover { background: var(--tarjeta-2); border-color: var(--texto-3); }
.chip { font: inherit; font-size: 13px; font-weight: 500; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--linea-2); background: transparent; color: var(--texto-2); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--fondo); font-weight: 700; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.03em; }
.titulo-seccion { margin: 0; font-weight: 800; font-size: clamp(34px, 5vw, 60px); line-height: 1; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}