/* Piezas reutilizables: cabecera, navegación, botones, tarjetas, pie. */

/* Cabecera ---------------------------------------------------------------

   GeneratePress pinta la marca y la navegación en dos bloques hermanos, y por
   defecto se leen como dos barras apiladas con aire muerto entre ellas. Aquí
   se tratan como una sola pieza: sin separador entre ambas, con la misma
   superficie y un filete de acento arriba del todo. */

.site-header {
  background: color-mix(in srgb, var(--nl-bg) 82%, transparent);
  border-bottom: 0;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 0;          /* el aire lo pone .inside-header, no la banda */
}

/* Un filete de tres píxeles con el degradado de la marca. Es lo que hace que
   la cabecera se lea como intencionada y no como el valor por defecto. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--nl-red) 0%,
    var(--nl-red-soft) 38%,
    var(--nl-gold) 70%,
    var(--nl-red) 100%);
}

/* Marca y navegación son dos elementos hermanos en GeneratePress y por
   defecto se leen como dos barras apiladas. Ajustando el aire de cada una y
   quitando el hueco entre ambas, la cabecera pasa a leerse como una sola
   banda de unos 108 px. */
.site-header .inside-header {
  padding-block: var(--nl-space-4) var(--nl-space-3);
  align-items: center;
}

/* La marca ---------------------------------------------------------------- */

.nl-brand__link,
.site-branding a,
.site-logo a { text-decoration: none; }

.nl-brand__mark,
.site-logo img,
.header-image {
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--nl-red) 40%, transparent));
  transition: transform var(--nl-transition), filter var(--nl-transition);
}
.nl-brand__link:hover .nl-brand__mark,
.site-logo a:hover img {
  transform: scale(1.04) rotate(-3deg);
  filter: drop-shadow(0 3px 16px color-mix(in srgb, var(--nl-red) 62%, transparent));
}

.nl-brand__name,
.site-title a {
  font-size: var(--nl-text-xl);
  font-weight: var(--nl-weight-strong);
  letter-spacing: -0.028em;
  color: var(--nl-text);
  line-height: 1.05;
}
.nl-brand__tag,
.site-description {
  font-size: var(--nl-text-xs);
  color: var(--nl-text-muted);
  letter-spacing: .015em;
  line-height: 1.35;
  margin-top: 3px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--nl-red) 55%, transparent);
}

/* La navegación ----------------------------------------------------------- */

.main-navigation {
  background: transparent;
  border-top: 1px solid var(--nl-border-soft);
  border-bottom: 1px solid var(--nl-border-soft);
  margin-top: 0;
  position: sticky;
  top: 0;
  z-index: 99;
}
.main-navigation .inside-navigation { padding-block: 0; align-items: center; }

/* Altura fija y separación uniforme. El espaciado por defecto de
   GeneratePress depende del largo de cada texto, y con entradas de una y de
   trece letras la fila se lee irregular. */
.main-navigation .main-nav > ul > li > a {
  padding: 0 var(--nl-space-5, 1.25rem);
  height: 52px;
  display: flex;
  align-items: center;
}
.main-navigation .main-nav > ul > li:first-child > a { padding-left: 0; }

/* El indicador de submenú, más discreto que la flecha por defecto. */
.main-navigation .main-nav ul li.menu-item-has-children > a .dropdown-menu-toggle {
  padding-left: 4px;
  opacity: .55;
}
.main-navigation .main-nav ul li.menu-item-has-children > a:hover .dropdown-menu-toggle { opacity: 1; }

/* Al hacer scroll la marca sube y la navegación se queda: es la barra que
   sirve para moverse, y la que conviene tener siempre a mano. */
.site-header { position: relative; }

.main-navigation .main-nav ul li a {
  font-weight: 500;
  font-size: var(--nl-text-sm);
  color: var(--nl-text-muted);
  letter-spacing: -0.005em;
  transition: color var(--nl-transition);
  position: relative;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: var(--nl-text);
  background: transparent;
}

