/* ==========================================================================
   FADU Circula — Brief de producto
   CSS vanilla: sin preprocesadores, sin frameworks, sin build step.
   ========================================================================== */

:root {
    --bg-color: #0c0c0c;
    --paper: #0c0c0c;
    --text-color: #f0f0f0;
    --ink: #f0f0f0;
    --mute: #888888;
    --line: #222222;
    --border-color: #222222;
    --accent-color: #ff3300;
    --accent: #ff3300;
    --on-accent: #ffffff;
    --accent-soft: rgba(255, 51, 0, 0.1);
    --tape: #f2cf3a;
    --display: "Syne", sans-serif;
    --text: "Space Grotesk", sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--bg-color);color:var(--text-color);font-family:var(--text);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* Nav del Equipo (Cátedra Ocampo) */
.nav-equipo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 4rem;
    background-color: #080808;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-color);
    text-decoration: none;
}

.nav-badge {
    background-color: var(--border-color);
    color: var(--text-color);
    padding: 0.2rem 0.5rem;
    font-weight: 700;
    border-radius: 2px;
}

.nav-brand-text {
    color: var(--mute);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    color: var(--mute);
    text-decoration: none;
    transition: color 0.3s;
}

.nav-link:hover, .nav-link.activo {
    color: var(--text-color);
}

.nav-link.activo {
    font-weight: 600;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 0.1rem;
}

.nav-semestre {
    color: var(--mute);
    text-align: right;
    font-size: 0.7rem;
    line-height: 1.2;
    border-left: 1px solid var(--border-color);
    padding-left: 2rem;
}

/* Navegación secundaria de la cátedra */
.nav.nav--secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0.8rem 4rem;
    background-color: #111111;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav.nav--secondary .nav__label {
    color: var(--mute);
    font-weight: 700;
}

.nav.nav--secondary a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav.nav--secondary a:hover {
    color: var(--accent-color);
}

/* Barra superior del documento */
.top{position:sticky;top:0;z-index:10;background:rgba(12,12,12,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:56px}
.top .brand{font-family:var(--display);font-weight:700;text-decoration:none;letter-spacing:-.01em;text-transform:uppercase;font-size:0.85rem}
.top nav{display:flex;gap:clamp(12px,2.4vw,28px);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.top nav a{text-decoration:none;color:var(--mute)}
.top nav a:hover{color:var(--text-color)}
@media (max-width:620px){.top nav a:nth-child(n+3){display:none}}

/* Hero */
.hero{padding:clamp(40px,8vw,96px) 0 clamp(28px,4vw,48px)}
.hero .meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mute);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(3.5rem, 8vw, 6.5rem);line-height:0.9;letter-spacing:-2px;margin:.2em 0 .3em 0;color:var(--text-color);text-transform:uppercase}
.hero h1 span{color:var(--accent)}
.hero .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,80px);align-items:end}
.hero .intro p{margin:0;max-width:34ch;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.4;color:var(--mute)}
.hero .intro .where{color:var(--mute);font-size:0.9rem;justify-self:end;text-align:right}
@media (max-width:700px){.hero .intro{grid-template-columns:1fr}.hero .intro .where{justify-self:start;text-align:left}}

/* Cinta animada */
.ticker{background:var(--accent);color:var(--on-accent);overflow:hidden;white-space:nowrap;border-block:1px solid var(--ink)}
.ticker .track{display:inline-flex;animation:run 38s linear infinite;will-change:transform}
.ticker span{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);padding:.45em 1.1em;letter-spacing:1px;text-transform:uppercase}
.ticker span.lead-in{font-weight:800}
.ticker span:not(.lead-in){font-weight:500;opacity:.85}
@keyframes run{to{transform:translateX(-50%)}}

