/* ==========================================================================
   Negrotropico — Paginas legales / de error (404, privacidad)        (v17.17)
   ==========================================================================
   ES: antes este CSS vivia en un <style> inline en el <head> de cada
       pagina. Funcionaba en carga directa, pero js/ng-ajaxify.js solo
       copia <link rel="stylesheet"> y <script src> faltantes al navegar
       (ver loadMissingAssets en ese archivo) -- un <style> inline nunca
       se copiaba, asi que llegar a /privacidad por navegacion AJAX (por
       ejemplo desde el footer o el aviso de cookies, el camino mas
       habitual) la mostraba sin ningun estilo. Un archivo real resuelve
       eso solo.

       Dos capas separadas a proposito:
       .ng-legal-shell  -- en el <body>. Fondo y layout de pagina completa
                           (el centrado del 404, el padding de privacidad).
                           Solo importa en carga directa: el <body> nunca
                           se toca en un swap AJAX (ver ng-ajaxify.js).
       .ng-legal        -- en un <div> DENTRO de #contenido. Tipografia y
                           color del contenido en si. Este si viaja con el
                           swap, asi que /privacidad se ve bien tanto si se
                           llega de forma directa como si se llega
                           navegando desde otra pagina del sitio.

   EN: this CSS used to live in an inline <style> in each page's <head>.
       That worked on direct load, but js/ng-ajaxify.js only copies
       missing <link rel="stylesheet"> and <script src> tags when
       navigating (see loadMissingAssets in that file) -- an inline
       <style> was never copied, so landing on /privacidad via AJAX
       navigation (e.g. from the footer or the cookie notice -- the most
       common path) showed it with zero styling. A real file fixes that
       on its own.

       Two layers, deliberately:
       .ng-legal-shell  -- on <body>. Full-page background/layout (404's
                           centering, privacidad's padding). Only matters
                           on direct load: <body> is never touched by an
                           AJAX swap (see ng-ajaxify.js).
       .ng-legal        -- on a <div> INSIDE #contenido. The content's own
                           typography/color. This one DOES travel with the
                           swap, so /privacidad looks right whether reached
                           directly or via in-site navigation.
   ========================================================================== */

/* ES: 404.html y privacidad.html NO cargan css/style.css (usan este archivo
       solo) -- por eso necesitan sus propias reglas @font-face, no alcanza
       con las que ahora viven fusionadas en style.css. Solo los pesos que
       esta pagina realmente usa (Poppins 300/500/600, Black Ops One 400),
       no las 7 variantes completas.
   EN: 404.html and privacidad.html do NOT load css/style.css (they use only
       this file) -- so they need their own @font-face rules, the ones now
       merged into style.css do not reach them. Only the weights this page
       actually uses (Poppins 300/500/600, Black Ops One 400), not all 7
       variants. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Black Ops One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/black-ops-one-latin-400-normal.woff2) format('woff2')}

*, *::before, *::after { box-sizing: border-box; }

/* ==================== SHELL (body, solo carga directa) ==================== */

.ng-legal-shell {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #1a1a1e;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
}

.ng-legal-shell--404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.ng-legal-shell--privacidad { padding: 3rem 1.5rem 4rem; }

.ng-legal-shell .skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #ffffff;
  color: #111111;
  padding: 12px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 0 0 3px 0;
}
.ng-legal-shell .skip-link:focus { left: 0; }
/* ES: en /privacidad el skip-link no necesita quedar fijo al hacer scroll
       (contenido corto); "absolute" alcanza. En /404 "fixed" es mejor
       porque el layout es flex centrado y no hay scroll de por medio.
   EN: on /privacidad the skip-link does not need to stay pinned while
       scrolling (short content); "absolute" is enough. On /404 "fixed" is
       better since the layout is a centered flex column with no scroll. */
.ng-legal-shell--privacidad .skip-link { position: absolute; }

.ng-legal-shell .logo-link {
  display: inline-block;
  margin-bottom: 3rem;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.ng-legal-shell .logo-link:hover { opacity: 1; }
.ng-legal-shell--404 .logo-link img { width: 80px; height: 80px; }
.ng-legal-shell--privacidad .logo-link img { width: 64px; height: 64px; }

/* ================== CONTENIDO (dentro de #contenido, viaja con el swap) == */

.ng-legal {
  color: #d4d4d4;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  line-height: 1.75;
}

.ng-legal .divider {
  width: 1px;
  height: 3rem;
  background: #333333;
  margin: 3rem auto;
}

.ng-legal .nav-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ng-legal .nav-links a {
  font-size: 0.8rem;
  color: #555555;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.ng-legal .nav-links a:hover { color: #aaaaaa; }

/* ---- 404 ---- */
.ng-legal--404 { color: #e0e0e0; text-align: center; }

.ng-legal--404 .code {
  font-family: 'Black Ops One', sans-serif;
  font-size: clamp(6rem, 20vw, 10rem);
  line-height: 1;
  color: #ffffff;
  letter-spacing: -2px;
  margin-bottom: 1rem;
}

.ng-legal--404 h1 {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 500;
  color: #aaaaaa;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}

.ng-legal--404 p {
  font-size: 0.95rem;
  color: #666666;
  max-width: 340px;
  line-height: 1.7;
  margin: 0 auto 2.5rem;
}

.ng-legal--404 .btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid #444444;
  border-radius: 2px;
  color: #e0e0e0;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.ng-legal--404 .btn:hover { border-color: #e0e0e0; color: #ffffff; }

/* ---- Privacidad ---- */
/* ES: el maximo ancho vive ACA (no en un <div class="wrap"> aparte por
       fuera de #contenido) para que tambien centre el contenido cuando
       se llega por navegacion AJAX desde otra pagina, no solo en carga
       directa.
   EN: the max-width lives HERE (not in a separate <div class="wrap">
       outside #contenido) so it also centers the content when reached
       via AJAX navigation from another page, not just on direct load. */
.ng-legal--privacidad { max-width: 720px; margin: 0 auto; }

.ng-legal--privacidad h1 {
  font-family: 'Black Ops One', sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.ng-legal--privacidad .updated {
  font-size: 0.8rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2.5rem;
}

.ng-legal--privacidad h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2.5rem 0 0.75rem;
}

.ng-legal--privacidad p { color: #b5b5b5; margin-bottom: 1rem; }
.ng-legal--privacidad a { color: #e0e0e0; text-decoration: underline; }
.ng-legal--privacidad a:hover { color: #ffffff; }

.ng-legal--privacidad ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.ng-legal--privacidad li {
  color: #b5b5b5;
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.ng-legal--privacidad li::before { content: "—"; position: absolute; left: 0; color: #555555; }

.ng-legal--privacidad .divider { margin: 3.5rem auto; }

.ng-legal--privacidad .nav-links { gap: 1.75rem; }
.ng-legal--privacidad .nav-links li { padding-left: 0; margin: 0; }
.ng-legal--privacidad .nav-links li::before { content: none; }
