/* Grupo NTI - sistema de diseño. Fuente única: README.md de esta carpeta.
   Dirección A3: "grupo nti" + cuadrado naranja como punto final. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,800&family=DM+Sans:wght@400;500;700&display=swap");

:root {
  /* Color */
  --nti-tinta: #14130F;
  --nti-naranja: #FF6A13;
  --nti-hueso: #F4EFE6;

  /* Tipografía */
  --nti-display: "Bricolage Grotesque", sans-serif;
  --nti-texto: "DM Sans", sans-serif;

  /* Escala tipográfica */
  --nti-titular-xl: 76px;   /* Bricolage 800, interletraje -.04em, interlínea .95 */
  --nti-titular: 40px;      /* Bricolage 800, interletraje -.04em, interlínea 1.1 */
  --nti-cuerpo: 16px;       /* DM Sans 400, interlínea 1.5 */
  --nti-etiqueta: 12px;     /* DM Sans 500, mayúsculas, interletraje .2em a .3em */

  /* Espaciado: base de 8 px */
  --nti-e1: 4px;
  --nti-e2: 8px;
  --nti-e3: 16px;
  --nti-e4: 24px;
  --nti-e5: 32px;
  --nti-e6: 48px;
  --nti-e7: 64px;
  --nti-e8: 96px;

  /* Radios: 0 en botones, bloques y el cuadrado del logo; solo paneles y tarjetas redondean */
  --nti-radio-panel: 14px;
}

/* Logo: <span class="nti-logo"><span class="g">grupo</span><span class="n">nti</span><i class="sq"></i></span>
   Tamaño con font-size. Colores con --nti-fg (texto) y --nti-sq (cuadrado). */
.nti-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--nti-display);
  font-size: var(--nti-s, 120px);
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--nti-fg, var(--nti-tinta));
}
.nti-logo .g { font-weight: 300; }
.nti-logo .n { font-weight: 800; margin-left: .14em; }
.nti-logo .sq {
  display: inline-block;
  width: .2em;
  height: .2em;
  margin-left: .04em;
  background: var(--nti-sq, var(--nti-naranja));
}

/* Descriptor, solo en el lockup completo */
.nti-desc {
  font: 500 12px var(--nti-texto);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--nti-fg, var(--nti-tinta));
  white-space: nowrap;
  margin-top: 14px;
}

/* Variantes */
.nti-sobre-tinta { --nti-fg: var(--nti-hueso); }       /* fondo tinta */
.nti-una-tinta   { --nti-sq: currentColor; }           /* sin naranja */

/* Área de respeto: la altura de la "n" (aprox. .55em) en todos los lados del logo */
.nti-respeto { padding: calc(var(--nti-s, 120px) * .55); }

/* Botón: sin radio */
.nti-btn {
  display: inline-block;
  padding: var(--nti-e3) var(--nti-e4);
  background: var(--nti-naranja);
  color: var(--nti-tinta);
  font: 700 var(--nti-cuerpo) var(--nti-texto);
  border-radius: 0;
}

.nti-panel { border-radius: var(--nti-radio-panel); padding: var(--nti-e6); }