/* ---------- Hoja de estilo de las guías ----------
   Las guías son parte del mismo sitio que la portada, así que los tokens, los
   colores y los botones son los MISMOS que `web/index.html`: si alguien los
   cambia allá, hay que traerlos acá también.

   La línea que separa las dos cosas, y que es la que se rompe sola si no queda
   escrita: el MARCO (contenedor, barra de arriba, pie) se copia de la portada
   tal cual -- por eso `--maxw` es 1560px acá también. La COLUMNA DE LECTURA no:
   se queda en 760px con su propia escala tipográfica, más chica que la de la
   portada. Un titular de 88px y renglones de 1560px son para vender, no para
   leer un artículo de cinco minutos. Marco ancho, texto angosto.

   Esto es un archivo aparte y no un `<style>` inline (como sí lo tiene la
   portada) por una razón: son tres páginas que comparten exactamente el mismo
   diseño, y tres copias del CSS se desincronizan a la primera edición. La
   portada se queda como está -- es una sola página y no hay nada con qué
   desincronizarse. */

:root{
  --bg:#FFFFFF; --soft:#FAF9F7; --ink:#020214; --mute:#56554F; --line:#E7E4DE;
  --terra:#D85A30; --coral:#F0997B; --brown:#6E3F28; --dark:#1C2620;
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
  --maxw:1560px; --pad:32px;
}
/* 48px de aire lateral arriba de 1700, igual que la portada: ahí el margen
   crece a propósito -- es margen, no banda vacía. */
@media (min-width:1700px){ :root{ --pad:48px } }
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

h1{font-weight:400; font-size:clamp(34px,5vw,60px); line-height:1.04; letter-spacing:-.035em}
h2{font-weight:400; font-size:clamp(25px,3vw,36px); line-height:1.12; letter-spacing:-.03em}
h3{font-weight:500; font-size:clamp(18px,2vw,21px); line-height:1.25; letter-spacing:-.02em}
.dim{color:rgba(2,2,20,.45)}
.lede{font-size:17px; line-height:1.55; color:var(--mute)}
p{color:var(--mute)}

.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500;
  color:var(--ink); letter-spacing:.01em}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--terra)}

/* Misma regla que la portada: UN solo color de acento, y la jerarquía la da el
   TAMAÑO (`.btn-sm` en la barra, el tamaño base en el cierre del artículo). Por
   eso el CTA de la barra dejó de ser tinta: a un metro de distancia leía como
   una acción distinta de la terracota del cierre, y son la misma. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:15.5px;
  font-weight:600; text-decoration:none; line-height:1.2;
  border-radius:10px; padding:15px 24px; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease}
.btn .ch{transition:transform .18s ease}
.btn:hover .ch{transform:translateX(3px)}
.btn-primary{background:var(--terra); color:#fff; box-shadow:0 10px 24px -14px rgba(216,90,48,.9)}
.btn-primary:hover{background:#c04c25}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#1a1a2e}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
/* Foco visible en todo lo accionable con teclado: los estilos de arriba pintan
   el hover y sin esto el tabulador quedaba sin rastro (igual que la portada). */
a:focus-visible,button:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:6px}
.tlink{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600;
  text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:border-color .18s ease, color .18s ease}
.tlink:hover{color:var(--terra); border-color:var(--terra)}

/* ---------- NAV ----------
   La misma barra de la portada: pegada arriba, fondo translúcido con blur y los
   enlaces de sección. Dos diferencias, las dos a propósito:

   1. Sin toggle de idioma -- las guías están solo en español (ver el canonical
      del <head> de cada una).
   2. El borde de abajo es fijo, no aparece al hacer scroll: la portada lo
      enciende con JavaScript (`.stuck`) y acá no hay JavaScript. `sticky` sí
      es puro CSS, así que eso sí se hereda.

   Los enlaces apuntan a `../../#ancla`, no a `#ancla`: desde una guía el ancla
   no existe en la página, hay que volver a la portada. */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav .in{display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,28px); padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand .word{font-size:22px; font-weight:700; letter-spacing:-.03em}
.brand .word b{color:var(--terra); font-weight:700}
/* `nowrap` en cada enlace y separación elástica: lo que la portada aprendió a
   los golpes -- la barra se encoge, nunca se parte en dos renglones. */
.navlinks{display:flex; gap:clamp(18px,2.2vw,32px); font-size:14.5px; font-weight:500}
.navlinks a{text-decoration:none; color:var(--mute); white-space:nowrap; transition:color .16s ease}
.navlinks a:hover{color:var(--ink)}
.nav-right{display:flex; align-items:center; gap:14px; flex:none}
.signin{font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink); white-space:nowrap}
.signin:hover{color:var(--terra)}
.btn-sm{padding:11px 18px; font-size:14px; border-radius:9px}

