/* ============================================================
   Sttok · Centro de ayuda
   ------------------------------------------------------------
   La ayuda es parte de sttok.com, así que la PÁGINA habla con la voz de la
   web (sttok-web: app/globals.css): crema, tinta casi negra, Inter, Instrument
   Serif en los titulares grandes y esquinas de 4 px. La APP solo aparece
   dentro de las ilustraciones (.mm), que llevan sus propios tokens: el
   contraste es a propósito y dice «esto es Sttok por dentro».

   ⚠️ Los tokens de la web y los de la app son COPIAS: este sitio vive en otro
   dominio y no puede leer ninguna de las dos hojas. Si cambia un token allí,
   se cambia aquí.
   ============================================================ */

:root {
  --sl-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sl-font-heading: var(--sl-font-sans);
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --paper: #f5f3f0;              /* --background de la web */
  --paper-sunk: #efece7;
  --paper-muted: #e9e6e0;
  --surface: #ffffff;            /* --card */
  --ink: #1c1a17;                /* --foreground */
  --ink-soft: #45413b;
  --ink-faint: #6b665f;          /* 5,1:1 sobre crema; el --muted-foreground de la web (#76726b) da 4,3 */
  --rule: #e4e1dc;               /* --border */
  --rule-strong: #d3cec6;
  --accent: #6576ff;             /* el azul de marca: iconos, foco y poco más */
  --accent-ink: #3442b8;         /* enlaces: 7,3:1 sobre crema */
  --accent-soft: #eceefc;
  --accent-soft-2: #dfe3fb;
  --btn-primary-bg: #1c1a17;
  --btn-primary-bg-hover: #35322d;
  --btn-primary-fg: #f5f3f0;
  --btn-outline-ink: #1c1a17;
  --btn-outline-border: #d3cec6;
  --btn-focus-ring: #6576ff;
  --info-bg: #eceefc;
  --info-ink: #2c3782;
  --warn-bg: #f8efd9;
  --warn-ink: #6e4d00;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, .06);
  --shadow-md: 0 8px 24px rgba(28, 26, 23, .10);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --punto: transparent;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14120f; --paper-sunk: #1a1815; --paper-muted: #22201c; --surface: #1c1a16;
    --ink: #f6f5f3; --ink-soft: #d3cfc8; --ink-faint: #a29d95;
    --rule: #2c2925; --rule-strong: #3a3631;
    --accent: #798bff; --accent-ink: #aab4ff; --accent-soft: rgba(101, 118, 255, .14); --accent-soft-2: rgba(101, 118, 255, .24);
    --btn-primary-bg: #f6f5f3; --btn-primary-bg-hover: #dedbd5; --btn-primary-fg: #14120f;
    --btn-outline-ink: #f6f5f3; --btn-outline-border: #3a3631; --btn-focus-ring: #9cabff;
    --info-bg: rgba(101, 118, 255, .14); --info-ink: #c4cefe; --warn-bg: #33280f; --warn-ink: #f2cf6b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #14120f; --paper-sunk: #1a1815; --paper-muted: #22201c; --surface: #1c1a16;
  --ink: #f6f5f3; --ink-soft: #d3cfc8; --ink-faint: #a29d95;
  --rule: #2c2925; --rule-strong: #3a3631;
  --accent: #798bff; --accent-ink: #aab4ff; --accent-soft: rgba(101, 118, 255, .14); --accent-soft-2: rgba(101, 118, 255, .24);
  --btn-primary-bg: #f6f5f3; --btn-primary-bg-hover: #dedbd5; --btn-primary-fg: #14120f;
  --btn-outline-ink: #f6f5f3; --btn-outline-border: #3a3631; --btn-focus-ring: #9cabff;
  --info-bg: rgba(101, 118, 255, .14); --info-ink: #c4cefe; --warn-bg: #33280f; --warn-ink: #f2cf6b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Dentro de una ilustración manda la APP: sus colores, su tipografía y sus
   esquinas (style.css del mockup). */
.mm {
  --sl-font-sans: 'Figtree', 'Google Sans', system-ui, sans-serif;
  --sl-font-heading: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --surface: #ffffff; --paper-sunk: #f5f6fa; --paper-muted: #ebeef2;
  --ink: #364a63; --ink-soft: #526484; --ink-faint: #6b7d98;
  --rule: #e5e9f2; --rule-strong: #dbdfea;
  --accent: #6576ff; --accent-ink: #2c3782; --accent-soft: #eff1ff; --accent-soft-2: #e3e7fe;
  --btn-primary-bg: #2c3782; --btn-primary-fg: #ffffff; --btn-outline-ink: #2c3782; --btn-outline-border: #c4cefe;
  --shadow-md: 0 0.5rem 1.5rem rgba(43, 55, 72, .14);
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  font-family: var(--sl-font-sans);
}
:root[data-theme="dark"] .mm {
  --surface: #18212d; --paper-sunk: #141c26; --paper-muted: #18212d;
  --ink: #ffffff; --ink-soft: #c9d1e0; --ink-faint: #a3afc4;
  --rule: #1f2c3d; --rule-strong: #2b3f58;
  --accent: #798bff; --accent-ink: #b3bcff; --accent-soft: #1c2340; --accent-soft-2: #263066;
  --btn-primary-bg: #c4cefe; --btn-primary-fg: #101924; --btn-outline-ink: #c4cefe; --btn-outline-border: #3a4778;
  --shadow-md: 0 0.5rem 1.5rem rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mm {
    --surface: #18212d; --paper-sunk: #141c26; --paper-muted: #18212d;
    --ink: #ffffff; --ink-soft: #c9d1e0; --ink-faint: #a3afc4;
    --rule: #1f2c3d; --rule-strong: #2b3f58;
    --accent: #798bff; --accent-ink: #b3bcff; --accent-soft: #1c2340; --accent-soft-2: #263066;
    --btn-primary-bg: #c4cefe; --btn-primary-fg: #101924; --btn-outline-ink: #c4cefe; --btn-outline-border: #3a4778;
    --shadow-md: 0 0.5rem 1.5rem rgba(0, 0, 0, .45);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--paper); color: var(--ink-soft);
  font: 400 16px/1.6 var(--sl-font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--btn-focus-ring); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--sl-font-heading); color: var(--ink); letter-spacing: -0.02em; margin: 0; font-weight: 600; }
