/* ============================================================
   Curso Hostinger Horizons — Prompts y recursos
   Sistema visual compartido
   ============================================================ */

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

:root {
  --bg:          #0B0A10;
  --bg-deep:     #050409;
  --surface:     #14111C;
  --surface-2:   #1C1728;
  --purple:      #7C5CFF;
  --purple-mid:  #9B7FFF;
  --purple-soft: #D4C6FF;
  --line:        rgba(155,127,255,.22);
  --line-strong: rgba(155,127,255,.42);
  --text:        rgba(255,255,255,.92);
  --muted:       rgba(255,255,255,.56);
  --faint:       rgba(255,255,255,.34);
  --ok:          #4ADE80;
  --warn:        #FBBF24;

  --display: "Bricolage Grotesque", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Hanken Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1180px;
  --col: 780px;
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  background-image:
    radial-gradient(80% 60% at 50% 0%, transparent 40%, var(--bg) 100%),
    radial-gradient(circle at 12% 0%, rgba(124,92,255,.20), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(155,127,255,.10), transparent 38%),
    linear-gradient(rgba(124,92,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.055) 1px, transparent 1px);
  background-size: auto, auto, auto, 64px 64px, 64px 64px;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

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

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
h1 { font-size: clamp(38px, 6vw, 66px); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 14px; }
h3 { font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -.025em; margin-bottom: 10px; }
h4 { font-size: 18px; letter-spacing: -.015em; margin-bottom: 8px; }

p { margin-bottom: 16px; color: rgba(255,255,255,.82); }
p:last-child { margin-bottom: 0; }

a { color: var(--purple-soft); text-decoration: none; border-bottom: 1px solid rgba(212,198,255,.3); transition: color .18s, border-color .18s; }
a:hover { color: #fff; border-color: var(--purple-mid); }

strong { color: #fff; font-weight: 600; }
code {
  font-family: var(--mono); font-size: .88em;
  background: rgba(124,92,255,.18); border: 1px solid rgba(124,92,255,.3);
  padding: 2px 6px; border-radius: 4px; color: var(--purple-soft);
  white-space: nowrap;
}

ul, ol { margin: 0 0 16px 22px; color: rgba(255,255,255,.82); }
li { margin-bottom: 7px; }
li::marker { color: var(--purple-mid); }
ul.clean { list-style: none; margin-left: 0; }
ul.clean li { padding-left: 26px; position: relative; }
ul.clean li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--purple-mid);
}

.eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; color: var(--purple-mid);
  margin-bottom: 14px; display: block;
}

.lead { font-size: clamp(18px, 2.2vw, 21px); color: rgba(255,255,255,.72); line-height: 1.6; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(5,4,9,.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), transparent);
  transform-origin: left; animation: accent-grow .75s cubic-bezier(.16,1,.3,1) both;
}

@keyframes accent-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; border: 0; flex-shrink: 0; }
.brand:hover { border: 0; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: block; }
.brand-text { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; color: #fff; }
.brand-text span { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.62);
  padding: 7px 11px; border-radius: 6px; border: 0; white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(124,92,255,.2); border: 0; }
.nav a.active { color: var(--purple-soft); background: rgba(124,92,255,.24); }

.nav-toggle {
  display: none; margin-left: auto; background: rgba(124,92,255,.18);
  border: 1px solid var(--line-strong); color: #fff; border-radius: 7px;
  padding: 8px 13px; font-family: var(--mono); font-size: 13px; cursor: pointer;
}