/* ---------- ARTÍCULO ---------- */
.art{padding:56px 0 0}
.narrow{max-width:760px}
.art h1{margin:18px 0 20px}
.art .lede{margin-bottom:22px}
.meta{font-size:13px; color:var(--mute); padding-bottom:26px; border-bottom:1px solid var(--line)}

.body{padding-top:34px}
.body h2{margin:48px 0 16px}
.body h2:first-child{margin-top:0}
.body h3{margin:30px 0 10px}
.body p{font-size:16.5px; line-height:1.65; margin-bottom:16px}
.body ul,.body ol{margin:0 0 18px 20px}
.body li{font-size:16.5px; line-height:1.6; color:var(--mute); margin-bottom:9px}
.body li strong,.body p strong{color:var(--ink); font-weight:600}
.body a{color:var(--terra); text-decoration:none; border-bottom:1px solid rgba(216,90,48,.3)}
.body a:hover{border-bottom-color:var(--terra)}
/* El CTA del cierre vive DENTRO de `.body`, y `.body a` le ganaba por
   especificidad (0-2-0 contra 0-1-0, así que el orden no ayudaba): le pintaba
   el texto de terracota SOBRE terracota y el botón se leía como un bloque de
   color sin letras. Un botón no es un enlace de prosa -- acá se le devuelve lo
   suyo, el color propio y el borde del botón en vez del subrayado. */
.body a.btn{border-bottom:0}
.body a.btn-primary,.body a.btn-ink{color:#fff}
.body a.btn-line{color:var(--ink)}

/* el dato que se cita solo, tipo ficha */
.pill{display:inline-block; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink);
  background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:1px 7px}

/* el aparte que corrige un malentendido (el patrón `.hook` de la portada) */
.hook{display:block; font-size:15px; line-height:1.55; color:var(--brown); background:rgba(216,90,48,.06);
  border:1px solid rgba(216,90,48,.22); border-radius:10px; padding:16px 18px; margin:24px 0}
.hook b{color:var(--terra)}

/* la tabla de "qué documento va en qué caso" */
.tabla{width:100%; min-width:520px; border-collapse:collapse; margin:8px 0 22px; font-size:15px}
.tabla th,.tabla td{text-align:left; vertical-align:top; padding:12px 14px; border-bottom:1px solid var(--line)}
.tabla th{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.tabla td{color:var(--mute)}
.tabla td:first-child{color:var(--ink); font-weight:600; width:26%}
/* La tabla se desborda dentro de SU caja, nunca del cuerpo de la página: el
   `min-width` de arriba es lo que la mantiene legible cuando eso pasa. */
.tabla-scroll{overflow-x:auto}

/* ---------- CIERRE DEL ARTÍCULO ---------- */
.nota{font-size:14px; line-height:1.6; color:var(--mute); background:var(--soft);
  border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:40px 0 0}
.cierre{margin:34px 0 0; padding:34px 0 0; border-top:1px solid var(--line)}
.cierre h2{font-size:clamp(23px,2.6vw,30px); margin-bottom:12px}
.cierre p{font-size:16px; margin-bottom:22px}

.otras{border-top:1px solid var(--line); margin-top:64px; padding:56px 0 0}
.otras .eyebrow{margin-bottom:22px}
.otras-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:64px}
.gcard{display:block; text-decoration:none; border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; background:#fff; transition:border-color .18s ease}
.gcard:hover{border-color:var(--ink)}
.gcard h3{margin-bottom:8px}
.gcard p{font-size:14.5px; line-height:1.5}

footer{padding:44px 0; border-top:1px solid var(--line)}
footer .in{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:14px; color:var(--mute)}
footer a{color:var(--mute); text-decoration:none}
footer a:hover{color:var(--terra)}
.foot-brand{display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink)}
.foot-nav{display:flex; gap:22px; flex-wrap:wrap}

/* ---------- RESPONSIVE ----------
   El mismo mecanismo de la portada: los enlaces de sección se retiran ANTES del
   breakpoint móvil, porque entre 960 y 1080px ya no caben en una línea y, con
   `nowrap`, en vez de partirse se saldrían de la barra (el `overflow-x:hidden`
   del body se comería el CTA). */
@media (max-width:1080px){ .navlinks{display:none} }
@media (max-width:700px){
  .otras-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--pad:20px}
  /* Acá la portada esconde el CTA de la barra porque el del hero está a la
     vista; en una guía no hay hero, así que el que se va es "Iniciar sesión"
     -- el CTA se queda, es lo único a lo que ir desde arriba.

     Y para que ENTRE de verdad: a 375px la marca (143px) más el botón entero
     se pasaban 7px del contenedor, y como el body es `overflow-x:hidden` eso
     no se ve como barra rota, se ve como un botón al que le cortaron el borde.
     Se va el chevron -- es decoración -- y el botón aprieta un poco. Medido:
     entra desde 360px. */
  .nav-right .signin{display:none}
  .nav .btn .ch{display:none}
  .nav .btn-sm{padding:10px 15px}
  .art{padding:36px 0 0}
  .body p,.body li{font-size:16px}
}