p { margin: 0; }
svg { flex: none; }
.num, .tabla td, .tabla th, .mm-resumen dd, .cat-n, .papel-n { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-md); }
.saltar:focus { left: 16px; }

.envoltura { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.envoltura--estrecha { max-width: 820px; padding-top: 32px; padding-bottom: 80px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Los titulares grandes, en la serif de la web (Instrument Serif, solo 400). */
.hero h1, .articulo h1, .cab-cat h1, .cab-pag h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; color: var(--ink);
}

/* ---------- Cabecera ----------
   Una sola barra de 56 px, como support.stripe.com: la marca de sttok.com
   con «Ayuda», el buscador, el país y las dos llamadas a la acción de la web
   (site-header.tsx: 12 px, 2 px de radio, «Solicitar demo» en tinta). */
.web {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.web-in { max-width: 1400px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; gap: 24px; }
.web-marca { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink); }
.web-marca:hover { text-decoration: none; }
.web-marca svg { height: 26px; width: auto; display: block; }
.web-ayuda { padding-left: 12px; border-left: 1px solid var(--rule-strong); font-size: 15px; font-weight: 500; color: var(--ink-soft); line-height: 20px; }
.web-logo { display: inline-flex; }
.web-logo svg { height: 24px; width: auto; display: block; }
.cab-hueco { flex: 1; }
.web .buscador { flex: 1; max-width: 480px; margin: 0 auto; }
.web-acc { display: flex; align-items: center; gap: 6px; flex: none; }
.web-cta { display: flex; align-items: center; gap: 6px; }
.web-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border-radius: 2px;
  font: 500 12px/1 var(--sl-font-sans); white-space: nowrap; transition: background-color .15s, color .15s;
}
.web-btn:hover { text-decoration: none; }
.web-btn--suave { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.web-btn--suave:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.web-btn--solido { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.web-btn--solido:hover { background: var(--btn-primary-bg-hover); }
.web-menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: none; background: none; color: var(--ink); border-radius: 2px; cursor: pointer; }
.web-movil { border-top: 1px solid var(--rule); padding: 12px 16px 16px; }
.web-movil-cta { display: flex; gap: 8px; }
.web-movil-cta .web-btn { flex: 1; height: 40px; font-size: 13px; }

.pais { position: relative; }
.pais-btn, .icon-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radius-md); background: none;
  color: var(--ink-soft); font: 500 14px/1 var(--sl-font-sans); cursor: pointer;
}
.icon-btn { width: 36px; padding: 0; justify-content: center; }
.pais-btn:hover, .icon-btn:hover { background: var(--paper-sunk); color: var(--ink); }
.pais-cod { font: 600 11px/1 var(--sl-font-sans); letter-spacing: .04em; color: var(--ink-faint); }
.pais-btn .pais-cod { display: none; }
.pais-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.pais-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); font-size: 14px; }
.pais-menu a:hover { background: var(--paper-sunk); text-decoration: none; }
.pais-menu a[aria-current] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.pais-menu .pais-cod { width: 20px; }

