/* ============================================================
   Guías — /guias y /guias/<slug> (09-10-2026)
   Se monta sobre legal.css (carcasa de página, prosa, pie) y los tokens de
   base.css. Prefijo gu- (convención del repo: nl-, tc-, hr-, mt-, lc-, cs-).

   TRAMPA de legal.css: estiliza por elemento dentro de .legal-section con DOS
   niveles. Todo lo de aquí que vive dentro de .legal-section va con dos
   clases como mínimo (.gu-x .y), o pierde. Y dentro de .legal-page, NUNCA el
   shorthand `margin`: reinicia margin-inline y rompe la lectura ancha.
   Ningún color escrito a mano: solo tokens.
   ============================================================ */

/* ---- Prosa: listas y tablas (el Markdown de las guías) ---- */
.legal-section .gu-body ul,
.legal-section .gu-body ol {
  margin-top: 0; margin-bottom: 14px;
  padding-left: 22px;
  color: var(--ink-soft);
}
.legal-section .gu-body li {
  font-size: 15px; line-height: 1.65;
  margin-bottom: 6px;
  text-wrap: pretty;
}
.legal-section .gu-body li::marker { color: var(--accent); }
.legal-section .gu-body table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px; margin-bottom: 16px;
  font-size: 14px; line-height: 1.5;
}
.legal-section .gu-body th,
.legal-section .gu-body td {
  text-align: left; vertical-align: top;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.legal-section .gu-body th {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.legal-section .gu-body td:last-child { white-space: nowrap; }
.legal-section .gu-body tr:last-child td { border-bottom: 0; }
/* La tabla no puede ensanchar la página en móvil: scroll propio. */
.gu-body .gu-table { overflow-x: auto; }

/* ---- "En corto": la respuesta directa, arriba ---- */
.gu-summary {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--line));
  border-radius: 10px;
  padding: 18px 22px 8px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 55%),
    var(--surface);
}
.gu-summary .gu-summary-k {
  display: block; margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--accent);
}
.legal-section.gu-summary p { color: var(--ink); }

/* ---- Índice de la guía ---- */
.gu-toc ol {
  margin: 0; padding-left: 22px;
  columns: 2; column-gap: 28px;
}
.gu-toc li {
  font-size: var(--fs-card-body); line-height: 1.5;
  margin-bottom: 6px; break-inside: avoid;
  color: var(--muted);
}
.gu-toc li::marker { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.legal-section.gu-toc a:where(:not(.brand)) { color: var(--ink-soft); }
@media (max-width: 560px) { .gu-toc ol { columns: 1; } }
.gu-sec { scroll-margin-top: 80px; }

/* ---- Preguntas frecuentes: <details> nativo, mismo patrón que /metodo ---- */
.gu-faq details {
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.gu-faq details:first-of-type { border-top: 1px solid var(--line-soft); }
.gu-faq details[open] {
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 5%, transparent), transparent 40%);
  box-shadow: inset 2px 0 0 var(--accent);
}
.gu-faq summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 10px 15px 12px;
  cursor: pointer; list-style: none;
  color: var(--ink); font-size: 15.5px; line-height: 1.5;
  transition: color var(--t-fast) var(--ease-out);
}
.gu-faq summary::-webkit-details-marker { display: none; }
.gu-faq summary::before {
  content: "+"; flex: none; width: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 15px; line-height: 1.5;
  color: var(--accent);
}
.gu-faq details[open] summary::before { content: "−"; }
.gu-faq details[open] summary { color: var(--accent); }
.gu-faq summary:hover { color: var(--accent); background: var(--surface); }
.gu-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.gu-faq .gu-answer { padding: 0 12px 18px 36px; }
.legal-section .gu-answer p { margin-bottom: 0; }

/* ---- Fuentes ---- */
.legal-section .gu-sources {
  margin: 0; padding-left: 20px;
}
.legal-section .gu-sources li {
  font-size: var(--fs-card-body); line-height: 1.55;
  margin-bottom: 8px; color: var(--muted);
}
.gu-note {
  font-size: var(--fs-card-meta); line-height: 1.55; color: var(--muted);
  margin-bottom: 28px;
}

/* ---- Caso relacionado: la prueba, enlazada a /casos ---- */
.gu-case {
  display: block;
  position: relative;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 22px 16px;
  text-decoration: none; color: var(--ink);
  margin-bottom: 28px;
}
.gu-case .gu-case-k {
  display: block; margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--accent);
}
.gu-case .gu-case-t {
  display: block; margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3;
}
.gu-case .gu-case-l {
  display: block; margin-bottom: 12px;
  font-size: var(--fs-card-body); line-height: 1.6; color: var(--ink-soft);
}
.gu-case .gu-case-go {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--track-action); text-transform: uppercase;
  color: var(--accent);
}

