/* Silverswan Intranet · Design System v1
 * 2026-05-22 · estética dossier / manifiesto técnico
 * Centraliza tokens, tipografía, escalas y patrones reutilizables.
 */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Color tokens — paleta Silverswan night-mode */
  --abyss:#070B14;          /* fondo principal */
  --abyss-2:#0C1220;        /* fondo secundario / cards */
  --abyss-3:#141C2E;        /* fondo terciario / inputs / wells */
  --night:#1E4D7B;          /* azul nocturno (acentos fríos) */
  --night-soft:#2C6BA8;
  --silver:#C0C8D4;         /* texto principal */
  --silver-light:#E8ECF2;   /* texto enfatizado / títulos */
  --silver-dim:#8A97A8;     /* texto secundario / labels */
  --silver-deep:#5E6B7D;
  --amber:#D4C5A0;          /* acento dorado tenue (CTA, marcadores) */
  --amber-deep:#B8A47A;
  --line:rgba(192,200,212,.10);
  --line-strong:rgba(192,200,212,.20);
  --error:#E8A0A0;
  --error-bg:rgba(220,80,80,.08);
  --error-border:rgba(220,80,80,.30);

  /* Fuentes */
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;

  /* Escalas tipográficas compactas — sensación dossier */
  --fs-meta:10.5px;       /* tags monospace uppercase */
  --fs-meta-md:11px;
  --fs-body-xs:12px;      /* anotaciones, footer */
  --fs-body-sm:13px;      /* descripciones de cards */
  --fs-body:14.5px;       /* body principal */
  --fs-body-lg:15.5px;
  --fs-title-sm:17px;
  --fs-title:20px;        /* título de card */
  --fs-title-lg:26px;
  --fs-title-xl:32px;

  --lh-tight:1.35;
  --lh-body:1.55;
  --lh-loose:1.7;

  /* Espaciados */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px;  --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px;  --sp-8:48px;
  --sp-9:64px; --sp-10:88px;

  /* Radios */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--abyss);
  color:var(--silver-light);
  line-height:var(--lh-body);
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:var(--amber);text-decoration:none;transition:color .15s}
a:hover{color:var(--amber-deep)}

/* ====================== Layout ====================== */
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--sp-6);width:100%}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 var(--sp-6);width:100%}

/* ====================== Header tipo file-browser ====================== */
.site-header{
  background:var(--abyss);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);padding:var(--sp-4) var(--sp-6);flex-wrap:wrap;
}
.brand-mark{display:flex;align-items:baseline;gap:var(--sp-3);text-decoration:none}
.brand-mark .name{font-family:var(--font-serif);font-size:22px;font-weight:300;
color:var(--silver-light);letter-spacing:-.015em;line-height:1}
.brand-mark .sub{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.20em;
text-transform:uppercase;color:var(--silver-dim)}

.path-tag{
  font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.14em;
  text-transform:uppercase;color:var(--silver-dim);
}
.path-tag .sep{color:var(--silver-deep);margin:0 .35em}
.path-tag .cur{color:var(--amber)}
.path-tag .ver{margin-left:var(--sp-3);color:var(--silver-deep)}

.user-tag{
  font-family:var(--font-mono);font-size:var(--fs-body-xs);
  color:var(--silver-dim);display:flex;align-items:center;gap:var(--sp-3);
}
.user-tag .who{color:var(--amber)}
.user-tag a{color:var(--silver-dim);font-size:var(--fs-meta-md);letter-spacing:.10em;text-transform:uppercase}
.user-tag a:hover{color:var(--amber)}
.user-tag .pipe{color:var(--silver-deep)}

/* ====================== Hero / sección manifesto ====================== */
.hero{padding:var(--sp-9) 0 var(--sp-7);border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.22em;
text-transform:uppercase;color:var(--amber);margin-bottom:var(--sp-3)}
.h1{font-family:var(--font-serif);font-size:var(--fs-title-xl);font-weight:300;
letter-spacing:-.01em;color:var(--silver-light);line-height:1.15;margin-bottom:var(--sp-4)}
.lead{font-family:var(--font-serif);font-size:var(--fs-body-lg);font-weight:300;
color:var(--silver);line-height:var(--lh-loose);max-width:640px}