/* Navegación escalable entre proyectos */
.project-rail {
  position: sticky;
  top: 57px;
  z-index: 50;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: rgba(11,10,16,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.project-rail-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.project-rail-label {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.project-tabs {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.project-tabs::-webkit-scrollbar { display: none; }
.project-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.project-tabs a span { color: var(--purple-mid); }
.project-tabs a:hover { border: 0; color: #fff; background: rgba(124,92,255,.16); }
.project-tabs a.active { color: #fff; background: rgba(124,92,255,.28); }
.project-tabs a.active span { color: var(--purple-soft); }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.col { max-width: var(--col); }

section.band { padding: 62px 0; border-top: 1px solid rgba(155,127,255,.13); }
section.band:first-of-type { border-top: 0; }

.hero { padding: 72px 0 54px; position: relative; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 640px; }
.hero::before {
  content: ""; position: absolute; z-index: -1; right: -2%; top: -10%;
  width: clamp(260px, 30vw, 460px); height: clamp(260px, 30vw, 460px);
  background-repeat: no-repeat; background-size: contain; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5815 5.55045C18.9354 5.55045 18.3029 5.28898 17.7605 4.79979L15.8603 3.08088C15.3289 2.60097 14.5201 2.60097 13.9887 3.08088L12.0885 4.79979C11.5461 5.29067 10.9136 5.55045 10.2675 5.55045H2.72217V8.6956H10.2683C10.9144 8.6956 11.547 8.43413 12.0893 7.94494L13.9896 6.22603C14.5209 5.74612 15.3298 5.74612 15.8611 6.22603L17.7614 7.94494C18.3037 8.43582 18.9363 8.6956 19.5823 8.6956H21.2785V5.55045H19.5815Z' fill='rgba(124,92,255,0.05)'/%3E%3Cpath d='M19.5815 11.8391C18.9354 11.8391 18.3029 11.5776 17.7605 11.0884L15.8603 9.3695C15.3289 8.88959 14.5201 8.88959 13.9887 9.3695L12.0885 11.0884C11.5461 11.5793 10.9136 11.8391 10.2675 11.8391H2.72217V14.9842H10.2683C10.9144 14.9842 11.547 14.7228 12.0893 14.2336L13.9896 12.5147C14.5209 12.0347 15.3298 12.0347 15.8611 12.5147L17.7614 14.2336C18.3037 14.7244 18.9363 14.9842 19.5823 14.9842H21.2785V11.8391H19.5815Z' fill='rgba(124,92,255,0.05)'/%3E%3Cpath d='M17.7605 17.3785C18.3029 17.8676 18.9354 18.1291 19.5815 18.1291H21.2785V21.2743H19.5823C18.9363 21.2743 18.3037 21.0145 17.7614 20.5236L15.8611 18.8047C15.3298 18.3248 14.5209 18.3248 13.9896 18.8047L12.0893 20.5236C11.547 21.0128 10.9144 21.2743 10.2683 21.2743H2.72217V18.1291H10.2675C10.9136 18.1291 11.5461 17.8693 12.0885 17.3785L13.9887 15.6595C14.5201 15.1796 15.3289 15.1796 15.8603 15.6595L17.7605 17.3785Z' fill='rgba(124,92,255,0.05)'/%3E%3C/svg%3E");
}

.page-head { padding: 54px 0 34px; position: relative; }
.page-head h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 16px; }
.page-head::after {
  content: ""; position: absolute; z-index: -1; right: 2%; top: -14%;
  width: clamp(170px, 20vw, 280px); height: clamp(170px, 20vw, 280px);
  background-repeat: no-repeat; background-size: contain; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5815 5.55045C18.9354 5.55045 18.3029 5.28898 17.7605 4.79979L15.8603 3.08088C15.3289 2.60097 14.5201 2.60097 13.9887 3.08088L12.0885 4.79979C11.5461 5.29067 10.9136 5.55045 10.2675 5.55045H2.72217V8.6956H10.2683C10.9144 8.6956 11.547 8.43413 12.0893 7.94494L13.9896 6.22603C14.5209 5.74612 15.3298 5.74612 15.8611 6.22603L17.7614 7.94494C18.3037 8.43582 18.9363 8.6956 19.5823 8.6956H21.2785V5.55045H19.5815Z' fill='rgba(124,92,255,0.055)'/%3E%3Cpath d='M19.5815 11.8391C18.9354 11.8391 18.3029 11.5776 17.7605 11.0884L15.8603 9.3695C15.3289 8.88959 14.5201 8.88959 13.9887 9.3695L12.0885 11.0884C11.5461 11.5793 10.9136 11.8391 10.2675 11.8391H2.72217V14.9842H10.2683C10.9144 14.9842 11.547 14.7228 12.0893 14.2336L13.9896 12.5147C14.5209 12.0347 15.3298 12.0347 15.8611 12.5147L17.7614 14.2336C18.3037 14.7244 18.9363 14.9842 19.5823 14.9842H21.2785V11.8391H19.5815Z' fill='rgba(124,92,255,0.055)'/%3E%3Cpath d='M17.7605 17.3785C18.3029 17.8676 18.9354 18.1291 19.5815 18.1291H21.2785V21.2743H19.5823C18.9363 21.2743 18.3037 21.0145 17.7614 20.5236L15.8611 18.8047C15.3298 18.3248 14.5209 18.3248 13.9896 18.8047L12.0893 20.5236C11.547 21.0128 10.9144 21.2743 10.2683 21.2743H2.72217V18.1291H10.2675C10.9136 18.1291 11.5461 17.8693 12.0885 17.3785L13.9887 15.6595C14.5201 15.1796 15.3289 15.1796 15.8603 15.6595L17.7605 17.3785Z' fill='rgba(124,92,255,0.055)'/%3E%3C/svg%3E");
}

/* Layout de dos columnas con índice */
.with-toc { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1060px) {
  .with-toc { grid-template-columns: minmax(0,1fr) 230px; align-items: start; }
  .toc { position: sticky; top: 96px; }
  body[data-project-id] .toc { top: 150px; }
}
.toc {
  border-left: 1px solid var(--line); padding-left: 18px;
  font-family: var(--mono); font-size: 13px;
}
.toc-title { color: var(--purple-mid); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; margin-bottom: 12px; }
.toc a { display: block; color: rgba(255,255,255,.55); padding: 5px 0; border: 0; line-height: 1.4; }
.toc a:hover { color: #fff; border: 0; }

/* ---------- Chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.chip {
  font-family: var(--mono); font-size: 13px; color: var(--purple-mid);
  border: 1.5px solid rgba(124,92,255,.42); background: rgba(124,92,255,.09);
  padding: 6px 14px; border-radius: 4px; white-space: nowrap;
}
.chip.solid { background: rgba(124,92,255,.28); color: #fff; border-color: transparent; }
.chip.ghost { color: var(--faint); border-color: rgba(155,127,255,.18); }

/* ---------- Tarjetas ---------- */

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: linear-gradient(180deg, var(--surface), rgba(20,17,28,.5));
  border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px;
  display: block; border-bottom: 1px solid var(--line); position: relative;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
a.card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: linear-gradient(180deg, var(--surface-2), rgba(20,17,28,.6)); }
.card .card-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-mid); display: block; margin-bottom: 12px; }
.card h3 { color: #fff; margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; }
.card .card-meta { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.card.soon { opacity: .62; }

/* ---------- Bloques de prompt ---------- */

.prompt {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--bg-deep); margin: 22px 0 30px;
}
.prompt-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: rgba(124,92,255,.14);
  border-bottom: 1px solid var(--line);
}
.prompt-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple-soft); background: rgba(124,92,255,.3);
  padding: 4px 10px; border-radius: 4px; flex-shrink: 0;
}
.prompt-title { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: #fff; flex: 1 1 220px; }
.copy-btn {
  font-family: var(--mono); font-size: 12.5px; color: var(--purple-soft);
  background: rgba(124,92,255,.22); border: 1px solid var(--line-strong);
  padding: 7px 15px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.copy-btn:hover { background: rgba(124,92,255,.42); color: #fff; }
.copy-btn.done { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.5); color: var(--ok); }

.prompt pre {
  margin: 0; padding: 20px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  color: rgba(255,255,255,.9); white-space: pre-wrap; word-wrap: break-word;
  max-height: 620px; overflow-y: auto;
}
.prompt pre::-webkit-scrollbar { width: 10px; height: 10px; }
.prompt pre::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.prompt pre::-webkit-scrollbar-thumb { background: rgba(155,127,255,.34); border-radius: 6px; }

.prompt.tall pre { max-height: 460px; }

.prompt-foot {
  padding: 14px 18px; border-top: 1px solid var(--line);
  background: rgba(124,92,255,.06); font-size: 14.5px; color: var(--muted);
}
.prompt-foot strong { color: var(--purple-soft); font-weight: 500; }
.prompt-foot ul, .prompt-foot ol { margin-bottom: 0; font-size: 14.5px; }

/* ---------- Fuentes Markdown de prompts ---------- */

.prompt-source-card {
  min-height: 120px;
  padding-top: 1px;
}
.source-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}
.source-meta a { border: 0; }
.prompt-source-nav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 13px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.prompt-source-nav::-webkit-scrollbar { display: none; }
.prompt-source-nav a {
  flex: 0 0 auto;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(124,92,255,.09);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.prompt-source-nav a:hover { color: #fff; border-color: var(--line-strong); }
.prompt-source-content .prompt { scroll-margin-top: 160px; }

/* ---------- Callouts ---------- */

.note {
  border: 1px solid var(--line-strong); background: rgba(124,92,255,.07);
  border-radius: 10px; padding: 16px 20px; margin: 22px 0;
  font-size: 15.5px; color: rgba(255,255,255,.8);
}
.note .note-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple-mid); display: block; margin-bottom: 7px;
}
.note.warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.note.warn .note-label { color: var(--warn); }
.note p { color: inherit; }

/* ---------- Pasos ---------- */

.steps { counter-reset: step; list-style: none; margin: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 52px;
  margin-bottom: 22px; color: rgba(255,255,255,.82);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(124,92,255,.22); border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 14px; color: var(--purple-soft);
}
/* Solo el primer <strong> es el título del paso; los del texto siguen en línea */
.steps li > strong:first-child { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: #fff; margin-bottom: 3px; }

/* ---------- Tablas ---------- */

.table-wrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(155,127,255,.14); }
th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--purple-mid); background: rgba(124,92,255,.12); font-weight: 400; }
td { color: rgba(255,255,255,.82); }
tr:last-child td { border-bottom: 0; }

