/*
 * NORTE · sistema de diseño
 * Tokens, base, botones, superficies, fondos ambientales y movimiento compartidos por todo el sitio.
 * Las hojas norte-public.css y norte-theme.css solo componen sobre estas piezas.
 *
 * Lenguaje (inspirado en Monzo, con la marca Norte): lienzo claro con un matiz violeta, tarjetas blancas
 * encima y relleno suave entre ambos. Un único acento violeta que vive en texto, iconos y detalles de
 * marca; el botón principal es una píldora de tinta, nunca un relleno de acento.
 * Radios: 500px para todo control interactivo, 32px para contenedores y 64px para el hero y bloques grandes.
 * Sin sombras difusas: la elevación sale del escalón de color (lienzo → blanco → relleno suave).
 * Todo movimiento se apaga con prefers-reduced-motion.
 */

/* ───────── 1. Tokens ───────── */
:root{
  /* Color: base neutra */
  --n-ink:#0c0818;          /* tinta: negro con matiz violeta, el de la fotografía del hero */
  --n-ink-2:#150f26;
  --n-ink-3:#241b3d;
  --n-accent:#6d3bd2;       /* acento de marca sobre fondos claros (texto, iconos, foco) */
  --n-accent-hover:#5a2db5;
  --n-violet:#6d3bd2;       /* alias conservado */
  --n-violet-hover:#5a2db5;
  --n-violet-bright:#a98bf5;/* acento sobre fondos oscuros: la segunda línea del titular */
  --n-lilac:#e4dcf8;
  --n-paper:#ffffff;        /* superficie de tarjeta */
  --n-mist:#f4f2f9;         /* lienzo de la página */
  --n-mist-2:#e8e4f1;       /* relleno suave: hover, campos incrustados */
  --n-text:#0c0818;
  --n-text-2:#554f66;
  --n-text-3:#706b80;
  --n-on-dark:#ffffff;
  --n-on-dark-2:rgba(255,255,255,.76);
  --n-on-dark-3:rgba(255,255,255,.56);
  --n-line:rgba(12,8,24,.10);
  --n-line-strong:rgba(12,8,24,.28);
  --n-line-dark:rgba(255,255,255,.14);
  --n-danger:#b3261e;
  --n-danger-bright:#ff8c85;
  --n-success:#1a7f4b;

  /* Espaciado (base 4px) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;

  /* Radios: píldora (500) para controles, 16 para elementos pequeños, 32 para contenedores, 64 para bloques grandes. */
  --r-xs:4px;--r-sm:16px;--r-md:32px;--r-lg:32px;--r-xl:64px;--r-pill:500px;

  /* Sombras: mínimas. Las tarjetas se separan con borde de 1px. */
  --sh-1:0 1px 2px rgba(18,18,20,.05);
  --sh-2:0 8px 24px -16px rgba(18,18,20,.28);
  --sh-dark:0 24px 48px -24px rgba(0,0,0,.55);
  --sh-glow:0 12px 32px -18px rgba(0,0,0,.5);

  /* Superficies planas (los nombres de degradado se conservan por compatibilidad) */
  --g-violet:#6d3bd2;
  --g-ink:#0c0818;

  /* Movimiento */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.16s;--t-base:.28s;--t-slow:.6s;--t-reveal:.8s;

  /* Tipografía */
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:'Poppins','Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Compatibilidad con los tokens heredados de la intranet */
  --norte-navy:var(--n-ink);--norte-navy-deep:var(--n-ink);--norte-blue:var(--n-accent);--norte-orange:var(--n-accent);
  --norte-surface:var(--n-mist);--norte-ink:var(--n-text);--norte-muted:var(--n-text-2);
  --ink:var(--n-text);--muted:var(--n-text-2);--green:var(--n-accent);--green2:var(--n-accent);--mint:var(--n-mist);
  --line:var(--n-line);--paper:#fff;--bg:var(--n-mist);--gold:var(--n-accent);--shadow:var(--sh-1);
}

