/* ═══════════════════════════════════════════════════════════════════════════
   Centro de Ayuda NexoRH — hoja de estilos compartida

   Los tokens son los mismos de la landing (NexoRH-Landing/index.html). Si allá
   cambia un color de marca, cámbialo también aquí: son dos sitios separados a
   propósito, porque cada uno se publica por su cuenta.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Superficies "tinta": deliberadamente oscuras en ambos temas. */
  --ink:#08192C;
  --ink-2:#102E4E;
  --ink-line:rgba(148,181,214,.18);
  --ink-text:#EAF1F8;
  --ink-muted:#94AABF;

  /* Marca */
  --naranja:#F8791A;
  --naranja-alto:#FF963F;
  --azul:#315D86;
  --verde:#12866B;
  --rojo:#C0392B;
  --amarillo:#B7791F;

  /* Superficies que siguen el tema del lector (claro por defecto) */
  --ground:#F2F6FA;
  --surface:#FFFFFF;
  --surface-2:#E9F0F7;
  --text:#0A213B;
  --muted:#55697E;
  --line:#D5E2EF;
  --shadow:0 1px 2px rgba(10,33,59,.05), 0 18px 40px rgba(10,33,59,.08);
  --ring:rgba(248,121,26,.45);

  /* Escala */
  --wrap:1100px;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1E33;
    --surface:#102841;
    --surface-2:#16344F;
    --text:#E7EFF7;
    --muted:#9BB0C6;
    --line:rgba(148,181,214,.20);
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.34);
    --rojo:#E8756A;
    --amarillo:#E3B341;
  }
}
:root[data-theme="dark"]{
  --ground:#0B1E33;
  --surface:#102841;
  --surface-2:#16344F;
  --text:#E7EFF7;
  --muted:#9BB0C6;
  --line:rgba(148,181,214,.20);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 18px 44px rgba(0,0,0,.34);
  --rojo:#E8756A;
  --amarillo:#E3B341;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.62;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Archivo, system-ui, sans-serif; line-height:1.18; margin:0; letter-spacing:-.015em}
code,kbd,.ruta{font-family:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace}

.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
@media (max-width:640px){ .wrap{width:min(100% - 28px, var(--wrap))} }

/* ─── Barra superior ─────────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:60; background:var(--ink); border-bottom:1px solid var(--ink-line)}
.nav-in{display:flex; align-items:center; gap:18px; padding:10px 0; min-height:78px}
.logotipo{height:clamp(46px,5.2vw,62px); width:auto}
.nav a.marca{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links a{
  color:var(--ink-muted); text-decoration:none; font-size:15px; font-weight:600;
  font-family:Archivo, system-ui, sans-serif; padding:6px 2px; border-bottom:2px solid transparent;
  white-space:nowrap; /* "RR. HH." no debe partirse en dos líneas */
}
.nav-links a:hover{color:var(--ink-text)}
.nav-links a[aria-current="page"]:not(.btn){color:#fff; border-bottom-color:var(--naranja)}
.nav-links .btn{border-bottom:none}
/* El botón necesita más peso que `.nav-links a`, que si no le impone su color
   apagado: el texto quedaba a 1.13:1 sobre el naranja, es decir, ilegible. */
.nav-links a.btn-primary,
.nav-links a.btn-primary[aria-current="page"]{color:#160A02}
@media (max-width:860px){
  .nav-in{min-height:66px; gap:10px}
  .nav-links{gap:14px}
  .nav-links a{font-size:13.5px}
  .nav-links .oculta-movil{display:none}
}
@media (max-width:560px){
  .nav-in{min-height:58px; gap:6px}
  .logotipo{height:40px}
  .nav-links{gap:11px}
  .nav-links a{font-size:12.5px}
  .nav-links .btn{padding:8px 13px; font-size:12.5px}
}
/* Por debajo de 400px no caben logo y enlaces en una linea. Antes que esconder
   secciones, la barra pasa a dos filas: se sigue llegando a todo. */
@media (max-width:400px){
  .nav-in{flex-wrap:wrap; justify-content:space-between; padding-bottom:9px; min-height:0}
  .nav-links{margin-left:0; width:100%; justify-content:space-between; gap:6px}
  .nav-links a{font-size:12px}
  .nav-links .btn{padding:7px 11px; font-size:12px}
}

/* ─── Botones ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:Archivo, system-ui, sans-serif; font-weight:700; font-size:15px;
  padding:11px 20px; border-radius:11px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, filter .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--naranja); color:#160A02; border-color:var(--naranja)}
.btn-primary:hover{background:var(--naranja-alto)}
.btn-ghost{background:transparent; color:var(--ink-text); border-color:var(--ink-line)}
.btn-ghost:hover{border-color:var(--ink-muted)}
.btn-linea{background:var(--surface); color:var(--text); border-color:var(--line)}
.btn-linea:hover{border-color:var(--naranja)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:8px}

/* ─── Encabezado de página ───────────────────────────────────────────────── */
.cabecera{background:var(--ink); color:var(--ink-text); padding:46px 0 54px}
.cabecera h1{font-size:clamp(28px,4.4vw,44px); font-weight:800; color:#fff}
.cabecera p{color:var(--ink-muted); max-width:62ch; margin:14px 0 0; font-size:17.5px}
.miga{font-size:14px; color:var(--ink-muted); margin:0 0 14px; font-family:Archivo, sans-serif; font-weight:600}
.miga a{color:var(--ink-muted); text-decoration:none}
.miga a:hover{color:var(--naranja-alto)}

/* ─── Buscador ───────────────────────────────────────────────────────────── */
.buscador{position:relative; max-width:640px; margin-top:26px}
.buscador input{
  width:100%; font:inherit; font-size:17px; padding:15px 16px 15px 46px;
  border-radius:13px; border:1px solid var(--ink-line); background:rgba(255,255,255,.06);
  color:#fff;
}
.buscador input::placeholder{color:var(--ink-muted)}
.buscador .lupa{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:19px; height:19px; stroke:var(--ink-muted); fill:none; stroke-width:2}
.resultados{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:50;
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow); overflow:hidden; max-height:min(60vh,420px); overflow-y:auto;
}
.resultados a{
  display:block; padding:12px 16px; text-decoration:none; border-bottom:1px solid var(--line);
}
.resultados a:last-child{border-bottom:none}
.resultados a:hover,.resultados a.sel{background:var(--surface-2)}
.resultados b{display:block; font-family:Archivo, sans-serif; font-size:15.5px; color:var(--text)}
.resultados span{display:block; font-size:14px; color:var(--muted); margin-top:2px}
.resultados .vacio{padding:16px; color:var(--muted); font-size:15px}
.resultados .vacio a{display:inline; padding:0; border:none; color:var(--naranja); text-decoration:underline}

/* ─── Rejillas y tarjetas ────────────────────────────────────────────────── */
.seccion{padding:56px 0}
.seccion h2{font-size:clamp(22px,3vw,30px); font-weight:800}
.seccion p.intro{color:var(--muted); max-width:66ch; margin:12px 0 0; font-size:17px}
.rejilla{display:grid; gap:16px; margin-top:26px}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

.tarjeta{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:block;
  transition:border-color .14s ease, transform .14s ease;
}
a.tarjeta:hover{border-color:var(--naranja); transform:translateY(-2px)}
.tarjeta h3{font-size:18.5px; font-weight:700; margin-bottom:7px}
.tarjeta p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.55}
.tarjeta .icono{
  width:40px; height:40px; border-radius:11px; background:var(--surface-2);
  display:grid; place-items:center; margin-bottom:14px; font-size:20px;
}
.tarjeta .cuenta{font-size:13px; color:var(--muted); font-family:Archivo,sans-serif; font-weight:600; margin-top:12px; display:block}

/* Tarjeta de rol, en la portada */
.rol{position:relative; overflow:hidden}
.rol::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--naranja)}
.rol.azul::before{background:var(--azul)}
.rol.verde::before{background:var(--verde)}
.rol .quien{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px;
}

