/* Guías de /recursos/. Prosa larga sobre el sistema de diseño de Aptus: la
   medida de línea manda, y lo único que se añade son las piezas que el resto
   del sitio no tiene (cita de norma, fórmula, aviso). */

.g-art { padding: clamp(30px, 5vw, 54px) 0 clamp(50px, 8vw, 84px); }
.g-wrap { max-width: 760px; }

.g-art h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.12; margin: 10px 0 0; }
.g-entradilla { font-size: 18px; line-height: 1.55; color: var(--body); margin: 16px 0 0; max-width: 60ch; }

.g-art h2 { font-size: clamp(21px, 2.8vw, 26px); line-height: 1.25; margin: 42px 0 14px; }
.g-art h3 { font-size: 17px; margin: 26px 0 8px; }
.g-art p  { font-size: 16.5px; line-height: 1.68; color: var(--body); margin: 0 0 16px; max-width: 66ch; }
.g-art strong { color: var(--ink); font-weight: 600; }
.g-art em { font-style: italic; }

.g-lista { margin: 0 0 18px; padding-left: 20px; max-width: 66ch; }
.g-lista li { font-size: 16.5px; line-height: 1.62; color: var(--body); margin: 0 0 11px; }

/* Cita literal de una norma. La barra lateral y la ficha de referencia son la
   misma señal que usamos en el temario: esto es texto legal, no paráfrasis. */
.g-cita {
  margin: 0 0 20px; padding: 15px 18px; max-width: 66ch;
  background: var(--surface-2); border-left: 3px solid var(--ink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 15.5px; line-height: 1.6; color: var(--ink); font-style: italic;
}
.g-cita cite {
  display: block; margin-top: 9px; font-style: normal; font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.g-formula {
  font-family: var(--mono); font-size: 17px; color: var(--ink) !important;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 18px;
  display: inline-block;
}

.g-tabla-marco { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); margin: 0 0 18px; background: var(--surface); }
.g-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 430px; }
.g-tabla th, .g-tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.g-tabla th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
.g-tabla td { color: var(--body); }
.g-tabla tbody tr:last-child td { border-bottom: 0; }
.g-tabla .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.g-aviso {
  background: var(--aviso-bg); border: 1px solid var(--aviso-line);
  color: var(--aviso-ink) !important; border-radius: var(--r-md);
  padding: 13px 16px; margin: 0 0 18px; font-size: 15px !important; line-height: 1.55;
}
.g-aviso strong { color: var(--aviso-ink); }

.g-nota { font-size: 13.5px !important; color: var(--muted) !important; line-height: 1.55; margin: -4px 0 18px; }

.g-fuentes { margin: 0 0 18px; padding-left: 20px; }
.g-fuentes li { font-size: 15px; line-height: 1.6; margin: 0 0 7px; }
.g-fuentes a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.g-cta {
  margin: 44px 0 0; padding: 26px 28px;
  background: var(--ink); border-radius: var(--r-card); color: var(--on-dark);
}
.g-cta h2 { margin: 0 0 8px; color: var(--on-dark); font-size: 22px; }
.g-cta p  { color: var(--on-dark-body) !important; margin: 0 0 18px; font-size: 15.5px !important; }
.g-cta .btn { background: var(--lime); color: var(--ink); border-color: var(--lime); }

@media (max-width: 600px) {
  .g-art h2 { margin-top: 34px; }
  .g-cta { padding: 22px 20px; }
}