/* ═══════════════════════════════════════════════════════════
   verifactu.co · SISTEMA
   ═══════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: var(--space-2) var(--space-3); z-index: var(--z-loader);
}
.skip:focus { left: 0; }

/* ── Retícula ─────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Sin esto, un bloque de código ancho desborda el viewport en móvil */
.grid12 > *, .tl > *, .duo > *, .tiers > *, .figs > *, .row > * { min-width: 0; }

section { padding-block: var(--section-y); position: relative; }

.measure { max-width: var(--measure); }

/* Secciones invertidas: el cambio de fondo marca el ritmo */
.invert {
  background: var(--ink);
  color: var(--paper);
  --accent: var(--accent-bright);
  --muted: var(--muted-dark);
  --line: var(--line-dark);
  --paper-2: var(--ink-2);
  --paper-3: rgba(244,242,236,.1);
}

/* ── Tipografía ───────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.t-hero { font-size: var(--t-hero); }
.t-h1   { font-size: var(--t-h1); }
.t-h2   { font-size: var(--t-h2); }

.t-h3 {
  font-size: var(--t-h3);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.018em;
}

.display em { font-style: italic; color: var(--accent); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

.lead {
  font-size: clamp(1.05rem, .7vw + .95rem, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* Número de sección — recurso editorial, usado en toda la web */
.sec-n {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .12em;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.sec-n b { color: var(--accent); font-weight: 400; }
.sec-n span { margin-left: auto; }

/* ── Enlaces y botones ────────────────────────────────────── */

.link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  position: relative;
  padding-bottom: 2px;
}

.link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}

.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link .arrow { transition: transform .4s var(--ease-out); }
.link:hover .arrow { transform: translate(3px, -3px); }

/* Botón: texto que se desliza al pasar por encima */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.7em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}

.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}

.btn:hover { color: var(--paper); }
.btn:hover::before { transform: translateY(0); }

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid::before { background: var(--accent); }
.btn-solid:hover { color: var(--paper); border-color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Header ───────────────────────────────────────────────── */

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  transition: transform .5s var(--ease-out), background-color .4s var(--ease-out);
  will-change: transform;
}

.hdr-in { padding-block: var(--space-3); }

.hdr.solid {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
}

.hdr.hide { transform: translateY(-102%); }

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
}

.brand i { font-style: italic; color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: .95rem;
}

.nav-links a { position: relative; }

.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}

.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  padding: .5em 0;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* Menú móvil a pantalla completa */
.menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-6) var(--pad-x) var(--space-5);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform .7s var(--ease-in-out);
  overflow-y: auto;
}

.menu.open { transform: translateY(0); }

.menu-list { list-style: none; margin: auto 0; padding: 0; }

.menu-list li { overflow: hidden; }

.menu-list a {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 4.5rem);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: .12em;
  transform: translateY(105%);
  transition: transform .7s var(--ease-out);
}

.menu.open .menu-list a { transform: translateY(0); }
.menu-list a small { font-family: var(--font-mono); font-size: .8rem; color: var(--muted-dark); }
.menu-foot { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted-dark); }

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(9rem, 18vh, 13rem);
  padding-bottom: var(--space-6);
}

.hero-title { margin-bottom: var(--space-4); }

/* Máscara para el reveal por líneas */
/* La máscara que hace entrar cada línea del titular recorta lo que se salga
   de la caja de línea. Con line-height .92 y la itálica del display, los
   descendentes (y, p, f, q) caen por debajo de esa caja y salían cortados a
   ras. El relleno les hace sitio; el margen negativo lo descuenta, para que
   el interlineado del titular no cambie ni un píxel.

   Lo mismo hace falta a los lados, y es menos evidente. La itálica inclina
   el trazo: un descendente que abre línea —la «p» de «probada» en la home—
   apoya su remate a la IZQUIERDA del origen del glifo, fuera de la caja.
   Con overflow oculto y sin relleno lateral, ese pie salía seccionado en
   vertical, como cortado con cuchilla, en vez de afinarse. Al cierre de
   línea pasa al revés, porque la itálica se derrama por la derecha.
   Medido en Chromium: se perdía 1 px de CSS de tinta en el borde izquierdo.
   El relleno lateral se descuenta igual con margen negativo, así que la
   columna de texto no se mueve; solo se pinta lo que antes se cortaba. */
