/* ═══════════════════════════════════════════════════
   TOKENS · Sistema de Diseño UC3M IMPULSO (subset)
   ═══════════════════════════════════════════════════ */
:root {
  /* Paleta primaria UC3M */
  --azul-reflex:    #171796;
  --azul-deep:      #0F0F6B;
  --azul-mid:       #3A3AB8;
  --azul-light:     #6868D4;
  --azul-pale:      #E8E8F7;
  --azul-ghost:     #F2F2FB;

  /* Neutros */
  --white:          #FFFFFF;
  --gris-claro:     #F7F6F6;
  --gris-100:       #EFEFEF;
  --gris-200:       #E0E0E0;
  --gris-300:       #C4C4C4;
  --gris-400:       #9E9E9E;
  --gris-500:       #757575;
  --gris-600:       #545454;
  --gris-700:       #3A3A3A;
  --ink:            #1A1A1A;
  --ink-soft:       #4A4A4A;

  /* Acentos funcionales */
  --acento-teal:      #1A9E7A;
  --acento-teal-pale: #E6F7F1;
  --acento-amber:     #E8A317;
  --acento-amber-pale:#FFF7E6;
  --acento-coral:     #E05555;
  --acento-coral-pale:#FDECEC;

  /* Tipografía */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipográfica · Major Third (1.25) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;

  /* Espaciado base-4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Radios */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:100px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(23,23,150,0.06);
  --shadow-md: 0 4px 12px rgba(23,23,150,0.08);
  --shadow-lg: 0 8px 30px rgba(23,23,150,0.10);
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--gris-claro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul-reflex); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   HEADER · marca + atribución + nav
   ═══════════════════════════════════════════════════ */
header.site {
  background: var(--white);
  border-bottom: 2px solid var(--azul-reflex);
  position: sticky; top: 0; z-index: 100;
}
header.site .shell {
  max-width: 1080px; margin: 0 auto;
  padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.brand:hover { text-decoration: none; }
.brand-name {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
}
.brand-name:hover { text-decoration: none; }
.brand-name .dot { color: var(--azul-reflex); }
.brand-attrib {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-400);
  margin-top: 3px;
  font-weight: 500;
}

nav.primary { display: flex; gap: var(--sp-1); }
nav.primary a {
  padding: 7px var(--sp-4);
  color: var(--gris-600);
  text-decoration: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}
nav.primary a:hover { background: var(--azul-ghost); color: var(--azul-reflex); text-decoration: none; }
nav.primary a.active { background: var(--azul-reflex); color: var(--white); font-weight: 600; }

/* ═══════════════════════════════════════════════════
   STATUS STRIP · asignatura + estado + acciones
   ═══════════════════════════════════════════════════ */
.status-strip {
  background: var(--azul-ghost);
  border-bottom: 1px solid var(--azul-pale);
}
.status-strip .shell {
  max-width: 1080px; margin: 0 auto;
  padding: var(--sp-2) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--text-xs);
}
.status-strip .info { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.status-strip .info-item { display: flex; align-items: center; gap: var(--sp-2); }
.status-strip .info-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-mid); font-weight: 600;
}
.status-strip .info-value { color: var(--ink); font-weight: 500; }
.status-strip .actions { display: flex; gap: var(--sp-2); }

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.btn.primary { background: var(--azul-reflex); color: var(--white); }
.btn.primary:hover { background: var(--azul-deep); text-decoration: none; }
.btn.outline { background: transparent; color: var(--azul-reflex); border-color: var(--azul-reflex); }
.btn.outline:hover { background: var(--azul-ghost); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--azul-mid); }
.btn.ghost:hover { background: var(--azul-ghost); text-decoration: none; }
.btn.small { padding: 6px 14px; font-size: var(--text-xs); }

/* ═══════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════ */
main {
  max-width: 1080px; margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--mono); font-size: 11px;
  color: var(--gris-500); margin-bottom: var(--sp-3);
  letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--gris-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--azul-reflex); }

/* Section chip (kicker) */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-reflex);
  margin-bottom: var(--sp-3);
}
.chip::before {
  content: ''; width: 24px; height: 2px;
  background: var(--azul-mid);
}

/* Headings */
h1 {
  font-family: var(--serif);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-3);
}
h2 {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  margin: var(--sp-10) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--gris-200);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  margin: var(--sp-4) 0 var(--sp-2);
}
p { margin-bottom: var(--sp-3); color: var(--gris-700); }
ul { margin-left: var(--sp-5); margin-bottom: var(--sp-4); }
ul li { margin-bottom: var(--sp-2); color: var(--gris-700); }