/* ─── Guías ──────────────────────────────────────────────────────────────── */
.guia{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--shadow); margin-top:20px; scroll-margin-top:100px;
}
@media (max-width:640px){ .guia{padding:20px 18px} }
.guia > h3{font-size:21px; font-weight:800; margin-bottom:4px}
.guia .ubic{
  font-family:"IBM Plex Mono", monospace; font-size:13.5px; color:var(--muted);
  margin:0 0 16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.ruta{
  background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  padding:2px 7px; font-size:12.5px; color:var(--text);
}
.guia ol{margin:0; padding-left:22px}
.guia ol > li{margin-bottom:9px}
.guia ol > li::marker{font-family:Archivo,sans-serif; font-weight:700; color:var(--naranja)}
.guia ul{margin:10px 0; padding-left:20px}
.guia ul > li{margin-bottom:6px}
.guia p{margin:0 0 12px}
.guia h4{font-size:16px; font-weight:700; margin:20px 0 8px; color:var(--text)}

/* Avisos dentro de una guía */
.nota{
  border-left:3px solid var(--azul); background:var(--surface-2);
  padding:13px 16px; border-radius:0 10px 10px 0; margin:16px 0; font-size:15.5px;
}
.nota.ojo{border-left-color:var(--amarillo)}
.nota.alto{border-left-color:var(--rojo)}
.nota.bien{border-left-color:var(--verde)}
.nota strong{font-family:Archivo,sans-serif}
.nota p:last-child{margin-bottom:0}

/* Hueco de captura de pantalla */
.captura{margin:18px 0}
.captura img{border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow)}
.captura figcaption{font-size:14px; color:var(--muted); margin-top:8px; text-align:center}
.captura .pendiente{
  border:2px dashed var(--line); border-radius:11px; padding:30px 20px; text-align:center;
  color:var(--muted); font-size:14.5px; background:var(--surface-2);
}
.captura .pendiente b{display:block; font-family:Archivo,sans-serif; color:var(--text); margin-bottom:4px; font-size:15px}