.line-mask {
  display: block;
  padding-bottom: .22em;
  margin-bottom: -.22em;
  padding-inline: .1em;
  margin-inline: -.1em;
  overflow: hidden;
}
.line-mask > span { display: block; }

/* Tiene que bajar más que antes: ahora la máscara es .22em más alta y con
   el 105% de siempre asomaría el borde superior de la línea. */
.js .line-mask > span { transform: translateY(130%); }

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.scroll-hint {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: .6em;
}

.scroll-hint::after {
  content: '';
  width: 1px; height: 34px;
  background: currentColor;
  transform-origin: top;
  animation: drop 2.4s var(--ease-in-out) infinite;
}

@keyframes drop { 0%,100% { transform: scaleY(.3); opacity:.3 } 50% { transform: scaleY(1); opacity:1 } }

/* ── Cadena de huellas (elemento de firma) ────────────────── */

.chain {
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
}

.chain-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

.chain-bar .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--paper-3); flex: none;
}
.chain-bar .dot.live { background: var(--accent); }

.chain-body { padding: .9rem 1rem; display: grid; gap: .5rem; }

.chain-row {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: baseline;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(6px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

.chain-row:last-child { border-bottom: 0; padding-bottom: 0; }
.chain-row.in { opacity: 1; transform: none; }
.chain-n { color: var(--muted); font-size: .64rem; }
.chain-hash { word-break: break-all; font-size: .68rem; }
.chain-hash b { color: var(--accent); font-weight: 500; }
.chain-meta { grid-column: 2; color: var(--muted); font-size: .62rem; }

.chain-foot {
  padding: .7rem 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .62rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── Manifiesto ───────────────────────────────────────────── */

.manifesto { text-align: left; }

.manifesto .display { max-width: 18ch; }

/* Palabras que se encienden con el scroll */
.word { transition: color .5s var(--ease-out); }
.js .word { color: var(--muted); }        /* legible AA incluso sin encender */
.js .word.lit { color: currentColor; }

/* ── Lista editorial (errores, pasos, features) ───────────── */

.rows { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 5rem 1fr 1.1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color .4s var(--ease-out);
}

.row:hover { background: var(--paper-2); }

.row-n { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--accent); }
.row h3 { margin-bottom: .2em; }
.row p  { margin: 0; color: var(--muted); font-size: .96rem; max-width: 48ch; }

@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ── Timeline sticky ──────────────────────────────────────── */

.tl { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-6); align-items: start; }

.tl-sticky { position: sticky; top: 22vh; min-width: 0; }

.tl-steps { display: grid; }

.tl-step {
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  opacity: .62;
  transition: opacity .5s var(--ease-out), border-color .5s var(--ease-out);
}

.tl-step.active { opacity: 1; border-top-color: var(--accent); }
.tl-step h3 { margin-bottom: .4em; }
.tl-step p { color: var(--muted); margin: 0; }

.tl-num {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-2);
}

@media (max-width: 900px) {
  .tl { grid-template-columns: 1fr; gap: var(--space-4); }
  .tl-sticky { position: static; }
}

/* ── Panel de dos columnas (modalidades) ──────────────────── */

.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

.panel { border-top: 2px solid var(--ink); padding-top: var(--space-3); }
.panel.alt { border-top-color: var(--accent); }
.panel ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.panel li {
  padding: .65em 0; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .95rem;
}

@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }

/* ── Cifras ───────────────────────────────────────────────── */

.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }

.fig { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.fig b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1; font-weight: 400;
  margin-bottom: .25em;
}
.fig span { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 820px) { .figs { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); } }

/* ── Código ───────────────────────────────────────────────── */

.code { border: 1px solid var(--line); background: var(--paper-2); }