/* Subrayado que crece desde el centro. */
.main-navigation .main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nl-red), var(--nl-red-soft));
  transition: left var(--nl-transition), right var(--nl-transition);
}
.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
  left: var(--nl-space-5, 1.25rem);
  right: var(--nl-space-5, 1.25rem);
}
.main-navigation .main-nav > ul > li:first-child > a:hover::after,
.main-navigation .main-nav > ul > li:first-child.current-menu-item > a::after { left: 0; }

/* Submenús: superficie sólida, no la translúcida de la cabecera, o el texto
   de debajo se transparenta a través. */
.main-navigation ul ul {
  background: var(--nl-bg-solid);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow-lg);
  padding: var(--nl-space-2);
  min-width: 14rem;
}
.main-navigation ul ul li a { border-radius: var(--nl-radius); padding: 0.55em 0.8em; }
.main-navigation ul ul li a:hover { background: var(--nl-bg-subtle); }
.main-navigation ul ul > li > a::after { content: none; }

/* El botón de menú en móvil, discreto. */
.menu-toggle { font-size: var(--nl-text-sm); font-weight: 600; }

/* Botones ----------------------------------------------------------------

   GeneratePress publica los colores de botón del Customizer como CSS EN
   LÍNEA, y su selector es:

       a.wp-block-button__link:not(.has-background)

   Eso son (0,2,1) de especificidad: `:not()` no vale cero, aporta la de su
   argumento. Un `:root .wp-block-button__link` se queda en (0,2,0) y pierde
   por un elemento — comprobado inyectando la regla y viendo que no ganaba.

   La respuesta no es !important, es reproducir la forma del padre y sumarle
   `:root`. Y ese `:not(.has-background)` es además la puerta que GeneratePress
   deja abierta a propósito: si alguien fija un fondo desde el editor, gana esa
   elección y no nosotros. Respetarla es gratis. */

/* La firma del original: pastilla blanca, texto negro, radio 20px, peso 700.
   El acento rojo se reserva para enlaces y detalles; un botón rojo grande
   compite con él y el original no lo hace.

   Lista de INCLUSIÓN, no de exclusión. Un `button:not(.nl-copy)` pintaba de
   blanco el `button.menu-toggle` de GeneratePress —una barra blanca de 1062px
   cruzando la cabecera— y cualquier control que el padre añadiera en el
   futuro habría entrado igual. Una lista de exclusión sólo cubre lo que ya
   conoces. */
:root a.wp-block-button__link:not(.has-background),
:root .entry-content button,
:root input[type='submit'],
:root a.button {
  font-family: var(--nl-font);
  font-weight: var(--nl-weight-strong);
  font-size: var(--nl-text-sm);
  padding: 0.85em 1.7em;
  border-radius: var(--nl-radius-btn);
  border: 1px solid transparent;
  background: var(--nl-text);
  color: var(--nl-text-invert);
  text-decoration: none;
  transition: transform var(--nl-transition), opacity var(--nl-transition),
              background var(--nl-transition), border-color var(--nl-transition);
  cursor: pointer;
  display: inline-block;
  line-height: 1.2;
}
:root a.wp-block-button__link:not(.has-background):hover,
:root .entry-content button:hover,
:root input[type='submit']:hover,
:root a.button:hover {
  background: var(--nl-text);
  color: var(--nl-text-invert);
  transform: translateY(-2px);
  opacity: .9;
}
:root a.wp-block-button__link:not(.has-background):active,
:root .entry-content button:active { transform: translateY(0); }

/* Los controles propios de GeneratePress —el menú móvil, el buscador— se
   quedan discretos: son navegación, no llamadas a la acción. */
:root .menu-toggle,
:root .search-toggle,
:root button.search-submit {
  background: transparent;
  color: var(--nl-text-muted);
  border: 0;
  border-radius: var(--nl-radius);
}
:root .menu-toggle:hover,
:root .search-toggle:hover,
:root button.search-submit:hover {
  background: var(--nl-bg-subtle);
  color: var(--nl-text);
}


