*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.astro-R1cbArQB{max-width:1100px;margin:0 auto;padding:0 24px}
.astro-bNKsQFyg{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.astro-bNKsQFyg h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.astro-bNKsQFyg p{font-size:16px;opacity:.8;font-style:italic}
.astro-bNKsQFyg .astro-h2ad1Fb4{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.astro-pdHfrdj6{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.astro-Npk3p9ej{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.astro-Npk3p9ej:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.astro-Npk3p9ej h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.astro-Npk3p9ej h2 a{color:#2c3e50;text-decoration:none}
.astro-Npk3p9ej .astro-pBZiRTvL{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.astro-Npk3p9ej p{font-size:15px;color:#555;margin-bottom:14px}
.astro-NrRFFq2V{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.astro-vVf6SuOu{max-width:780px;margin:0 auto;padding:0 24px 60px}
.astro-vVf6SuOu h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.astro-vVf6SuOu .astro-pBZiRTvL{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.astro-vVf6SuOu h2{font-size:24px;margin:36px 0 14px}
.astro-vVf6SuOu h3{font-size:19px;margin:28px 0 10px}
.astro-vVf6SuOu p{margin-bottom:18px;font-size:17px}
.astro-vVf6SuOu ul,.astro-vVf6SuOu ol{margin:0 0 18px 28px}
.astro-vVf6SuOu a{color:#e74c3c}
.astro-vVf6SuOu img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.astro-YERQk74y{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.astro-YERQk74y a{color:#888}
.astro-OlE9834R{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.astro-z84P3TC1{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.astro-KAB8NnWZ{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.astro-xsAAAhqb{margin:0 0 28px}
.astro-1vEdBUt6{width:100%;height:auto;border-radius:4px}
.astro-LgB6y25m{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.astro-LgB6y25m h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.astro-SUApFbFK{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.astro-SUApFbFK p{font-size:15px;padding:4px 0;margin:0}
.astro-SUApFbFK .astro-pBZiRTvL{margin:0 8px 0 0;display:inline}
.astro-SUApFbFK a{color:#2c3e50;text-decoration:none}
.astro-SUApFbFK a:hover{color:#e74c3c}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600;700&family=Montserrat:wght@400;700&display=swap');
body{font-family:'Source Sans Pro',sans-serif;color:#212529;background:#F8F9FA}
.astro-bNKsQFyg{background:#0D1B2A;color:#fff}
.astro-bNKsQFyg h1{font-family:'Montserrat',serif;color:#fff}
.astro-bNKsQFyg p{color:rgba(255,255,255,.75)}
.astro-bNKsQFyg a{color:#fff;text-decoration:none}
.card h2{font-family:'Montserrat',serif}
.card h2 a{color:#0D1B2A}
.card h2 a:hover{color:#FFB703}
.read-more{color:#FFB703}
.article-content h1{font-family:'Montserrat',serif}
.article-content h2{font-family:'Montserrat',serif}
.article-content a{color:#FFB703}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/*
  vs-usa-es — visa-inmigracion-usa-guia-es
  Persona: Andrés Carmona, coordinador de logística transfronteriza, Tijuana.
  Voice: metódico, curtido en papeleo aduanero, traduce el trámite migratorio
  a español llano sin dramatismo ni "truco garantizado".
  Palette: azul aduana #1E3A5C + rojo sello #B8452C sobre papel oficial frío.
  Fonts: PT Serif (encabezados, documento serio) + Public Sans (cuerpo, USWDS).
  Distinto de im-visa-es (marrón-jade cálido, diario personal, minimal).
*/

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Public+Sans:wght@400;500;600;700&display=swap');

/* === TOKENS === */

:root {
  --primary:      #1E3A5C;
  --primary-dark: #142A44;
  --accent:       #B8452C;
  --accent-light: #F0DCD3;
  --bg:           #F5F7FA;
  --bg-alt:       #E9EDF2;
  --surface:      #FFFFFF;
  --fg:           #1B2430;
  --muted:        #5B6472;
  --border:       #D7DCE3;
  --link:         #2A5788;
  --link-hover:   #B8452C;

  --fh: 'PT Serif', Georgia, serif;
  --fb: 'Public Sans', system-ui, sans-serif;

  --r:    4px;
  --r-lg: 8px;

  --prose-max: 68ch;
}

/* === BASE === */

:root body {
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

:root ::selection {
  background: var(--primary);
  color: #fff;
}

/* === TYPOGRAPHY === */

:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  font-family: var(--fh);
  font-weight: 700;
  line-height: 1.25;
  color: var(--primary);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

:root h1 { font-size: 2.25rem; letter-spacing: -0.01em; }
:root h2 { font-size: 1.6rem; }
:root h3 { font-size: 1.25rem; }
:root h4 { font-size: 1.05rem; }
:root h5 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; }
:root h6 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

:root p {
  max-width: var(--prose-max);
  margin: 0 0 1.2em;
}

:root a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

:root a:hover { color: var(--link-hover); }

:root strong, :root b { font-weight: 600; }
:root em, :root i     { font-style: italic; }

:root blockquote {
  margin: 1.75em 0;
  padding: 1em 1.4em;
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  border-radius: 0 var(--r) var(--r) 0;
  font-style: italic;
  color: var(--fg);
}

:root blockquote p { margin: 0; max-width: none; }

:root ul,
:root ol {
  padding-left: 1.4em;
  margin: 0 0 1.2em;
}

:root li {
  margin-bottom: 0.4em;
  line-height: 1.65;
  max-width: var(--prose-max);
}

:root ul li::marker { color: var(--accent); }
:root ol li::marker { color: var(--primary); font-weight: 700; }

:root hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5em 0;
}

:root img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
}

/* === HEADER === */

:root .astro-bNKsQFyg {
  background: var(--primary);
  color: #fff;
  padding: 2.75rem 1.5rem 2.25rem;
  text-align: center;
  border-bottom: 3px solid var(--accent);
}

:root .astro-bNKsQFyg h1 {
  font-family: var(--fh);
  font-size: 2.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem;
  max-width: none;
}

:root .astro-bNKsQFyg p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin: 0 auto;
  max-width: 680px;
}

:root .astro-bNKsQFyg a { color: #fff; text-decoration: none; }
:root .astro-bNKsQFyg a:hover { color: var(--accent-light); }

/* === NAV === */

:root nav {
  background: var(--primary-dark);
  padding: 0.6rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

:root nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

:root nav a:hover { color: #fff; }

/* === CARDS (portada / listados) === */

:root .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.4rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

:root .card:hover {
  border-color: var(--primary);
  box-shadow: 0 3px 12px rgba(30, 58, 92, 0.12);
}

:root .card h2 {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 0.45rem;
  max-width: none;
}

:root .card h2 a { color: var(--primary); text-decoration: none; }
:root .card h2 a:hover { color: var(--accent); }

:root .card p {
  color: var(--muted);
  font-size: 0.94rem;
  margin-bottom: 0.8rem;
  max-width: none;
}

:root .card time,
:root .card .date {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

:root .read-more {
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

:root .read-more:hover { color: var(--accent); border-color: var(--primary); }

/* === ARTICLE CONTENT === */

:root .article-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-size: 17px;
  line-height: 1.75;
}

:root .article-content h1 {
  font-size: 2rem;
  color: var(--primary);
  border-bottom: 3px solid var(--accent);
  padding-bottom: 0.3em;
  max-width: none;
}

:root .article-content h2 {
  font-size: 1.5rem;
  color: var(--primary);
  border-left: 4px solid var(--accent);
  padding-left: 0.6em;
  margin-top: 2.5em;
  margin-bottom: 0.55em;
  max-width: none;
}

:root .article-content h3 {
  font-size: 1.15rem;
  color: var(--fg);
  margin-top: 1.8em;
  max-width: none;
}

:root .article-content p { max-width: var(--prose-max); }

:root .article-content a {
  color: var(--link);
  text-decoration-color: var(--accent);
}

:root .article-content a:hover { color: var(--link-hover); }

:root .article-content img { border-radius: var(--r); margin: 1.75em 0; }

:root .article-content blockquote {
  border-left-color: var(--accent);
  background: var(--accent-light);
}

:root .article-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: 0.92rem;
}

:root .article-content table th {
  background: var(--primary);
  color: #fff;
  padding: 0.55em 0.8em;
  text-align: left;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

:root .article-content table td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

:root .article-content table tr:nth-child(even) { background: var(--bg-alt); }

/* === FOOTER === */

:root footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.72);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.84rem;
  margin-top: 3rem;
}

:root footer a { color: rgba(255, 255, 255, 0.88); text-decoration: underline; }
:root footer a:hover { color: var(--accent-light); }

/* === RESPONSIVE === */

@media (max-width: 640px) {
  :root body { font-size: 16px; }

  :root .astro-bNKsQFyg { padding: 2rem 1rem 1.75rem; }
  :root .astro-bNKsQFyg h1 { font-size: 1.75rem; }
  :root .article-content { padding: 1.75rem 1rem; }

  :root h1 { font-size: 1.7rem; }
  :root h2 { font-size: 1.35rem; }
  :root h3 { font-size: 1.1rem; }
}

/* === R2 fixes (2026-07-11T05:10:30.743508+00:00) === */

/* Tabla comparativa: el HTML real usa <article> sin clase .article-content,
   así que las reglas de tabla se dirigen al selector de etiqueta. */
article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: 0.92rem;
}

article table th {
  background: var(--primary);
  color: #fff;
  padding: 0.55em 0.8em;
  text-align: left;
  font-family: var(--fh);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

article table td {
  padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

article table tr:nth-child(even) { background: var(--bg-alt); }

/* Aviso de afiliación: párrafo de varias líneas, alineado a la izquierda
   como el resto del artículo en vez de centrado. */
.astro-OlE9834R {
  text-align: left;
  max-width: var(--prose-max);
  margin-left: auto;
  margin-right: auto;
}

/* === R3 fixes (2026-07-11T05:50:34.731892+00:00) === */

/* El aviso de afiliación arranca en el mismo borde izquierdo que los
   párrafos vecinos, en vez de quedar centrado como tarjeta aparte. */
.astro-OlE9834R {
  text-align: left;
  max-width: var(--prose-max);
  margin-left: 0;
  margin-right: 0;
}

/* === QA round-1 fixes (2026-07-25T18:24:51+0800) === */
/*
  El HTML desplegado (rutavisado.com) usa clases ofuscadas astro-*, así que
  todo se dirige con selectores de ELEMENTO + ESTRUCTURA, nunca por clase
  inventada. Mapa real:
    body > nav            → cabecera/masthead (h1 + bajada)
    main > div            → rejilla de portada
    main > div > div      → tarjeta (p fecha · h2 · p entradilla · a "leer")
    main > article        → cuerpo del artículo
  Objetivo: dar jerarquía editorial — un héroe, una banda de selección, una
  rejilla cronológica — y devolver el rojo sello (#B8452C) a un papel de
  "momento" (sello de aduana, capitular, botón del héroe) en vez de ser el
  color genérico de cada enlace "Continue Reading".
*/

/* ---- MASTHEAD: foto + velo azul aduana + sello + wordmark serif itálico ---- */
:root body > nav {
  position: relative;
  display: block;
  background:
    linear-gradient(180deg, rgba(20, 42, 68, 0.80) 0%, rgba(20, 42, 68, 0.92) 100%),
    #142A44 url("/theme-assets/hero-masthead.jpg") center 38% / cover no-repeat;
  padding: 3rem 1.5rem 2.6rem;
  text-align: center;
  border-bottom: 3px solid var(--accent);
}

:root body > nav > div {
  max-width: 760px;
  margin: 0 auto;
}

/* Sello de aduana — monograma "ruta" grabado, firma del sitio */
:root body > nav > div::before {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='none' stroke='%23B8452C' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='23' fill='none' stroke='%23B8452C' stroke-width='1' stroke-dasharray='2 3'/%3E%3Cpath d='M21 40 L32 19 L43 40 M26 34 L38 34' fill='none' stroke='%23F5F7FA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root body > nav h1,
:root body > nav > div > a {
  font-family: var(--fh);
  font-style: italic;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: #fff;
  margin: 0;
  text-decoration: none;
  display: inline-block;
  max-width: none;
}

:root body > nav > div > a:hover { color: var(--accent-light); }

/* Bajada larga (meta description) recortada a dos líneas para no dominar */
:root body > nav > div > p {
  max-width: 620px;
  margin: 0.55rem auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Línea manifiesto — la voz de Andrés bajo el wordmark */
:root body > nav > div::after {
  content: "El primo que sí se sienta a leer la letra pequeña — para que a ti no te agarre por sorpresa.";
  display: block;
  max-width: 560px;
  margin: 1.05rem auto 0;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(240, 220, 211, 0.35);
  font-family: var(--fh);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--accent-light);
}

/* ---- REJILLA DE PORTADA ---- */
:root main > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.75rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.6rem 1.5rem 3.2rem;
  align-items: start;
}

/* Tarjeta base — tratamiento consistente (nada de variación por-3ª) */
:root main > div > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.4rem 1.5rem 1.5rem;
  margin: 0;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

:root main > div > div:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(30, 58, 92, 0.12);
}

/* Fecha → antetítulo sans mayúsculas rastreado (voz meta) */
:root main > div > div > p:first-child {
  font-family: var(--fb);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
  max-width: none;
}

:root main > div > div > h2 {
  font-family: var(--fh);
  font-size: 1.22rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  max-width: none;
}

:root main > div > div > h2 > a {
  color: var(--primary);
  text-decoration: none;
}

:root main > div > div > h2 > a:hover { color: var(--accent); }

:root main > div > div > h2 + p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
  margin: 0 0 0.9rem;
  max-width: none;
}

/* "Continue Reading" — voz meta QUIETA en azul, ya no rojo repetido */
:root main > div > div > a {
  display: inline-block;
  color: var(--primary);
  font-family: var(--fb);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  padding: 0;
}

:root main > div > div > a:hover { color: var(--accent); }

/* ---- HÉROE: la primera tarjeta a todo el ancho, voz alta ---- */
:root main > div > div:first-child {
  grid-column: 1 / -1;
  padding: 2.4rem 2.5rem 2.5rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  box-shadow: 0 6px 24px rgba(20, 42, 68, 0.10);
}

/* Byline compuesto sobre la fecha: badge + autor + lectura */
:root main > div > div:first-child > p:first-child {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

:root main > div > div:first-child > p:first-child::before {
  content: "Última guía · ";
  color: var(--accent);
  font-weight: 700;
}

:root main > div > div:first-child > p:first-child::after {
  content: " · Por Andrés Carmona · 6 min de lectura";
  color: var(--muted);
  font-weight: 600;
}

:root main > div > div:first-child > h2 {
  font-size: 2.35rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}

:root main > div > div:first-child > h2 + p {
  font-family: var(--fh);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--fg);
  max-width: 60ch;
}

/* Capitular en rojo sello — momento tipográfico del héroe */
:root main > div > div:first-child > h2 + p::first-letter {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 0.78;
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--accent);
}

/* CTA del héroe → píldora perfilada en rojo sello */
:root main > div > div:first-child > a {
  margin-top: 0.4rem;
  padding: 0.55em 1.4em;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.76rem;
  transition: background 0.16s ease, color 0.16s ease;
}

:root main > div > div:first-child > a:hover {
  background: var(--accent);
  color: #fff;
}

/* ---- SEGUNDO CAMBIO DE MARCHA: banda "Selección del editor" (tarjetas 2-3) ---- */
:root main > div > div:nth-child(2),
:root main > div > div:nth-child(3) {
  margin-top: 2.7rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  position: relative;
}

:root main > div > div:nth-child(2)::before {
  content: "Selección del editor — empieza por aquí";
  position: absolute;
  top: -2.05rem;
  left: 0;
  font-family: var(--fb);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
}

/* ---- TERCER TRAMO: rótulo del archivo cronológico (desde la tarjeta 4) ---- */
:root main > div > div:nth-child(4),
:root main > div > div:nth-child(5) {
  margin-top: 2.7rem;
  position: relative;
}

:root main > div > div:nth-child(4)::before {
  content: "El archivo — todas las guías";
  position: absolute;
  top: -2.05rem;
  left: 0;
  font-family: var(--fb);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- PÁGINA DE ARTÍCULO: título grande + dinkus + comilla colgante ---- */
:root main > article > h1 {
  font-size: 2.5rem;
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin-bottom: 0.4em;
}

/* Dinkus de sello entre secciones */
:root main > article > h2::before {
  content: "✳ ✳ ✳";
  display: block;
  text-align: center;
  letter-spacing: 0.5em;
  color: var(--accent);
  font-size: 0.8rem;
  margin: 0.2em 0 1.1em;
  opacity: 0.85;
}

:root main > article > blockquote {
  position: relative;
  padding-top: 1.5em;
}

:root main > article > blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.12em;
  left: 0.28em;
  font-family: var(--fh);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
}

/* ---- RESPONSIVE: una columna, héroe y banda se apilan limpio ---- */
@media (max-width: 680px) {
  :root main > div {
    grid-template-columns: 1fr;
    padding: 1.8rem 1.1rem 2.4rem;
  }

  :root body > nav h1,
  :root body > nav > div > a { font-size: 2rem; }

  :root main > div > div:first-child { padding: 1.8rem 1.4rem; }
  :root main > div > div:first-child > h2 { font-size: 1.85rem; }

  :root main > article > h1 { font-size: 1.95rem; }
}


/* === QA tail polish (2026-07-28T16:20:31.756459+00:00) — style Lambda [SB-20] compact tail across templates === */
/* The tail wrapper is always the LAST block child of <main> on the homepage,
   containing title-only rows of older articles. Various templates use different
   inner structures (ul>li / p / direct <a>) — this handles all three. */

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article)) {
  grid-column: 1 / -1;
  max-width: min(720px, 92vw);
  margin: 88px auto 0;
  padding: 40px 0 32px;
  border-top: 2px double rgba(0, 0, 0, .16);
  background: transparent;
  box-shadow: none;
}

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article))::before {
  content: "\2014  MORE FROM THE ARCHIVE  \2014";
  display: block;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 36px;
}

/* Any list / paragraph rows: 2-col on desktop, single on mobile */
:root main > *:last-child ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 48px;
}
@media (max-width: 899px) {
  :root main > *:last-child ul { columns: 1; }
}

:root main > *:last-child li,
:root main > *:last-child > p,
:root main > *:last-child > a {
  padding: 10px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.4;
  border-bottom: 1px dotted rgba(0, 0, 0, .12);
  break-inside: avoid;
  display: block;
}

:root main > *:last-child li a,
:root main > *:last-child p a,
:root main > *:last-child > a {
  text-decoration: none;
  font-weight: 600;
}

:root main > *:last-child li a:hover,
:root main > *:last-child p a:hover,
:root main > *:last-child > a:hover {
  text-decoration: underline;
}

/* dates (first inline child of li/p) — subtle mono */
:root main > *:last-child p > :first-child,
:root main > *:last-child li > :first-child:not(a) {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .5;
  margin-right: 10px;
}