.code-bar {
  padding: .7rem 1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

.code pre {
  margin: 0; padding: 1.2rem; overflow-x: auto;
  font-family: var(--font-mono); font-size: .76rem;
  line-height: 1.7; color: var(--ink);
}

.code .k { color: var(--accent); }
.code .s { color: #2E6E52; }
.code .c { color: var(--muted); font-style: italic; }
.invert .code .s { color: #7FD1B9; }

/* ── Planes ───────────────────────────────────────────────── */

.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }

.tier { border-top: 1px solid var(--line); padding-top: var(--space-3); display: flex; flex-direction: column; }
.tier.featured { border-top: 2px solid var(--accent); }
.tier-name { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.tier-price { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; }
.tier-price small { font-family: var(--font-body); font-size: .8rem; color: var(--muted); }
.tier ul { list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; font-size: .92rem; color: var(--muted); }
.tier li { padding: .5em 0; border-bottom: 1px solid var(--line); }
.tier .btn { margin-top: auto; justify-content: center; }

@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); } }
@media (max-width: 560px)  { .tiers { grid-template-columns: 1fr; } }

/* ── FAQ ──────────────────────────────────────────────────── */

details { border-bottom: 1px solid var(--line); }

summary {
  cursor: pointer; list-style: none;
  padding-block: var(--space-3);
  display: flex; justify-content: space-between; gap: var(--space-3);
  align-items: baseline;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  transition: color var(--dur-micro) var(--ease-out);
}

summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--accent); }
summary::after { content: '+'; color: var(--accent); font-size: 1.4em; line-height: 1; transition: transform .35s var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 var(--space-3); color: var(--muted); max-width: 60ch; }

/* ── CTA final ────────────────────────────────────────────── */

.cta-huge { display: inline-block; position: relative; }

.cta-huge .display { line-height: .95; }

.cta-huge .arrow {
  display: inline-block;
  transition: transform .5s var(--ease-out);
}

.cta-huge:hover .arrow { transform: translate(.12em, -.12em); }

/* ── Footer como sección ──────────────────────────────────── */

.foot { background: var(--ink); color: var(--paper); --muted: var(--muted-dark); --line: var(--line-dark); --accent: var(--accent-bright); }

.foot-in { min-height: 72svh; display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--section-y) var(--space-4); }

/* Cinco columnas desde que la casuística fiscal tiene la suya. En pantallas
   intermedias caen a tres y luego a dos: con cinco fijas, la última columna
   queda en dos caracteres de ancho. */
.foot-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (max-width: 1100px) { .foot-nav { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-5); } }
@media (max-width: 700px)  { .foot-nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .foot-nav { grid-template-columns: 1fr; } }
.foot-nav h4 { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 0 0 var(--space-2); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.foot-bottom { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-6); }


/* ── Aviso de estado ──────────────────────────────────────── */

.status-bar {
  background: var(--ink); color: var(--paper);
  padding: .6rem var(--pad-x);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .04em;
}
.status-bar a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-bright); margin-right: .5em; vertical-align: middle; }

/* ── Reveals (progressive enhancement) ────────────────────── */

.js .rv { opacity: 0; transform: translateY(28px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity var(--dur-el) var(--ease-out), transform var(--dur-el) var(--ease-out); }

.js .rv-img { clip-path: inset(100% 0 0 0); }
.js .rv-img.in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-out); }

/* ── Movimiento reducido ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .rv, .js .rv-img, .js .line-mask > span, .chain-row {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .js .word { color: currentColor !important; }
  .scroll-hint::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG Y PÁGINAS DE TEXTO
   ═══════════════════════════════════════════════════════════ */

.wrap-narrow { max-width: 940px; }

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: var(--space-5);
}
.breadcrumbs a:hover { color: var(--accent); }

/* Alias heredados del sistema anterior */
.eyebrow { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .12em;
           text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-3); }
.mono  { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .04em; }
.rose  { color: var(--accent); }
.rv-d1 { transition-delay: .07s; }
.rv-d2 { transition-delay: .14s; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary::before { background: var(--accent); }
.btn-primary:hover { color: var(--paper); border-color: var(--accent); }
.btn-ghost { background: transparent; }

/* ── Listado de artículos ─────────────────────────────────── */

.posts { border-top: 1px solid var(--line); }

.post-item {
  display: grid;
  grid-template-columns: 9rem 1fr 7rem;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background-color .35s var(--ease-out);
}

.post-item:hover { background: var(--paper-2); }
.post-item:hover h2 { color: var(--accent); }
.post-item h2 { font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.25;
                letter-spacing: -.015em; margin-bottom: .25em; transition: color .3s var(--ease-out); }
.post-item p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 60ch; }

.post-cat  { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .1em;
             text-transform: uppercase; color: var(--accent); }
