/* =====================================================
   TADIN — Proyecto 1 · Equipo 6
   Estilos · Mayo 2026
   ===================================================== */

:root{
  --ink:#1a1208;
  --ink2:#3d2b10;
  --mid:#7a5c38;
  --sand:#c4a46b;
  --cream:#f5eddd;
  --cream2:#fdf7ed;
  --paper:#fffcf5;
  --amber:#c97a1e;
  --amber2:#e8952a;
  --rust:#a84b1f;
  --r:14px;
  --r2:10px;
  --font-display:'Outfit',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.deck{position:relative;width:100vw;height:100vh;overflow:hidden}

/* ── SLIDE BASE ── */
.slide{
  position:absolute;inset:0;
  background:var(--paper);
  color:var(--ink);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
  transform:translateX(40px);overflow:hidden;
}
.slide.active{opacity:1;pointer-events:all;transform:translateX(0)}
.slide.out{opacity:0;transform:translateX(-40px)}

/* ── NAV ── */
/* Hover zone — invisible strip at the bottom of the screen.
   When the user moves the mouse over it, the nav bar appears. */
.nav-zone{
  position:fixed;
  bottom:0;left:0;right:0;
  height:90px;
  z-index:199;
  pointer-events:auto;
}
.nav{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:200;display:flex;align-items:center;gap:12px;
  background:#1a1208;
  border:1px solid rgba(196,164,107,.3);
  border-radius:40px;padding:8px 18px;
  box-shadow:0 6px 24px rgba(26,18,8,.15);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.nav-zone:hover ~ .nav,
.nav:hover,
.nav.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nbtn{
  background:none;border:none;cursor:pointer;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--sand);transition:background .2s;
}
.nbtn:hover{background:var(--amber);color:#fff}
.nbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ncount{font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--sand);letter-spacing:.08em;min-width:50px;text-align:center}
.dots{display:flex;gap:5px}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(196,164,107,.4);cursor:pointer;transition:all .2s}
.dot.on{background:var(--amber2);transform:scale(1.5)}

/* ── COMMON TYPO ── */
.tag{
  font-family:var(--font-display);font-size:.95rem;
  font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);
}
.h1{
  font-family:var(--font-display);
  font-size:clamp(4.2rem,8vw,7.5rem);
  font-weight:700;line-height:1;letter-spacing:-.025em;
  color:var(--ink);
}
.h1 em{color:var(--amber);font-style:normal;font-weight:800}
.h2{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,4vw,3.6rem);
  font-weight:700;line-height:1.08;letter-spacing:-.015em;
  color:var(--ink);
}
.strike{width:48px;height:3px;background:var(--amber);border-radius:3px;margin:12px 0 22px}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:rgba(196,164,107,.4);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* =====================================================
   S1 + S12 — CARÁTULA / CIERRE
   ===================================================== */
#s1, #s12{
  background:var(--cream2);
  background-image:radial-gradient(ellipse 70% 55% at 75% 45%,rgba(201,122,30,.08) 0%,transparent 65%);
  color:var(--ink);
}
#s1 .inner, #s12 .inner{
  height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:60px 80px 100px;
}
#s1 .eyebrow, #s12 .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
#s1 .eyebrow span, #s12 .eyebrow span{width:32px;height:1.5px;background:var(--amber)}
#s1 .sub, #s12 .sub{
  font-size:1.4rem;color:var(--mid);margin-top:18px;
  font-weight:400;max-width:680px;line-height:1.5;
}
#s1 .meta-row, #s12 .meta-row{display:flex;gap:42px;margin-top:42px;flex-wrap:wrap}
#s1 .ml, #s12 .ml{
  font-family:var(--font-display);font-size:.85rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:6px;
}
#s1 .mv, #s12 .mv{font-size:1.25rem;color:var(--ink);font-weight:500}
#s1 .team, #s12 .team{display:flex;flex-wrap:wrap;gap:11px;margin-top:48px}
#s1 .tm, #s12 .tm{
  display:flex;align-items:center;gap:12px;
  background:var(--paper);
  border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r2);padding:12px 18px;
}
#s1 .av, #s12 .av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;color:#fff;
  flex-shrink:0;letter-spacing:.02em;
}
#s1 .tn, #s12 .tn{font-size:1.05rem;font-weight:600;color:var(--ink)}
#s1 .tr, #s12 .tr{font-size:.88rem;color:var(--mid);font-weight:400}