/* ====================== Section labels ====================== */
.section{padding:var(--sp-8) 0}
.section-label{
  font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.22em;
  text-transform:uppercase;color:var(--silver-dim);
  margin-bottom:var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-3);
}
.section-label::before{content:'';width:24px;height:1px;background:var(--amber);display:inline-block}

/* ====================== Cards estilo dossier ====================== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.card{
  display:block;background:var(--abyss-2);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-6) var(--sp-5);color:var(--silver-light);
  transition:border-color .18s ease,transform .18s ease;
  position:relative;text-decoration:none;
}
.card::before{
  content:'';position:absolute;top:-1px;left:var(--sp-5);width:32px;height:2px;
  background:transparent;transition:background .18s;
}
.card:hover{border-color:var(--line-strong);transform:translateY(-1px);text-decoration:none}
.card:hover::before{background:var(--amber)}
.card .meta{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.18em;
text-transform:uppercase;color:var(--silver-dim);margin-bottom:var(--sp-3)}
.card:hover .meta{color:var(--amber)}
.card h3{font-family:var(--font-serif);font-size:var(--fs-title);font-weight:400;
color:var(--silver-light);letter-spacing:-.005em;margin-bottom:var(--sp-2);line-height:1.3}
.card p{font-family:var(--font-serif);font-size:var(--fs-body-sm);color:var(--silver);
line-height:var(--lh-body);font-weight:300}
.card .arr{display:inline-block;margin-top:var(--sp-4);font-family:var(--font-mono);
font-size:var(--fs-meta-md);letter-spacing:.14em;text-transform:uppercase;
color:var(--silver-dim);transition:color .18s,transform .18s}
.card:hover .arr{color:var(--amber);transform:translateX(3px)}

.card.disabled{opacity:.55;cursor:default;pointer-events:none}
.card.disabled .arr::after{content:' · próximamente'}

/* Card grande — featured */
.card-feature{
  background:linear-gradient(135deg,var(--abyss-2) 0%,var(--abyss-3) 100%);
  border:1px solid var(--line-strong);padding:var(--sp-7) var(--sp-7) var(--sp-6);
}
.card-feature::before{background:var(--amber)}
.card-feature h3{font-size:var(--fs-title-lg);margin-bottom:var(--sp-3)}
.card-feature p{font-size:var(--fs-body)}

/* ====================== CTA / botones ====================== */
.cta{
  display:inline-block;padding:13px 22px;border-radius:var(--r-sm);
  background:var(--amber);color:var(--abyss);font-family:var(--font-mono);
  font-size:var(--fs-meta-md);letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;transition:background .15s;border:0;cursor:pointer;
}
.cta:hover{background:var(--amber-deep);color:var(--abyss);text-decoration:none}
.cta-ghost{background:transparent;color:var(--silver-light);border:1px solid var(--line-strong)}
.cta-ghost:hover{background:var(--abyss-2);border-color:var(--amber);color:var(--amber)}

/* ====================== Notas / well ====================== */
.note{
  margin-top:var(--sp-6);background:var(--abyss-2);
  border:1px solid var(--line);border-left:2px solid var(--amber);
  border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);
  font-family:var(--font-serif);font-size:var(--fs-body-sm);font-weight:300;
  color:var(--silver);line-height:var(--lh-loose);
}
.note .note-head{font-family:var(--font-mono);font-size:var(--fs-meta);
letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
margin-bottom:var(--sp-2);display:block}

/* ====================== Footer ====================== */
.site-footer{
  background:var(--abyss);border-top:1px solid var(--line);
  padding:var(--sp-7) 0 var(--sp-6);margin-top:auto;
}
.site-footer .wrap{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--sp-6);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--fs-meta);
  letter-spacing:.14em;text-transform:uppercase;color:var(--silver-dim);
}
.site-footer .col{display:flex;flex-direction:column;gap:var(--sp-2)}
.site-footer .col span{color:var(--silver-deep)}
.site-footer .col strong{color:var(--silver);font-weight:500}
.site-footer a{color:var(--silver-dim)}
.site-footer a:hover{color:var(--amber)}

/* ====================== Responsivo ====================== */
@media (max-width:760px){
  .h1{font-size:26px}
  .hero{padding:var(--sp-7) 0 var(--sp-6)}
  .section{padding:var(--sp-7) 0}
  .site-header .wrap{padding:var(--sp-3) var(--sp-4);gap:var(--sp-3)}
  .path-tag,.user-tag{font-size:10px}
  .card-feature h3{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}