/* ---------- Checklist ---------- */

.checklist { list-style: none; margin-left: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 9px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--line-strong); background: rgba(124,92,255,.1);
}

/* ---------- Panel ---------- */

.panel {
  background: linear-gradient(180deg, var(--surface), rgba(20,17,28,.35));
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; margin: 22px 0;
}
.panel h3 { color: #fff; }

.split { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }

/* ---------- Portada de proyectos ---------- */

.band.wrap { padding-left: 24px; padding-right: 24px; }

.hero-home {
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: clamp(42px, 8vw, 100px);
  align-items: end;
  padding-top: 86px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 72px;
}
.hero-home::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -180px;
  top: -150px;
  border-radius: 50%;
  background: rgba(124,92,255,.16);
  filter: blur(80px);
  pointer-events: none;
}
.hero-copy { max-width: 760px; }
.hero-home h1 { font-size: clamp(48px, 7vw, 82px); max-width: 800px; }
.hero-home .lead { max-width: 720px; }
.hero-simple {
  min-height: 410px;
  grid-template-columns: 1fr;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 60px;
}
.hero-simple .hero-copy { max-width: 850px; }
.text-accent { color: var(--purple-soft); }
.hero-summary {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.summary-item {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.summary-item:last-child { border-bottom: 0; }
.summary-item strong {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: -.04em;
  color: #fff;
}
.summary-item span {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects-band {
  background: rgba(5,4,9,.42);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 34px;
}
.section-heading h2 { margin-bottom: 0; }
.section-heading p { max-width: 520px; color: var(--muted); margin: 0; }
.section-heading-simple { grid-template-columns: 1fr; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28,23,40,.86), rgba(11,10,16,.92));
  box-shadow: 0 22px 55px rgba(4,3,7,.22);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.project-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 70px rgba(4,3,7,.34);
}
.project-media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 0;
  background: var(--bg-deep);
}
.project-media:hover { border: 0; }
.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(7,5,14,.72));
  opacity: .7;
  transition: opacity .25s ease;
}
.project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover .project-media img { transform: scale(1.025); }
.project-open {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(5,4,9,.74);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 11.5px;
}
.project-body { padding: 25px 25px 23px; }
.project-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-mid);
}
.project-kicker span:last-child { color: var(--faint); text-align: right; }
.project-body h3 { font-size: clamp(24px, 3vw, 31px); }
.project-body p { min-height: 0; font-size: 15px; color: var(--muted); }
.project-skills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.project-skills span {
  padding: 5px 9px;
  border: 1px solid rgba(155,127,255,.2);
  border-radius: 5px;
  background: rgba(124,92,255,.1);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--purple-soft);
}
.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.project-actions a {
  border: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--purple-soft);
}
.project-actions a:first-child { color: #fff; }
.project-actions a:hover { color: #fff; border: 0; }

.learning-path { padding-top: 76px; padding-bottom: 76px; }
.course-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.course-steps li {
  margin: 0;
  padding: 27px 28px 8px 0;
  border-right: 1px solid var(--line);
}
.course-steps li + li { padding-left: 28px; }
.course-steps li:last-child { border-right: 0; }
.step-label {
  display: block;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-mid);
}
.course-steps p { font-size: 15px; color: var(--muted); }

.resources-home { padding-top: 76px; padding-bottom: 76px; }
.resource-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}
.resource-card {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: 27px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  background: linear-gradient(180deg, var(--surface), rgba(20,17,28,.46));
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.resource-card:hover {
  transform: translateY(-3px);
  color: inherit;
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--surface-2), rgba(20,17,28,.62));
}
.resource-card-featured {
  background:
    radial-gradient(circle at 90% 10%, rgba(212,198,255,.16), transparent 35%),
    linear-gradient(150deg, rgba(124,92,255,.48), rgba(20,17,28,.74));
}
.resource-card h3 { font-size: 25px; }
.resource-card p { font-size: 15px; color: var(--muted); }
.resource-link {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--purple-soft);
}