/* Botones propios --------------------------------------------------------

   Para el marcado que escribimos nosotros —portada, patrones— usamos nuestras
   propias clases en vez de `wp-block-button__link`.

   El motivo es concreto: GeneratePress estiliza esa clase desde el Customizer
   con `a.wp-block-button__link:not(.has-background)`, y la variante fantasma
   entraba en una pelea de especificidad que ganaba en `color` y perdía en
   `background` — un botón blanco con texto blanco. Se puede ganar esa pelea,
   pero es una pelea que se reabre cada vez que el padre cambie una regla.

   Una clase propia no colisiona con nada. Los botones creados desde el editor
   siguen usando las clases de WordPress y su estilo, que está más arriba. */

:root .nl-btn {
  display: inline-block;
  font-family: var(--nl-font);
  font-weight: var(--nl-weight-strong);
  font-size: var(--nl-text-sm);
  line-height: 1.2;
  padding: 0.85em 1.7em;
  border-radius: var(--nl-radius-btn);
  border: 1px solid transparent;
  background: var(--nl-text);
  color: var(--nl-text-invert);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--nl-transition), opacity var(--nl-transition),
              background var(--nl-transition), border-color var(--nl-transition);
}
:root .nl-btn:hover {
  background: var(--nl-text);
  color: var(--nl-text-invert);
  transform: translateY(-2px);
  opacity: .9;
}
:root .nl-btn:active { transform: translateY(0); }

:root .nl-btn--ghost {
  background: transparent;
  color: var(--nl-text);
  border-color: var(--nl-border);
}
:root .nl-btn--ghost:hover {
  background: var(--nl-bg-subtle);
  border-color: var(--nl-text-faint);
  color: var(--nl-text);
  opacity: 1;
}

/* Héroe ------------------------------------------------------------------ */

.nl-hero {
  padding: var(--nl-space-24) var(--nl-space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--nl-bg);
}

/* El resplandor rojo detrás del titular, que es lo que da el carácter. */
.nl-hero::before {
  content: '';
  position: absolute;
  inset: -40% 0 auto 50%;
  translate: -50% 0;
  width: min(900px, 120%);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--nl-red) 22%, transparent) 0%,
    transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.nl-hero > * { position: relative; z-index: 1; }

.nl-hero__eyebrow {
  display: inline-block;
  font-size: var(--nl-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-text-muted);
  background: var(--nl-bg-subtle);
  border: 1px solid var(--nl-border);
  padding: 0.45em 1.1em;
  border-radius: var(--nl-radius-full);
  margin-bottom: var(--nl-space-8);
}

.nl-hero__title {
  font-size: clamp(2.5rem, 7vw, var(--nl-text-4xl));
  font-weight: var(--nl-weight-title);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 var(--nl-space-6);
  text-wrap: balance;
  color: var(--nl-text);
}
.nl-hero__title em {
  font-style: normal;
  color: var(--nl-red);
}

.nl-hero__lead {
  font-size: var(--nl-text-lg);
  color: var(--nl-text-muted);
  max-width: 38rem;
  margin: 0 auto var(--nl-space-8);
  text-wrap: pretty;
}

.nl-hero__actions {
  display: flex;
  gap: var(--nl-space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Tarjetas --------------------------------------------------------------- */

.nl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--nl-space-4);
  margin: var(--nl-space-12) 0;
}

.nl-card {
  background: var(--nl-bg-subtle);
  border: 1px solid var(--nl-border-soft);
  border-radius: var(--nl-radius-lg);
  padding: var(--nl-space-6);
  transition: background var(--nl-transition), border-color var(--nl-transition),
              transform var(--nl-transition);
  display: flex;
  flex-direction: column;
}
.nl-card:hover {
  background: var(--nl-bg-sunken);
  border-color: var(--nl-border);
  transform: translateY(-2px);
}


.nl-card__title {
  font-size: var(--nl-text-lg);
  font-weight: 600;
  margin: 0 0 var(--nl-space-2);
  letter-spacing: -0.015em;
}
.nl-card__title a { color: var(--nl-text); text-decoration: none; }
.nl-card__title a:hover { color: var(--nl-red-soft); }

.nl-card__body {
  color: var(--nl-text-muted);
  font-size: var(--nl-text-sm);
  margin: 0 0 var(--nl-space-4);
  flex: 1;
}