/* Índice */
.toc{padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--border-color)}
.toc h2{font-family:var(--display);font-size:1rem;margin:0 0 20px;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.toc ol{list-style:none;margin:0;padding:0;columns:4 200px;column-gap:32px}
.toc li{break-inside:avoid;border-top:1px solid var(--line)}
.toc a{display:flex;gap:12px;padding:10px 0;text-decoration:none;font-size:0.9rem}
.toc a:hover{color:var(--accent)}
.num{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}
.toc .num{min-width:1.6em}

/* Secciones */
.sec{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:0 clamp(24px,4.5vw,72px);padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--border-color)}
.sec>.label{position:sticky;top:120px;align-self:start;margin:0;color:var(--mute);font-size:0.85rem;text-transform:uppercase;letter-spacing:1px}
.sec>.body{min-width:0}
.sec>.body>h2{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.1;letter-spacing:-1px;margin:0 0 .7em;max-width:19ch;text-transform:uppercase}
.sec>.body>h3{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:0;margin:2.2em 0 .6em;text-transform:uppercase}
.sec>.body>p{max-width:68ch;margin:0 0 1.1em;color:var(--mute)}
.sec>.body>p.lead{font-size:1.15rem;line-height:1.5;color:var(--text-color)}
.sec>.body>p.principle{margin-top:1.6em;padding-left:18px;border-left:4px solid var(--tape)}
@media (max-width:820px){.sec{grid-template-columns:1fr}.sec>.label{position:static;margin-bottom:14px}}

/* Listas */
.list{list-style:none;margin:0 0 1.2em;padding:0;max-width:68ch}
.list li{position:relative;padding:.4em 0 .4em 1.5em;color:var(--mute)}
.list li strong{color:var(--text-color)}
.list li::before{content:"";position:absolute;left:0;top:1.05em;width:.8em;height:2px;background:var(--accent)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(24px,3vw,48px);margin-top:2em}
.cols3 h3{margin:0 0 .6em!important}
@media (max-width:980px){.cols3{grid-template-columns:1fr}}

/* Tablas */
.tbl{overflow-x:auto;margin:0 0 1.6em;-webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem;line-height:1.45}
.tbl th{text-align:left;font-weight:600;color:var(--text-color);padding:0 20px 12px 0;border-bottom:2px solid var(--border-color);font-size:0.85rem;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.tbl td{padding:13px 20px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--mute)}
.tbl td:first-child{font-weight:600;color:var(--text-color)}
.tbl tbody tr:hover td{background:var(--accent-soft)}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:2px;line-height:1.5;white-space:nowrap;text-transform:uppercase}
.tag-mvp{background:var(--accent);color:var(--on-accent)}
.tag-f2{border:1px solid var(--text-color);color:var(--text-color)}

/* Flujo */
.figure{margin:1.4em 0 2em}
.figscroll{overflow-x:auto;border:1px solid var(--line);padding:12px 8px 4px;background:#111}
.flow{display:block;width:100%;min-width:640px;height:auto;color:var(--text-color)}
.flow text{fill:var(--text-color);font-family:var(--text);font-size:13.5px}
.flow .q{fill:var(--mute);font-size:12px}
.flow .strong{font-weight:700}
.flow .box{fill:none;stroke:var(--border-color);stroke-width:1.25}
.flow .main{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.figcap{margin:.8em 0 0!important;color:var(--mute);font-size:.9rem;max-width:68ch}
.steps{list-style:none;counter-reset:s;margin:0 0 1.6em;padding:0;max-width:72ch}
.steps li{counter-increment:s;position:relative;padding:16px 0 16px 3.6rem;border-top:1px solid var(--line);color:var(--mute)}
.steps li strong{color:var(--text-color)}
.steps li::before{content:counter(s);position:absolute;left:0;top:14px;font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1;color:var(--accent)}

/* Preguntas abiertas (checklist) */
.checks{list-style:none;margin:0;padding:0;max-width:68ch}
.checks li{border-top:1px solid var(--line)}
.checks label{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;cursor:pointer}
.checks input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent)}
.checks input:checked+span{color:var(--mute);text-decoration:line-through;text-decoration-thickness:1px}

/* Footer */
footer{border-top:1px solid var(--border-color);padding:3rem 4rem;color:var(--mute);font-size:0.8rem;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .wrap{width:100%;display:flex;justify-content:space-between}

/* Responsive */
@media (max-width: 1024px) {
    .nav-equipo { flex-direction: column; gap: 1rem; align-items: flex-start; padding: 1.5rem 2rem; }
    .nav-right { flex-direction: column; gap: 1rem; align-items: flex-start; width: 100%; }
    .nav-semestre { border-left: none; padding-left: 0; border-top: 1px solid var(--border-color); padding-top: 0.5rem; width: 100%; text-align: left; }
    .nav.nav--secondary { padding: 1rem 2rem; }
    footer, .top .wrap { padding-left: 2rem; padding-right: 2rem; }
}

/* Impresión */
@media print{
  .nav-equipo, .nav.nav--secondary, .top,.ticker{display:none}
  .sec{break-inside:avoid-page;padding:28px 0}
  .sec>.label{position:static}
}