/* atraii — Hoja de estilos compartida del sitio estático */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --indigo-50:  oklch(97% 0.018 277);
  --indigo-100: oklch(94% 0.035 277);
  --indigo-200: oklch(88% 0.065 277);
  --indigo-300: oklch(78% 0.115 277);
  --indigo-400: oklch(68% 0.17 277);
  --indigo-500: oklch(58.5% 0.21 277);
  --indigo-600: oklch(51.1% 0.23 277);
  --indigo-700: oklch(45.5% 0.21 277);
  --indigo-800: oklch(38% 0.17 278);
  --indigo-900: oklch(29% 0.11 280);
  --noche-0:    oklch(17% 0.04 282);
  --noche-1:    oklch(21% 0.045 282);
  --noche-2:    oklch(24.5% 0.05 282);
  --gris-50:    oklch(97.5% 0.006 285);
  --gris-100:   oklch(95% 0.009 285);
  --gris-200:   oklch(92% 0.012 285);
  --gris-300:   oklch(86% 0.018 285);
  --gris-600:   oklch(48% 0.04 285);
  --gris-900:   oklch(20% 0.045 285);
  --ambar-50:   oklch(96.5% 0.035 85);
  --ambar-500:  oklch(70% 0.14 75);
  --ambar-800:  oklch(47% 0.1 70);

  /* Semánticos — tema claro */
  --superficie: #fff;
  --superficie-elevada: var(--gris-50);
  --tinta: var(--gris-900);
  --tinta-suave: var(--gris-600);
  --borde: var(--gris-200);
  --acento: var(--indigo-600);
  --acento-tinta: #fff;
  --acento-hover: var(--indigo-700);
  --alerta: var(--ambar-500);
  --alerta-tinta: var(--ambar-800);
  --alerta-suave: var(--ambar-50);
  --radio: 0.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--superficie);
  color: var(--tinta);
  line-height: 1.6;
}

/* ── Utilidades ─────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { padding-left: 1.25rem; }
code { font-family: ui-monospace, monospace; }

/* ── Botón principal ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.625rem 1.25rem;
  border-radius: var(--radio); font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; cursor: pointer; border: none; transition: background 0.15s;
}
.btn-primary { background: var(--acento); color: var(--acento-tinta); }
.btn-primary:hover { background: var(--acento-hover); }
.btn-outline {
  background: transparent; color: var(--tinta);
  border: 1.5px solid var(--borde);
}
.btn-outline:hover { border-color: var(--tinta); }

/* ── Marco legal (páginas /privacidad etc.) ──────────────── */
.marco-legal {
  display: flex; flex-direction: column; min-height: 100dvh;
}
.marco-legal header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--borde);
}
.marco-legal header a {
  font-size: 1.25rem; font-weight: 700; text-decoration: none; letter-spacing: -0.02em;
}
.marco-legal main {
  flex: 1;
  max-width: 48rem; width: 100%; margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}
.marco-legal article {
  display: flex; flex-direction: column; gap: 2.5rem;
  line-height: 1.65;
}
.marco-legal footer {
  border-top: 1px solid var(--borde);
  padding: 1.5rem; font-size: 0.875rem; color: var(--tinta-suave);
}
.marco-legal footer nav {
  max-width: 42rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.marco-legal footer a:hover { text-decoration: underline; }

/* Prosa de los documentos legales */
.prosa-legal section > * + * { margin-top: 0.75rem; }
.prosa-legal section h2 + * { margin-top: 0; }
.prosa-legal p, .prosa-legal li { overflow-wrap: anywhere; }
.prosa-legal ul.lista { list-style: disc; }
.prosa-legal ol.lista { list-style: decimal; }
.marco-legal footer .pie-empresa { max-width: 42rem; margin: 0.75rem auto 0; font-size: 0.8125rem; }

/* Encabezados legales */
.legal-titulo { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; }
.legal-version { font-size: 0.875rem; color: var(--tinta-suave); }
.legal-version code {
  background: var(--superficie-elevada); padding: 0.125rem 0.25rem;
  border-radius: 0.25rem; font-size: 0.75rem;
}

section h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }

/* Tablas */
.tabla-wrap { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead { background: var(--superficie-elevada); }
th { padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; }
td { padding: 0.5rem 0.75rem; }
tbody tr + tr { border-top: 1px solid var(--borde); }
td.suave, .suave { color: var(--tinta-suave); }
td.negrita { font-weight: 500; }

/* Listas */
ul.lista, ol.lista { display: flex; flex-direction: column; gap: 0.375rem; }
ul.lista li, ol.lista li { color: var(--tinta-suave); }
ul.lista li strong, ol.lista li strong { color: var(--tinta); }

/* Bloque elevado */
.bloque-elevado {
  background: var(--superficie-elevada); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1rem;
}

/* Bloque borde */
.bloque-borde {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem;
}

/* dl definiciones */
dl.definiciones { display: flex; flex-direction: column; gap: 0.5rem; }
dl.definiciones dt { display: inline; font-weight: 600; }
dl.definiciones dd { display: inline; color: var(--tinta-suave); }

/* Enlace inline */
a.enlace { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Encabezado del responsable, índice y anclas (v1.2) */
.legal-responsable {
  padding: 0.875rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie-elevada); font-size: 0.9375rem;
}
.prosa-legal ul.legal-indice { list-style: none; padding-left: 0; columns: 2 16rem; column-gap: 2rem; display: block; }
.prosa-legal ul.legal-indice li { break-inside: avoid; margin-bottom: 0.375rem; }
.prosa-legal section[id], .prosa-legal h3[id] { scroll-margin-top: 1.5rem; }
.prosa-legal h3 { font-size: 1rem; font-weight: 600; }