/* ───────── 2. Base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--n-mist);color:var(--n-text);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(h1,h2,h3,h4,h5,h6){font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.03em;margin:0}
:where(p){margin:0}
:where(a){color:inherit;text-decoration:none}
:where(img,svg,video){max-width:100%}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(b,strong,th,summary,label){font-weight:500}
[hidden]{display:none!important}
::selection{background:var(--n-ink);color:#fff}
:focus-visible{outline:2px solid var(--n-accent);outline-offset:3px;border-radius:4px}
.nds-dark :focus-visible,.nds-ambient :focus-visible{outline-color:#fff}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nds-container{width:min(1200px,calc(100% - 64px));margin-inline:auto}
@media(max-width:700px){.nds-container{width:calc(100% - 32px)}}

/* Escala tipográfica */
.nds-display{font-family:var(--font-display);font-size:clamp(40px,5.4vw,64px);font-weight:600;line-height:1.02;letter-spacing:-.035em}
.nds-h1{font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.04em}
.nds-h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.035em}
.nds-h3{font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-.02em}
.nds-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--n-text-2)}
.nds-dark .nds-lead,.nds-ambient .nds-lead{color:var(--n-on-dark-2)}
.nds-eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--n-text-3)}
.nds-dark .nds-eyebrow,.nds-ambient .nds-eyebrow{color:var(--n-on-dark-3)}
.nds-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.8}
.nds-grad-text{color:inherit}

