:root{color-scheme:dark;--navy:#001b3d;--navy-2:#002852;--blue:#1674e8;--blue-2:#2d86ef;--field:#123f73;--text:#fff;--muted:#b9cbe0;--accent:#8fc6ff}
*{box-sizing:border-box}
html{min-height:100%;background:#00162f}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 50% 0,#0b4b93 0,#002b58 25%,#001a39 70%,#001329 100%)}
a{color:inherit}
img{max-width:100%}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 40px;background:linear-gradient(120deg,#064ea2,#003071);border-bottom:1px solid #ffffff14;position:sticky;top:0;z-index:10}
.topbar .back{display:flex;align-items:center;gap:6px;text-decoration:none;color:#e9f1fb;font-size:.92rem;font-weight:650}
.topbar .back::before{content:"‹";font-size:1.3rem;line-height:1}
.topbar .back:hover{color:#fff}
.topbar img{height:40px;width:40px;border-radius:9px;background:#fff;object-fit:contain;padding:3px}

.content{max-width:860px;margin:0 auto;padding:44px 40px 64px}
.eyebrow{margin:0 0 10px;font-size:.78rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
h1.title{margin:0 0 6px;font-size:1.7rem;line-height:1.35;font-weight:700}
h2.subtitle{margin:0 0 26px;font-size:1.05rem;font-weight:650;color:var(--accent)}

.video-card{display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;padding:10px 18px 10px 10px;margin:0 0 30px;border-radius:12px;background:#ffffff10;border:1px solid #ffffff22;text-decoration:none;transition:background .15s,transform .15s}
.video-card:hover{background:#ffffff1c;transform:translateY(-1px)}
.video-card img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}
.video-card .label{display:flex;flex-direction:column;gap:2px}
.video-card .label strong{font-size:.92rem}
.video-card .label span{font-size:.76rem;color:var(--muted)}

.objectives{background:#0b315d;border:1px solid #ffffff14;border-radius:12px;padding:22px 26px;margin:0 0 30px}
.objectives h3{margin:0 0 14px;font-size:.78rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.objectives ol,.objectives ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.objectives li{font-size:.94rem;color:#e9f1fb}

.prose{display:grid;gap:16px;font-size:.98rem;line-height:1.75;color:#e9f1fb;text-align:justify}
.prose strong{color:#fff}
.prose h3{margin:18px 0 0;font-size:.95rem;color:var(--accent);text-align:left}

.tareas{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.tareas a{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:8px;background:linear-gradient(135deg,#2583ed,#1766cf);color:#fff;text-decoration:none;font-size:.88rem;font-weight:700;box-shadow:0 6px 16px #00112680;transition:filter .15s}
.tareas a:hover{filter:brightness(1.08)}
.tareas a::before{content:"⬇";font-size:.8rem}

.group{margin-bottom:30px}
.group:last-child{margin-bottom:0}
.group h3{margin:0 0 12px;font-size:.82rem;font-weight:750;letter-spacing:.04em;color:var(--muted)}
.session-grid{display:flex;flex-wrap:wrap;gap:10px}
.session-grid a{padding:12px 20px;border-radius:9px;background:#0b315d;border:1px solid #ffffff14;color:#e9f1fb;text-decoration:none;font-size:.9rem;font-weight:650;transition:background .12s,border-color .12s}
.session-grid a:hover{background:#0f3d70;border-color:#3290ff55}

.nextlinks{display:grid;gap:2px;margin-top:6px}
.nextlinks a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;text-decoration:none;font-size:.94rem;color:#e9f1fb;background:#0b315d;border:1px solid #ffffff14;margin-bottom:8px}
.nextlinks a::before{content:"›";color:var(--blue-2);font-weight:800;font-size:1.05rem}
.nextlinks a:hover{background:#0f3d70}

/* Tablet */
@media(max-width:1023px){
  .topbar{padding:13px 28px}
  .content{max-width:680px;padding:38px 32px 56px}
  h1.title{font-size:1.55rem}
}

/* Mobile phones */
@media(max-width:640px){
  .topbar{padding:12px 16px;gap:10px}
  .topbar .back{font-size:.86rem}
  .topbar img{height:34px;width:34px}
  .content{padding:26px 18px 44px}
  h1.title{font-size:1.32rem}
  h2.subtitle{font-size:.96rem}
  .prose{text-align:left}
  .objectives{padding:18px 18px}
  .video-card{flex-direction:column;align-items:flex-start;width:100%}
  .video-card img{width:100%;height:150px}
  .tareas{gap:8px}
  .tareas a,.session-grid a{flex:1 1 auto;justify-content:center;text-align:center}
}

@media(max-width:380px){
  .topbar .back::before{margin-right:-2px}
  .content{padding:22px 14px 36px}
  h1.title{font-size:1.18rem}
  .objectives,.video-card,.tareas a,.session-grid a{padding-left:14px;padding-right:14px}
}