.post-date { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--muted);
             white-space: nowrap; text-align: right; }

@media (max-width: 860px) {
  .post-item { grid-template-columns: 1fr; gap: var(--space-1); }
  .post-date { text-align: left; }
}

/* ── Artículo ─────────────────────────────────────────────── */

.article { max-width: 68ch; margin-inline: auto; }
.article-head { margin-bottom: var(--space-6); }
.article-head h1 { font-family: var(--font-display); font-weight: 400;
                   font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.025em;
                   margin-bottom: var(--space-3); text-wrap: balance; }
.article-meta { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .1em;
                text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }

.prose { font-size: clamp(1.02rem, .4vw + .94rem, 1.15rem); line-height: 1.68; }

.prose h2 { font-family: var(--font-display); font-weight: 400;
            font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em;
            margin: var(--space-6) 0 var(--space-2); }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: var(--space-4) 0 var(--space-1); }
.prose p  { color: var(--ink); max-width: 68ch; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { color: var(--ink); padding-left: 1.3rem; margin: 0 0 1.2em; max-width: 68ch; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }

.prose code { font-family: var(--font-mono); font-size: .86em; background: var(--paper-2);
              border: 1px solid var(--line); padding: .1em .38em; }
.prose pre { background: var(--ink); color: var(--paper); border: 0; padding: var(--space-3);
             overflow-x: auto; font-family: var(--font-mono); font-size: .8rem; line-height: 1.65;
             margin: var(--space-4) 0; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }

.prose blockquote { margin: var(--space-4) 0; padding-left: var(--space-3);
                    border-left: 2px solid var(--accent); color: var(--muted);
                    font-family: var(--font-display); font-size: 1.35rem; line-height: 1.35; }
.prose blockquote p { color: inherit; margin-bottom: 0; }

.prose table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: .93rem; }
.prose th, .prose td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; background: var(--paper-2); }
.prose td { color: var(--muted); }

/* Aviso destacado */
.note { border-top: 2px solid var(--accent); background: var(--paper-2);
        padding: var(--space-3); margin: var(--space-4) 0; font-size: .96rem; color: var(--ink); }
.note-label { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .12em;
              text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .5rem; }

/* Bloque CTA dentro de artículos y checkout */
.cta { border-top: 2px solid var(--ink); padding-top: var(--space-4); margin-top: var(--space-7); }
.cta h2 { font-family: var(--font-display); font-weight: 400;
          font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════════════════════
   CAPA 1 · LOADER
   Lo inyecta el JS: si el JS falla, no hay loader y la web se ve
   directamente. Nunca puede dejar la página en blanco.
   ═══════════════════════════════════════════════════════════ */

.loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--pad-x);
  transform: translateY(0);
  transition: transform .8s var(--ease-in-out);
}

.loader.out { transform: translateY(-100%); }

.loader-mark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  overflow: hidden;
}

.loader-mark span { display: block; transform: translateY(105%); transition: transform .7s var(--ease-out); }
.loader.in .loader-mark span { transform: translateY(0); }
.loader-mark i { font-style: italic; color: var(--accent-bright); }

.loader-count {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  color: var(--muted-dark);
}

.loader-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent-bright);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out);
}

.loader.in .loader-bar { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════════
   CAPA 3 · CURSOR
   Solo en dispositivos con puntero preciso. Discreto a propósito:
   esta web es transaccional, el cursor acompaña, no compite.
   ═══════════════════════════════════════════════════════════ */

.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--accent);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate3d(-100px, -100px, 0);
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              background-color .3s var(--ease-out), opacity .3s var(--ease-out);
  will-change: transform;
  mix-blend-mode: normal;
}

.cursor.hover {
  width: 42px; height: 42px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid var(--accent);
}

.cursor.hidden { opacity: 0; }