/* =====================================================
   S2 — CASO DE USO
   ===================================================== */
#s2{background:var(--cream2);color:var(--ink)}
#s2 .inner{height:100%;display:flex;flex-direction:column;padding:50px 70px 100px;overflow-y:auto}
#s2 .grid{display:grid;grid-template-columns:340px 1fr;gap:24px;margin-top:18px;flex:1}
#s2 .profile{
  background:var(--paper);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px;
}
#s2 .ptag{font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
#s2 .bav{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#fff;
}
#s2 .pn{font-family:var(--font-display);font-size:1.55rem;font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
#s2 .pr{font-size:1rem;color:var(--mid);line-height:1.4}
/* Logo de la empresa en S2 */
#s2 .company-logo{
  background:#fff;
  border-radius:var(--r2);
  padding:14px 20px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(196,164,107,.25);
  margin-bottom:4px;
}
#s2 .company-logo img{
  width:100%;
  height:auto;
  max-height:90px;
  object-fit:contain;
  display:block;
}
#s2 .pi{display:flex;flex-direction:column;gap:9px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(196,164,107,.25)}
#s2 .pl{font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
#s2 .prow{font-size:1rem;color:var(--ink2);line-height:1.45;display:flex;gap:8px;align-items:flex-start;font-weight:400}
#s2 .prow::before{content:'•';color:var(--amber);flex-shrink:0;font-weight:700}
#s2 .syms{display:flex;flex-direction:column;gap:12px}
#s2 .sym{
  background:var(--paper);
  border:1px solid rgba(196,164,107,.25);
  border-left:4px solid var(--amber);
  border-radius:0 var(--r2) var(--r2) 0;
  padding:16px 22px;
}
#s2 .st{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--rust);letter-spacing:-.005em;margin-bottom:6px}
#s2 .sd{font-size:1rem;color:var(--ink2);line-height:1.5;font-weight:400}

/* =====================================================
   S3 — DEL SÍNTOMA A LA CAUSA
   ===================================================== */
#s3{background:var(--paper);color:var(--ink)}
#s3 .inner{height:100%;display:flex;flex-direction:column;padding:48px 64px 100px;overflow-y:auto}
#s3 .legend{display:flex;gap:24px;margin-top:8px;margin-bottom:18px;flex-wrap:wrap}
#s3 .lg-item{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--mid);font-weight:500}
#s3 .lg-dot{width:11px;height:11px;border-radius:50%;display:block}
#s3 .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1}
#s3 .cscard{
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:22px 26px;display:flex;flex-direction:column;gap:14px;
}
#s3 .cs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(196,164,107,.25)}
#s3 .cs-mod{font-family:var(--font-display);font-size:1.35rem;font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-.01em}
#s3 .cs-code{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rust);
  background:rgba(168,75,31,.12);border-radius:20px;padding:5px 13px;
  flex-shrink:0;white-space:nowrap;
}
#s3 .cs-block{display:flex;flex-direction:column;gap:5px}
#s3 .cs-label{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
#s3 .cs-label::before{content:'';width:9px;height:9px;border-radius:50%;display:block;flex-shrink:0}
#s3 .cs-block.sin .cs-label{color:var(--rust)}
#s3 .cs-block.sin .cs-label::before{background:var(--rust)}
#s3 .cs-block.cau .cs-label{color:var(--mid)}
#s3 .cs-block.cau .cs-label::before{background:var(--mid)}
#s3 .cs-block.sol .cs-label{color:var(--amber)}
#s3 .cs-block.sol .cs-label::before{background:var(--amber)}
#s3 .cs-text{font-size:1rem;color:var(--ink2);line-height:1.5;font-weight:400;padding-left:17px}
#s3 .cs-text em{color:var(--rust);font-style:italic;font-weight:500}