/* ---- Cierre: CTA del diagnóstico (mismo bloque que /casos) + salida a GCT1 ---- */
.gu-cta {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--accent) 34%, var(--line));
  border-radius: 10px;
  padding: 26px 26px 28px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 55%),
    var(--surface);
  margin-bottom: 16px;
}
.gu-cta .gu-cta-h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.3;
  color: var(--ink);
  margin-top: 0; margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.gu-cta .gu-cta-copy {
  font-size: 15px; line-height: 1.65; color: var(--ink-soft);
  margin-top: 0; margin-bottom: 20px; text-wrap: pretty;
}
.gu-cta .gu-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border: 1px solid var(--accent); border-radius: 6px;
  background: color-mix(in oklch, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-action); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-action);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gu-cta .gu-cta-btn:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
.gu-cta .gu-cta-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-card-meta); letter-spacing: 0.06em; color: var(--muted);
  margin-top: 14px; margin-bottom: 0;
}
.gu-exit {
  font-size: var(--fs-card-body); line-height: 1.6; color: var(--muted);
  margin-bottom: 32px;
}
.gu-exit a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.gu-exit a:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Más guías / índice: tarjetas-enlace en el lenguaje común (.card) ---- */
.gu-cards { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 661px) { .gu-cards { grid-template-columns: repeat(2, 1fr); } }
.gu-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  padding: 18px 20px 16px;
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-med) var(--ease-out);
}
.gu-card:hover { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.gu-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gu-card .gu-card-t {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-card-title); font-weight: 700; line-height: 1.3;
  margin-bottom: 8px; text-wrap: balance;
}
.gu-card .gu-card-d {
  font-size: var(--fs-card-body); line-height: 1.6; color: var(--ink-soft);
  margin-bottom: 14px; text-wrap: pretty;
}
.gu-card .gu-card-go {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--track-action); text-transform: uppercase;
  color: var(--accent);
}
.gu-card .gu-arrow { display: inline-block; transition: transform var(--t-med) var(--ease-out); }
.gu-card:hover .gu-arrow { transform: translateX(5px); }
.gu-more {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace; font-size: var(--fs-card-meta); letter-spacing: 0.04em;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  padding-bottom: 1px;
}
.gu-more:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Índice /guias: una sección por área ---- */
.gu-area { margin-bottom: 40px; scroll-margin-top: 80px; }
.gu-area .gu-area-h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-h2); font-weight: 700; color: var(--ink);
  margin-top: 0; margin-bottom: 8px;
}
.gu-area .gu-area-d {
  font-size: 15px; line-height: 1.65; color: var(--ink-soft);
  margin-top: 0; margin-bottom: 16px; max-width: 68ch; text-wrap: pretty;
}

/* ---- Cuerpo y entradillas a la medida ancha (CLAUDE.md, "Anchos") ---- */
@media (min-width: 960px) {
  .legal-section .gu-body li { font-size: 18px; line-height: 1.7; }
  .legal-section .gu-body table { font-size: 15.5px; }
  .gu-cta .gu-cta-copy { font-size: 17px; }
  .gu-area .gu-area-d { font-size: 17px; }
  .legal-page .gu-sub { font-size: 19px; line-height: 1.65; }
}
@media (max-width: 560px) {
  .gu-summary { padding: 16px 16px 6px; }
  .gu-cta { padding: 22px 18px 24px; }
  .legal-section .gu-body td:last-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .gu-cta .gu-cta-btn:hover { transform: none; }
  .gu-card .gu-arrow { transition: none; }
}

/* ---- Lenguaje de tarjeta común (base.css) para .gu-card y .gu-case:
   radio 10, brillo de acento arriba a la derecha y RIEL de 2 px a la izquierda
   que crece con el hover o el foco. Las dos cajas son position: relative (sin
   eso el riel cruzaba la página: bug del 04-10-2026). ---- */
.gu-card, .gu-case {
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--accent) 9%, transparent), transparent 55%),
    var(--surface);
}
.gu-card::before, .gu-case::before {
  content: "";
  position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleY(.35); transform-origin: top;
  transition: transform var(--t-med) var(--ease-out);
  pointer-events: none;
}
.gu-card:hover::before, .gu-card:focus-visible::before,
.gu-case:hover::before, .gu-case:focus-visible::before { transform: scaleY(1); }

/* Entradilla del índice /guias: la escala de leads (CLAUDE.md), 19 px en ≥960. */
.gu-sub {
  font-size: clamp(14.5px, 1.9vw, 17px); line-height: 1.65;
  color: var(--ink-soft); text-wrap: pretty;
  margin-top: 0; margin-bottom: 36px;
}
.gu-related .gu-related-h { margin-bottom: 12px; }

/* Inglés: la nota-invariante "the service is delivered in Spanish" (STRATEGY
   §4.9), dentro del CTA y ANTES del botón. */
.gu-cta .gu-cta-lang {
  font-size: var(--fs-card-body); line-height: 1.6; color: var(--ink-soft);
  border-left: 2px solid var(--accent); padding-left: 12px;
  margin-top: 0; margin-bottom: 20px;
}
.gu-cta .gu-cta-lang strong { color: var(--ink); font-weight: 500; }

/* Qualiax en el área "Vender en otros países" (estilo .qx-ref en base.css). */
.gu-qx { margin-top: -18px; margin-bottom: 32px; }
.gu-area .gu-qx { margin-top: 4px; margin-bottom: 0; }
.gu-related { margin-bottom: 28px; }