/* ─── Tablas ─────────────────────────────────────────────────────────────── */
.tabla-cont{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  font-family:Archivo,sans-serif; font-weight:700; font-size:13.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); background:var(--surface-2);
}
tbody tr:last-child td{border-bottom:none}

/* ─── Lista de control ───────────────────────────────────────────────────── */
.control{list-style:none; padding:0; margin:24px 0 0}
.control li{
  display:flex; gap:14px; align-items:flex-start; padding:15px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:9px;
  transition:opacity .14s ease;
}
.control li.hecho{opacity:.55}
.control li.hecho .txt b{text-decoration:line-through}
.control input[type=checkbox]{
  width:21px; height:21px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--naranja); cursor:pointer;
}
.control .txt b{display:block; font-family:Archivo,sans-serif; font-size:16.5px; font-weight:700}
.control .txt span{display:block; color:var(--muted); font-size:15px; margin-top:2px}
.control .txt a{color:var(--naranja)}
.avance{
  display:flex; align-items:center; gap:14px; margin-top:22px; padding:15px 18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
}
.avance .barra{flex:1; height:9px; background:var(--ground); border-radius:99px; overflow:hidden}
.avance .barra i{display:block; height:100%; width:0; background:var(--naranja); border-radius:99px; transition:width .25s ease}
.avance b{font-family:Archivo,sans-serif; font-size:15px; white-space:nowrap}

/* ─── Cabecera de categoría ──────────────────────────────────────────────────
   El icono va dibujado, no como emoji: los emoji los pinta cada sistema a su
   manera y desentonan en una cabecera de producto. Y el conteo va fundido en
   el rótulo, para no apilar cuatro líneas cortas una encima de otra.
   ─────────────────────────────────────────────────────────────────────────── */