.tema-btn svg:last-child { display: none; }
:root[data-theme="dark"] .tema-btn svg:first-child { display: none; }
:root[data-theme="dark"] .tema-btn svg:last-child { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-btn svg:first-child { display: none; }
  :root:not([data-theme="light"]) .tema-btn svg:last-child { display: block; }
}

.btn-sec {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid var(--btn-outline-border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--btn-outline-ink); font: 600 14px/1 var(--sl-font-sans); cursor: pointer;
}
.btn-sec:hover { background: var(--paper-sunk); border-color: var(--ink-faint); text-decoration: none; }

/* ---------- Buscador ---------- */
.buscador { position: relative; display: flex; align-items: center; }
.buscador > svg { position: absolute; left: 12px; color: var(--ink-faint); pointer-events: none; }
.buscador input {
  width: 100%; height: 40px; padding: 0 14px 0 38px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-sunk);
  color: var(--ink); font: 400 15px/1 var(--sl-font-sans);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.buscador input::placeholder { color: var(--ink-faint); }
.buscador input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador--grande > svg { left: 20px; }
.buscador--grande input { height: 60px; padding-left: 54px; font-size: 17px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.buscador-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: 420px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.bl-item { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); }
.bl-item:hover, .bl-item.is-activo { background: var(--accent-soft); text-decoration: none; }
.bl-tit { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.bl-cat { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.bl-vacio { padding: 12px; font-size: 14px; color: var(--ink-faint); }
.bl-todo { display: block; padding: 10px 12px; margin-top: 4px; border-top: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; }
mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- Portada ----------
   Sin trama ni degradado: el fondo es el de la web y lo que pesa es el
   titular en serif y el buscador. */
.hero { border-bottom: 1px solid var(--rule); }
.hero-in { max-width: 880px; margin: 0 auto; padding: 88px 32px 64px; text-align: center; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; }
.hero-sub { margin: 18px auto 36px; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); }
.hero .buscador { text-align: left; max-width: 620px; margin: 0 auto; }
.soy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 14px; }
.soy-rot { color: var(--ink-faint); margin-right: 2px; }
.soy a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-soft); background: var(--surface);
  transition: border-color .15s, color .15s;
}
.soy a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.bloque { padding-top: 64px; }
.bloque-tit { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 20px; }

.cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cats li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cats a {
  display: flex; flex-direction: column; height: 100%; padding: 24px; color: inherit; background: var(--surface);
  transition: background-color .15s;
}
.cats a:hover { background: var(--paper-sunk); text-decoration: none; }
.cat-ico { display: inline-flex; color: var(--ink-faint); }
.cats a:hover .cat-ico { color: var(--accent); }
.cat-nom { margin-top: 16px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.cat-desc { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-faint); }

.destacados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--rule); }
.destacados a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); color: inherit; }
.destacados a:hover { text-decoration: none; }
.destacados a:hover .dest-tit { color: var(--accent-ink); }
.dest-tit { font-weight: 500; color: var(--ink); font-size: 15.5px; line-height: 1.4; }
.dest-cat { flex: none; font-size: 13px; color: var(--ink-faint); }

