/* =========================================================================
   Contrast · docs.css — documentacion de GridSnap Pro (EN y ES)
   -------------------------------------------------------------------------
   Es la plantilla de docs/plantilla-doc-gridsnap-2026-09-26.html pasada a
   fichero propio y acotada ENTERA bajo .gsp, para que no pise nada de
   site.css ni site.css la pise a ella. Las fuentes son las autoalojadas del
   sitio (assets/fonts/fuentes.css), no Google Fonts. Mismo sistema que el
   resto de la web: Sofia Sans / Sofia Sans Extra Condensed, negro y blanco,
   cian de acento, morado con cuentagotas, lineas de 2 px y radio 0.
   Sin estilos en linea en el HTML: los dos margin-top de la plantilla son
   ahora las clases .mt-24 y .mt-18.
   ========================================================================= */
.gsp {
  /* Negro y blanco salen de los tokens del sitio: con el modo oscuro del
     dispositivo site.css los invierte, y la doc tiene que invertirse con el
     resto de la pagina. Con valores fijos quedaba una isla blanca entre la
     cabecera y el cuerpo negros. */
  --gsp-bk: var(--negro, #000);
  --gsp-wh: var(--blanco, #fff);
  --gsp-cy: #00FFE0;
  --gsp-pu: #8000FF;
  --gsp-disp: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  --gsp-ui: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gsp-wrap: 860px;
  margin: 0;
  background: var(--gsp-wh);
  color: var(--gsp-bk);
  font-family: var(--gsp-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gsp *, .gsp *::before, .gsp *::after { box-sizing: border-box; }
.gsp img { max-width: 100%; display: block; }
.gsp a { color: inherit; }
.gsp .wrap { width: min(var(--gsp-wrap), 100% - 64px); margin-inline: auto; }
@media (max-width: 768px) { .gsp .wrap { width: min(var(--gsp-wrap), 100% - 32px); } }

/* Las migas del sitio, dentro del mismo ancho que el resto de la doc. El
   body ya reserva los 90 px de la cabecera fija. */
.gsp .gsp-migas { padding-top: 28px; }
.gsp .gsp-migas .svc-migas { margin-bottom: 0; }

/* Las anclas del indice: sin esto la cabecera fija tapa el titulo al llegar. */
.gsp [id] { scroll-margin-top: 100px; }

/* ---------- tipografia ---------- */
.gsp .kick {
  display: flex; align-items: center; gap: 16px; margin: 0 0 24px;
  font-family: var(--gsp-ui); font-weight: 900; font-size: 12px; line-height: 1;
  text-transform: uppercase; letter-spacing: .16em; color: var(--gsp-bk);
}
.gsp .kick::before { content: ""; width: 42px; height: 2px; background: var(--gsp-cy); flex: none; }
.gsp .display {
  font-family: var(--gsp-disp); font-weight: 800; text-transform: uppercase;
  line-height: .88; letter-spacing: -.04em; margin: 0; color: var(--gsp-bk);
  overflow-wrap: anywhere;
}
.gsp h1.display { font-size: clamp(56px, 9vw, 124px); }
.gsp h2.display { font-size: clamp(40px, 6.2vw, 92px); }
.gsp .lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; margin: 24px 0 0; max-width: 60ch; color: var(--gsp-bk); }
.gsp .copy { font-size: 17px; line-height: 1.6; margin: 16px 0 0; max-width: 68ch; color: var(--gsp-bk); }
.gsp .dot { color: var(--gsp-pu); }

/* ---------- botones: blanco, 2 px negro, texto negro, hover cian ---------- */
.gsp .btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 24px;
  background: var(--gsp-wh); color: var(--gsp-bk); border: 2px solid var(--gsp-bk); border-radius: 0;
  font-family: var(--gsp-ui); font-weight: 900; font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; text-decoration: none; transition: background .15s ease;
}
.gsp .btn:hover { background: var(--gsp-cy); }
.gsp .btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.gsp .mt-24 { margin-top: 24px; }
.gsp .mt-18 { margin-top: 18px; }

/* ---------- secciones ---------- */
.gsp .sec { padding-block: clamp(72px, 9vw, 120px); }
.gsp .sec + .sec { border-top: 2px solid var(--gsp-bk); }
.gsp .head { margin-bottom: 48px; max-width: var(--gsp-wrap); }

/* ---------- heroe (limpio, sin dither en una doc) ---------- */
.gsp .hero { padding-block: clamp(64px, 9vw, 120px); border-bottom: 2px solid var(--gsp-bk); }
.gsp .hero .lead { max-width: 62ch; }
.gsp .hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 32px;
  font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
}
.gsp .hero-meta span { color: var(--gsp-bk); }
.gsp .hero-meta b { color: var(--gsp-pu); font-weight: 900; }

/* ---------- rejillas: hueco de 2 px sobre fondo negro = lineas internas de 2 px ---------- */
.gsp .grid { display: grid; gap: 2px; background: var(--gsp-bk); border: 2px solid var(--gsp-bk); }
.gsp .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gsp .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gsp .cell { background: var(--gsp-wh); padding: 32px 28px; min-width: 0; }
.gsp .span-all { grid-column: 1 / -1; }
@media (max-width: 860px) { .gsp .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 620px) { .gsp .grid-2, .gsp .grid-3 { grid-template-columns: minmax(0, 1fr); } }
/* Sin huecos: la rejilla de tres celdas pasa a dos columnas por debajo de
   860 px y la tercera se quedaba sola con un cuadro vacio al lado. Ocupa la
   fila entera. */
@media (max-width: 860px) { .gsp .grid-3 > .cell:nth-child(3):last-child { grid-column: 1 / -1; } }
.gsp .cell .idx { font-family: var(--gsp-disp); font-weight: 800; color: var(--gsp-pu); font-size: 30px; line-height: .8; display: block; margin-bottom: 16px; }
.gsp .cell h3 {
  font-family: var(--gsp-disp); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: 23px; line-height: 1; margin: 0 0 16px;
}
.gsp .cell h3.sm { font-size: 19px; }
.gsp .cell p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
.gsp .cell p:last-child { margin-bottom: 0; }
.gsp .cell ul, .gsp .cell ol { margin: 0; padding-left: 1.15em; }
.gsp .cell li { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.gsp .cell li:last-child { margin-bottom: 0; }
.gsp .cell ul.tight li { margin-bottom: 8px; }
.gsp .cell h3 + ul, .gsp .cell h3 + ol, .gsp .cell p + ul, .gsp .cell p + ol { margin-top: 14px; }
.gsp .cell strong { font-weight: 700; }
.gsp code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em;
  background: var(--gsp-wh); border: 2px solid var(--gsp-bk); padding: 0 6px;
}
/* enlaces dentro del texto */
.gsp .cell a, .gsp .copy a, .gsp .lead a {
  text-decoration: underline; text-decoration-color: var(--gsp-cy);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.gsp .cell a:hover, .gsp .copy a:hover, .gsp .lead a:hover { background: var(--gsp-cy); text-decoration: none; }
/* Un boton dentro de una celda es un boton, no un enlace de texto. */
.gsp .cell a.btn { text-decoration: none; }

/* ---------- indice ---------- */
.gsp .toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--gsp-bk); border: 2px solid var(--gsp-bk); }
/* El indice tiene diez enlaces a tres columnas: el decimo ocupa la fila
   entera para no dejar dos cuadros vacios. A dos columnas son pares. */