.nl-card__cta {
  font-size: var(--nl-text-sm);
  font-weight: 600;
  color: var(--nl-red-soft);
  text-decoration: none;
}
.nl-card__cta::after { content: ' →'; transition: margin var(--nl-transition); }
.nl-card:hover .nl-card__cta::after { margin-left: 4px; }

/* Avisos ----------------------------------------------------------------- */

.nl-note {
  border-radius: var(--nl-radius);
  padding: var(--nl-space-4) var(--nl-space-6);
  margin: var(--nl-space-8) 0;
  border: 1px solid var(--nl-border-soft);
  border-left: 3px solid var(--nl-red);
  background: var(--nl-bg-subtle);
  font-size: var(--nl-text-sm);
}
.nl-note--warn   { border-left-color: var(--nl-warn); }
.nl-note--danger { border-left-color: var(--nl-danger); }
.nl-note__title {
  font-weight: var(--nl-weight-strong);
  margin: 0 0 var(--nl-space-2);
  font-size: var(--nl-text-sm);
  color: var(--nl-text);
}
.nl-note p:last-child { margin-bottom: 0; }

/* Botón de copiar en los bloques de código -------------------------------- */

.nl-pre-wrap { position: relative; }

.nl-copy {
  position: absolute;
  top: var(--nl-space-3);
  right: var(--nl-space-3);
  font-family: var(--nl-font);
  font-size: var(--nl-text-xs);
  font-weight: 600;
  padding: 0.35em 0.8em;
  border-radius: 8px;
  border: 1px solid var(--nl-code-overlay-border);
  background: var(--nl-code-overlay);
  color: var(--nl-on-code);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--nl-transition), background var(--nl-transition);
}
.nl-pre-wrap:hover .nl-copy,
.nl-copy:focus-visible { opacity: 1; }
.nl-copy:hover { background: var(--nl-code-overlay-hover); color: var(--nl-on-code-strong); }
.nl-copy[data-state='done'] {
  opacity: 1;
  color: var(--nl-ok);
  border-color: color-mix(in srgb, var(--nl-ok) 45%, transparent);
}

@media (hover: none) { .nl-copy { opacity: 1; } }

/* Pie -------------------------------------------------------------------- */

.site-footer {
  background: var(--nl-bg);
  border-top: 1px solid var(--nl-border-soft);
  color: var(--nl-text-muted);
  font-size: var(--nl-text-sm);
}
.site-footer a { color: var(--nl-text-muted); }
.site-footer a:hover { color: var(--nl-text); }

/* Widgets de la barra lateral -------------------------------------------- */

.widget, .sidebar .widget {
  background: var(--nl-bg-subtle);
  border: 1px solid var(--nl-border-soft);
  border-radius: var(--nl-radius);
}
.widget .widget-title {
  font-size: var(--nl-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-text-faint);
  margin-top: 0;
}
.widget ul li a { color: var(--nl-text-muted); text-decoration: none; }
.widget ul li a:hover { color: var(--nl-red-soft); }

/* Campos de formulario ---------------------------------------------------- */

input[type='text'], input[type='email'], input[type='url'],
input[type='search'], input[type='password'], textarea, select {
  background: var(--nl-bg-subtle);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius);
  color: var(--nl-text);
  padding: 0.7em 1em;
}
input::placeholder, textarea::placeholder { color: var(--nl-text-faint); }

/* Marca de respaldo, cuando el Customizer no da logo ni título ------------ */

.nl-brand__link {
  display: flex;
  align-items: center;
  gap: var(--nl-space-3);
  text-decoration: none;
  padding: var(--nl-space-3) 0;
}
.nl-brand__mark { display: block; flex-shrink: 0; width: 52px; height: 52px; border-radius: 0; }
.nl-brand__text { display: flex; flex-direction: column; gap: 1px; }
.nl-brand__name {
  font-weight: var(--nl-weight-strong);
  font-size: var(--nl-text-lg);
  letter-spacing: -0.02em;
  color: var(--nl-text);
  line-height: 1.1;
}
.nl-brand__tag {
  font-size: var(--nl-text-xs);
  color: var(--nl-text-muted);
  line-height: 1.2;
}
.nl-brand__link:hover .nl-brand__name { color: var(--nl-red-soft); }

/* Pie de página ---------------------------------------------------------- */