/* Lead paragraph */
.lead {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--gris-600);
  max-width: 720px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-10) var(--sp-10);
  margin-bottom: var(--sp-8);
  position: relative;
  overflow: hidden;
}
.hero.dark {
  background: linear-gradient(135deg, var(--azul-reflex) 0%, var(--azul-deep) 100%);
  color: var(--white);
}
.hero.dark::before {
  content: ''; position: absolute; top: -100px; right: -60px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,0.04); pointer-events: none;
}
.hero.dark h1, .hero.dark p { color: var(--white); position: relative; z-index: 1; }
.hero.dark .chip { color: rgba(255,255,255,0.75); }
.hero.dark .chip::before { background: rgba(255,255,255,0.4); }
.hero.dark .hero-meta { color: rgba(255,255,255,0.75); }
.hero.dark .hero-meta strong { color: var(--white); }

.hero p { font-size: var(--text-md); line-height: 1.65; max-width: 720px; margin-bottom: var(--sp-4); }
.hero-meta {
  display: flex; gap: var(--sp-10); margin-top: var(--sp-5); flex-wrap: wrap;
  color: var(--gris-600); font-size: var(--text-sm);
}
.hero-meta strong { color: var(--ink); display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.hero-actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════
   CONTINUE BANNER (visita recurrente)
   ═══════════════════════════════════════════════════ */
.continue-banner {
  background: linear-gradient(135deg, var(--azul-reflex) 0%, var(--azul-deep) 100%);
  color: var(--white);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--sp-8);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-5); flex-wrap: wrap;
}
.continue-banner .continue-chip {
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.6); text-transform: uppercase;
  letter-spacing: 0.16em; margin-bottom: var(--sp-2);
}
.continue-banner h2 {
  font-family: var(--serif); font-size: var(--text-xl); font-weight: 600;
  color: var(--white); margin: 0; padding: 0; border: none;
}
.continue-banner .subtext {
  color: rgba(255,255,255,0.75); font-size: var(--text-sm); margin-top: var(--sp-2);
}
.continue-banner .btn.primary {
  background: var(--white); color: var(--azul-reflex);
  border-color: var(--white);
}
.continue-banner .btn.primary:hover { background: var(--gris-claro); }

/* ═══════════════════════════════════════════════════
   CARDS & GRIDS
   ═══════════════════════════════════════════════════ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.card {
  background: var(--white);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card-linkable { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.card-linkable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; }
.card .meta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-mid); margin-bottom: var(--sp-2); font-weight: 600;
}
.card h3 { margin-top: 0; margin-bottom: var(--sp-2); }
.card p { font-size: var(--text-sm); color: var(--gris-500); margin-bottom: var(--sp-2); line-height: 1.6; }
.card .card-link { font-size: var(--text-sm); font-weight: 600; color: var(--azul-reflex); }

.card.with-accent { border-top: 3px solid var(--azul-reflex); }
.card.muted { opacity: 0.55; }

/* ═══════════════════════════════════════════════════
   STEP BLOCK · paso del proceso
   ═══════════════════════════════════════════════════ */
.step-block {
  background: var(--white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--azul-reflex);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6) var(--sp-6);
  margin: var(--sp-4) 0;
}
.step-block .step-num {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--azul-mid); font-weight: 600; margin-bottom: var(--sp-1);
}
.step-block h3 { margin-top: 0; font-family: var(--serif); font-size: var(--text-lg); font-weight: 600; }
.step-block.muted { border-left-color: var(--gris-300); opacity: 0.7; }

/* ═══════════════════════════════════════════════════
   PRINCIPLE · bloque de principio numerado
   ═══════════════════════════════════════════════════ */
.principle {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  padding: var(--sp-5);
  margin: var(--sp-3) 0;
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start;
}
.principle .num {
  font-family: var(--serif);
  font-size: var(--text-2xl);
  color: var(--azul-reflex);
  font-weight: 700;
  line-height: 1;
  min-width: 44px;
}
.principle h3 { margin-top: 0; margin-bottom: var(--sp-1); }
.principle p { margin-bottom: 0; font-size: var(--text-sm); color: var(--gris-600); }

/* ═══════════════════════════════════════════════════
   TOOL CARD · pieza descargable
   ═══════════════════════════════════════════════════ */