/* =====================================================
   S4 — SISTEMA
   ===================================================== */
#s4{background:var(--paper);color:var(--ink)}
#s4 .inner{height:100%;display:flex;flex-direction:column;padding:50px 70px 100px;overflow-y:auto}
#s4 .h2{color:var(--ink) !important}
#s4 .tag{color:var(--amber) !important}
#s4 .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;flex:1}
#s4 .spanel{
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:13px;
}
#s4 .spt{
  font-family:var(--font-display);font-size:.95rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  padding-bottom:10px;border-bottom:1px solid rgba(196,164,107,.25);margin-bottom:4px;
}
#s4 .si{
  background:var(--paper);border:1px solid rgba(196,164,107,.22);
  border-radius:var(--r2);padding:14px 18px;display:flex;flex-direction:column;gap:5px;
}
#s4 .sin{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
#s4 .sid{font-size:.98rem;color:var(--ink2);line-height:1.45;font-weight:400}

/* =====================================================
   S5 — RF
   ===================================================== */
#s5{background:var(--cream2);color:var(--ink)}
#s5 .inner{height:100%;display:flex;flex-direction:column;padding:48px 64px 100px;overflow-y:auto}
#s5 .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
#s5 .rc{
  background:var(--paper);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:18px 22px;display:flex;flex-direction:column;gap:7px;
}
#s5 .ri{font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
#s5 .rn{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
#s5 .rd{font-size:1rem;color:var(--ink2);line-height:1.46;font-weight:400}
#s5 .rs{font-size:.92rem;color:var(--mid);font-weight:400}

.pill{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:20px;align-self:flex-start;margin-top:4px}
.pa{background:rgba(168,75,31,.18);color:var(--rust)}
.pm{background:rgba(122,92,56,.2);color:var(--mid)}

/* =====================================================
   S6 — RNF + LIMITACIONES
   ===================================================== */
#s6{background:var(--paper);color:var(--ink)}
#s6 .inner{height:100%;display:flex;flex-direction:column;padding:48px 64px 100px;overflow-y:auto}
#s6 .dual{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:18px;flex:1}
#s6 .rnf-list{display:flex;flex-direction:column;gap:10px}
#s6 .rnf{
  background:var(--cream2);
  border:1px solid rgba(196,164,107,.25);
  border-left:4px solid var(--amber);
  border-radius:var(--r2);padding:13px 18px;
  display:flex;flex-direction:column;gap:3px;
}
#s6 .rc2{font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
#s6 .ri2{font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
#s6 .rd2{font-size:.98rem;color:var(--ink2);line-height:1.42;font-weight:400}
#s6 .lp{
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;
}
#s6 .lpt{font-family:var(--font-display);font-size:.95rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin-bottom:4px}
#s6 .li{
  background:var(--paper);border:1px solid rgba(196,164,107,.25);
  border-radius:var(--r2);padding:13px 16px;display:flex;flex-direction:column;gap:4px;
}
#s6 .lid{font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}
#s6 .lt{font-size:.98rem;color:var(--ink2);line-height:1.42;font-weight:400}
#s6 .lf{font-size:.9rem;color:var(--mid);font-style:italic;margin-top:3px;font-weight:400}

/* =====================================================
   S7 — OKRs
   ===================================================== */
#s7{background:var(--cream2);color:var(--ink)}
#s7 .inner{height:100%;display:flex;flex-direction:column;padding:48px 64px 100px;overflow-y:auto}
#s7 .h2{color:var(--ink) !important}
#s7 .tag{color:var(--rust) !important}
#s7 .og{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;flex:1}
#s7 .okr{
  background:var(--paper);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:11px;
}
#s7 .oh{display:flex;align-items:flex-start;gap:16px}
#s7 .on{font-family:var(--font-display);font-size:2.8rem;font-weight:700;color:var(--amber);line-height:1;flex-shrink:0;letter-spacing:-.02em}
#s7 .ot{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.22;letter-spacing:-.005em}
#s7 .os{font-size:.95rem;color:var(--mid);line-height:1.4;margin-top:5px;font-weight:400}
#s7 .krs{display:flex;flex-direction:column;gap:7px}
#s7 .kr{display:flex;align-items:flex-start;gap:9px;font-size:.98rem;color:var(--ink2);line-height:1.45;font-weight:400}
#s7 .kr::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-top:8px}