.final-cta-section { padding-top: 76px; padding-bottom: 20px; }
.final-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 6vw, 62px);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(124,92,255,.42), rgba(20,17,28,.58)),
    var(--surface);
}
.final-cta::after {
  content: "";
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 24vw, 320px);
  height: clamp(200px, 24vw, 320px);
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5815 5.55045C18.9354 5.55045 18.3029 5.28898 17.7605 4.79979L15.8603 3.08088C15.3289 2.60097 14.5201 2.60097 13.9887 3.08088L12.0885 4.79979C11.5461 5.29067 10.9136 5.55045 10.2675 5.55045H2.72217V8.6956H10.2683C10.9144 8.6956 11.547 8.43413 12.0893 7.94494L13.9896 6.22603C14.5209 5.74612 15.3298 5.74612 15.8611 6.22603L17.7614 7.94494C18.3037 8.43582 18.9363 8.6956 19.5823 8.6956H21.2785V5.55045H19.5815Z' fill='rgba(255,255,255,0.05)'/%3E%3Cpath d='M19.5815 11.8391C18.9354 11.8391 18.3029 11.5776 17.7605 11.0884L15.8603 9.3695C15.3289 8.88959 14.5201 8.88959 13.9887 9.3695L12.0885 11.0884C11.5461 11.5793 10.9136 11.8391 10.2675 11.8391H2.72217V14.9842H10.2683C10.9144 14.9842 11.547 14.7228 12.0893 14.2336L13.9896 12.5147C14.5209 12.0347 15.3298 12.0347 15.8611 12.5147L17.7614 14.2336C18.3037 14.7244 18.9363 14.9842 19.5823 14.9842H21.2785V11.8391H19.5815Z' fill='rgba(255,255,255,0.05)'/%3E%3Cpath d='M17.7605 17.3785C18.3029 17.8676 18.9354 18.1291 19.5815 18.1291H21.2785V21.2743H19.5823C18.9363 21.2743 18.3037 21.0145 17.7614 20.5236L15.8611 18.8047C15.3298 18.3248 14.5209 18.3248 13.9896 18.8047L12.0893 20.5236C11.547 21.0128 10.9144 21.2743 10.2683 21.2743H2.72217V18.1291H10.2675C10.9136 18.1291 11.5461 17.8693 12.0885 17.3785L13.9887 15.6595C14.5201 15.1796 15.3289 15.1796 15.8603 15.6595L17.7605 17.3785Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E");
}
.final-cta h2, .final-cta p, .final-cta .cta-row { position: relative; z-index: 1; }
.final-cta h2 { max-width: 720px; font-size: clamp(31px, 5vw, 52px); }
.final-cta p { max-width: 650px; color: rgba(255,255,255,.72); }