.gsp .toc a:nth-child(10):last-child { grid-column: 1 / -1; }
@media (max-width: 760px) { .gsp .toc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gsp .toc a:nth-child(10):last-child { grid-column: auto; } }
@media (max-width: 460px) { .gsp .toc { grid-template-columns: minmax(0, 1fr); } }
.gsp .toc a {
  display: flex; align-items: baseline; gap: 14px; background: var(--gsp-wh); padding: 18px 22px;
  text-decoration: none; color: var(--gsp-bk); font-weight: 700; font-size: 15px; transition: background .15s ease;
}
.gsp .toc a .n { font-family: var(--gsp-disp); font-weight: 800; color: var(--gsp-pu); font-size: 18px; min-width: 24px; }
.gsp .toc a:hover { background: var(--gsp-cy); }
.gsp .toc a:hover .n { color: var(--gsp-bk); }

/* ---------- tablas: en movil desplazan dentro de su caja, no la pagina ---------- */
.gsp .table { overflow-x: auto; border: 2px solid var(--gsp-bk); -webkit-overflow-scrolling: touch; }
.gsp table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.gsp thead th {
  background: var(--gsp-bk); color: var(--gsp-wh); text-align: left; vertical-align: bottom;
  font-family: var(--gsp-ui); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; padding: 15px 18px;
}
.gsp tbody td { border-top: 2px solid var(--gsp-bk); padding: 15px 18px; line-height: 1.5; vertical-align: top; }
.gsp tbody td:not(:first-child) { border-left: 2px solid var(--gsp-bk); }
.gsp tbody td:first-child { font-weight: 700; }

/* ---------- avisos: caja negra de 2 px; el acento solo en el rotulo ---------- */
.gsp .note, .gsp .warn { margin-top: 24px; padding: 24px; background: var(--gsp-wh); border: 2px solid var(--gsp-bk); font-size: 15px; line-height: 1.6; }
.gsp .note::before, .gsp .warn::before {
  display: block; font-family: var(--gsp-ui); font-weight: 900; font-size: 10px;
  text-transform: uppercase; letter-spacing: .16em; margin-bottom: 8px;
}
.gsp .note::before { content: "Tip"; color: var(--gsp-bk); }
.gsp .warn::before { content: "Note"; color: var(--gsp-pu); }
/* En castellano el rotulo cambia; el idioma lo declara el <html>. */
html[lang="es"] .gsp .note::before { content: "Consejo"; }
html[lang="es"] .gsp .warn::before { content: "Nota"; }

/* ---------- banda de cierre ---------- */
.gsp .final { padding-block: clamp(72px, 9vw, 120px); border-top: 2px solid var(--gsp-bk); }
.gsp .final-box { background: var(--gsp-bk); color: var(--gsp-wh); border: 2px solid var(--gsp-bk); padding: clamp(40px, 6vw, 72px); }
.gsp .final-box h2 {
  font-family: var(--gsp-disp); font-weight: 800; text-transform: uppercase; line-height: .9;
  letter-spacing: -.03em; font-size: clamp(36px, 5vw, 64px); margin: 0 0 18px; color: var(--gsp-wh);
}
.gsp .final-box h2 .dot { color: var(--gsp-cy); }
.gsp .final-box p { margin: 0; font-size: 17px; line-height: 1.65; max-width: 72ch; color: var(--gsp-wh); }
.gsp .final-meta {
  display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 28px; font-size: 13px;
  font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--gsp-wh);
}
.gsp .final-meta a { color: var(--gsp-cy); text-decoration: none; }

/* ---------- aparicion: el contenido se ve siempre; solo anima con JS ---------- */
/* assets/js/docs.js pone .gsp-js en <html> y .in en cada .rev al entrar en pantalla. */
.gsp-js .gsp .rev { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.gsp-js .gsp .rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gsp-js .gsp .rev { opacity: 1 !important; transform: none !important; transition: none; }
}