/* =====================================================
   S8 — PERFILES + EQUIPO
   ===================================================== */
#s8{background:var(--paper);color:var(--ink)}
#s8 .inner{height:100%;display:flex;flex-direction:column;padding:46px 64px 100px;overflow-y:auto}
#s8 .sec{font-family:var(--font-display);font-size:.88rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin:18px 0 12px}
#s8 .ug{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#s8 .uc{
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:9px;
}
#s8 .uav{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.95rem;font-weight:700;color:#fff;flex-shrink:0;
}
#s8 .un{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
#s8 .ur{font-size:.95rem;color:var(--mid);font-weight:500}
#s8 .uw{font-size:.95rem;color:var(--ink2);line-height:1.42;font-weight:400}
#s8 .uw strong{color:var(--rust);font-weight:600}
#s8 .tg{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
#s8 .tc2{
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:15px 17px;display:flex;flex-direction:column;gap:8px;
}
#s8 .tav{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;color:#fff;
}
#s8 .tnm{font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:-.005em}
#s8 .tro{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rust);
  background:rgba(168,75,31,.14);border-radius:20px;padding:3px 10px;
  display:inline-block;align-self:flex-start;
}
#s8 .tde{font-size:.92rem;color:var(--ink2);line-height:1.4;font-weight:400}

/* Photo avatars (override gradient) */
#s8 .uav-photo, #s8 .tav-photo{
  background:transparent !important;
  padding:0;overflow:hidden;
  border:2px solid rgba(196,164,107,.35);
}
#s8 .uav-photo img, #s8 .tav-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Partner externo section (Catherine) */
#s8 .partner-row{display:flex;justify-content:flex-start}
#s8 .partner-card{
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-left:4px solid var(--amber);
  border-radius:var(--r);
  padding:16px 20px;
  display:flex;align-items:center;gap:18px;
  flex:1;max-width:100%;
}
#s8 .partner-photo{
  width:64px;height:64px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  border:2px solid rgba(196,164,107,.4);
}
#s8 .partner-photo img{width:100%;height:100%;object-fit:cover;display:block}
#s8 .partner-info{display:flex;flex-direction:column;gap:5px;flex:1}
#s8 .partner-name{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
#s8 .partner-role{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);
  background:rgba(201,122,30,.12);border-radius:20px;padding:3px 12px;
  display:inline-block;align-self:flex-start;
}
#s8 .partner-desc{font-size:.92rem;color:var(--ink2);line-height:1.45;font-weight:400}

/* =====================================================
   S9 — PRESUPUESTO
   ===================================================== */
#s9{background:var(--cream2);color:var(--ink)}
#s9 .inner{height:100%;display:flex;flex-direction:column;padding:42px 60px 100px;overflow-y:auto}

/* Subtítulo arriba con la nota sobre tarifas por hora */
#s9 .budget-meta{
  background:var(--paper);border:1px solid rgba(196,164,107,.28);
  border-radius:var(--r2);
  padding:11px 18px;margin-top:6px;
}
#s9 .budget-meta p{
  font-size:.95rem;color:var(--ink2);line-height:1.5;font-weight:400;
}
#s9 .budget-meta strong{color:var(--rust);font-weight:700}

#s9 .bdual{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px;flex:1}
#s9 .bpanel{
  background:var(--paper);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:20px 24px;display:flex;flex-direction:column;gap:8px;
}
#s9 .bpt{
  font-family:var(--font-display);font-size:.9rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  padding-bottom:10px;border-bottom:1px solid rgba(196,164,107,.25);margin-bottom:4px;
}