.linea-contacto { margin: 64px 0 88px; font-size: 15px; color: var(--ink-faint); text-align: center; }
.linea-contacto a { font-weight: 600; }

/* ---------- Estructura con menú lateral ---------- */
.con-lateral { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; padding-top: 32px; padding-bottom: 80px; }
.con-indice { grid-template-columns: 232px minmax(0, 1fr) 200px; }
.lateral, .indice { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; }
.lateral-tit { font: 600 11.5px/1 var(--sl-font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 10px 12px; }
.lateral ul, .indice ul { list-style: none; margin: 0; padding: 0; }
.lateral li a {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: var(--radius-md);
  color: var(--ink-soft); font-size: 14px; line-height: 1.4;
}
.lateral li a svg { margin-top: 2px; color: var(--ink-faint); }
.lateral li a:hover { background: var(--paper-sunk); color: var(--ink); text-decoration: none; }
.lateral li a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); border-radius: 0; background: none; }
.lateral li a[aria-current] svg { color: currentColor; }
.lateral li a.es-borrador { color: var(--ink-faint); }
.lateral-volver {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--rule);
  font: 600 14px/1.3 var(--sl-font-heading); color: var(--ink);
}
.lateral-volver svg { color: var(--ink-faint); }
.indice ul { border-left: 1px solid var(--rule); }
.indice a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--ink-faint); }
.indice a:hover { color: var(--ink); text-decoration: none; }
.indice a.is-activo { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; }

/* ---------- Migas ---------- */
.migas ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13.5px; color: var(--ink-faint); }
.migas li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--rule-strong); }
.migas a { color: var(--ink-faint); }
.migas a:hover { color: var(--accent-ink); }
.migas [aria-current] { color: var(--ink-soft); }

/* ---------- Categoría y listas ---------- */
.cab-cat { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.cat-ico--g { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.cab-cat h1, .cab-pag h1 { font-size: 44px; line-height: 1.05; }
.cab-cat p, .cab-pag p { margin-top: 10px; font-size: 17px; color: var(--ink-soft); }
.cab-pag { margin-bottom: 28px; }

.filas { list-style: none; margin: 0; padding: 0; }
.fila a { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--rule); color: inherit; }
.fila a:hover { text-decoration: none; }
.fila a:hover .fila-tit { color: var(--accent-ink); }
.fila a > svg { color: var(--ink-faint); margin-left: auto; }
.fila-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fila-tit { font-weight: 600; color: var(--ink); font-size: 16px; line-height: 1.35; }
.fila-res { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: var(--ink-faint); }
.fila--borrador .fila-tit { color: var(--ink-soft); font-weight: 500; }
.filas--compactas .fila a { padding: 12px 4px; }
.grupo + .grupo, .grupo { margin-top: 32px; }
.grupo h2 { font-size: 17px; padding-bottom: 4px; }

.tipo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 11.5px/1 var(--sl-font-sans); letter-spacing: .01em; }
.tipo--tarea, .tipo--concepto { background: none; border: 1px solid var(--rule-strong); color: var(--ink-faint); }
.en-redaccion { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--rule-strong); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }

/* ---------- Artículo ---------- */
.articulo { max-width: 660px; }
.art-pre { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.art-lect { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-faint); }
.articulo h1 { font-size: clamp(36px, 4.4vw, 50px); line-height: 1.04; }
.entradilla { margin-top: 18px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-faint); }
.art-meta span { display: inline-flex; align-items: center; gap: 6px; }

.art-cuerpo { padding-top: 8px; font-size: 17px; line-height: 1.65; }
.art-cuerpo > p, .art-cuerpo > ul, .art-cuerpo > ol:not(.pasos) { margin: 16px 0; }
.art-cuerpo h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 56px 0 6px; }
.art-cuerpo ul { padding-left: 20px; }
.art-cuerpo li { margin: 6px 0; }
.art-cuerpo li::marker { color: var(--ink-faint); }
.art-cuerpo strong { color: var(--ink); font-weight: 600; }