.nl-footer { width: 100%; }

.nl-footer__grid {
  display: grid;
  gap: var(--nl-space-8);
  padding-bottom: var(--nl-space-12);
  text-align: left;
}
@media (min-width: 700px)  { .nl-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .nl-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: var(--nl-space-12); } }

.nl-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--nl-space-3);
  text-decoration: none;
  font-weight: var(--nl-weight-strong);
  font-size: var(--nl-text-lg);
  color: var(--nl-text);
  letter-spacing: -0.02em;
}
.nl-footer__logo img { border-radius: 0; }
.nl-footer__tag   { color: var(--nl-text-muted); font-size: var(--nl-text-sm); margin: var(--nl-space-3) 0 var(--nl-space-2); max-width: 22rem; }
.nl-footer__made  { color: var(--nl-text-faint); font-size: var(--nl-text-xs); margin: 0; }

.nl-footer__title {
  font-size: var(--nl-text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nl-text-faint);
  margin: 0 0 var(--nl-space-4);
  border: 0;
  padding: 0;
}
.nl-footer__col ul { list-style: none; padding: 0; margin: 0; }
.nl-footer__col li { margin-bottom: var(--nl-space-2); }
.nl-footer__col a {
  color: var(--nl-text-muted);
  text-decoration: none;
  font-size: var(--nl-text-sm);
  transition: color var(--nl-transition);
}
.nl-footer__col a:hover { color: var(--nl-red-soft); }

/* Los dos bloques de «impulsado por» se distinguen del resto de enlaces:
   no son navegación del sitio, son atribución. */
.nl-powered {
  display: block;
  padding: var(--nl-space-4);
  border: 1px solid var(--nl-border-soft);
  border-radius: var(--nl-radius);
  background: var(--nl-bg-subtle);
  text-decoration: none;
  margin-bottom: var(--nl-space-3);
  transition: border-color var(--nl-transition), background var(--nl-transition);
}
.nl-powered:hover { border-color: var(--nl-border); background: var(--nl-bg-sunken); }
.nl-powered__name {
  display: block;
  font-weight: var(--nl-weight-strong);
  font-size: var(--nl-text-sm);
  color: var(--nl-text);
  margin-bottom: 2px;
}
.nl-powered__what { display: block; font-size: var(--nl-text-xs); color: var(--nl-text-muted); line-height: 1.5; }

.nl-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-space-3) var(--nl-space-8);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--nl-space-6);
  border-top: 1px solid var(--nl-border-soft);
}
.nl-footer__legal,
.nl-footer__by { margin: 0; font-size: var(--nl-text-xs); color: var(--nl-text-faint); }
.nl-footer__legal a,
.nl-footer__by a { color: var(--nl-text-muted); text-decoration: none; }
.nl-footer__legal a:hover,
.nl-footer__by a:hover { color: var(--nl-red-soft); }
.nl-footer__by strong { color: var(--nl-text); font-weight: 600; }

/* Acceso y perfil en la cabecera ----------------------------------------- */

.nl-account { position: relative; display: flex; align-items: center; margin-left: var(--nl-space-4); }

/* El botón vive DENTRO de la navegación, y GeneratePress colorea los enlaces
   de la nav con selectores encadenados del tipo
   `.main-navigation .main-nav ul li a`, bastante más específicos que una
   clase suelta. El texto salía blanco sobre el fondo blanco del botón: el
   botón parecía vacío.
   Se encadena por el contenedor para ganar por especificidad y no con
   !important, que dejaría el estilo imposible de ajustar más adelante. */
:root .main-navigation .nl-account .nl-account__in,
:root .nl-account .nl-account__in {
  display: inline-block;
  font-size: var(--nl-text-sm);
  font-weight: 600;
  padding: 0.42em 1.15em;
  border-radius: var(--nl-radius-full);
  border: 0;
  background: var(--nl-text);
  color: var(--nl-text-invert);
  text-decoration: none;
  transition: opacity var(--nl-transition), transform var(--nl-transition);
}
:root .main-navigation .nl-account .nl-account__in:hover,
:root .nl-account .nl-account__in:hover {
  opacity: .9;
  transform: translateY(-1px);
  color: var(--nl-text-invert);
}

