/* =============================================================
   _shared.css — tokens y utilidades para páginas nuevas (CPB)
   -------------------------------------------------------------
   Reglas de oro:
   - Todo aquí está SCOPED al wrapper .np-page (o a clases .np-*).
   - Nada toca selectores globales (body, html, *, h1, a, p, etc.).
   - Variables con prefijo --np- declaradas DENTRO de .np-page para
     no contaminar :root ni filtrar a páginas existentes.
   - Cada página nueva DEBE envolver su contenido en <div class="np-page">…</div>
     y cargar este archivo ANTES de su CSS específico.
   ============================================================= */

/* -------- 1. Tokens (custom properties) -------- */
.np-page {
  /* Colores de marca */
  --np-color-primary:        #ff6f00;
  --np-color-primary-hover:  #ffa040;
  --np-color-accent:         #e66401;

  /* Neutros */
  --np-color-dark:           #212121;
  --np-color-dark-translucent: rgba(33, 33, 33, 0.75);
  --np-color-light:          #ecf0f3;
  --np-color-white:          #ffffff;

  /* Estados (chips) */
  --np-color-success-bg:     #d5f0e2;
  --np-color-success-fg:     #34a16b;
  --np-color-neutral-bg:     #e2e2e2;
  --np-color-neutral-fg:     #333333;
  --np-color-warm-bg:        #fde2d6;
  --np-color-warm-fg:        #e66401;

  /* Sombras */
  --np-shadow-sm:   1px 1px 5px 0px rgba(33, 33, 33, 0.75);
  --np-shadow-md:   2px 2px 8px 0px rgba(33, 33, 33, 0.32);
  --np-shadow-lg:   3px 3px 10px 0px rgba(33, 33, 33, 0.75);
  --np-shadow-soft: -1px -1px 14px 1px rgba(33, 33, 33, 0.25);

  /* Tipografía */
  --np-font-ui:   "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --np-font-text: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --np-fs-xxs:  0.6rem;
  --np-fs-xs:   0.7rem;
  --np-fs-sm:   0.8rem;
  --np-fs-base: 0.9rem;
  --np-fs-md:   1rem;
  --np-fs-lg:   1.2rem;
  --np-fs-xl:   1.5rem;
  --np-fs-2xl:  2rem;
  --np-fs-hero: 3rem;

  --np-lh-tight: 1.2;
  --np-lh-base:  1.5;

  --np-ls-sm: 0.1rem;
  --np-ls-md: 0.2rem;
  --np-ls-lg: 0.3rem;
  --np-ls-xl: 0.5rem;

  /* Espaciado */
  --np-space-1: 5px;
  --np-space-2: 10px;
  --np-space-3: 15px;
  --np-space-4: 20px;
  --np-space-5: 30px;
  --np-space-6: 40px;
  --np-space-7: 50px;
  --np-space-8: 70px;

  /* Radios */
  --np-radius-xs:  5px;
  --np-radius-sm:  8px;
  --np-radius-md:  10px;
  --np-radius-lg:  15px;
  --np-radius-xl:  23px;
  --np-radius-2xl: 25px;

  /* Layout */
  --np-header-height:    80px;        /* mismo que header existente */
  --np-scroll-padding:   6rem;        /* offset para anclas */
  --np-container-max:    1200px;

  /* Breakpoints (referencia — usar en @media literales)
     mobile:    max-width 480px
     tablet:    max-width 768px
     laptop:    min-width 768px
     tablet rg: min-width 768px and max-width 1024px            */

  /* Defaults de wrapper */
  font-family: var(--np-font-text);
  font-size: var(--np-fs-base);
  line-height: var(--np-lh-base);
  color: var(--np-color-dark);
  background-color: var(--np-color-light);
}

/* -------- 2. Tipografía base dentro del wrapper -------- */
.np-page h1,
.np-page h2,
.np-page h3,
.np-page h4,
.np-page h5,
.np-page h6 {
  font-family: var(--np-font-ui);
  font-weight: 700;
  line-height: var(--np-lh-tight);
  text-transform: uppercase;
}
.np-page h1 { font-size: var(--np-fs-2xl);  letter-spacing: var(--np-ls-md); font-weight: 900; }
.np-page h2 { font-size: var(--np-fs-2xl);  letter-spacing: var(--np-ls-lg); }
.np-page h3 { font-size: var(--np-fs-xl);   letter-spacing: var(--np-ls-sm); }
.np-page h4 { font-size: var(--np-fs-md);   letter-spacing: var(--np-ls-sm); }

.np-page p {
  font-family: var(--np-font-text);
  font-size: var(--np-fs-base);
  line-height: var(--np-lh-base);
}

.np-page a {
  color: var(--np-color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.np-page a:hover { color: var(--np-color-primary); }

.np-page strong { font-weight: 700; }
.np-page em     { font-style: italic; }

/* Listas: por defecto sin viñetas (reset.css ya las quitó). Para contenido
   editorial donde sí queramos bullets, usar wrapper .np-prose. */
.np-page .np-prose ul,
.np-page .np-prose ol {
  padding-left: 1.25rem;
}
.np-page .np-prose ul { list-style: disc; }
.np-page .np-prose ol { list-style: decimal; }

/* -------- 3. Accesibilidad: focus visible global del wrapper -------- */
.np-page :focus-visible {
  outline: 3px solid var(--np-color-primary);
  outline-offset: 2px;
  border-radius: var(--np-radius-xs);
}

/* Helper para texto solo lector de pantalla */
.np-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip-link (recomendado en cada página nueva) */
.np-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--np-color-dark);
  color: var(--np-color-white);
  padding: var(--np-space-2) var(--np-space-3);
  z-index: 100;
  text-decoration: none;
}
.np-skip-link:focus {
  left: var(--np-space-3);
  top: var(--np-space-3);
}

/* -------- 4. Layout helpers -------- */
.np-container {
  width: 100%;
  max-width: var(--np-container-max);
  margin-inline: auto;
  padding-inline: var(--np-space-4);
  box-sizing: border-box;
}

/* Offset para que el header fixed no tape el contenido al hacer scroll a una ancla */
.np-page[id],
.np-page :is(section, article)[id] {
  scroll-margin-top: var(--np-scroll-padding);
}

/* -------- 5. CTA primario (regla acordada: negro sobre naranja) -------- */
.np-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-space-2);
  padding: var(--np-space-2) var(--np-space-4);
  background-color: var(--np-color-primary);
  color: var(--np-color-dark);
  font-family: var(--np-font-ui);
  font-weight: 700;
  font-size: var(--np-fs-sm);
  letter-spacing: var(--np-ls-md);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--np-color-primary);
  border-radius: var(--np-radius-md);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.np-cta:hover,
.np-cta:focus-visible {
  background-color: var(--np-color-dark);
  color: var(--np-color-light);
  border-color: var(--np-color-dark);
}

/* Variante secundaria: outline oscuro sobre fondo claro */
.np-cta--outline {
  background-color: transparent;
  color: var(--np-color-dark);
  border-color: var(--np-color-dark);
}
.np-cta--outline:hover,
.np-cta--outline:focus-visible {
  background-color: var(--np-color-dark);
  color: var(--np-color-white);
}

/* -------- 6. Imágenes responsive por defecto dentro del wrapper -------- */
.np-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* -------- 7. Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .np-page *,
  .np-page *::before,
  .np-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}