.antes, .nota, .clave {
  margin: 24px 0; padding: 18px 20px; border-radius: var(--radius-lg); font-size: 15px;
}
.antes { background: var(--paper-sunk); border: 1px solid var(--rule); }
.antes-tit { font: 600 12px/1 var(--sl-font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px !important; }
.antes ul { margin: 0; padding-left: 18px; }
.antes li { margin: 4px 0; }
.nota { background: var(--warn-bg); color: var(--ink-soft); }
.nota strong { color: var(--warn-ink); }
.clave { background: var(--info-bg); color: var(--ink-soft); font-size: 16.5px; }
.clave strong { color: var(--info-ink); }

/* Pasos: el número es el mismo que lleva la ilustración, y se cruzan */
ol.pasos { list-style: none; margin: 20px 0; padding: 0; }
ol.pasos > li {
  position: relative; padding: 14px 14px 14px 52px; margin: 0; border-radius: var(--radius-md);
  transition: background-color .15s;
}
ol.pasos > li::before {
  content: attr(data-paso); position: absolute; left: 12px; top: 14px;
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rule-strong); color: var(--ink); font: 600 13px/1 var(--sl-font-sans); font-variant-numeric: tabular-nums;
  transition: background-color .15s, color .15s;
}
ol.pasos > li + li::after {
  content: ''; position: absolute; left: 24.5px; top: -12px; height: 24px; width: 1px; background: var(--rule-strong);
}
ol.pasos > li.is-hi::before { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14.5px; }
.tabla th { text-align: left; font: 600 11.5px/1.2 var(--sl-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 10px 12px; border-bottom: 1px solid var(--rule-strong); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tabla td:first-child { color: var(--ink); font-weight: 600; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla th.num { text-align: right; }
.tabla--cuenta { max-width: 460px; }
.tabla--cuenta td:first-child { font-weight: 400; color: var(--ink-soft); }
.tabla--cuenta td.num { color: var(--ink); font-weight: 600; }
.tabla--cuenta .es-total td { border-top: 2px solid var(--ink); border-bottom: none; font-weight: 700; color: var(--ink); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.dos-col { padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-lg); font-size: 15px; }
.dos-col p + p { margin-top: 10px; }
.dos-tit { font: 600 16px/1.3 var(--sl-font-heading); color: var(--ink); }
.dos-col a { font-weight: 600; }

/* Preguntas frecuentes */
.faq { border-bottom: 1px solid var(--rule); }
.faq:first-of-type { border-top: 1px solid var(--rule); margin-top: 16px; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px;
  font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translateY(-3px); transition: transform .15s;
}
.faq[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.faq p { padding: 0 4px 18px; font-size: 15.5px; }

.valora {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.valora > p:first-child { font-weight: 600; color: var(--ink); }
.valora-btns { display: flex; gap: 8px; }
.valora-btns .btn-sec { height: 36px; min-width: 64px; justify-content: center; }
.valora-gracias { color: var(--ink-soft); }
.relacionados { margin-top: 40px; }
.relacionados h2 { font-size: 18px; margin-bottom: 4px; }

.redaccion { display: flex; gap: 16px; margin-top: 28px; padding: 24px; border: 1px dashed var(--rule-strong); border-radius: var(--radius-lg); color: var(--ink-faint); }
.redaccion p + p { margin-top: 8px; }
.redaccion strong { color: var(--ink); }
.redaccion .btn-sec { margin-top: 8px; }

/* ---------- Ilustraciones (mini-maquetas) ----------
   Un trozo de pantalla de Sttok dibujado con los tokens: no es una captura, y
   por eso no caduca cuando cambia la app ni hay que repetirla por país. */
figure { margin: 28px 0; }
figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-faint); text-align: center; }
.mm-lienzo {
  display: flex; justify-content: center; padding: 36px 24px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: radial-gradient(circle at 1px 1px, var(--punto) 1px, transparent 0) 0 0 / 16px 16px, var(--paper-sunk);
  font-size: 13px; line-height: 1.4; color: var(--ink-soft);
}
.mm-dialogo, .mm-tarjeta, .mm-telefono {
  width: 100%; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 10px; box-shadow: var(--shadow-md);
}
.mm-dialogo { max-width: 400px; padding: 18px; }
.mm-dlg-cab { display: flex; align-items: center; gap: 10px; }
.mm-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(30, 224, 172, .16); color: #0c8e68; }
:root[data-theme="dark"] .mm-check { color: #7fe8c7; }
.mm-dlg-tit { font: 600 15px/1.2 var(--sl-font-heading); color: var(--ink); }
.mm-resumen { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 22px; margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mm-resumen div { display: flex; flex-direction: column; }
.mm-resumen dt { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.mm-resumen dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
.mm-pregunta { margin: 14px 0 8px; font-weight: 600; color: var(--ink); }
.mm-opciones, .mm-modos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mm-opciones li, .mm-modos li {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px;
  border: 1px solid var(--rule); border-radius: var(--radius-md); transition: background-color .15s, border-color .15s;
}
.mm-opciones b, .mm-modos b { display: block; color: var(--ink); font-weight: 600; }
.mm-opciones small, .mm-modos small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.mm-opciones li.is-marcada, .mm-modos li.is-marcada { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mm-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font: 700 11px/1 var(--sl-font-sans); transition: background-color .15s, color .15s;
}
.mm [data-paso].is-hi { background: var(--accent-soft); border-color: var(--accent); }
.mm [data-paso].is-hi .mm-n, .mm [data-paso].is-hi > li.is-marcada .mm-n { background: var(--accent); color: #fff; }
.mm-boton {
  display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--btn-outline-border); color: var(--btn-outline-ink); font-weight: 600; font-size: 12.5px;
}
.mm-boton--relleno { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }

.mm--movil .mm-lienzo { padding: 28px 24px 0; overflow: hidden; }
.mm-telefono { max-width: 300px; padding: 22px 16px 22px; border-radius: 26px 26px 0 0; border-bottom: none; box-shadow: var(--shadow-md); }
.mm-telefono .mm-boton { width: 100%; height: 40px; margin-top: 14px; background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.mm-pasitos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 10px; color: var(--ink-faint); text-align: center; }
.mm-pasitos li { padding-top: 6px; border-top: 3px solid var(--rule); }
.mm-pasitos li.is-actual { border-top-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.mm-h { font: 600 16px/1.25 var(--sl-font-heading); color: var(--ink); }
.mm-p { margin: 4px 0 12px !important; font-size: 12.5px; color: var(--ink-soft); }
.mm-modos li { padding: 11px 12px; }
.mm-modos[data-paso].is-hi > li.is-marcada { background: var(--accent-soft); }

.mm-tarjeta { max-width: 460px; padding: 18px; }
.mm-tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mm-vivo { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.mm-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #1ee0ac; box-shadow: 0 0 0 3px rgba(30, 224, 172, .2); }
.mm-tarjeta-tit { margin-top: 10px; font: 600 18px/1.25 var(--sl-font-heading); color: var(--ink); }
.mm-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.mm-cifras span { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.mm-cifras b { display: block; margin-top: 3px; font-size: 14px; color: var(--ink); }

/* Hueco para una captura real */
.captura-hueco {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16 / 7;
  border: 1.5px dashed var(--rule-strong); border-radius: var(--radius-lg); background: var(--paper-sunk);
  color: var(--ink-faint); font-size: 14px; text-align: center; padding: 16px;
}
.captura-hueco span { font-weight: 600; color: var(--ink-soft); }
.captura-hueco small { font-size: 12.5px; }

/* ---------- Glosario, búsqueda, contacto ---------- */
.letras { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.letras a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); font-weight: 600; color: var(--ink-soft); }
.letras a:hover { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; }
.glos-letra { padding-top: 24px; }
.glos-letra h2 { font-size: 15px; color: var(--accent-ink); margin-bottom: 6px; }
.glos-letra dl { margin: 0; }
.glos-term { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.glos-term:target { background: var(--accent-soft); margin: 0 -12px; padding: 16px 12px; border-radius: var(--radius-md); }
.glos-term dt { font-weight: 600; color: var(--ink); }
.glos-term dd { margin: 0; font-size: 15px; }
.glos-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 600; }

.buscador--pagina { margin-bottom: 8px; }
.busq-estado { margin: 16px 0 4px; font-size: 14px; color: var(--ink-faint); }

.contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contacto li { display: flex; gap: 16px; padding: 20px; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.contacto h2 { font-size: 17px; margin-bottom: 4px; }
.contacto p + p { margin-top: 6px; }
.contacto a { font-weight: 600; }

/* ---------- Pie de sttok.com (site-footer.tsx) ---------- */
.pie { border-top: 1px solid var(--rule); background: var(--paper); font-family: var(--sl-font-sans); color: var(--ink); }
.pie-in { max-width: 1400px; margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.pie-marca { display: flex; flex-direction: column; gap: 16px; }
.pie-marca p { font-size: 14px; line-height: 1.6; color: var(--ink-faint); max-width: 220px; }
.pie-social { color: var(--ink-faint); display: inline-flex; width: max-content; margin-top: 4px; }
.pie-social:hover { color: var(--ink); }
.pie-col { display: flex; flex-direction: column; gap: 12px; }
.pie-cab { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink) !important; }
.pie-col a:not(.pie-cab) { font-size: 14px; color: var(--ink-faint); }
.pie-col a:hover { color: var(--ink); text-decoration: none; }
.pie-cab:hover { color: var(--ink-faint) !important; }
.pie-barra { border-top: 1px solid var(--rule); }
.pie-barra-in { max-width: 1400px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie-sellos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie-sellos img { height: 32px; width: 80px; object-fit: contain; opacity: .7; }
.pie-der { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; }
.pie-paises { display: flex; align-items: center; gap: 6px; }
.pie-paises a { color: var(--ink-faint); }
.pie-paises a[aria-current] { color: var(--ink); font-weight: 600; }
.pie .icon-btn { color: var(--ink); width: 32px; height: 32px; border-radius: 2px; }
.pie .icon-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---------- Ajustes de lectura y uso (revisión Apple / Stripe) ---------- */
/* Titulares y entradillas sin palabras huérfanas en la última línea. */
h1, .hero-sub, .entradilla, .cab-cat p, .cab-pag p { text-wrap: balance; }

/* El atajo «/» se ve dentro del buscador de la cabecera, solo con teclado físico. */
.buscador-kbd {
  position: absolute; right: 10px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--rule-strong); border-radius: 4px;
  font: 500 12px/1 var(--sl-font-sans); color: var(--ink-faint); background: var(--surface); pointer-events: none;
}
.buscador input:focus ~ .buscador-kbd { display: none; }
@media (pointer: coarse) { .buscador-kbd { display: none; } }

/* Una fila sin nada que añadir no deja hueco debajo del resumen. */
.fila-meta:empty { display: none; }

/* Cada título de sección se puede enlazar: el «#» aparece al pasar por encima. */
.art-cuerpo h2 { position: relative; }
.ancla {
  margin-left: 8px; color: var(--ink-faint); font-weight: 400; opacity: 0; text-decoration: none !important;
  transition: opacity .15s;
}
.art-cuerpo h2:hover .ancla, .ancla:focus-visible { opacity: 1; }
.ancla:hover { color: var(--accent-ink); }

/* Índice de la página en pantallas sin columna derecha: plegado, arriba. */
.indice-movil { display: none; margin: 24px 0 0; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface); }
.indice-movil summary { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.indice-movil summary::-webkit-details-marker { display: none; }
.indice-movil summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg) translateY(-2px); }
.indice-movil[open] summary::after { transform: rotate(-135deg); }
.indice-movil ul { list-style: none; margin: 0; padding: 0 16px 12px; }
.indice-movil a { display: block; padding: 8px 0; font-size: 15px; color: var(--ink-soft); border-top: 1px solid var(--rule); }
@media (max-width: 1180px) { .indice-movil { display: block; } }

/* Con el dedo, nada pulsable por debajo de 44 px. */
@media (pointer: coarse) {
  .soy a, .pais-btn, .icon-btn, .web-menu-btn { min-height: 44px; }
  .icon-btn, .web-menu-btn { min-width: 44px; }
  .pie-col a, .pie-paises a, .web-marca { display: inline-flex; align-items: center; min-height: 44px; }
  .indice-movil a { padding: 12px 0; }
  .ancla { display: none; }
  .valora-btns .btn-sec, .btn-sec { min-height: 44px; }
  .migas a { padding: 6px 0; }
  .pie-col { gap: 0; }
  .faq summary { min-height: 52px; }
}

/* ---------- Anchos ---------- */
@media (max-width: 1180px) {
  .con-indice { grid-template-columns: 220px minmax(0, 1fr); }
  .indice { display: none; }
}
/* Como en sttok.com: por debajo de 1.024 px el menú pasa a un botón. */
@media (max-width: 1023px) {
  .web-cta { display: none; }
  .web-menu-btn { display: inline-flex; }
}
@media (max-width: 900px) {
  .con-lateral, .con-indice { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; }
  .lateral { display: none; }
  .destacados { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Y el pie a dos columnas por debajo de 768, con la marca en la fila entera. */
@media (max-width: 767px) {
  .pie-in { grid-template-columns: 1fr 1fr; padding: 48px 16px; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-barra-in { padding: 20px 16px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  /* La marca, el país y el menú en una línea, y el buscador debajo. La barra
     deja de ser fija: en un móvil, dos filas pegadas arriba se comen la pantalla. */
  .web { position: static; }
  .web-in { flex-wrap: wrap; height: auto; padding: 10px 16px 12px; gap: 10px 4px; }
  .web-acc { margin-left: auto; gap: 2px; }
  .web-marca svg { height: 22px; }
  html { scroll-padding-top: 16px; }
  .web .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .cab-hueco { display: none; }
  .pais-btn .pais-nom { display: none; }
  .pais-btn .pais-cod { display: inline; }
  .envoltura { padding: 0 16px; }
  .hero-in { padding: 48px 16px 40px; }
  .cats { grid-template-columns: minmax(0, 1fr); }
  .cats a { padding: 18px; }
  .cab-cat h1, .cab-pag h1 { font-size: 36px; }
  .papeles { grid-template-columns: minmax(0, 1fr); }
  .papeles a { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
  .papel-ico { grid-row: span 3; }
  .papel-nom { margin-top: 0; }
  .papel-n { margin-top: 8px; }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .glos-term { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .entradilla { font-size: 17px; }
  .mm-lienzo { padding: 20px 12px; }
  .mm--movil .mm-lienzo { padding: 20px 12px 0; }
  .mm-cifras { grid-template-columns: 1fr 1fr; }
  .banda-contacto { padding: 22px 20px; }
  .captura-hueco { aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
  .tabla { font-size: 13.5px; }
  .tabla td, .tabla th { padding: 10px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .papeles a:hover, .cats a:hover { transform: none; }
}
@media print {
  .web, .pie, .lateral, .indice, .valora, .saltar { display: none !important; }
  .con-lateral, .con-indice { display: block; }
  .faq { break-inside: avoid; }
  .faq > *:not(summary) { display: block !important; }
}

.pagina-404 .buscador { margin: 8px 0 0; }

.pie-cookies { border: none; background: none; padding: 0; font: inherit; color: var(--ink-faint); cursor: pointer; }
.pie-cookies:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Solo en local: las notas «Por confirmar» de los artículos (en producción el
   generador las quita) */
.por-confirmar { display: inline; background: #fff3c4; color: #5c4400; font-size: .82em; padding: 1px 5px; border-radius: 3px; }
.aviso-borrador { margin: 0 0 1.2em; }

/* Una tabla de varias columnas no cabe en un móvil: se desplaza ella sola en
   horizontal, y la página no se desborda */
@media (max-width: 640px) {
  .tabla:not(.tabla--cuenta) { display: block; overflow-x: auto; font-size: 14px; }
  .tabla:not(.tabla--cuenta) th, .tabla:not(.tabla--cuenta) td { padding: 10px 9px; min-width: 96px; }
}