.cat{display:flex; gap:19px; align-items:center; margin-top:4px}
.cat-ico{
  width:62px; height:62px; flex:0 0 auto; border-radius:18px;
  display:grid; place-items:center;
  background:rgba(248,121,26,.10);
  border:1px solid rgba(248,121,26,.26);
}
.cat-ico svg{
  width:28px; height:28px; stroke:var(--naranja); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.cat-eyebrow{
  display:block; font-family:"IBM Plex Mono", monospace; font-size:11.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px;
}
.cat-eyebrow b{color:var(--naranja-alto); font-weight:500}
.cabecera .cat h1{font-size:clamp(26px,4vw,40px)}
.cat-desc{color:var(--ink-muted); max-width:62ch; margin:20px 0 0; font-size:17px}
@media (max-width:560px){
  .cat{gap:14px}
  .cat-ico{width:48px; height:48px; border-radius:14px}
  .cat-ico svg{width:22px; height:22px}
  .cat-eyebrow{font-size:10.5px; margin-bottom:6px}
  .cat-desc{font-size:16px; margin-top:16px}
}

/* ─── Filtro dentro de una categoría ─────────────────────────────────────── */
.estrecho{max-width:820px}
.filtro-caja{position:relative; margin-bottom:22px}
.filtro-caja input{
  width:100%; font:inherit; font-size:16.5px; padding:14px 16px 14px 46px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text);
}
.filtro-caja input::placeholder{color:var(--muted)}
.filtro-caja input:focus{border-color:var(--naranja)}
.filtro-caja .lupa{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2;
}
.sin-coincidencias{
  padding:26px 20px; text-align:center; color:var(--muted); font-size:16px;
  border:1px dashed var(--line); border-radius:12px; background:var(--surface-2);
}
.sin-coincidencias a{color:var(--naranja); font-weight:600}