/* ---------- Revelado al hacer scroll ---------- */
/* La clase .reveal solo la añade app.js; sin JS o sin soporte, el contenido queda visible */
.reveal { opacity: 0; transform: translateY(26px) scale(.96); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.34,1.56,.64,1);
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--purple-soft);
  outline-offset: 4px;
}

/* ---------- CTA ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-block; font-family: var(--mono); font-size: 14px;
  padding: 12px 24px; border-radius: 8px; border: 1px solid transparent;
  background: var(--purple); color: #14111C; font-weight: 600; transition: transform .18s, background .18s;
}
.btn:hover { background: #9B7FFF; color: #14111C; transform: translateY(-2px); border-color: transparent; }
.btn.ghost { background: rgba(124,92,255,.14); border-color: var(--line-strong); color: var(--purple-soft); }
.btn.ghost:hover { background: rgba(124,92,255,.3); color: #fff; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line); margin-top: 60px; padding: 34px 0 46px;
  font-family: var(--mono); font-size: 13px; color: var(--faint);
}
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.site-footer a { color: rgba(155,127,255,.8); border: 0; }
.site-footer a:hover { color: #fff; }

/* ---------- Prev / next ---------- */

.pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 13.5px; }
.pager a { border: 0; color: var(--purple-soft); }
.pager a:hover { color: #fff; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-deep); border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 10px; font-size: 14px; border-radius: 8px; }
  .nav-toggle { display: block; }
  .brand-text span { display: none; }
  .project-rail { top: 57px; }
  .project-rail-inner { padding-left: 16px; padding-right: 16px; }
  .project-rail-label { display: none; }
  section.band { padding: 46px 0; }
  .hero { padding: 48px 0 36px; }
  .prompt pre { font-size: 12.8px; padding: 16px 14px; }
  .hero-home { min-height: auto; grid-template-columns: 1fr; gap: 42px; padding: 58px 20px 52px; }
  .hero-simple { padding-top: 52px; padding-bottom: 46px; }
  .hero-summary { display: grid; grid-template-columns: repeat(3, 1fr); }
  .summary-item { display: block; padding: 15px 12px; border-right: 1px solid var(--line); border-bottom: 0; }
  .summary-item:last-child { border-right: 0; }
  .summary-item strong, .summary-item span { display: block; }
  .summary-item strong { margin-bottom: 3px; }
  .section-heading { grid-template-columns: 1fr; gap: 12px; }
  .project-body p { min-height: 0; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 230px; }
}

