/* ====== Variables y base ====== */
:root{
  --bg:#ffffff; --text:#1f2937; --muted:#64748b; --card:#f1f5f9;
  --brand:#0ea5a6; --brand-2:#0b7b7c; --focus:#22c55e;
  --radius:14px; --max:72rem;

  /* offsets para elementos sticky */
  --header-h:64px;                      /* alto aproximado del header del sitio */
  --sticky-top:calc(var(--header-h) + 8px);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0f14; --text:#e6edf3; --muted:#9fb1b8; --card:#0f141a; --brand:#2dd4bf; --brand-2:#14b8a6; }
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font:16px/1.6 system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  background:var(--bg); color:var(--text);
}
.wrap{ max-width:var(--max); margin-inline:auto; padding:0 1rem }

/* enlaces y foco */
a{ color:var(--brand); text-decoration-thickness:.1rem; text-underline-offset:.2rem }
a:hover{ color:var(--brand-2) }
:focus-visible{ outline:.25rem solid var(--focus); outline-offset:.2rem }
.skip-link{ position:absolute; left:-9999px; top:auto }
.skip-link:focus{ left:1rem; top:1rem; background:var(--brand); color:#002; padding:.5rem .75rem; border-radius:.5rem }

/* ====== Layout ====== */
.site-header{ border-bottom:1px solid #1e2a33; background:var(--bg); position:sticky; top:0; z-index:10 }
.header-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0 }
.brand{ font-weight:700; font-size:1.25rem; color:var(--text); text-decoration:none }
.site-nav .menu{ list-style:none; display:flex; gap:1rem; margin:0; padding:0 }
.nav-toggle{ display:none }
@media (max-width: 760px){
  .site-nav .menu{ display:none; flex-direction:column; padding:.5rem; background:var(--card); border-radius:.75rem }
  .nav-toggle{ display:inline-block; border:1px solid #93a4ad; background:transparent; padding:.4rem .6rem; border-radius:.5rem }
  .site-nav[aria-expanded="true"] .menu{ display:flex }
}

main{ display:block }
.hero{ background:linear-gradient(180deg, var(--card), transparent); padding:2rem 0 1rem }
.grid{ display:grid; gap:1rem }
@media (min-width:760px){ .grid.cols-3{ grid-template-columns:repeat(3, 1fr) } }

.card{
  background:var(--card); border-radius:var(--radius); padding:1rem; border:1px solid #1e2a33;
  overflow:visible; /* no recortar barra sticky */
}
h1,h2,h3{ line-height:1.2 }
.badge{ font-size:.85rem; padding:.1rem .5rem; border-radius:999px; border:1px solid #93a4ad }
.site-footer{ border-top:1px solid #1e2a33; margin-top:2rem; padding:1.25rem 0 }
.button{ display:inline-block; padding:.6rem .9rem; border-radius:.65rem; border:1px solid #93a4ad; text-decoration:none; font-weight:600 }
.button.primary{ background:var(--brand); border-color:transparent; color:#002 }
section + section{ margin-top:2rem }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* Utilidades */
.ratio-16x9{ position:relative; padding-top:56.25% }
.ratio-16x9 > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.stack > * + *{ margin-top:.75rem }
.label{ display:block; margin-bottom:.25rem }
.muted{ opacity:.8; font-size:.95em }

/* ====== Diapositivas ====== */

/* barra sticky única: título + controles */
.slides-sticky{
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;                 /* por encima del iframe */
  background: var(--bg);
  margin: 0 -1rem .75rem;
  padding: .5rem 1rem .75rem;
  border-bottom: 1px solid #1e2a33;
  border-radius: .5rem .5rem 0 0;
}
.slides-sticky h2{ margin:0 0 .5rem }
.slides-controls{ display:flex; gap:.5rem; flex-wrap:wrap }

/* grid: lista izquierda + visor derecha */
.slides-grid{
  display:grid; gap:1rem;
  grid-template-columns:320px 1fr;
}
@media (max-width:980px){
  .slides-grid{ grid-template-columns:1fr; }
}

/* sidebar sticky (con el mismo offset) */
.slides-sidebar{
    background:var(--card); padding:1rem; border-radius:var(--radius);
    position:sticky;
    top: var(--sidebar-top, var(--sticky-top)); /* <-- ASÍ DEBE QUEDAR */
    max-height:calc(90vh - 2rem); overflow:auto;
}

/* elementos de lista */
.slides-item{ padding:.5rem .75rem; border:1px solid #1e2a33; border-radius:.65rem; background:var(--card) }
.slides-item + .slides-item{ margin-top:.5rem }
.slides-item.active{ outline:.2rem solid var(--brand) }
.slides-link{ display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text); font:inherit; cursor:pointer }
.slides-link:hover{ text-decoration:underline }
.slides-resources{ font-size:.95em; margin-top:.35rem }

/* visor grande */
.viewer-wrap{
  width:100%;
  height:95vh;              /* alto grande y estable */
  max-height:1000px;        /* límite opcional */
  margin-top:1rem;
  border:1px solid #1e2a33; border-radius:12px; overflow:hidden;
}
.viewer-wrap > iframe{ width:100%; height:100%; border:0 }

/* debug NO sticky (importante) */
#slides-debug{ position:static; margin:.25rem 0 }

/* --- cortafuegos: asegura que NO haya más stickies sueltos --- */
#slides-title,
.slides-controls,
#slides-debug{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* el card no recorta la barra sticky */
.card{ overflow: visible; }