/* ─── Temas plegables ────────────────────────────────────────────────────── */
.temas{display:flex; flex-direction:column; gap:9px}
.tema{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
  /* El documento ya reserva 96px por la barra fija (scroll-padding-top). Aquí
     solo hace falta un respiro extra: si se repiten los 96, se suman. */
  scroll-margin-top:10px;
}
.tema[open]{border-color:var(--naranja); box-shadow:var(--shadow)}
.tema > summary{
  display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
  list-style:none; user-select:none;
}
.tema > summary::-webkit-details-marker{display:none}
.tema > summary:hover{background:var(--surface-2)}
.tema > summary:focus-visible{outline:3px solid var(--ring); outline-offset:-3px}
.tema .ico{
  width:22px; height:22px; flex:0 0 auto; stroke:var(--azul); fill:none; stroke-width:1.7;
}
.tema[open] .ico{stroke:var(--naranja)}
.tema .tit{
  flex:1; font-family:Archivo, system-ui, sans-serif; font-weight:600; font-size:17px;
  line-height:1.35; color:var(--text);
}
.tema .chev{
  width:18px; height:18px; flex:0 0 auto; stroke:var(--muted); fill:none; stroke-width:2.2;
  transition:transform .18s ease;
}
.tema[open] .chev{transform:rotate(90deg); stroke:var(--naranja)}
.tema .cuerpo{
  padding:4px 22px 24px; border-top:1px solid var(--line); margin-top:-1px;
}
.tema .cuerpo > *:first-child{margin-top:18px}
@media (max-width:560px){
  .tema > summary{padding:14px 15px; gap:11px}
  .tema .tit{font-size:15.8px}
  .tema .cuerpo{padding:4px 16px 20px}
}
/* El contenido de las guías conserva su tipografía dentro del acordeón */
.tema .ubic{
  font-family:"IBM Plex Mono", monospace; font-size:13.5px; color:var(--muted);
  margin:0 0 16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.tema .cuerpo ol{margin:0; padding-left:22px}
.tema .cuerpo ol > li{margin-bottom:9px}
.tema .cuerpo ol > li::marker{font-family:Archivo,sans-serif; font-weight:700; color:var(--naranja)}
.tema .cuerpo ul{margin:10px 0; padding-left:20px}
.tema .cuerpo ul > li{margin-bottom:6px}
.tema .cuerpo p{margin:0 0 12px}
.tema .cuerpo h4{font-size:16px; font-weight:700; margin:20px 0 8px; color:var(--text)}

/* ─── Dos estados: lista y lectura ────────────────────────────────────────────
   La página de categoría empieza como una lista limpia de temas. Al tocar uno
   se entra en lectura: se ve ESE tema y nada más, con el menú de la categoría
   al lado. Sin JavaScript no hay estados y los <details> funcionan sueltos.
   ─────────────────────────────────────────────────────────────────────────── */

/* Lista: una sola columna, sin panel, todo cerrado. */
body[data-modo="indice"] .con-rail{grid-template-columns:1fr}
body[data-modo="indice"] .rail{display:none}
body[data-modo="indice"] .volver{display:none}

/* Lectura: solo el tema elegido, y el panel a la par. */
body[data-modo="lectura"] .filtro-caja,
body[data-modo="lectura"] #sinCoincidencias,
body[data-modo="lectura"] .temas > article.guia,
body[data-modo="lectura"] .temas > .nota{display:none}
body[data-modo="lectura"] .tema:not(.activo){display:none}
body[data-modo="lectura"] .tema.activo{border-color:var(--line); box-shadow:var(--shadow)}
body[data-modo="lectura"] .tema.activo > summary{
  cursor:default; pointer-events:none; padding:24px 26px 2px; gap:0;
}
body[data-modo="lectura"] .tema.activo > summary:hover{background:transparent}
body[data-modo="lectura"] .tema.activo .chev,
body[data-modo="lectura"] .tema.activo > summary .ico{display:none}
body[data-modo="lectura"] .tema.activo .tit{
  font-size:clamp(21px,2.6vw,27px); font-weight:800; letter-spacing:-.018em; line-height:1.2;
}
body[data-modo="lectura"] .tema.activo .cuerpo{border-top:none; padding-top:0}
body[data-modo="lectura"] .tema.activo .cuerpo > *:first-child{margin-top:16px}
@media (max-width:560px){
  body[data-modo="lectura"] .tema.activo > summary{padding:19px 17px 2px}
}

/* Volver a la lista */
.volver{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-family:Archivo,sans-serif; font-weight:600; font-size:14.5px;
  color:var(--muted); text-decoration:none; cursor:pointer;
  background:none; border:none; padding:0;
}
.volver:hover{color:var(--naranja)}
.volver svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2}

/* ─── Contenido con panel al lado ─────────────────────────────────────────────
   El panel es navegación, no contenido: si el JavaScript no corriera, la lista
   de temas seguiría completa y utilizable sin él.
   ─────────────────────────────────────────────────────────────────────────── */
.wrap.con-rail-activo{max-width:1120px}
.con-rail{display:grid; grid-template-columns:1fr; gap:32px; align-items:start}
.con-rail > *{min-width:0}
@media (min-width:1000px){
  .con-rail{grid-template-columns:1fr 268px}
}

.rail{position:sticky; top:98px; display:flex; flex-direction:column; gap:22px}
@media (max-width:999px){ .rail{display:none} }
.rail-bloque{
  background:var(--surface); border:1px solid var(--line); border-radius:13px; overflow:hidden;
}
.rail-bloque > b{
  display:block; padding:13px 16px; background:var(--ink); color:var(--ink-text);
  font-family:Archivo,sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
}
.rail-lista{display:flex; flex-direction:column}
.rail-lista a{
  display:flex; gap:10px; align-items:flex-start; padding:11px 16px; text-decoration:none;
  border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.4; color:var(--text);
}
.rail-lista a:last-child{border-bottom:none}
.rail-lista a:hover{background:var(--surface-2)}
.rail-lista a .pt{
  width:15px; height:15px; flex:0 0 auto; margin-top:2px;
  stroke:var(--azul); fill:none; stroke-width:1.7;
}
.rail-lista a.activo{background:var(--surface-2); font-weight:600}
.rail-lista a.activo .pt{stroke:var(--naranja)}
.rail-lista a em{
  display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px;
}