@media (max-width: 1059px) {
  .with-toc > .toc {
    order: -1;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 0 0 13px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .with-toc > .toc::-webkit-scrollbar { display: none; }
  .with-toc > .toc .toc-title { display: none; }
  .with-toc > .toc a {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(124,92,255,.1);
  }
}

@media (max-width: 720px) {
  .hero-home h1 { font-size: clamp(43px, 14vw, 62px); }
  .hero-home .cta-row, .hero-home .btn { width: 100%; text-align: center; }
  .hero-summary { grid-template-columns: 1fr; }
  .summary-item { display: grid; border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-item:last-child { border-bottom: 0; }
  .project-grid { grid-template-columns: 1fr; }
  .project-body { padding: 21px 19px 20px; }
  .project-open { right: 11px; bottom: 11px; }
  .course-steps { grid-template-columns: 1fr; }
  .course-steps li, .course-steps li + li { padding: 23px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .course-steps li:last-child { border-bottom: 0; }
  .step-label { margin-bottom: 14px; }
  .final-cta .btn { width: 100%; text-align: center; }
}

@media (max-width: 400px) {
  .wrap, .band.wrap, .hero-home, .hero-simple { padding-left: 18px; padding-right: 18px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .split { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

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

/* ---------- Impresión ---------- */

@media print {
  body { background: #fff; color: #000; }
  .site-header, .project-rail, .site-footer, .copy-btn, .toc, .pager { display: none; }
  .prompt pre { max-height: none; color: #000; }
}