/* ───────── 3. Botones ───────── */
.nds-btn,.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 28px;border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;cursor:pointer;overflow:hidden;
  transition:background-color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);
}
.nds-btn:active,.btn:active{transform:scale(.98)}
.nds-btn i,.btn i{transition:transform var(--t-base) var(--ease-out)}
.nds-btn:hover i.bi-arrow-right,.nds-btn:hover i.bi-arrow-up-right,.btn:hover i.bi-arrow-right{transform:translateX(3px)}
/* Primario: píldora de tinta. El violeta nunca rellena un botón. Sobre fondo oscuro pasa a píldora blanca. */
.nds-btn--primary,.btn-primary{background:var(--n-ink);color:#fff}
.nds-btn--primary:hover,.btn-primary:hover{background:var(--n-ink-3)}
.nds-dark .nds-btn--primary,.nds-ambient .nds-btn--primary{background:#fff;color:var(--n-ink)}
.nds-dark .nds-btn--primary:hover,.nds-ambient .nds-btn--primary:hover{background:var(--n-mist-2)}
.nds-btn--ghost,.btn-outline{background:transparent;color:var(--n-text);border-color:var(--n-line-strong);}
.nds-btn--ghost:hover,.btn-outline:hover{border-color:var(--n-text);background:var(--n-text);color:#fff}
.nds-dark .nds-btn--ghost,.nds-ambient .nds-btn--ghost{color:#fff;border-color:var(--n-line-dark);background:rgba(255,255,255,.06)}
.nds-dark .nds-btn--ghost:hover,.nds-ambient .nds-btn--ghost:hover{background:#fff;color:var(--n-ink);border-color:#fff}
.nds-btn--light{background:#fff;color:var(--n-ink)}
.nds-btn--light:hover{background:var(--n-mist-2)}
.nds-btn--sm,.btn-small{min-height:38px;padding:8px 20px;font-size:14px}
.nds-btn[aria-busy=true],.btn[aria-busy=true]{pointer-events:none;opacity:.85}
.nds-btn[aria-busy=true]::before,.btn[aria-busy=true]::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:nds-spin .7s linear infinite}
.btn:disabled,.nds-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-full{width:100%}

/* ───────── 4. Superficies y tarjetas ───────── */
.nds-card{position:relative;background:var(--n-paper);border:0;border-radius:var(--r-md);overflow:hidden;transition:border-color var(--t-base) var(--ease-out)}
.nds-card--dark{background:var(--n-ink);border-color:var(--n-line-dark);color:#fff}
.nds-card--glass{background:rgba(255,255,255,.06);border-color:var(--n-line-dark);color:#fff}
/* Elevación solo en tarjetas navegables: cambio de borde, sin sombra ni salto */
a.nds-card:hover,.nds-card--lift:hover{border-color:var(--n-line-strong)}
a.nds-card--dark:hover,.nds-card--dark.nds-card--lift:hover{border-color:rgba(255,255,255,.4)}
a.nds-card:active{border-color:var(--n-text)}

.nds-icon-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-sm);background:var(--n-mist);color:var(--n-text);font-size:22px;border:1px solid var(--n-line)}
.nds-dark .nds-icon-tile,.nds-card--dark .nds-icon-tile,.nds-card--glass .nds-icon-tile{background:rgba(255,255,255,.08);color:#fff;border-color:var(--n-line-dark)}
a.nds-card:hover .nds-icon-tile,.nds-card--lift:hover .nds-icon-tile{border-color:var(--n-line-strong)}

.nds-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--n-mist);border:1px solid var(--n-line);font-size:12px;font-weight:500;color:var(--n-text-2)}
.nds-dark .nds-chip,.nds-ambient .nds-chip{background:rgba(255,255,255,.07);border-color:var(--n-line-dark);color:var(--n-on-dark-2)}
.nds-chip i{color:currentColor}
.nds-live-dot{width:8px;height:8px;border-radius:50%;background:var(--n-success)}

/* ───────── 5. Fondos ambientales ───────── */
/* Base oscura plana; la textura es una cuadrícula estática de 1px, sin luz ni animación. */
.nds-ambient{position:relative;isolation:isolate;overflow:hidden;background:var(--n-ink);color:var(--n-on-dark)}
.nds-ambient::before{content:none}
.nds-ambient::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(75% 80% at 72% 30%,#000,transparent 78%);mask-image:radial-gradient(75% 80% at 72% 30%,#000,transparent 78%)}
.nds-ambient[data-ambient=spot]::after{content:none}
.nds-ambient[data-ambient=dots]::after{background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.2px);background-size:24px 24px}
.nds-ambient[data-ambient=lines]::after{background:repeating-linear-gradient(118deg,transparent 0 46px,rgba(255,255,255,.5) 47px 48px);-webkit-mask-image:linear-gradient(100deg,transparent 20%,#000 80%);mask-image:linear-gradient(100deg,transparent 20%,#000 80%)}
/* Superficie clara con textura sutil para secciones blancas */
.nds-paper{position:relative;background:var(--n-paper)}
.nds-mist{position:relative;background:var(--n-mist)}
.nds-texture::before{content:none}

/* ───────── 6. Movimiento ───────── */
@keyframes nds-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes nds-spin{to{transform:rotate(360deg)}}
@keyframes nds-shimmer{to{background-position:-200% 0}}
@keyframes nds-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes nds-draw{to{stroke-dashoffset:0}}
/* Los flotantes quedan estáticos: el movimiento solo aparece cuando aporta */
.nds-float,.nds-float--slow,.nds-float--delay{animation:none}

/* Aparición progresiva: el contenido es visible por defecto y solo se oculta si motion.js está activo */
.nds-motion [data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity var(--t-reveal) var(--reveal-delay,0ms) var(--ease-out),transform var(--t-reveal) var(--reveal-delay,0ms) var(--ease-out)}
.nds-motion [data-reveal=left]{transform:translate3d(-32px,0,0)}
.nds-motion [data-reveal=right]{transform:translate3d(32px,0,0)}
.nds-motion [data-reveal=scale]{transform:scale(.94)}
.nds-motion [data-reveal=fade]{transform:none}
.nds-motion [data-reveal].home-is-visible{opacity:1;transform:none}

/* Esqueletos de carga */
.nds-skeleton{display:block;height:1em;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--n-mist-2) 25%,#fff 50%,var(--n-mist-2) 75%);background-size:200% 100%;animation:nds-shimmer 1.4s linear infinite}

/* Transición entre páginas (navegación MPA del mismo origen) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:nds-vt-out .18s ease both}
::view-transition-new(root){animation:nds-vt-in .42s var(--ease-out) both}
@keyframes nds-vt-out{to{opacity:0}}
@keyframes nds-vt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Diálogos */
dialog{color:inherit}
dialog[open]{animation:nds-pop .38s var(--ease-out) both;box-shadow:var(--sh-2)}
dialog::backdrop{background:rgba(19,19,22,.62);animation:nds-vt-in .3s ease both}

/* Interruptores y casillas */
input[type=checkbox],input[type=radio]{accent-color:var(--n-accent)}

/* «Reducir movimiento»: se quitan desplazamientos, giros y bucles, pero la aparición progresiva se conserva
   como un fundido suave solo con opacidad (sin traslación), que no provoca mareo ni distrae. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *:not([data-reveal]),*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .nds-motion [data-reveal],.nds-motion [data-reveal=left],.nds-motion [data-reveal=right],.nds-motion [data-reveal=scale],.nds-motion [data-reveal=fade]{transform:none;transition:opacity .6s var(--reveal-delay,0ms) ease}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}