/* Tabla de tarifas por hora */
#s9 .rate-table{display:flex;flex-direction:column}
#s9 .rate-row{
  display:grid;
  grid-template-columns:60px 1fr auto;
  gap:14px;
  align-items:center;
  padding:9px 4px;
  border-bottom:1px solid rgba(196,164,107,.15);
}
#s9 .rate-row:last-child{border-bottom:none}
#s9 .rate-head{
  font-family:var(--font-display);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mid);
  border-bottom:2px solid rgba(196,164,107,.35);
  padding-bottom:7px;
}
#s9 .rate-id{
  font-family:var(--font-display);font-size:.85rem;font-weight:700;
  color:var(--amber);letter-spacing:.05em;
  background:rgba(201,122,30,.12);border-radius:6px;
  padding:3px 0;text-align:center;
}
#s9 .rate-head .rate-id{
  background:transparent;color:var(--mid);
  font-size:.72rem;
}
#s9 .rate-role{font-size:.95rem;color:var(--ink2);font-weight:500}
#s9 .rate-head .rate-role{font-size:.72rem;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:.12em}
#s9 .rate-val{
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  color:var(--ink);text-align:right;white-space:nowrap;
}
#s9 .rate-head .rate-val{
  font-size:.72rem;font-weight:600;color:var(--mid);
  text-transform:uppercase;letter-spacing:.12em;
}
#s9 .rate-note{
  margin-top:8px;padding-top:10px;
  border-top:1px solid rgba(196,164,107,.2);
  font-size:.82rem;color:var(--mid);line-height:1.5;
  font-style:italic;
}
#s9 .rate-note strong{color:var(--rust);font-style:normal;font-weight:700}

/* Asignación al equipo */
#s9 .bpcard{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(196,164,107,.15);
}
#s9 .bpcard:last-of-type{border-bottom:none}
#s9 .bpav{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;color:#fff;
  overflow:hidden;
}
#s9 .bpav-photo{padding:0;border:2px solid rgba(196,164,107,.35)}
#s9 .bpav-photo img{width:100%;height:100%;object-fit:cover;display:block}
#s9 .bpinfo{flex:1;display:flex;flex-direction:column;gap:4px}
#s9 .bpname{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.005em}
#s9 .bpitems{display:flex;gap:6px;flex-wrap:wrap}
#s9 .bpitem{
  display:flex;align-items:center;
  background:var(--cream2);border:1px solid rgba(196,164,107,.3);
  border-radius:6px;padding:3px 9px;
}
#s9 .bptag{
  font-family:var(--font-display);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rust);
}

#s9 .budget-footnote{
  margin-top:14px;
  font-size:.88rem;color:var(--mid);line-height:1.5;
  font-style:italic;
}

/* =====================================================
   S10 — GANTT
   ===================================================== */
#s10{background:var(--paper);color:var(--ink)}
#s10 .inner{height:100%;display:flex;flex-direction:column;padding:38px 50px 90px;overflow-y:auto}
#s10 .strike{margin:8px 0 14px}
#s10 .gantt-meta{
  display:flex;gap:24px;margin-bottom:14px;flex-wrap:wrap;
}
#s10 .gm-item{display:flex;flex-direction:column;gap:2px}
#s10 .gm-lbl{font-family:var(--font-display);font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
#s10 .gm-val{font-size:.9rem;color:var(--ink);font-weight:500}

/* Months strip */
#s10 .gantt-months{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:0;
  margin-bottom:6px;
  align-items:end;
}
#s10 .gm-spacer{}
#s10 .gm-row{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  border-bottom:1px solid rgba(196,164,107,.3);
}
#s10 .gm-cell{
  font-family:var(--font-display);
  font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);
  text-align:center;
  padding:4px 2px;
  border-left:1px dashed rgba(196,164,107,.35);
}
#s10 .gm-cell:first-child{border-left:none}

/* Phase block */
#s10 .g-phase{margin-bottom:10px}
#s10 .g-phase-head{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  background:var(--cream2);
  border-left:4px solid var(--rust);
  border-radius:6px 6px 0 0;
  margin-bottom:0;
}
#s10 .g-pid{
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rust);
  background:rgba(168,75,31,.15);
  padding:2px 9px;border-radius:12px;
}
#s10 .g-pname{
  font-family:var(--font-display);font-size:.95rem;font-weight:700;
  color:var(--ink);letter-spacing:-.005em;
}