.nl-account__btn {
  display: flex;
  align-items: center;
  gap: var(--nl-space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--nl-radius-full);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  color: var(--nl-text-muted);
  font-family: var(--nl-font);
  font-size: var(--nl-text-sm);
  font-weight: 500;
  transition: background var(--nl-transition), border-color var(--nl-transition), color var(--nl-transition);
}
.nl-account__btn:hover,
.nl-account__btn[aria-expanded='true'] {
  background: var(--nl-bg-subtle);
  border-color: var(--nl-border-soft);
  color: var(--nl-text);
}
.nl-account__avatar { width: 26px; height: 26px; border-radius: 50%; display: block; }
.nl-account__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-account__caret { transition: transform var(--nl-transition); flex-shrink: 0; }
.nl-account__btn[aria-expanded='true'] .nl-account__caret { transform: rotate(180deg); }

.nl-account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 17rem;
  background: var(--nl-bg-solid);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-lg);
  box-shadow: var(--nl-shadow-lg);
  padding: var(--nl-space-4);
  z-index: 200;
}
.nl-account__menu[hidden] { display: none; }

.nl-account__head {
  display: flex;
  gap: var(--nl-space-3);
  align-items: center;
  padding-bottom: var(--nl-space-4);
  border-bottom: 1px solid var(--nl-border-soft);
  margin-bottom: var(--nl-space-3);
}
.nl-account__avatar-lg { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.nl-account__display { font-weight: 600; color: var(--nl-text); margin: 0; font-size: var(--nl-text-sm); }
.nl-account__mail    { color: var(--nl-text-faint); margin: 0; font-size: var(--nl-text-xs);
                       overflow: hidden; text-overflow: ellipsis; }
.nl-account__role {
  display: inline-block;
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nl-red-soft);
  background: color-mix(in srgb, var(--nl-red) 16%, transparent);
  padding: 1px 7px;
  border-radius: var(--nl-radius-full);
}

.nl-account__links { list-style: none; padding: 0; margin: 0 0 var(--nl-space-3); }
.nl-account__links li { margin: 0; }
:root .main-navigation .nl-account__links a,
.nl-account__links a {
  display: block;
  padding: 0.5em 0.6em;
  border-radius: var(--nl-radius);
  color: var(--nl-text-muted);
  text-decoration: none;
  font-size: var(--nl-text-sm);
  transition: background var(--nl-transition), color var(--nl-transition);
}
.nl-account__links a:hover { background: var(--nl-bg-subtle); color: var(--nl-text); }

.nl-account__out {
  display: block;
  text-align: center;
  padding: 0.55em;
  border-radius: var(--nl-radius);
  border: 1px solid var(--nl-border-soft);
  color: var(--nl-text-muted);
  text-decoration: none;
  font-size: var(--nl-text-sm);
  font-weight: 600;
  transition: all var(--nl-transition);
}
.nl-account__out:hover { border-color: var(--nl-danger); color: var(--nl-danger); }

/* En móvil el desplegable ocupa el ancho disponible en vez de salirse. */
@media (max-width: 480px) {
  .nl-account__menu { width: calc(100vw - 2rem); right: -0.5rem; }
  .nl-account__name { display: none; }
}

/* Acciones de la barra de navegación -------------------------------------

   GitHub y la cuenta se agrupan en una sola cápsula en vez de flotar sueltos
   al final de la fila. Leen como un bloque de sesión, que es lo que son. */

.nl-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border-radius: var(--nl-radius-full);
  border: 1px solid var(--nl-border-soft);
  background: var(--nl-bg-subtle);
  /* El mismo tratamiento que los bloques de atribución del pie: superficie
     tenue con borde fino. Así la cabecera y el pie se reconocen como del
     mismo sistema. */
}

.nl-actions__gh {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--nl-radius-full);
  color: var(--nl-text-muted);
  transition: color var(--nl-transition), background var(--nl-transition);
}
.nl-actions__gh:hover { color: var(--nl-text); background: var(--nl-bg-sunken); }


/* La cuenta comparte la cápsula con GitHub: sin margen y con el borde
   izquierdo como única separación. */