/* Solo con puntero fino: en táctil no existe */
@media (pointer: coarse), (hover: none) {
  .cursor { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   TRANSICIONES DE PÁGINA
   View Transitions nativas: cero JS, y los navegadores que no las
   soportan simplemente navegan como siempre.
   ═══════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .32s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in  .42s var(--ease-out) both; }

@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .loader { display: none; }
  .cursor { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Respuesta directa (GEO)
   Lo primero de cada página normativa. Una IA que rastree esto
   tiene que poder extraer la respuesta sin leer el resto, y una
   persona con prisa también.
   ═══════════════════════════════════════════════════════════ */

.answer {
  border-left: 2px solid var(--accent);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  margin-block: var(--space-5);
  max-width: 68ch;
}
.answer-q {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.answer-a {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.45;
  margin-bottom: var(--space-2);
}
.answer-a strong { font-weight: 600; }
.answer-long { color: var(--muted); font-size: .98rem; line-height: 1.65; }
.answer-src {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: var(--space-3);
}
.invert .answer-a strong { color: var(--paper); }
.invert .answer-long, .invert .answer-src { color: var(--muted-dark); }

/* ── Sello de revisión ────────────────────────────────────── */

.revision {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--muted);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-block: var(--space-5);
}
.invert .revision { color: var(--muted-dark); border-color: var(--line-dark); }

/* ── Tabla de referencia (docs) ───────────────────────────── */

.tabla { width: 100%; overflow-x: auto; margin-block: var(--space-4); }
.tabla table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
.tabla th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: .7em .9em .7em 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.tabla td {
  padding: .8em .9em .8em 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--muted);
}
.tabla td:first-child { color: var(--ink); font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; }
.tabla td code { font-size: .82rem; }
.invert .tabla th { color: var(--muted-dark); border-bottom-color: var(--paper); }
.invert .tabla td { border-bottom-color: var(--line-dark); color: var(--muted-dark); }
.invert .tabla td:first-child { color: var(--paper); }

/* ── Endpoint ─────────────────────────────────────────────── */

.ep {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .84rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  background: var(--paper-2);
  margin-block: var(--space-3);
}
.ep b {
  font-weight: 400; letter-spacing: .08em;
  color: var(--accent); text-transform: uppercase; font-size: .72rem;
}
.ep span { color: var(--muted); margin-left: auto; font-size: .72rem; }
.invert .ep { background: var(--ink-2); border-color: var(--line-dark); }

/* ── Rejilla de tarjetas (errores, integraciones, índices) ── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.card-lnk {
  display: flex; flex-direction: column; gap: var(--space-2);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.card-lnk:hover { border-top-color: var(--accent); }
.card-lnk b {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 400;
  line-height: 1; color: var(--accent);
}
.card-lnk h3 { font-size: 1.02rem; line-height: 1.3; }
.card-lnk p { font-size: .9rem; color: var(--muted); line-height: 1.6; }
.invert .card-lnk { border-top-color: var(--line-dark); }
.invert .card-lnk p { color: var(--muted-dark); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* ── Aviso ────────────────────────────────────────────────── */

.aviso {
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-4);
  font-size: .94rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 68ch;
}
.aviso strong { color: var(--ink); }
.invert .aviso { background: var(--ink-2); color: var(--muted-dark); }
.invert .aviso strong { color: var(--paper); }

/* ── Laboratorio ──────────────────────────────────────────── */

.lab { display: grid; grid-template-columns: 20rem 1fr; gap: var(--gutter); align-items: start; }
.lab-form { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.lab-f { display: flex; flex-direction: column; gap: .4rem; }
.lab-f label {
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lab-f select, .lab-f input {
  font-family: var(--font-mono); font-size: .85rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.lab-f select:focus-visible, .lab-f input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.lab-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.lab-tab {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem .9rem; color: var(--muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.lab-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.lab-out pre {
  margin: 0; padding: 1.2rem; overflow-x: auto;
  font-family: var(--font-mono); font-size: .76rem; line-height: 1.7;
  background: var(--paper-2); border: 1px solid var(--line); border-top: none;
  max-height: 34rem;
}
@media (max-width: 900px) {
  .lab { grid-template-columns: 1fr; }
  .lab-form { position: static; }
}

/* Marcas de "esto falla" / "esto funciona" dentro de un bloque de código.
   Se distinguen además del color con un subrayado, para quien no ve el rojo. */
.code .err {
  color: #A8322A;
  text-decoration: underline wavy currentColor 1px;
  text-underline-offset: 3px;
}
.code .ok { color: #2E6E52; font-weight: 600; }
.invert .code .err { color: #F0938B; }
.invert .code .ok  { color: #7FD1B9; }