/* ─── Pie de cada guía: ¿sirvió? y copiar enlace ─────────────────────────── */
.util{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted);
}
.util .pregunta{margin-right:2px}
.util button{
  font:inherit; font-family:Archivo,sans-serif; font-size:14px; font-weight:600;
  padding:7px 15px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer;
}
.util button:hover{border-color:var(--naranja); color:var(--naranja)}
.util .copiar{margin-left:auto}
.util .gracias{color:var(--verde); font-weight:600; font-family:Archivo,sans-serif; font-size:14.5px}
.util .gracias a{color:var(--naranja)}

/* ─── Índice lateral de la página ────────────────────────────────────────── */
.con-indice{display:grid; grid-template-columns:1fr; gap:34px}
/* Sin esto, un hijo de rejilla nunca baja del ancho de su contenido: la tabla
   más ancha de la página empujaría todo y el teléfono desbordaría a lo ancho. */
.con-indice > *{min-width:0}
@media (min-width:1000px){ .con-indice{grid-template-columns:232px 1fr} }
.indice{position:sticky; top:100px; align-self:start; font-size:15px}
.indice b{
  display:block; font-family:Archivo,sans-serif; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:12px;
}
.indice a{
  display:block; padding:6px 0 6px 13px; color:var(--muted); text-decoration:none;
  border-left:2px solid var(--line); line-height:1.4;
}
.indice a:hover{color:var(--text); border-left-color:var(--naranja)}
.indice a.activo{color:var(--text); border-left-color:var(--naranja); font-weight:600}
@media (max-width:999px){ .indice{display:none} }

/* ─── Formulario ─────────────────────────────────────────────────────────── */
.campo{margin-bottom:18px}
.campo label{
  display:block; font-family:Archivo,sans-serif; font-weight:700; font-size:15px; margin-bottom:6px;
}
.campo .pista{font-weight:400; color:var(--muted); font-size:14px; font-family:inherit}
.campo input,.campo select,.campo textarea{
  width:100%; font:inherit; font-size:16px; padding:12px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
}
.campo textarea{min-height:150px; resize:vertical; line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--naranja)}
.dos{display:grid; gap:0 18px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.aviso-form{
  padding:14px 16px; border-radius:11px; margin-bottom:20px; font-size:15.5px;
  border:1px solid var(--line); background:var(--surface-2);
}
.aviso-form.ok{border-color:var(--verde); color:var(--verde)}
.aviso-form.mal{border-color:var(--rojo); color:var(--rojo)}

/* ─── Pie ────────────────────────────────────────────────────────────────── */
.pie{background:var(--ink); color:var(--ink-muted); padding:44px 0 34px; margin-top:60px}
.pie-in{display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; justify-content:space-between}
.pie a{color:var(--ink-muted); text-decoration:none; font-size:15px}
.pie a:hover{color:var(--ink-text)}
.pie nav{display:flex; flex-direction:column; gap:9px}
.pie nav b{color:var(--ink-text); font-family:Archivo,sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px}
.pie .legal{
  width:100%; border-top:1px solid var(--ink-line); margin-top:26px; padding-top:20px;
  font-size:14px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
}

/* ─── Utilidades ─────────────────────────────────────────────────────────── */
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.etiqueta{
  display:inline-block; font-family:Archivo,sans-serif; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:99px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.etiqueta.naranja{background:rgba(248,121,26,.12); color:var(--naranja); border-color:rgba(248,121,26,.3)}
.etiqueta.verde{background:rgba(18,134,107,.12); color:var(--verde); border-color:rgba(18,134,107,.3)}