/* Row */
#s10 .g-row{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:0;
  align-items:center;
  border-bottom:1px solid rgba(196,164,107,.18);
  min-height:30px;
}
#s10 .g-row:last-child{border-bottom:none}
#s10 .g-tlabel{
  display:flex;flex-direction:column;gap:1px;
  padding:4px 10px 4px 14px;
  background:var(--cream2);
  border-left:4px solid rgba(168,75,31,.4);
  border-right:1px solid rgba(196,164,107,.3);
}
#s10 .g-tid{
  font-family:var(--font-display);font-size:.6rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mid);
}
#s10 .g-tname{
  font-size:.78rem;color:var(--ink2);font-weight:500;
  line-height:1.25;
}

/* Track */
#s10 .g-track{
  position:relative;
  height:30px;
  background:repeating-linear-gradient(90deg,
    transparent 0,
    transparent calc(100%/8 - 1px),
    rgba(196,164,107,.25) calc(100%/8 - 1px),
    rgba(196,164,107,.25) calc(100%/8)
  );
}
#s10 .g-bar{
  position:absolute;
  top:50%;transform:translateY(-50%);
  height:16px;
  border-radius:4px;
  display:flex;align-items:center;
  padding:0 6px;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(26,18,8,.12);
  min-width:6px;
}
#s10 .g-bar.g-amber{
  background:linear-gradient(135deg,var(--amber),var(--amber2));
}
#s10 .g-bar.g-rust{
  background:linear-gradient(135deg,var(--rust),var(--amber));
}
#s10 .g-bar-date{
  font-family:var(--font-display);
  font-size:.62rem;font-weight:600;
  color:#fff;
  letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;
}
/* Hide date inside very small bars */
#s10 .g-bar[data-tiny="1"] .g-bar-date{display:none}

/* Legend */
#s10 .g-legend{
  display:flex;gap:20px;margin-top:12px;
  padding:8px 14px;
  background:var(--cream2);
  border-radius:8px;
  border:1px solid rgba(196,164,107,.25);
  align-self:flex-start;
}
#s10 .g-leg-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink2);font-weight:500}
#s10 .g-leg-bar{width:18px;height:8px;border-radius:3px;display:block}

/* =====================================================
   S11 — PRÓXIMOS PASOS
   ===================================================== */
#s11{background:var(--cream2);color:var(--ink)}
#s11 .inner{height:100%;display:flex;flex-direction:column;padding:48px 64px 100px;overflow-y:auto}
#s11 .sg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;flex:1}
#s11 .st2{
  background:var(--paper);border:1px solid rgba(196,164,107,.3);
  border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:10px;
}
#s11 .sn{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--rust));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:#fff;flex-shrink:0;
}
#s11 .sti{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.22;letter-spacing:-.005em}
#s11 .sde{font-size:1rem;color:var(--ink2);line-height:1.5;font-weight:400}
#s11 .sdu{font-size:.92rem;font-weight:600;color:var(--amber);margin-top:auto;font-family:var(--font-display);letter-spacing:.02em}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media(max-width:1100px){
  #s2 .grid,#s4 .sgrid,#s6 .dual,#s7 .og,#s9 .bdual,#s3 .cgrid{grid-template-columns:1fr}
  #s5 .rgrid{grid-template-columns:1fr}
  #s8 .ug{grid-template-columns:1fr 1fr}
  #s8 .tg{grid-template-columns:repeat(3,1fr)}
  #s11 .sg{grid-template-columns:1fr 1fr}
  #s10 .g-row,#s10 .gantt-months{grid-template-columns:170px 1fr}
}
@media(max-width:700px){
  #s1 .inner,#s2 .inner,#s3 .inner,#s4 .inner,#s5 .inner,
  #s6 .inner,#s7 .inner,#s8 .inner,#s9 .inner,#s10 .inner,
  #s11 .inner,#s12 .inner{padding-left:28px;padding-right:28px}
  #s8 .ug,#s8 .tg,#s11 .sg{grid-template-columns:1fr}
}