/* North Card Show — Base (reset, tipografía, fondo mágico, utilidades) */

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

/* Evita que los hijos de flex/grid se nieguen a encoger por debajo de su
   contenido (min-width:auto por defecto), que es la causa más habitual de
   scroll lateral en móvil. Cualquier componente que necesite un ancho
   mínimo real ya lo declara con una regla más específica, que sigue
   ganando por especificidad. */
* { min-width: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  overflow-x: hidden; /* refuerza el overflow-x:hidden del body: en iOS Safari,
    un elemento position:fixed más ancho que la pantalla (paneles, overlays)
    puede seguir arrastrándose lateralmente si solo se limita en el body. */
}

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

body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { list-style: none; padding: 0; }

::selection {
  background: var(--gold);
  color: var(--text-on-gold);
}

:focus-visible {
  outline: 2px solid var(--turquesa-300);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Tipografía ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* Permite usar el nivel de titular semánticamente correcto (h2) conservando
   el aspecto de un h3, sin alterar los estilos existentes. */
.h-like-3 { font-size: var(--fs-h3); font-weight: 600; }

p { color: var(--text-secondary); }

.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 62ch;
}

em, .accent-italic {
  font-style: italic;
  line-height: 1.15;
  padding-bottom: 0.15em;
  display: inline-block;
}

.gold-text { color: var(--gold-strong); }
.turq-text { color: var(--turquesa-300); }

/* Eyebrow: usar con moderación (máx. 1 cada 3 secciones), ver reglas de sección */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--turquesa-300);
}
.ncs-breadcrumbs {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: calc(var(--nav-clearance) + var(--space-4)) var(--space-6) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.ncs-breadcrumbs a { color: var(--turquesa-200); }
.ncs-breadcrumbs a:hover { color: var(--gold-strong); }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* ---------- Layout ---------- */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-7); }
}

.section {
  position: relative;
  padding-block: var(--space-9);
}

@media (max-width: 767px) {
  .section { padding-block: var(--space-8); }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: 300;
  background: var(--gold);
  color: var(--text-on-gold);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Fondo mágico global (aura de vitral + grano de pergamino) ---------- */

.magic-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 105% at 50% 34%,
      #1FA0A9 0%,
      #167F87 16%,
      #0F5F66 30%,
      #0A464C 44%,
      #073136 58%,
      #041D20 72%,
      #020F11 86%,
      #000505 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='m'><feTurbulence type='turbulence' baseFrequency='0.011' numOctaves='4' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>"),
    var(--surface-base);
  background-blend-mode: normal, overlay, normal;
  background-size: cover, 500px 500px, cover;
  background-repeat: no-repeat, repeat, no-repeat;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Marco grabado (ornamental, reutilizable) ---------- */

.engraved-frame {
  position: relative;
  border: 1px solid var(--border-hairline-strong);
  border-radius: var(--radius-frame);
}
.engraved-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.55;
}
.engraved-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(244, 248, 247, 0.06);
}

/* ---------- Reveal-on-scroll (controlado por JS, degrada a visible sin JS/reduced-motion) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out),
              filter var(--dur-slower) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-1 { transition-delay: 90ms; }
.reveal-2 { transition-delay: 180ms; }
.reveal-3 { transition-delay: 270ms; }
.reveal-4 { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
.no-js .reveal { opacity: 1; transform: none; }