.tool-card {
  background: var(--white);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-2) 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-5); transition: box-shadow 0.15s;
}
.tool-card:hover { box-shadow: var(--shadow-sm); border-color: var(--azul-pale); }
.tool-card .body h3 { margin-top: 0; margin-bottom: var(--sp-1); font-size: var(--text-base); font-family: var(--sans); }
.tool-card .body .meta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-mid); margin-bottom: var(--sp-1); font-weight: 600;
}
.tool-card .body p { margin-bottom: 0; color: var(--gris-500); font-size: var(--text-sm); }
.tool-card .actions { white-space: nowrap; flex-shrink: 0; display: flex; gap: var(--sp-1); }

/* ═══════════════════════════════════════════════════
   CALLOUT
   ═══════════════════════════════════════════════════ */
.callout {
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  line-height: 1.65;
  display: flex; gap: var(--sp-3); align-items: flex-start;
  margin: var(--sp-3) 0;
}
.callout.wireframe {
  background: var(--azul-ghost);
  border-left: 3px solid var(--azul-mid);
  color: var(--azul-deep);
  font-style: italic;
}
.callout.wireframe::before {
  content: "nota de diseño";
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; font-style: normal;
  padding: 2px 8px; background: var(--azul-pale);
  border-radius: var(--radius-sm); align-self: flex-start;
  flex-shrink: 0;
}
.callout.info {
  background: var(--azul-ghost);
  border-left: 3px solid var(--azul-reflex);
  color: var(--azul-deep);
}
.callout.info::before {
  content: "nota"; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px; background: var(--azul-pale);
  border-radius: var(--radius-sm); align-self: flex-start;
  flex-shrink: 0; color: var(--azul-reflex);
}

/* ═══════════════════════════════════════════════════
   PROGRESS BAR & CHECKBOXES
   ═══════════════════════════════════════════════════ */
.progress-bar { background: var(--gris-100); height: 6px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--sp-3) 0; }
.progress-bar .fill { background: var(--azul-reflex); height: 100%; transition: width 0.3s; }

.checkbox {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--gris-700);
  cursor: pointer;
  user-select: none;
}
.checkbox .box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--gris-400);
  border-radius: var(--radius-sm);
  flex-shrink: 0; margin-top: 2px; background: var(--white);
  position: relative;
  transition: all 0.15s;
}
.checkbox:hover .box { border-color: var(--azul-reflex); }
.checkbox.done .box { background: var(--azul-reflex); border-color: var(--azul-reflex); }
.checkbox.done .box::after {
  content: "✓"; color: var(--white); position: absolute;
  top: -4px; left: 2px; font-size: 13px; font-weight: 700;
}
.checkbox.done .label { color: var(--gris-500); text-decoration: line-through; }

/* ═══════════════════════════════════════════════════
   WORK PANEL
   ═══════════════════════════════════════════════════ */
.work-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gris-200);
  padding: var(--sp-6);
  margin: var(--sp-4) 0;
}

/* ═══════════════════════════════════════════════════
   FAQ & GLOSARIO
   ═══════════════════════════════════════════════════ */
.faq-item {
  background: var(--white);
  border: 1px solid var(--gris-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-2) 0;
}
.faq-item h3 {
  margin-top: 0; margin-bottom: var(--sp-2);
  font-family: var(--sans); font-size: var(--text-base); font-weight: 600;
  color: var(--azul-deep);
}
.faq-item p { font-size: var(--text-sm); margin-bottom: 0; color: var(--gris-600); }

.glossary-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--gris-100);
}
.glossary-item dt {
  font-family: var(--mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--azul-reflex); font-weight: 600; margin-bottom: 2px;
}
.glossary-item dd {
  font-size: var(--text-sm); color: var(--gris-700);
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--gris-200);
  background: var(--white);
  padding: var(--sp-5) var(--sp-6);
  color: var(--gris-500);
  font-size: var(--text-xs);
}
footer .shell {
  max-width: 1080px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
}
footer a { color: var(--gris-500); }
footer a:hover { color: var(--azul-reflex); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 780px) {
  header.site .shell { flex-wrap: wrap; gap: var(--sp-3); }
  nav.primary { flex-wrap: wrap; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: var(--sp-6); }
  .hero-meta { gap: var(--sp-5); }
  .tool-card { flex-direction: column; }
  .principle { grid-template-columns: 1fr; }
}