.nl-account { margin-left: 0; padding-left: 3px; }
.nl-actions + .nl-account { margin-left: -3px; }

/* Atribución a NestJS y descargo ----------------------------------------- */

.nl-footer__nest {
  padding: var(--nl-space-6) 0;
  border-top: 1px solid var(--nl-border-soft);
  text-align: left;
}

.nl-nest {
  display: flex;
  align-items: center;
  gap: var(--nl-space-3);
  margin-bottom: var(--nl-space-4);
}
.nl-nest__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--nl-radius);
  border: 1px solid var(--nl-border-soft);
  background: var(--nl-bg-subtle);
  color: var(--nl-red-soft);
}
.nl-nest__text {
  margin: 0;
  font-size: var(--nl-text-sm);
  color: var(--nl-text-muted);
  line-height: 1.6;
}
.nl-nest__text strong { color: var(--nl-text); }
.nl-nest__text a { color: var(--nl-text-muted); text-decoration: none; }
.nl-nest__text a:hover { color: var(--nl-red-soft); }

/* El descargo va en un bloque aparte y legible: es información legal, no
   pie de página decorativo, y esconderlo en 10 px lo haría inútil. */
.nl-disclaimer {
  margin: 0;
  padding: var(--nl-space-4) var(--nl-space-5, 1.25rem);
  border-radius: var(--nl-radius);
  border: 1px solid var(--nl-border-soft);
  border-left: 3px solid var(--nl-gold);
  background: var(--nl-bg-subtle);
  font-size: var(--nl-text-xs);
  line-height: 1.65;
  color: var(--nl-text-muted);
  max-width: 62rem;
}
.nl-disclaimer strong { color: var(--nl-text); }
.nl-disclaimer a { color: var(--nl-red-soft); text-decoration: none; }
.nl-disclaimer a:hover { text-decoration: underline; }

/* Formulario de contacto -------------------------------------------------- */

.nl-contacto { max-width: 44rem; margin: var(--nl-space-8) 0; }

.nl-contacto__form {
  display: grid;
  gap: var(--nl-space-5);
  padding: var(--nl-space-8);
  border: 1px solid var(--nl-border-soft);
  border-radius: var(--nl-radius-lg);
  background: var(--nl-bg-subtle);
}

.nl-contacto__fila { display: grid; gap: var(--nl-space-5); }
@media (min-width: 640px) { .nl-contacto__fila { grid-template-columns: 1fr 1fr; } }

.nl-contacto label { display: grid; gap: var(--nl-space-2); }
.nl-contacto label > span {
  font-size: var(--nl-text-sm);
  font-weight: 500;
  color: var(--nl-text-muted);
}

.nl-contacto input[type='text'],
.nl-contacto input[type='email'],
.nl-contacto textarea {
  width: 100%;
  background: var(--nl-bg-solid);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius);
  color: var(--nl-text);
  font-family: var(--nl-font);
  font-size: var(--nl-text-sm);
  padding: 0.75em 1em;
  transition: border-color var(--nl-transition), box-shadow var(--nl-transition);
}
.nl-contacto input:focus,
.nl-contacto textarea:focus {
  border-color: var(--nl-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-red) 20%, transparent);
  outline: 2px solid transparent;   /* el anillo lo pinta el box-shadow */
}
.nl-contacto textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

/* La trampa antirrobots se saca de la vista sin usar display:none, que
   algunos bots detectan, y se marca aria-hidden para los lectores. */
.nl-contacto__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nl-contacto__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nl-space-4);
  align-items: center;
}
.nl-contacto__nota { font-size: var(--nl-text-xs); color: var(--nl-text-faint); }

.nl-contacto__aviso {
  padding: var(--nl-space-4) var(--nl-space-5);
  border-radius: var(--nl-radius);
  border: 1px solid var(--nl-border-soft);
  border-left-width: 3px;
  font-size: var(--nl-text-sm);
  margin-bottom: var(--nl-space-6);
}
.nl-contacto__aviso--ok    { border-left-color: var(--nl-ok);     color: var(--nl-text); }
.nl-contacto__aviso--error { border-left-color: var(--nl-danger); color: var(--nl-text); }