/* ============================================================================
 * rt-legal · las cuatro legales y la 404.
 *
 * No hay componentes nuevos: tipografía, colores, radios y tamaños de toque
 * salen de `tokens.css`, igual que en la carta. Fondo blanco, como decidió G6c
 * para toda la web.
 *
 * Reglas que se cumplen aquí y se miden en las capturas:
 *   · ningún texto por debajo de 12 px,
 *   · ningún enlace ni botón por debajo de 44 px de alto,
 *   · contraste AA sobre blanco (olive-900 21:1, stone-700 8,9:1,
 *     olive-800 9,6:1). --color-stone-500 sobre blanco da 5,3:1 y se usa solo
 *     en texto auxiliar de 14 px.
 * ========================================================================= */

.rl-body{
  margin:0;
  background:var(--bg-elevated);
  color:var(--color-olive-900);
  font-family:var(--font-body);
  font-size:16px;
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
}
.rl-body *,.rl-body *::before,.rl-body *::after{box-sizing:border-box}

/* El salto al contenido solo existe para el teclado. */
.rl-skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  min-height:44px;padding:0 var(--space-4);
  display:inline-flex;align-items:center;
  background:var(--color-olive-900);color:var(--color-cream-50);
  border-radius:0 0 var(--radius-md) 0;text-decoration:none;font-weight:600;
}
.rl-skip:focus{left:0}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.rl-top{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  max-width:760px;margin:0 auto;padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-cream-200);
}
.rl-marca{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-weight:600;font-size:17px;
  letter-spacing:var(--tracking-tight);
  color:var(--color-olive-900);text-decoration:none;
}
.rl-marca:hover,.rl-marca:focus{color:var(--color-olive-800)}
.rl-miga{font-size:14px;color:var(--color-stone-700)}
.rl-miga a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--color-olive-800);text-decoration:underline;text-underline-offset:3px;
}
.rl-miga span{margin:0 4px;color:var(--color-stone-500)}

/* ── Cuerpo ───────────────────────────────────────────────────────────── */
.rl-main{max-width:760px;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-9)}

.rl-doc h1,.rl-404 h1{
  font-family:var(--font-display);font-weight:600;
  font-size:28px;line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);margin:0 0 var(--space-3);
}
.rl-lead{font-size:17px;line-height:var(--leading-normal);color:var(--color-stone-700);margin:0 0 var(--space-4)}
.rl-fecha{font-size:14px;color:var(--color-stone-500);margin:0 0 var(--space-6)}

/* El hueco pendiente se ve, no se esconde (ver la plantilla). */
.rl-pendiente{
  margin:0 0 var(--space-6);padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-amber-700);border-left:4px solid var(--color-amber-700);
  border-radius:var(--radius-lg);background:var(--color-cream-50);
  font-size:14px;line-height:var(--leading-snug);color:var(--color-olive-900);
}
.rl-pendiente code{font-family:var(--font-mono);font-size:13px}

.rl-sec{margin-bottom:var(--space-6)}
.rl-sec h2{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  line-height:var(--leading-snug);margin:0 0 var(--space-3);
  padding-top:var(--space-3);border-top:1px solid var(--color-cream-200);
}
.rl-sec p{margin:0 0 var(--space-3)}
.rl-sec ul{margin:0 0 var(--space-3);padding-left:var(--space-5)}
.rl-sec li{margin-bottom:var(--space-2)}
.rl-sec a{color:var(--color-olive-800);text-decoration:underline;text-underline-offset:3px}
.rl-sec a:hover,.rl-sec a:focus{color:var(--color-olive-900);text-decoration-thickness:2px}
/* El alto de toque de los enlaces de dentro de un texto se da con `padding`
   vertical y NUNCA con `min-height`: un `min-height` en un elemento en línea
   abre el interlineado del párrafo entero (medido en la R1 del 11-sep con el
   teléfono de la confirmación). El `padding` no ocupa sitio en el flujo, pero
   sí cuenta para el dedo: 13 px arriba y abajo sobre una caja de línea de
   ~18 px dan 44. Verificado a 320, 390 y 1440 en el barrido automático. */
.rl-sec p a,.rl-sec li a,.rl-dl dd a,.rl-404-tel a{display:inline;padding:13px 0}
/* Los que van SOLOS en su línea sí pueden llevar caja propia. */
.rl-sec li>a:only-child{display:inline-flex;align-items:center;min-height:44px;padding:0}

/* Datos del titular */
.rl-dl{
  margin:0 0 var(--space-4);padding:var(--space-4);
  border:1px solid var(--color-cream-200);border-radius:var(--radius-lg);
  background:var(--color-cream-50);
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);
}
.rl-dl dt{font-size:14px;font-weight:600;color:var(--color-olive-700);white-space:nowrap}
.rl-dl dd{margin:0;font-size:15px;min-width:0;overflow-wrap:anywhere}
@media (max-width:420px){
  /* A 320 px «Registro Mercantil» y su valor no caben en dos columnas. */
  .rl-dl{grid-template-columns:1fr;gap:0}
  .rl-dl dd{margin-bottom:var(--space-3)}
  .rl-dl dd:last-child{margin-bottom:0}
}

/* Tablas: se desplazan ELLAS, la página nunca. */
.rl-tabla{
  display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 0 var(--space-4);border-collapse:collapse;font-size:14px;
}
.rl-tabla thead,.rl-tabla tbody,.rl-tabla tr{display:table;width:100%;table-layout:fixed}
.rl-tabla th,.rl-tabla td{
  padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--color-cream-200);line-height:var(--leading-snug);
}
.rl-tabla th{font-weight:600;color:var(--color-olive-700);background:var(--color-cream-50)}
.rl-tabla code{font-family:var(--font-mono);font-size:13px;overflow-wrap:anywhere}
@media (max-width:600px){
  /* Debajo de 600 la tabla no cabe: se le da ancho propio y se desplaza dentro
     de su caja. El `min-width` es el que hace que el scroll sea del contenedor
     y no del documento. */
  .rl-tabla thead,.rl-tabla tbody,.rl-tabla tr{min-width:560px}
}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.rl-foot{
  max-width:760px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-8);
  border-top:1px solid var(--color-cream-200);
}
.rl-legales{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-5)}
.rl-legales a,.rl-legales span[aria-current]{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;color:var(--color-olive-800);
  text-decoration:underline;text-underline-offset:3px;
}
.rl-legales span[aria-current]{color:var(--color-stone-700);text-decoration:none;font-weight:600}
.rl-id{margin:var(--space-2) 0 0;font-size:14px;line-height:var(--leading-snug);color:var(--color-stone-700)}
.rl-vuelve{margin:var(--space-3) 0 0}
.rl-vuelve a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:600;color:var(--color-olive-800);
  text-decoration:underline;text-underline-offset:3px;
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.rl-404-k{
  margin:0 0 var(--space-2);font-size:12px;font-weight:600;
  letter-spacing:var(--tracking-wider);text-transform:uppercase;
  color:var(--color-olive-700);
}
.rl-404-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0 var(--space-4)}
.rl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--space-5);border:none;border-radius:var(--radius-full);
  font-family:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;
}
/* Los cinco estados declarados: el tema padre pinta `button:hover` en gris y
   el hijo en oliva, y se comerían cualquier botón que solo declare el reposo.
   Aquí son <a>, pero la regla se mantiene por si mañana alguno es <button>. */
.rl-btn--p,.rl-btn--p:focus{background:var(--color-amber-600);color:var(--color-olive-900)}
.rl-btn--p:hover{background:var(--color-amber-500);color:var(--color-olive-900)}
.rl-btn--p:active{background:var(--color-amber-600);transform:scale(.98)}
/* El verde es el de la marca de WhatsApp: se queda tal cual, como en la carta. */
.rl-btn--wa,.rl-btn--wa:focus{background:#25D366;color:#08382B}
.rl-btn--wa:hover{background:#25D366;color:#08382B;filter:brightness(.96)}
.rl-btn--wa:active{background:#25D366;transform:scale(.98)}
.rl-btn:focus-visible{outline:3px solid var(--color-olive-800);outline-offset:2px}
@media (max-width:420px){.rl-btn{width:100%}}

.rl-404-tel{font-size:15px;color:var(--color-stone-700);margin:0 0 var(--space-6)}
.rl-404-tel a{color:var(--color-olive-800);font-weight:600}
.rl-404 h2{
  font-family:var(--font-display);font-weight:600;font-size:18px;
  margin:0 0 var(--space-2);padding-top:var(--space-4);
  border-top:1px solid var(--color-cream-200);
}
.rl-404-cats{list-style:none;margin:0;padding:0}
.rl-404-cats li{border-bottom:1px solid var(--color-cream-200)}
.rl-404-cats a{
  display:flex;align-items:center;min-height:52px;
  font-size:16px;color:var(--color-olive-900);text-decoration:none;
}
.rl-404-cats a::after{content:"›";margin-left:auto;color:var(--color-olive-700);font-size:20px}
.rl-404-cats a:hover,.rl-404-cats a:focus{color:var(--color-olive-800);text-decoration:underline;text-underline-offset:3px}

/* ── Foco visible, el mismo en todo el plugin ─────────────────────────── */
.rl-body a:focus-visible{outline:3px solid var(--color-olive-800);outline-offset:2px;border-radius:var(--radius-sm)}

@media (prefers-reduced-motion:reduce){
  .rl-btn:active{transform:none}
}

/* 0.2.0 · botón para volver a abrir el aviso de cookies (rt-medicion). 44 px mínimo, como todo lo que se toca. */
.rl-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--color-olive-900);color:var(--color-cream-50);font:600 15px/1.2 var(--font-body);cursor:pointer}
.rl-btn:focus-visible{outline:2px solid var(--color-amber-700);outline-offset:2px}