/* ─────────────────────────────────────────
   ICCS Inducción — Curso Interactivo
   Basado en scorm/src/style.css
   ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

:root {
  --navy:        #001f5b;
  --navy-mid:    #002580;
  --navy-dark:   #001040;
  --red:         #c8102e;
  --red-hover:   #a50d25;
  --bg:          #0d1117;
  --card-bg:     #161b22;
  --card-hover:  #1c2230;
  --border:      rgba(255, 255, 255, 0.08);
  --text:        #e6edf3;
  --text-muted:  #8b949e;
  --green:       #2ea043;
  --green-bg:    rgba(46, 160, 67, 0.15);
  --yellow:      #e3b341;
  --yellow-bg:   rgba(227, 179, 65, 0.15);
  --blue-bg:     rgba(58, 120, 255, 0.12);

  --font-oswald: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
  --font-avenir: 'Avenir Next', 'Avenir', 'Century Gothic', 'Trebuchet MS', sans-serif;
}

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

html, body {
  height: 100%;
  font-family: var(--font-avenir);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  padding-bottom: 46px;
}

h1, h2, h3, h4 { font-family: var(--font-oswald); letter-spacing: 0.3px; }

.header-text h1       { font-family: var(--font-oswald); }
.lesson-header-title  { font-family: var(--font-oswald); }
.card-title           { font-family: var(--font-oswald); }
.card-num             { font-family: var(--font-oswald); }
.lesson-badge         { font-family: var(--font-avenir); }
.topics-heading       { font-family: var(--font-oswald); }

.hidden { display: none !important; }

/* ── Video de fondo ─── */
.course-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.course-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.course-bg-overlay {
  position: absolute;
  inset: 0;
 
}

/* ── Vistas ── */
.view        { display: none; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; }
.view.active { display: flex; }

#view-lesson,
#view-eval {
  background-image: url('../assets/bg-logged.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


/* ══════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════ */

.dash-header {
  background: #ba0c2f;
  height: 85px;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 8px solid #ffffff;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 500;
}
.dash-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 0 32px;
}

.header-logo { height: 36px; object-fit: contain; flex-shrink: 0; }

.header-text  { flex: 1; min-width: 180px; }
.header-text h1 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}
.header-text p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}

.header-progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.progress-label { font-size: 0.78rem; color: rgba(255,255,255,0.6); white-space: nowrap; }
.progress-track {
  width: 150px;
  height: 7px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0.7));
  border-radius: 4px;
  transition: width 0.5s ease;
}
.progress-pct {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  min-width: 38px;
}

.dash-main {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
}

.lessons-grid {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px 0 0;
  overflow: hidden;
}

/* ── Área de preview ── */
.lesson-preview-wrap {
  position: relative;
  overflow: hidden;
  width: 423px;
  height: 700px;
  flex-shrink: 0;
}

.preview-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(110%);
  width: 423px;
  height: 700px;
  background: url('../assets/boleto-rojo.png') center/cover no-repeat;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.preview-card.visible {
  transform: translateX(-50%) translateY(0);
}

/* Imágenes de preview por módulo */
.preview-card[data-lesson="1"] { background-image: url('../assets/preview-1.png'); }
.preview-card[data-lesson="2"] { background-image: url('../assets/preview-2.png'); }
.preview-card[data-lesson="3"] { background-image: url('../assets/preview-3.png'); }
.preview-card[data-lesson="4"] { background-image: url('../assets/preview-4.png'); }

.pcc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.00) 50%,
    rgba(0, 0, 0, 0.5) 75%,
    rgb(0, 0, 0) 100%
  );
  pointer-events: none;
}

.pcc-boarding {
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  padding: 8px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcc-content {
  position: absolute;
  top: 57%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pcc-title {
  font-family: var(--font-oswald);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.pcc-desc {
  font-family: var(--font-avenir);
  font-size: 0.84rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.pcc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.pcc-duration {
  font-family: var(--font-avenir);
  font-size: 0.95rem;
  color: rgb(255, 255, 255);
}

.pcc-status {
  font-family: var(--font-oswald);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pcc-status-pending  { color: rgba(255,255,255,0.55); }
.pcc-status-progress { color: var(--yellow); }
.pcc-status-done     { color: var(--green); }

.pcc-cta {
  align-self: stretch;
  text-align: center;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-family: var(--font-oswald);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.18s ease;
  pointer-events: none;
}
.preview-card:hover .pcc-cta { background: var(--red-hover); }

/* ── Boarding pass del usuario ── */
.pcc-clave-badge {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-oswald, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.5px;
  z-index: 2;
}

.pcc-pass { margin-bottom: 4px; }
.pcc-pass-pax { margin-bottom: 5px; text-align: left; }
.pcc-pass-pax-lbl {
  display: block;
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pcc-pass-pax-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.pcc-pass-dept {
  background: rgba(255,255,255,0.92);
  border-radius: 5px;
  padding: 4px 7px;
  margin-bottom: 5px;
}
.pcc-pass-dept-lbl {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  color: #c8102e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.pcc-pass-dept-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.25;
}

.pcc-pass-dates { display: flex; justify-content: space-between; align-items: flex-start; }
.pcc-pass-date-col { display: flex; flex-direction: column; gap: 1px; }
.pcc-pass-date-col:last-child { text-align: right; }

.pcc-pass-field-lbl {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.pcc-pass-date-val {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
  line-height: 1.2;
}

.pcc-pass-sep {
  border: none;
  border-top: 1px dashed rgba(255,255,255,0.4);
  margin: 4px 0 5px;
}

/* ── Fila de números de módulo ── */
.lesson-numbers-wrap {
  flex-shrink: 0;
  padding: 0 0 20px;
  text-align: center;
}
.lessons-label {
  font-family: var(--font-avenir);
  font-size: 4rem;
  color: #041e42;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lesson-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.lesson-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  /* Paleta navy: la pantalla "MÓDULOS DEL CURSO" tiene fondo blanco (antes
     blanco sobre blanco → los números no se veían) */
  border: 2px solid rgba(4, 30, 66, 0.35);
  background: #ffffff;
  font-family: var(--font-oswald);
  font-size: 1.6rem;
  font-weight: 600;
  color: #041e42;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              opacity 0.2s ease, transform 0.2s ease;
}
.lesson-num:hover {
  background: rgba(4, 30, 66, 0.08);
  border-color: #041e42;
  color: #041e42;
}
.lesson-num.active {
  background: #041e42;
  border-color: #041e42;
  color: #fff;
  transform: scale(1.1);
}
.lesson-num.dimmed         { opacity: 0.18; }
.lesson-num.status-locked  { opacity: 0.35; cursor: not-allowed; border-color: rgba(4, 30, 66, 0.25); background: #ffffff; color: #041e42; }
.lesson-num.status-completed {
  border-color: #00864e;
  color: #00864e;
  background: #ffffff;
}
.lesson-num.status-visited {
  border-color: var(--yellow);
  color: var(--yellow);
  background: var(--yellow-bg);
}


/* ── Barra de progreso global ── */
.global-progress {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 46px;
  z-index: 1000;
  background: var(--navy-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

.gp-lms { flex-shrink: 0; }

.gp-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gp-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.gp-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.gp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), #e84060);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.gp-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  min-width: 32px;
  flex-shrink: 0;
}

.gp-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.lms-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.lms-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
  flex-shrink: 0;
}
.lms-badge.ok   .lms-dot  { background: #2ea043; }
.lms-badge.ok   .lms-text { color: rgba(255,255,255,0.7); }
.lms-badge.warn .lms-dot  { background: var(--yellow); }
.lms-badge.warn .lms-text { color: var(--yellow); }
.lms-badge.err  .lms-dot  { background: var(--red); }
.lms-badge.err  .lms-text { color: #ff6b6b; }


/* ══════════════════════════════════════════
   VISTA DE LECCIÓN / EVALUACIÓN
══════════════════════════════════════════ */

.lesson-header {
  background: #ba0c2f;
  height: 120px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  border-bottom: 8px solid #ffffff;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 500;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
}
.btn-back:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.btn-back-arrow { font-size: 1rem; }

.dash-nav-actions {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}
.dash-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 1.5rem;
  font-family: var(--font-oswald);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s, color 0.2s;
}
.dash-nav-btn:hover { background: #041e42; color: #fff; }
.dash-nav-divider {
  width: 2px;
  height: 30px;
  background: #ffffff;
  flex-shrink: 0;
}

.lesson-header-meta { flex: 1; }
.lesson-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 2px;
}
.lesson-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* Main del módulo/evaluación */
.lesson-main {
  flex: 1;
  overflow-y: auto;
  padding: 36px 48px 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* ── Tarjeta contenedora de la lección ── */
.lesson-content-card {
  background: #041e42;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 56px;
  backdrop-filter: blur(6px);
}

.lesson-module-tag {
  font-family: var(--font-oswald);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color:#89abe3;
  display: block;
  margin-bottom: 12px;
}

.lesson-content-title {
  font-family: var(--font-oswald);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

/* ── Bloques de contenido ── */
.block { margin-bottom: 22px; }
.block:last-child { margin-bottom: 0; }

.block-texto p {
  font-size: 1.6rem;
  color: var(--text);
  line-height: 1.8;
}

.block-texto-center { text-align: center; }

.block-lista ul,
.block-lista-anidada ul {
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.block-lista li,
.block-lista-anidada li {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
}
.block-lista-anidada ul ul {
  margin-top: 6px;
  padding-left: 20px;
}
.block-lista-anidada ul ul li {
  font-size: 0.98rem;
  color: var(--text-muted);
}

.block-definicion {
  background: rgba(0, 31, 91, 0.25);
  border-left: 4px solid var(--navy-mid);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
}
.def-term {
  font-family: var(--font-avenir);
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.def-body {
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.7;
}

.block-formula {
  background: rgba(0, 10, 40, 0.5);
  border: 1px solid rgba(100, 160, 255, 0.2);
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
}
.formula-expr {
  font-family: 'Courier New', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: #c0d8ff;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.formula-legend {
  font-size: 0.92rem;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.formula-legend span {
  background: rgba(255,255,255,0.05);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.block-tabla {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.block-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.block-tabla th {
  background: rgba(0, 31, 91, 0.45);
  color: rgba(255,255,255,0.9);
  font-family: var(--font-oswald);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.4px;
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.block-tabla td {
  padding: 12px 18px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 0.98rem;
}
.block-tabla tr:last-child td { border-bottom: none; }
.block-tabla tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.block-tabla tbody tr { transition: background 0.15s ease; }
.block-tabla tbody tr:hover td { background: rgba(200, 16, 46, 0.08); }
@media (prefers-reduced-motion: reduce) {
  .block-tabla tbody tr { transition: none; }
}

.block-boton-pdf { display: flex; justify-content: center; margin-top: 4px; }
.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-family: var(--font-oswald);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.18s;
}
.btn-pdf:hover { background: var(--red-hover); }
.btn-pdf-icon { font-size: 1.15rem; line-height: 1; }

.block-organigrama {
  background: rgba(0, 10, 40, 0.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  overflow-x: auto;
}
.org-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-align: center;
}
.org-node {
  display: inline-block;
  background: rgba(0, 31, 91, 0.5);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.95rem;
  color: #fff;
  text-align: center;
  min-width: 120px;
}
.org-children {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}

.block-asset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  min-height: 140px;
}
.asset-icon { font-size: 2.2rem; }
.asset-placeholder-label {
  font-family: var(--font-oswald);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 3px 10px;
  border-radius: 20px;
}
.asset-placeholder-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  max-width: 360px;
}
.asset-placeholder-id {
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
}

.block-asset-media { text-align: center; }

.asset-img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto;
}

.asset-video {
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}

/* M3·L7 (El lado amable de la aviación): ancho reducido a 65%, solo para
   este video — el resto de .asset-video del curso conserva el 100% de
   arriba */
.block-asset-media.ast-m3l7-video .asset-video {
  width: 65%;
  margin: 0 auto;
}

/* M4·L4 (logo NETJETS sobre el marquee de clientes corporativos): alineado
   a la izquierda en vez del centrado por defecto de .block-asset-media/
   .block-asset — aplica también al estado "pendiente" (placeholder con
   borde punteado), ver "clase" en renderAsset */
.block-asset-media.ast-m4l4-netjets-logo,
.block-asset.ast-m4l4-netjets-logo {
  text-align: left;
}
.block-asset-media.ast-m4l4-netjets-logo .asset-img {
  margin: 0;
}
.block-asset.ast-m4l4-netjets-logo {
  align-items: flex-start;
}

/* M4·L7 (logo IFL Group sobre el marquee de clientes de carga): mismo
   ajuste que el logo NETJETS de M4·L4, con su propia clase */
.block-asset-media.ast-m4l7-ifl-logo,
.block-asset.ast-m4l7-ifl-logo {
  text-align: left;
}
.block-asset-media.ast-m4l7-ifl-logo .asset-img {
  margin: 0;
}
.block-asset.ast-m4l7-ifl-logo {
  align-items: flex-start;
}

.asset-media-caption {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}


/* ── Footer de la lección (barra de navegación) ──
   width:auto (en vez de un % fijo del viewport) para que el ancho del
   contenedor se ajuste siempre al contenido real de sus botones — con un
   % fijo, en ventanas angostas o con proporciones distintas a 16:9 el 48%
   del viewport podía quedar más angosto que lo que ocupan los botones
   (con texto en una sola línea, sin envolver), y "Siguiente" se salía
   visualmente del contenedor. max-width solo evita que se vea demasiado
   ancho/estirado en pantallas muy grandes */
.lesson-footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 46px;
  width: auto;
  max-width: 92vw;
  min-width: 460px;
  z-index: 999;
  background: #c1c6c8;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  /* Espacio base entre botón y botón (Anterior / Completar / Siguiente).
     El espacio antes de "Realizar evaluación" es 5 veces esta medida (ver
     .lesson-nav-eval-btn) para que se note como una acción aparte */
  --lnb-gap: 12px;
}

.lesson-footer > .lesson-nav-btn {
  margin-left: var(--lnb-gap);
}
.lesson-footer > .lesson-nav-btn:first-child {
  margin-left: 0;
}
.lesson-footer > .lesson-nav-eval-btn {
  margin-left: calc(var(--lnb-gap) * 5);
}

.lesson-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  height: 38px;
  border-radius: 8px;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.lesson-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lesson-nav-prev {
  background: #041e42;
  color: #ffffff;
  border: 1.5px solid rgba(0, 31, 91, 0.25);
}
.lesson-nav-prev:hover:not(:disabled) {
  background: #ffffff;
  color: #041e42;
  border-color: var(--navy);
}

.lesson-nav-next {
  background: #041e42;
  color: #ffffff;
  border: 1.5px solid transparent;
}
.lesson-nav-next:hover:not(:disabled) {
  background: #ffffff;
  color: #041e42;
  border-color: var(--navy);
}

.lesson-nav-ghost {
  background: transparent;
  color: #444;
  border: 1.5px solid transparent;
}
.lesson-nav-ghost:hover {
  background: rgba(0, 31, 91, 0.06);
  color: var(--navy);
}

/* Botón "Completar lección" */
.lesson-nav-complete-btn {
  background: #007025;
  color: #ffffff;
  border: 1.5px solid rgba(22, 163, 74, 0.3);
}
.lesson-nav-complete-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #007025;
}
.lesson-nav-complete-btn.done {
  color: #ffffff;
  border-color: #000000;
  background:#007025;
}

/* Botón "Realizar evaluación" */
.lesson-nav-eval-btn {
  background: rgba(0, 0, 0, 0.05);
  color: #999;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}
.lesson-nav-eval-btn:not(:disabled) {
  background: var(--red);
  color: #fff;
  border-color: transparent;
}
.lesson-nav-eval-btn:not(:disabled):hover {
  background: var(--red-dark);
}

.lnb-arrow { font-size: 1rem; line-height: 1; }
.lnb-icon  { font-size: 1.1rem; line-height: 1; }

/* ══════════════════════════════════════════
   EVALUACIÓN
══════════════════════════════════════════ */

.eval-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eval-intro-card {
  background: #041e42;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 36px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.eval-intro-card h2 {
  font-family: var(--font-oswald);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.eval-intro-card p {
  font-size: 1.5rem;
  color:#ffffff;
}

.eval-question-card {
  background: #f0f0f0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  backdrop-filter: blur(6px);
}

.eval-question-num {
  font-family: var(--font-oswald);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:#041e42;
  margin-bottom: 10px;
}

.eval-question-text {
  font-size: 1.5rem;
  font-weight: 600;
  color:#ba0c2f;
  line-height: 1.55;
  margin-bottom: 18px;
}

.eval-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.eval-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  font-size: 1.25rem;
  font-weight: 600;
  color:#000000;
  user-select: none;
}
.eval-option:hover    { background: #d4d4d4; }
.eval-option.selected { background: #89abe3;  }
.eval-option input    { display: none; }

.eval-footer {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

.btn-submit-eval {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 40px;
  font-family: var(--font-oswald);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.18s;
}
.btn-submit-eval:hover:not(:disabled) { background: var(--red-hover); }
.btn-submit-eval:disabled { opacity: 0.45; cursor: not-allowed; }

/* Resultado de evaluación */
.eval-result-card {
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 540px;
  margin: 0 auto;
}

.result-icon { font-size: 3rem; }

.result-score {
  font-family: var(--font-oswald);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}
.result-score.passed { color: var(--green); }
.result-score.failed { color: var(--red); }

/* Resultado aprobado/reprobado: fondo a color, todos los textos en blanco */
.eval-result-card.eval-result-passed { background: var(--green); }
.eval-result-card.eval-result-failed { background: var(--red); }
.eval-result-card.eval-result-passed .result-score,
.eval-result-card.eval-result-passed .result-label,
.eval-result-card.eval-result-passed .result-detail,
.eval-result-card.eval-result-passed .btn-nav,
.eval-result-card.eval-result-failed .result-score,
.eval-result-card.eval-result-failed .result-label,
.eval-result-card.eval-result-failed .result-detail,
.eval-result-card.eval-result-failed .btn-nav {
  color: #fff;
}
.eval-result-card.eval-result-passed .btn-nav,
.eval-result-card.eval-result-failed .btn-nav {
  border-color: rgba(255, 255, 255, 0.5);
}
.eval-result-card.eval-result-passed .btn-nav:hover,
.eval-result-card.eval-result-failed .btn-nav:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

.result-label {
  font-family: var(--font-oswald);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text);
}

.result-detail {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 380px;
}

.result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* ── Botones de navegación en resultado ── */
.btn-nav {
  background: transparent;
  color: var(--text);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-nav:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); }

.btn-nav-complete {
  background: var(--navy);
  color: #fff;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-nav-complete:hover { background: var(--navy-mid); }

/* ══════════════════════════════════════════
   BLOQUES INTERACTIVOS
══════════════════════════════════════════ */

/* ── Reveal (fade-up al scroll) ── */
@media (prefers-reduced-motion: no-preference) {
  .block-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .block-reveal[data-reveal="visible"] {
    opacity: 1;
    transform: translateY(0);
  }
}
.block-reveal-static { /* reducedMotion — muestra estático */ }

/* ── Tabs ── */
.block-tabs { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: transparent;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  padding: 8px;
}

.tab-btn {
  padding: 36px 12px;
  font-family: var(--font-oswald);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-right: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab-btn:last-child { border-right: none; /* gap del grid maneja la separación */ }
.tab-btn:hover  { color: var(--text); background: rgba(255,255,255,0.04); }
.tab-btn.active { color: #fff; background: rgba(200,16,46,0.12); border-bottom-color: var(--red); }
.tab-btn:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* Botón con imagen de hover */
.tab-btn-img {
  position: relative;
  overflow: hidden;
  background-image: none;
  background-size: cover;
  background-position: center;
  transition: color 0.2s, border-color 0.2s, background-image 0s;
}
.tab-btn-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tab-hover-bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.tab-btn-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 10, 40, 0); /* Color de la pestaña de lección 5 */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.tab-btn-img span,
.tab-btn-img {
  position: relative;
  z-index: 2;
}
.tab-btn-img:hover::before,
.tab-btn-img:hover::after { opacity: 1; }
.tab-btn-img:hover { color: #fff; }
.tab-btn-img.active::before,
.tab-btn-img.active::after { opacity: 1; }
.tab-btn-img.active { color: #fff; border-bottom-color: var(--red); }

.tab-panel { display: none; padding: 26px 30px; }
.tab-panel.active { display: block; }

@media (max-width: 900px) {
  .tabs-nav { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .tabs-nav { grid-template-columns: repeat(2, 1fr); }
}

/* ── Acordeón ── */
.block-acordeon { display: flex; flex-direction: column; gap: 8px; }

.acordeon-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.acordeon-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 10, 40, 0.35);
  border: none;
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s;
  gap: 14px;
}
.acordeon-btn:hover { background: rgba(0, 10, 40, 0.6); }
.acordeon-btn:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.acordeon-btn[aria-expanded="true"] { border-bottom: 1px solid var(--border); }

.acordeon-icon {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.acordeon-btn[aria-expanded="true"] .acordeon-icon { transform: rotate(45deg); }

.acordeon-panel {
  padding: 20px 24px;
  background: rgba(22, 27, 34, 0.6);
}
.acordeon-panel[hidden] { display: none; }

/* ── Contador ── */
.block-contador {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  background: rgba(0, 31, 91, 0.2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  text-align: center;
}

.contador-valor {
  font-family: var(--font-oswald);
  font-size: 4.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.contador-sufijo {
  font-family: var(--font-oswald);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--red);
  margin-left: 4px;
}

.contador-etiqueta {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 12px;
  letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════
   BLOQUE: COMPARADOR (antes/después)
══════════════════════════════════════════ */
.block-comparador {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border);
  user-select: none;
  cursor: ew-resize;
  aspect-ratio: 16/9;
  background: var(--card-bg);
}

/* Ambas capas llenan el bloque; clip-path se aplica inline en .cmp-layer-antes */
.cmp-layer-despues,
.cmp-layer-antes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cmp-layer-despues { z-index: 1; }
.cmp-layer-antes   { z-index: 2; }

.cmp-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  width: 40px;
  cursor: ew-resize;
}

.cmp-line {
  flex: 1;
  width: 2px;
  background: #fff;
}

.cmp-handle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #001f5b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.cmp-badge {
  position: absolute;
  bottom: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 5;
}
.cmp-badge-antes   { left: 12px;  background: rgba(0,0,0,0.55); color: #fff; }
.cmp-badge-despues { right: 12px; background: rgba(0,31,91,0.7); color: #fff; }

.block-comparador-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 24px;
  cursor: default;
}
.cmp-placeholder-msg {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}


/* ══════════════════════════════════════════
   BLOQUE: REVELADO (imagen oculta + popup)
══════════════════════════════════════════ */
.block-revelado { }

.revelado-trigger {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.revelado-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 28px;
  font-family: var(--font-oswald);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.18s;
}
.revelado-btn:hover { background: var(--navy-mid); }

.revelado-content { margin-top: 4px; }

.revelado-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 24px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  text-align: center;
}
.revelado-icon { font-size: 2rem; }
.revelado-placeholder p    { font-size: 0.88rem; color: rgba(255,255,255,0.6); }
.revelado-placeholder small { font-size: 0.72rem; color: rgba(255,255,255,0.25); }


/* ══════════════════════════════════════════
   BLOQUES COMPARTIDOS: HOTSPOTS + REVELADO
══════════════════════════════════════════ */
.hs-container {
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 10px;
  overflow: visible;
}

.hs-img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Capa de estados resaltados por categoría (opcional, "mapa_asset_id" en
   el bloque de datos): mismo encuadre exacto que .hs-img (el PNG debe
   tener las mismas dimensiones/relación de aspecto que el mapa base para
   alinear pixel a pixel) — se "prende" con opacidad al seleccionar una
   categoría del índice y se apaga al deseleccionar ── */
.hs-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.hs-map-overlay.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hs-map-overlay { transition: none; }
}

/* Capas acumulativas ("capas_click" en el bloque de datos — ver
   initHotspotCapasClick): a diferencia de .hs-map-overlay (que alterna
   entre estados), estas se van apilando visibles una encima de otra */
.hs-layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.hs-layer-img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hs-layer-img { transition: none; }
}

.hs-container.hs-clickable { cursor: pointer; }
.hs-container.hs-clickable:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.hs-capas-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(4,30,66,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 30px;
  padding: 8px 16px;
  color: #fff;
  font-family: var(--font-avenir);
  font-size: 0.85rem;
  pointer-events: none;
}
.hs-capas-counter {
  font-family: var(--font-oswald);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.hs-capas-hint.hs-capas-done .hs-capas-label::after { content: ' \2014 reiniciar'; }

/* Botón de pantalla completa (esquina superior derecha del mapa) */
.hs-fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 10, 40, 0.72);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.hs-fullscreen-btn:hover      { background: rgba(0, 10, 40, 0.92); }
.hs-fullscreen-btn.is-active  { background: var(--red); }
.hs-fs-icon { line-height: 1; }

/* Estado a pantalla completa: el contenedor se centra en el viewport con
   el tamaño exacto calculado en JS (course.js) para que los puntos, cuya
   posición es % relativo al contenedor, sigan alineados con el mapa */
.hs-container:fullscreen,
.hs-container:-webkit-full-screen {
  margin: auto;
  background: #000a20;
}
.hs-container:fullscreen .hs-img,
.hs-container:-webkit-full-screen .hs-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.hs-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  transition: transform 0.15s, filter 0.15s, opacity 0.15s;
  z-index: 10;
  padding: 0;
}
/* El color viene inline por categoría (ver HS_CATEGORIAS en course.js);
   filter en vez de background para que el hover funcione con cualquier color */
.hs-point:hover { transform: translate(-50%, -50%) scale(1.15); filter: brightness(1.15); }
.hs-point-icon  { line-height: 1; font-style: normal; }

.hs-point-tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-avenir);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 25;
}
.hs-point:hover .hs-point-tooltip,
.hs-point:focus-visible .hs-point-tooltip {
  opacity: 1;
  transform: translate(-50%, -10px);
}
.hs-point.hs-tooltip-suppressed .hs-point-tooltip {
  opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .hs-point-tooltip { transition: none; }
}

/* Al seleccionar una categoría en el índice: los puntos de las demás
   categorías se atenúan para que la seleccionada resalte */
.hs-point.hs-dimmed {
  opacity: 0.05;
  filter: grayscale(70%);
  z-index: 9;
  pointer-events: none;
}

.hs-popup {
  position: absolute;
  z-index: 20;
  /* left/top vienen inline (mismo x/y que su .hs-point); este transform
     lo desplaza para que aparezca junto al punto en vez de encima de él */
  transform: translate(20px, -50%);
  width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  font-size: 0.85rem;
}

/* Popups con galería (ICCS FBO): más anchos para que las fotos se vean
   horizontales (16:9) en vez de recortadas en un cuadro angosto */
.hs-popup.hs-popup-has-gallery {
  width: 480px;
}

.hs-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--navy);
  padding: 12px 12px 12px 16px;
}
.hs-popup-titulo {
  color: #fff;
  font-family: var(--font-oswald);
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.hs-popup-body {
  padding: 14px 16px 16px;
}
.hs-popup-body p { margin: 0 0 10px; line-height: 1.55; color: #333; }
.hs-popup-logo {
  display: block;
  max-width: 120px;
  max-height: 36px;
  object-fit: contain;
  margin-bottom: 10px;
}

.hs-popup-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-oswald);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.hs-popup-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 10px 0 12px;
}

.hs-popup-codes {
  font-size: 0.8rem;
  color: var(--navy);
}
.hs-popup-codes strong { font-weight: 700; margin-right: 4px; }
.hs-popup-codes-val { color: #b08968; font-weight: 600; }

.hs-popup-gmaps {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
}
.hs-popup-gmaps:hover { color: var(--red); }

.hs-popup-close {
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hs-popup-close:hover { background: rgba(255,255,255,0.28); }

/* Galería de fotos dentro del popup (varias imágenes por ubicación) */
.hs-popup-gallery {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  background: #000a20;
}

.hs-popup-gallery-track { position: relative; width: 100%; height: 100%; }

.hs-popup-gallery-slide { display: none; width: 100%; height: 100%; }
.hs-popup-gallery-slide.active { display: block; }

.hs-popup-gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder cuando la foto todavía no existe (mismo patrón que .crs-slide-ph) */
.hs-popup-gallery-slide-ph .hs-popup-gallery-img { display: none; }
.hs-popup-gallery-slide-ph::after {
  content: attr(data-index);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  background: #0d2a70;
}

/* El botón de cerrar se superpone a la foto en vez de ir en la cabecera
   cuando el punto tiene galería (ver hasGallery en hotspotPointHtml) */
.hs-popup-gallery .hs-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  background: rgba(0,0,0,0.45);
}
.hs-popup-gallery .hs-popup-close:hover { background: rgba(0,0,0,0.7); }

.hs-popup-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.hs-popup-gallery-arrow:hover { background: var(--red); }
.hs-popup-gallery-prev { left: 8px; }
.hs-popup-gallery-next { right: 8px; }

.hs-popup-gallery-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.hs-popup-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hs-popup-gallery-dot.active { background: #fff; transform: scale(1.3); }

.hs-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
  text-align: center;
}
.hs-placeholder span  { font-size: 2.2rem; }
.hs-placeholder p     { font-size: 0.88rem; color: rgba(255,255,255,0.6); }
.hs-placeholder small { font-size: 0.72rem; color: rgba(255,255,255,0.25); }

/* Índice de categorías — esquina inferior izquierda del mapa */
/* Envuelve el índice y la tarjeta de grupo (si el bloque declara
   "categorias") para que la tarjeta aparezca al lado (flex) sin cálculos
   manuales de ancho — ver hotspotLegendHtml() */
.hs-legend-wrap {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 15;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.hs-legend {
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  min-width: 150px;
  /* Sets de categorías largos (ej. 10 grupos aeroportuarios con logo) no
     deben desbordar el mapa — el índice se vuelve scrollable */
  max-height: min(75vh, 460px);
  overflow-y: auto;
}
.hs-legend-titulo {
  font-family: var(--font-oswald);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.hs-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 5px 6px;
  margin: 0 -6px;
  text-align: left;
  opacity: 1;
  transition: opacity 0.15s;
}
.hs-legend-item:hover   { background: rgba(0,0,0,0.05); }
.hs-legend-item.active  { background: rgba(0,0,0,0.08); }
/* Al seleccionar una categoría, las demás del índice también se atenúan */
.hs-legend-item.hs-dimmed { opacity: 0.4; }
.hs-legend-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.hs-legend-label {
  font-size: 0.85rem;
  color: #333;
}

.hs-legend-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 10px 0;
}
.hs-legend-reset {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 6px;
  margin: 0 -6px;
  text-align: left;
  font-family: var(--font-oswald);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--navy);
}
.hs-legend-reset:hover { background: rgba(0,0,0,0.05); }

/* Tarjeta de grupo: aparece junto al índice al seleccionar una categoría
   (solo si el bloque declaró "categorias" con logo/descripcion) — logo,
   conteo de aeropuertos y texto descriptivo del grupo ── */
.hs-group-card {
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  width: 320px;
  max-height: min(75vh, 460px);
  overflow-y: auto;
  animation: hs-group-card-in 0.18s ease;
}
@keyframes hs-group-card-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-group-card { animation: none; }
}
.hs-group-card-logo {
  display: block;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  margin-bottom: 16px;
}
.hs-group-card-count {
  font-family: var(--font-oswald);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.hs-group-card-count strong { font-size: 1.6rem; }
.hs-group-card-desc {
  font-size: 0.86rem;
  color: #555;
  line-height: 1.5;
  white-space: pre-line;
}

@media (max-width: 600px) {
  .hs-legend-wrap {
    position: static;
    margin-top: 12px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .hs-legend { width: 100%; }
  .hs-group-card { width: 100%; margin-top: 10px; }
}


/* ══════════════════════════════════════════
   BLOQUE: VALORES GRID (4×2)
══════════════════════════════════════════ */
.block-valores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 425px);
  gap: 12px;
  margin-bottom: 2rem;
}

/* Tarjeta — altura tomada de grid-template-rows */
.vg-card {
  perspective: 900px;
  cursor: pointer;
  outline: none;
  min-width: 0;
  height: 100%;        /* hereda la fila del grid → vg-inner puede usar height:100% */
}

.vg-card:focus-visible .vg-inner {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* El contenedor que gira */
.vg-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 10px;
}

.vg-card:hover .vg-inner,
.vg-card.flipped .vg-inner {
  transform: rotateY(180deg);
}

/* Cara frontal y trasera comparten posición absoluta */
.vg-front,
.vg-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
}

/* ── Cara frontal ── */
.vg-front {
  background: transparent;
}

.vg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* no recorta — muestra la figura completa */
  object-position: center center;
  display: block;
  background: transparent;
}

.vg-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(0, 15, 55, 0.5);
  color: rgba(255,255,255,0.18);
}

.vg-front-label {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  padding: 0.5rem 0.0rem 0.5rem;
  background: rgba(37, 55, 70, 0.75);
  color: #fff;
  font-family: var(--font-oswald);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
}

/* ── Cara trasera ── */
.vg-back {
  background: #253746;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.9rem;
  gap: 0.6rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.vg-back-titulo {
  font-family: var(--font-oswald);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #89abe3;
  text-align: center;
}

.vg-back-desc {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.82);
  text-align: center;
  font-family: var(--font-avenir);
}

/* Variante de vuelta con imagen de fondo (opt-in por valor vía
   "fondo_reverso_asset_id") — mismo patrón que .tj-back-bg */
.vg-back.vg-back-bg {
  padding: 0;
  display: block;
}
.vg-back-bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vg-back-bg .vg-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vg-back-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.9rem;
  gap: 0.6rem;
}
.vg-back.vg-back-bg.tj-card-popup { cursor: pointer; }
.vg-back-play-hint {
  margin-top: 0.4rem;
  font-family: var(--font-oswald);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #fff;
}

/* Popup de video (opt-in por valor vía "video_popup_asset_id") — mismo
   backdrop/cierre que .tj-popup-backdrop, solo cambia el contenido */
.vg-video-popup {
  max-width: 900px;
  width: 100%;
  padding: 20px;
}
.vg-video-popup-media {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: #000;
}

/* "boton_info" (ver renderValoresGrid/initValoresInfoBoton): ícono "+INFO"
   fuera del grid, anclado a su esquina inferior derecha (hueco junto a la
   7ª tarjeta). Mismos ícono/video/animación que .crs-slide-avatar */
.vg-grid-wrap {
  position: relative;
  margin-bottom: 2rem;
}
.vg-grid-wrap > .block-valores-grid {
  margin-bottom: 0;
}
.vg-info-avatar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 0;
  height: 0;
}
@media (max-width: 600px) {
  .vg-info-avatar .av-icon-btn { width: 90px; height: 90px; }
  .vg-info-avatar .av-video-wrap { width: 190px; }
}

/* "video_boton_asset_id" en un valor (ver renderValoresGrid): ícono centrado
   abajo en la vuelta; el texto se centra en el espacio que queda arriba.
   El video entra desde la derecha, recortado por el overflow de .vg-back */
.vg-back.vg-back-has-avatar {
  padding-bottom: calc(135px + 28px);
}
.vg-back-avatar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 20;
  height: 0;
}
.vg-back-avatar .av-icon-btn,
.vg-back-avatar .av-video-wrap {
  left: 0;
  margin-inline: auto;
}
.vg-back-avatar .av-icon-btn {
  width: 135px;
  height: 135px;
}
.vg-back-avatar .av-video-wrap {
  width: min(250px, 100% - 16px);
}
.vg-card.vg-av-playing .vg-inner {
  transform: rotateY(180deg);
}
@media (max-width: 900px) {
  .vg-back.vg-back-has-avatar { padding-bottom: calc(81px + 20px); }
  .vg-back-avatar { bottom: 8px; }
  .vg-back-avatar .av-icon-btn { width: 81px; height: 81px; }
}

@media (prefers-reduced-motion: reduce) {
  .vg-inner { transition: none; }
}

/* 7ª tarjeta: fila 2, columna 3 (centrada en el hueco) */
.block-valores-grid .vg-card:last-child:nth-child(7) {
  grid-column: 3;
  grid-row: 2;
}

@media (max-width: 900px) {
  .block-valores-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 260px);
  }
  .block-valores-grid .vg-card:last-child:nth-child(7) { grid-column: auto; }
}

@media (max-width: 600px) {
  .block-valores-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 220px);
    gap: 8px;
  }
}

/* Variante 5 columnas × 1 fila (Equipo de trabajo en FBOs) */
.block-valores-grid.vg-cols-5 {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 600px;
}
.block-valores-grid.vg-cols-5 .vg-card:last-child:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
@media (max-width: 900px) {
  .block-valores-grid.vg-cols-5 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 260px);
  }
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-5 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 220px);
  }
}

/* Variante 4 columnas × 1 fila (Los 4 acuerdos) */
.block-valores-grid.vg-cols-4 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 900px;
}
.block-valores-grid.vg-cols-4 .vg-card:last-child:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
@media (max-width: 900px) {
  .block-valores-grid.vg-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 260px);
  }
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 220px);
  }
}

/* Variante 1 fila × 3 columnas (Los 3 pasos del servicio) — portrait */
.block-valores-grid.vg-cols-1 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 900px;
}
.block-valores-grid.vg-cols-1 .vg-card {
  height: 100%;
}
.block-valores-grid.vg-cols-1 .vg-card:last-child:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-1 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 900px);
  }
}

/* Altura propia para M3·L2 (Equipo de seguridad en FBOs) — separada de
   .vg-cols-1 a propósito: esa clase también la usa M1·L4 (Los 3 pasos del
   servicio), que debe conservar sus 900px sin verse afectada */
.block-valores-grid.vg-cols-1.vg-m3l2-grid {
  grid-template-rows: 600px;
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-1.vg-m3l2-grid {
    grid-template-rows: repeat(3, 600px);
  }
}

/* Variante 2 columnas × 1 fila (Códigos de aeropuertos: ICAO / IATA) —
   misma altura de card que el grid por defecto (425px, ver M2·L9) */
.block-valores-grid.vg-cols-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 675px;
}
.block-valores-grid.vg-cols-2 .vg-card:last-child:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-2 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 425px);
  }
}

/* Altura propia para las cards "¿Qué es un FBO?" / "¿Qué es un hangar?"
   (M2·L11) — separada de .vg-cols-2 a propósito: esa clase la comparten
   otros grids de 2 columnas (ej. Código ICAO/IATA en M2·L7), que deben
   conservar su altura de 675px sin verse afectados por este ajuste */
.block-valores-grid.vg-cols-2.vg-fbo-hangar-grid {
  grid-template-rows: 450px;
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-2.vg-fbo-hangar-grid {
    grid-template-rows: repeat(2, 400px);
  }
}

/* Variante 3 columnas × 2 filas (Autoridades aeroportuarias) */
.block-valores-grid.vg-cols-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 425px);
}
@media (max-width: 900px) {
  .block-valores-grid.vg-cols-3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 260px);
  }
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-3 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 220px);
  }
}

/* Altura propia para M3·L3 pestaña "Aviones ejecutivos" (2×3) — separada
   de .vg-cols-3, que también usa M2·L9 (Autoridades aeroportuarias) y debe
   conservar sus 425px */
.block-valores-grid.vg-cols-3.vg-m3l3-ejecutivos-grid {
  grid-template-rows: repeat(2, 250px);
}
@media (max-width: 900px) {
  .block-valores-grid.vg-cols-3.vg-m3l3-ejecutivos-grid {
    grid-template-rows: repeat(3, 600px);
  }
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-3.vg-m3l3-ejecutivos-grid {
    grid-template-rows: repeat(6, 600px);
  }
}

/* Altura propia para M3·L3 pestaña "Aviones de carga" (4×1) — separada de
   .vg-cols-4, que también usa M1·L3 (Los 4 acuerdos) y debe conservar sus
   900px */
.block-valores-grid.vg-cols-4.vg-m3l3-carga-grid {
  grid-template-rows: 500px;
}
@media (max-width: 900px) {
  .block-valores-grid.vg-cols-4.vg-m3l3-carga-grid {
    grid-template-rows: repeat(2, 600px);
  }
}
@media (max-width: 600px) {
  .block-valores-grid.vg-cols-4.vg-m3l3-carga-grid {
    grid-template-rows: repeat(2, 600px);
  }
}

/* ══════════════════════════════════════════
   BLOQUE: TARJETAS CON POPUP
   (misma medida de grid que block-valores-grid: 4×2, 425px, gap 12px)
══════════════════════════════════════════ */
.block-tarjetas-popup {
  display: grid;
  grid-template-columns: repeat(var(--tj-cols, 4), 1fr);
  grid-template-rows: repeat(var(--tj-filas, 2), var(--tj-row-h, 425px));
  gap: 12px;
  margin-bottom: 2rem;
}

/* Variante "formato":"16:9" — filas de alto automático; el alto de cada
   tarjeta lo define aspect-ratio sobre su propio ancho (fluido), no un
   --tj-row-h en px. Independiente de "compacto": no comparten clase, así
   que no se pisan entre grids que usan una u otra */
.block-tarjetas-popup-16-9 {
  grid-template-rows: none;
  grid-auto-rows: auto;
}
.block-tarjetas-popup-16-9 .tj-card,
.block-tarjetas-popup-16-9 .tj-card-popup {
  height: auto;
  /* 16:9 con el alto reducido un 30% (mismo ancho): 16 / (9*0.7) = 160/63 */
  aspect-ratio: 160 / 63;
}

/* Variante "compacto": grid de tarjetas pequeñas de una sola letra/palabra
   (sin imagen) — p.ej. alfabeto fonético. Mismo mecanismo de popup, solo
   cambia la altura de fila (via --tj-row-h) y el estilo del frente, que sin
   imagen necesita su propio fondo/borde para leerse como tarjeta ── */
.block-tarjetas-popup-compacto {
  /* +75% sobre la medida original (90/80/70px) */
  --tj-row-h: 157.5px;
  --tj-row-h-md: 140px;
  --tj-row-h-sm: 122.5px;
}
.block-tarjetas-popup-compacto .tj-front-label {
  font-size: 3.15rem;
  font-weight: 700;
  padding: 0.5rem;
}
.block-tarjetas-popup-compacto .tj-hint { display: none; }

/* "momentáneo": popup en el mismo espacio exacto de la tarjeta (no flotando
   arriba) — aparece solo al pasar el cursor (o al navegar con teclado) y se
   cierra solo al salir del área, sin botón de cerrar. Puramente CSS
   (:hover/:focus-visible), sin JS: el tooltip es hijo de la tarjeta, así que
   seguir hovereando el tooltip cuenta como seguir hovereando la tarjeta y
   no se cierra de golpe.
   :focus-visible (no :focus-within) a propósito: un click deja la tarjeta
   enfocada pero NO coincide con :focus-visible (los navegadores solo lo
   activan en foco por teclado), así que un click no "traba" el popup
   abierto — solo hover o Tab lo abren, un click no tiene ningún efecto */
.tj-card-tooltip {
  position: relative;
}
.tj-tooltip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0d1f3c;
  border: 1.5px solid var(--red);
  border-radius: 10px;
  padding: 10px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
}
.tj-card-tooltip:hover .tj-tooltip,
.tj-card-tooltip:focus-visible .tj-tooltip {
  opacity: 1;
  visibility: visible;
}
.tj-tooltip .tj-back-desc { font-size: 1.5rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .tj-tooltip { transition: none; }
}

/* Tarjetas de nivel superior con "efecto":"grow" (sin flip): .block-tabs
   recorta con overflow:hidden, así que el grid reserva por adelantado el
   espacio del scale(1.2) para que el crecimiento nunca choque con ese borde
   (mismo cálculo que .tj-popup-grid-grow — ver comentario más abajo):
     vertical   = 10% de la fila (425px) = 42.5px
     horizontal = 10% del ancho de cada tarjeta = 10%/N del ancho del grid */
.block-tarjetas-popup-grow {
  margin-top: 42.5px;
  margin-bottom: 42.5px;
}
.block-tarjetas-popup-grow-2 { margin-left: 5%;    margin-right: 5%; }
.block-tarjetas-popup-grow-3 { margin-left: 3.34%; margin-right: 3.34%; }
.block-tarjetas-popup-grow-4 { margin-left: 2.5%;  margin-right: 2.5%; }

/* M3·L5 (Certificaciones): altura de grid reducida de 862px (2×425 + gap) a
   600px (2×294 + gap), vía "clase" en el bloque — no toca --tj-row-h de
   .block-tarjetas-popup, que comparten el resto de grids tarjetas_popup del
   curso (p.ej. "Nuestros valores" en M1·L5) */
.block-tarjetas-popup.tj-m3l5-cert-grid {
  --tj-row-h: 294px;
}
/* Escala de hover propia de este grid (2 en vez del 1.2 compartido por
   .tj-grow-hover, que usan también los subitems "efecto":"grow" de otras
   lecciones) — no toca la regla base */
.tj-m3l5-cert-grid .tj-grow-hover:hover,
.tj-m3l5-cert-grid .tj-grow-hover:focus-visible {
  transform: scale(2);
}

/* M3·L6 (Asociaciones): mismos ajustes que M3·L5 (altura de fila 294px,
   escala de hover), aplicados a su propia clase para no depender de
   tj-m3l5-cert-grid ni afectarla */
.block-tarjetas-popup.tj-m3l6-assoc-grid {
  --tj-row-h: 294px;
}
.tj-m3l6-assoc-grid .tj-grow-hover:hover,
.tj-m3l6-assoc-grid .tj-grow-hover:focus-visible {
  transform: scale(2);
}

/* Tarjeta flip — misma mecánica y medidas que .vg-card (Nuestros valores) */
.tj-card {
  perspective: 900px;
  cursor: pointer;
  outline: none;
  min-width: 0;
  height: 100%;
  position: relative;
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

.tj-card:focus-visible .tj-inner,
.tj-sub-card:focus-visible .tj-inner {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.tj-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 10px;
}

.tj-card:hover .tj-inner,
.tj-card.flipped .tj-inner,
.tj-sub-card:hover .tj-inner,
.tj-sub-card.flipped .tj-inner {
  transform: rotateY(180deg);
}

.tj-front,
.tj-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
}

.tj-front {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tarjetas sin imagen (item.asset_id ausente): .tj-front es transparente por
   defecto porque está pensado para llevar una foto de fondo — sin fondo
   propio, el texto quedaría flotando invisible sobre el navy de la lección.
   Se aplica en cardFrontHtml() vía la clase "tj-front-noimg" ── */
.tj-front-noimg {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.14);
  transition: background 0.15s, border-color 0.15s;
}
.tj-card:hover .tj-front-noimg,
.tj-card:focus-visible .tj-front-noimg,
.tj-sub-card:hover .tj-front-noimg,
.tj-sub-card:focus-visible .tj-front-noimg,
.tj-card-tooltip:hover .tj-front-noimg,
.tj-card-tooltip:focus-visible .tj-front-noimg {
  background: rgba(200,16,46,0.18);
  border-color: var(--red);
}

.tj-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: transparent;
}

.tj-front-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1rem;
  text-align: center;
  font-family: var(--font-oswald);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.tj-back {
  background: #253746;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.9rem;
  gap: 0.6rem;
  border: 1px solid rgba(255,255,255,0.1);
}

.tj-back .tj-img {
  height: 42%;
  flex-shrink: 0;
  border-radius: 6px;
  margin-bottom: 0.3rem;
}

/* Variante "fondo": la imagen cubre toda la vuelta, con overlay oscuro
   y el texto encima (en vez de foto apilada arriba del texto) */
.tj-back.tj-back-bg {
  padding: 0;
  display: block;
}

.tj-back-bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.tj-back-bg .vg-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tj-back-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  
}

.tj-back-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.9rem;
  gap: 0.6rem;
}

.tj-back-titulo {
  font-family: var(--font-avenir);
  font-size: 1.25rem;
  
  letter-spacing: 0.5px;
  
  color: var(--white);
  text-align: center;
  line-height: 1.3;
}

.tj-back-desc {
  font-size: 0.92rem;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.82);
  text-align: center;
  font-family: var(--font-avenir);
}

@media (prefers-reduced-motion: reduce) {
  .tj-inner { transition: none; }
}

.tj-hint {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-family: var(--font-avenir);
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

@media (max-width: 900px) {
  .block-tarjetas-popup {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(var(--tj-rows-md, 4), var(--tj-row-h-md, 260px));
  }
  /* Compacto no reflowea a 2 columnas: las tarjetas ya son pequeñas
     (sin imagen), así que conserva --tj-cols y solo cambia --tj-row-h */
  .block-tarjetas-popup-compacto {
    grid-template-columns: repeat(var(--tj-cols, 6), 1fr);
    grid-template-rows: repeat(var(--tj-filas, 5), var(--tj-row-h-md, 80px));
  }
  /* "formato":"16:9" debe seguir ganando aquí — sin esto, .compacto de arriba
     fuerza una fila de alto fijo y el aspect-ratio del frente deja de verse
     16:9 en cualquier viewport ≤900px */
  .block-tarjetas-popup-16-9 {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  .tj-front-label { font-size: 0.95rem; }
  .tj-back-titulo { font-size: 0.95rem; }
  .tj-back-desc   { font-size: 0.85rem; }
  .tj-otros-paises-popup .tj-back-titulo { font-size: 1.9rem; }
  /* Reflow forzado a 2 columnas — el 5% horizontal siempre aplica aquí */
  .block-tarjetas-popup-grow {
    margin-top: 26px;
    margin-bottom: 26px;
  }
  .block-tarjetas-popup-grow-2,
  .block-tarjetas-popup-grow-3,
  .block-tarjetas-popup-grow-4 {
    margin-left: 5%;
    margin-right: 5%;
  }
}
@media (max-width: 600px) {
  .block-tarjetas-popup {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--tj-rows-sm, 8), var(--tj-row-h-sm, 200px));
    gap: 8px;
  }
  .block-tarjetas-popup-compacto {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(var(--tj-rows-compacto-sm, 7), var(--tj-row-h-sm, 70px));
    gap: 8px;
  }
  /* Mismo motivo que en el media query de 900px: "formato":"16:9" debe
     seguir ganando sobre la fila de alto fijo de .compacto */
  .block-tarjetas-popup-16-9 {
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  /* Reflow forzado a 1 columna — el 10% horizontal siempre aplica aquí */
  .block-tarjetas-popup-grow {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .block-tarjetas-popup-grow-2,
  .block-tarjetas-popup-grow-3,
  .block-tarjetas-popup-grow-4 {
    margin-left: 10%;
    margin-right: 10%;
  }
}

/* Popup de subitems — mismo grid, medida y tarjetas que el grid principal */
.tj-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,10,30,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.tj-popup-backdrop[hidden] { display: none; }

.tj-popup {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px 24px;
  max-width: 2000px;
  width: 100%;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  position: relative;
}

/* Popup simple (tarjeta sin subitems con "efecto":"popup"): imagen +
   título + descripción, en vez del grid de subitems.
   Mismo criterio que el popup de tarjeta_flip (Comisariato aéreo), pero con
   el ancho heredado de .tj-popup (max-width:2000px) reducido a 900px */
.tj-popup-simple {
  max-width: 1200px;
}
.tj-popup-img {
  display: block;
  width: 100%;
  max-height: 1080px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}
.tj-popup-simple .tj-back-titulo {
  margin-bottom: 8px;
  padding-right: 30px;
}

/* "clase":"tj-otros-paises-popup" (m2_l4, pestaña "Otros países"): título del
   popup al doble de tamaño, solo para ese bloque — no toca .tj-back-titulo
   compartida por el resto de popups de tarjetas_popup en todo el curso */
.tj-otros-paises-popup .tj-back-titulo {
  font-size: 2rem;
}

.tj-popup-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.tj-popup-close:hover { color: #fff; }

.tj-popup-titulo {
  font-family: var(--font-oswald);
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: 0.4px;
  margin-bottom: 14px;
  padding-right: 30px;
}

/* Misma altura y tipografía de tarjeta que .block-tarjetas-popup (425px),
   pero en una sola fila (columnas según el número de subitems) para que
   nunca necesite scroll vertical dentro del popup */
.tj-popup-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  grid-template-rows: 425px;
  gap: 12px;
  /* El rotateY(180deg) con perspective calcula un bounding-box 3D más alto
     que el plano de la tarjeta; sin esto, esa sobra "infla" el scrollHeight
     del popup y aparece un scrollbar solo al hacer hover */
  overflow: hidden;
}

/* Tarjeta de subitem — idéntica mecánica, medida y tipografía que .tj-card */
.tj-sub-card {
  perspective: 900px;
  cursor: pointer;
  outline: none;
  height: 100%;
  min-width: 0;
  position: relative;
}

/* Variante sin flip: crece 20% al hover/foco y regresa a su tamaño original
   (usada por subitems con "efecto": "grow").
   El grid reserva de antemano el espacio que ocupará ese crecimiento (10% a
   cada lado, ya que el scale(1.2) se aplica desde el centro) para que el
   scrollHeight de .tj-popup no cambie al hacer hover y no aparezca scrollbar:
     vertical   = 10% de la fila (425px) = 42.5px, igual sin importar columnas
     horizontal = 10% del ancho de cada tarjeta; cada tarjeta ocupa ~1/N del
                 ancho del grid (N = nº de subitems/columnas), así que la
                 reserva es 10%/N del ancho total del grid por lado:
                   N=2 (cards 1 y 2) → 10/2 = 5%
                   N=3 (cards 3, 4 y 5) → 10/3 ≈ 3.34% */
.tj-popup-grid-grow {
  overflow: visible;
  padding-top: 42.5px;
  padding-bottom: 42.5px;
}
.tj-popup-grid-grow-2 { padding-left: 5%;    padding-right: 5%; }
.tj-popup-grid-grow-3 { padding-left: 3.34%; padding-right: 3.34%; }

/* Genérica: usada tanto por tarjetas de nivel superior (junto a .tj-card,
   grid principal 4×2) como por subitems dentro de un popup (junto a
   .tj-sub-card, grid de 1 fila) */
.tj-grow-hover {
  cursor: pointer;
  outline: none;
  height: 100%;
  min-width: 0;
  position: relative;
  border-radius: 10px;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.tj-grow-hover:hover,
.tj-grow-hover:focus-visible {
  transform: scale(1.2);
  z-index: 5;
}

.tj-grow-hover:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.tj-grow-front {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tj-grow-hover { transition: none; }
}

@media (max-width: 900px) {
  .tj-popup-grid {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    grid-auto-rows: 260px;
  }
  /* Fila de 260px (10% = 26px) — sigue en 2 columnas, mismo 5% horizontal */
  .tj-popup-grid-grow {
    padding: 26px 5%;
  }
}
@media (max-width: 600px) {
  .tj-popup-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
    gap: 8px;
  }
  /* 1 sola columna (ancho completo): el 10% de crecimiento por lado ya es
     10% del ancho del grid, no 5%; fila de 200px (10% = 20px) */
  .tj-popup-grid-grow {
    padding: 20px 10%;
  }
}

/* ══════════════════════════════════════════
   BLOQUE: TARJETA FLIP (independiente, fuera de un grid)
   El frente admite "fondo":true (imagen a toda tarjeta, mismo patrón que
   la variante fondo_reverso de las vueltas). La vuelta embebe cualquier
   bloque — pensada para un carrusel.
══════════════════════════════════════════ */
.block-tarjeta-flip {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 2rem;
}

.tj-card-solo {
  width: 100%;
  max-width: 1200px;
  height: 600px;
}

/* Frente con fondo: la imagen cubre toda la tarjeta, con overlay y el
   título encima — igual mecánica que .tj-back.tj-back-bg */
.tj-front.tj-front-bg {
  padding: 0;
  display: block;
}
.tj-front-bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tj-front-bg .tj-front-label {
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 10, 30, 0.65), transparent 0%);
}
/* "overlay":false en la data — foto de fondo limpia, sin degradado oscuro */
.tj-front-bg-no-overlay .tj-front-label {
  background: none;
}

/* Vuelta que embebe otro bloque (p.ej. un carrusel) a toda la tarjeta */
.tj-back.tj-back-embed {
  padding: 0;
  display: block;
}
.tj-back-embed .block-carrusel {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
}
.tj-back-embed .crs-track,
.tj-back-embed .crs-slide,
.tj-back-embed .crs-media {
  height: 100%;
}
.tj-back-embed .block-carrusel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
  .tj-card-solo { max-width: 100%; }
}

/* Variante "interaccion":"popup" — el frente se muestra como botón estático
   (sin flip) y el reverso (p.ej. un carrusel) se abre en un popup, con el
   mismo mecanismo de apertura/cierre que .tj-card-popup */
.tj-popup-carrusel .block-carrusel {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════
   BLOQUE: LÍNEA DE TIEMPO
   (pasos que se revelan uno a uno al hacer clic en el activo)
══════════════════════════════════════════ */
.block-linea-tiempo {
  margin-bottom: 2rem;
  overflow-x: auto;
}

/* Mensaje que se revela (encima del track) al completar el último paso */
.lt-mensaje-final {
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 20px;
  font-family: var(--font-oswald);
  font-size: 2rem;
  letter-spacing: 0.3px;
  text-align: center;
}
.lt-mensaje-final[hidden] { display: none; }

.lt-track {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 4px;
}

/* Nodo arriba, tarjeta debajo */
.lt-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  outline: none;
  border-radius: 12px;
}
/* Los estilos de autor pisan el display:none por defecto de [hidden] del
   user-agent, sin importar especificidad — hay que restaurarlo a mano para
   que los pasos 2-4 realmente empiecen ocultos hasta que se revelen */
.lt-item[hidden] { display: none; }
.lt-item.lt-done { cursor: default; }
.lt-item:focus-visible .lt-node { outline: 2px solid var(--red); outline-offset: 3px; }

/* Alineado con el centro vertical del nodo (48px), no con toda la tarjeta */
.lt-connector {
  width: 56px;
  height: 3px;
  background: var(--red);
  flex-shrink: 0;
  margin: 22.5px 2px 0;
}

.lt-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-oswald);
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 10px;
  transition: transform 0.15s, background 0.15s;
}
.lt-item:hover:not(.lt-done) .lt-node { transform: scale(1.08); background: var(--navy-mid); }
.lt-item.lt-done .lt-node { background: var(--red); }

.lt-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
  font-family: var(--font-oswald);
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  color: var(--text);
  white-space: nowrap;
}

/* Variante con imagen de fondo (paso con "asset_id"): la tarjeta pasa a ser
   un placeholder de tamaño fijo con la imagen a toda el área, overlay oscuro
   y el título encima — mismo patrón que .tj-back-bg.
   Medida = la misma que .vg-card (Nuestros valores): 425px, con los mismos
   breakpoints (260px / 220px) para que ambas se vean del mismo tamaño */
.lt-card.lt-card-bg {
  position: relative;
  width: 265px;
  height: 425px;
  padding: 0;
  overflow: hidden;
  white-space: normal;
}
.lt-card-bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.lt-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  
}
.lt-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  text-align: center;
  color: #fff;
}

/* Pie de foto — debajo de la tarjeta; al ser hijo de .lt-item, aparece con
   la misma animación de revelado que el nodo y la tarjeta */
.lt-caption {
  width: 265px;
  max-width: 100%;
  margin-top: 10px;
  font-size: 1.3rem;
  line-height: 1.4;
  color:#ffffff;
  text-align: center;
  white-space: normal;
}

@keyframes lt-appear {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.lt-appear { animation: lt-appear 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .lt-appear { animation: none; }
}

/* Mismos breakpoints de medida que .vg-card */
@media (max-width: 900px) {
  .lt-card.lt-card-bg { width: 260px; height: 260px; }
  .lt-caption { width: 260px; }
}
@media (max-width: 600px) {
  .lt-card.lt-card-bg { width: 220px; height: 220px; }
  .lt-caption { width: 220px; }
}

@media (max-width: 700px) {
  .lt-track { flex-direction: column; align-items: center; }
  .lt-connector { width: 3px; height: 28px; margin: 2px 0; }
  .lt-card { white-space: normal; }
}

/* ══════════════════════════════════════════
   BLOQUE: CARRUSEL
══════════════════════════════════════════ */
/* Marquee ("marquee":true en el bloque carrusel) — franja de logos/imágenes
   en scroll horizontal continuo, sin dots ni clics. Puro CSS: la pista
   duplica una vez la lista de items y anima translateX(-50%), así al
   llegar a la mitad se ha recorrido exactamente un set completo y el loop
   no se nota. Pausa al hover/foco (para poder leer un logo) y respeta
   prefers-reduced-motion (queda estática, sin duplicado visible extra) */
.block-carrusel-marquee { margin-bottom: 1.5rem; }
.crs-marquee-titulo {
  font-family: var(--font-oswald);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #89abe3;
  text-align: center;
  margin-bottom: 1rem;
}
.crs-marquee-viewport {
  overflow: hidden;
  width: 100%;
 
}
.crs-marquee-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: crs-marquee-scroll 60s linear infinite;
}
.block-carrusel-marquee:hover .crs-marquee-track,
.block-carrusel-marquee:focus-within .crs-marquee-track {
  animation-play-state: paused;
}
@keyframes crs-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.crs-marquee-item {
  flex: 0 0 auto;
  width: 400px;
  height: 222px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
}
.crs-marquee-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  
  
}
.crs-marquee-item-ph {
  color: rgba(255,255,255,0.25);
  font-size: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .crs-marquee-track { animation: none; }
}
@media (max-width: 600px) {
  .crs-marquee-item { width: 120px; height: 80px; }
  .crs-marquee-track { gap: 28px; }
}

.block-carrusel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  user-select: none;
  margin-bottom: 1.5rem;
}

.crs-track {
  position: relative;
  width: 100%;
}

.crs-slide {
  display: none;
  position: relative;
  width: 100%;
  animation: crs-fade 0.5s ease;
}

.crs-slide.active { display: block; }

@keyframes crs-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.crs-media {
  display: block;
  width: 100%;
  max-height: 650px;
  object-fit: cover;
  border-radius: 12px;
}

/* Slide clicable ("popup_galeria":true en el bloque carrusel): el media
   queda envuelto en un <button> que abre el popup de galería en mosaico
   (ver .gal-m-*) — mismo aspecto que el <img>/<video> normal, solo cambia
   el cursor */
.crs-media-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}

/* Placeholder cuando la imagen no carga */
.crs-slide-ph .crs-media { display: none; }
.crs-slide-ph::after {
  content: attr(data-index);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
  background: #0d2a70;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 12px;
}

/* Overlay con título + definición por slide */
.crs-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.75rem 1.25rem;
  
  border-radius: 0 0 12px 12px;
  animation: crs-fade 0.4s ease;
}

.crs-overlay-titulo {
  color: #fff;
  font-family: var(--font-avenir);
  font-size: 2rem;
  margin-left: 4rem;
  margin-bottom: 5rem;
}

/* ══════════════════════════════════════════
   BLOQUE: AVATAR_VIDEO
   (ícono flotante fijo en la esquina que revela un video en su lugar)
══════════════════════════════════════════ */
/* Contenedor sin tamaño propio: solo fija el punto de anclaje (esquina
   inferior derecha). El ícono y el video tienen medidas distintas (el video
   es 16:9), así que cada uno se ancla por su propia esquina inferior
   derecha (position:absolute; right:0; bottom:0) en vez de heredar el
   tamaño del contenedor — evita que el más ancho de los dos se salga del
   viewport por la derecha */
.block-avatar-video {
  position: fixed;
  right: 24px;
  bottom: 110px;
  z-index: 500;
  width: 0;
  height: 0;
}

.av-icon-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 150px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  filter: drop-shadow(0 4px 14px rgba(0, 10, 40, 0.45));
  transition: transform 0.2s ease;
}
.av-icon-btn:hover,
.av-icon-btn:focus-visible {
  transform: scale(1.06);
}
.av-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.av-video-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 250px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 28px rgba(0, 10, 40, 0.5);
  transform: translateX(140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.av-video-wrap.is-active {
  transform: translateX(0);
  opacity: 1;
}
.av-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .av-icon-btn { transition: none; }
  .av-video-wrap { transition: none; }
}

@media (max-width: 600px) {
  .block-avatar-video {
    right: 14px;
    bottom: 90px;
  }
  .av-icon-btn {
    width: 100px;
    height: 100px;
  }
  .av-video-wrap {
    width: 220px;
  }
}

/* "video_boton_asset_id" en un item de carrusel (ver renderCarrusel):
   mismos ícono/video/animación que .block-avatar-video, pero anclado DENTRO
   del slide (.crs-slide ya es position:relative) en vez de fijo a la
   pantalla — el video queda ligado únicamente a ese contenido del
   carrusel, no visible en el resto de la lección */
.crs-slide-avatar {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 0;
  height: 0;
}
@media (max-width: 600px) {
  .crs-slide-avatar { right: 10px; bottom: 10px; }
  .crs-slide-avatar .av-icon-btn { width: 90px; height: 90px; }
  .crs-slide-avatar .av-video-wrap { width: 190px; }
}

/* ══════════════════════════════════════════
   BLOQUE: AVATAR_TEXTO
   (ícono flotante fijo, justo arriba del de avatar_video, que revela un
   texto en su lugar — mismo mecanismo, sin evento "ended": se cierra con ×)
══════════════════════════════════════════ */
.block-avatar-texto {
  position: fixed;
  right: 24px;
  bottom: 274px;
  z-index: 500;
  width: 0;
  height: 0;
}

.at-icon-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 150px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  filter: drop-shadow(0 4px 14px rgba(0, 10, 40, 0.45));
  transition: transform 0.2s ease;
}
.at-icon-btn:hover,
.at-icon-btn:focus-visible {
  transform: scale(1.06);
}
.at-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.at-text-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 10, 40, 0.5);
  padding: 20px 22px;
  transform: translateX(140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.at-text-wrap.is-active {
  transform: translateX(0);
  opacity: 1;
}
.at-text-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.at-text-close:hover { color: var(--navy); }
.at-text-content {
  color: #333;
  font-size: 0.95rem;
  line-height: 1.6;
  padding-right: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .at-icon-btn { transition: none; }
  .at-text-wrap { transition: none; }
}

@media (max-width: 600px) {
  .block-avatar-texto {
    right: 14px;
    bottom: 204px;
  }
  .at-icon-btn {
    width: 100px;
    height: 100px;
  }
  .at-text-wrap {
    width: 220px;
  }
}

/* ══════════════════════════════════════════
   SPLASH 2 — pantalla "MÓDULOS DEL CURSO", solo la primera vez
   (sin video: manual de instrucciones con scroll + botón con espera de 10s)
══════════════════════════════════════════ */
.cs2-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0, 10, 40, 0.72);
  backdrop-filter: blur(3px);
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
}
.cs2-backdrop.hidden { display: none; }

/* Misma rejilla que .dash-main (50%/50%) + .lessons-grid (columna 2,
   centrada, padding derecho de 40px) — así el panel cae exactamente donde
   aparecen las cards de preview (.lesson-preview-wrap) al deslizarse */
.cs2-align {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding: 24px 40px 24px 0;
}

/* Panel en columna: imagen (fija) + manual con scroll propio + pie fijo
   con el botón. Crece a lo alto hasta dejar libres el header (60px) y la
   barra de progreso global (46px) */
.cs2-panel {
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: cs2-in 0.25s ease;
}
@keyframes cs2-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cs2-panel { animation: none; }
}


/* ── Manual (zona con scroll) ── */
.cs2-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 26px 8px;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 31, 91, 0.45) transparent;
}
.cs2-scroll::-webkit-scrollbar { width: 8px; }
.cs2-scroll::-webkit-scrollbar-thumb { background: rgba(0, 31, 91, 0.35); border-radius: 4px; }
.cs2-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.cs2-scroll strong { color: var(--navy); }
.cs2-mail { color: var(--red); font-weight: 600; text-decoration: underline; word-break: break-all; }

.cs2-hero { margin-bottom: 8px; }
.cs2-kicker {
  display: inline-block;
  font-family: var(--font-oswald);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.cs2-title {
  font-family: var(--font-oswald);
  color: var(--navy);
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 10px;
}
.cs2-lead { margin-bottom: 16px; }

.cs2-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
}
.cs2-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
}
.cs2-stats strong {
  font-family: var(--font-oswald);
  font-size: 1.6rem;
  line-height: 1.1;
  color: #fff;
}
.cs2-stats span { font-size: 0.72rem; line-height: 1.25; opacity: 0.85; }

.cs2-sec {
  padding: 18px 0 16px;
  border-top: 1px solid rgba(0, 31, 91, 0.1);
}
.cs2-sec:first-of-type { margin-top: 16px; }
.cs2-sec p { margin: 0 0 10px; }
.cs2-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-oswald);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 10px;
}
.cs2-sec-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 0.95rem;
}

/* Ruta de módulos (línea de tiempo vertical) */
.cs2-route {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.cs2-route::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: rgba(0, 31, 91, 0.15);
}
.cs2-route li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
}
.cs2-route-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-oswald);
  font-size: 1.1rem;
  font-weight: 600;
}
.cs2-route-final .cs2-route-chip { background: var(--red); border-color: var(--red); color: #fff; }
.cs2-route strong { display: block; font-size: 0.86rem; line-height: 1.3; }
.cs2-route small { display: block; font-size: 0.8rem; color: #666; }

/* Leyenda de estados (mismos colores que .lesson-num) */
.cs2-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}
.cs2-legend li { display: flex; align-items: center; gap: 10px; }
.cs2-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid rgba(4, 30, 66, 0.35);
  background: #fff;
  color: #041e42;
  font-family: var(--font-oswald);
  font-weight: 600;
}
.cs2-chip-progress { border-color: var(--yellow); color: var(--yellow); background: var(--yellow-bg); }
.cs2-chip-done     { border-color: #00864e; color: #00864e; }
.cs2-chip-locked   { opacity: 0.35; border-color: rgba(4, 30, 66, 0.25); }

/* Pasos numerados */
.cs2-steps {
  list-style: none;
  counter-reset: cs2step;
  margin: 0 0 10px;
  padding: 0;
}
.cs2-steps li {
  counter-increment: cs2step;
  position: relative;
  padding: 0 0 10px 34px;
}
.cs2-steps li::before {
  content: counter(cs2step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Botón "de muestra" (replica los de la barra de la lección) */
.cs2-kbd {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-oswald);
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  vertical-align: 1px;
}

.cs2-tip {
  padding: 10px 12px;
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  background: rgba(200, 16, 46, 0.06);
  font-size: 0.88rem;
}

/* Tarjetas de interacción */
.cs2-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
}
.cs2-cards li {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #f3f5f9;
  font-size: 0.82rem;
  line-height: 1.4;
}
.cs2-cards strong { display: block; font-size: 0.9rem; margin-bottom: 2px; }
.cs2-ico { font-size: 1.3rem; line-height: 1; }

.cs2-list { margin: 0; padding-left: 20px; }
.cs2-list li { margin-bottom: 6px; }
.cs2-list li::marker { color: var(--red); }

/* Reveal al hacer scroll dentro del panel (ver initCourseSplash2) */
.cs2-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease; }
.cs2-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cs2-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Pie fijo con el botón ── */
.cs2-foot {
  flex-shrink: 0;
  padding: 12px 26px 20px;
  border-top: 1px solid rgba(0, 31, 91, 0.1);
  background: #fff;
}
.cs2-foot-hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}
.cs2-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-oswald);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s;
}
.cs2-btn:hover:not(:disabled) { background: var(--red); }
.cs2-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 900px) {
  .cs2-backdrop { grid-template-columns: 1fr; }
  .cs2-align { grid-column: 1; padding: 16px; }
  .cs2-panel { max-height: calc(100vh - 32px); }
}
@media (max-width: 600px) {
  .cs2-scroll { padding: 18px 16px 8px; }
  .cs2-foot { padding: 10px 16px 16px; }
  .cs2-stats { grid-template-columns: repeat(2, 1fr); }
  .cs2-cards, .cs2-legend { grid-template-columns: 1fr; }
}

.crs-overlay-def {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.97rem;
  line-height: 1.5;
}

/* Flechas de navegación */
.crs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: #00000073;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.crs-arrow:hover { background: #ba0c2f; }
.crs-prev { left: 10px; }
.crs-next { right: 10px; }

/* Indicadores (dots) */
.crs-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 6px;
  background: transparent;
}

.crs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ba0c2f;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
  padding: 0;
}

.crs-dot.active {
  background: #ffffff;
  transform: scale(1.3);
}

/* Variante en texto ("dots_texto":true en el bloque): el nombre de cada
   slide en vez del punto/círculo — mismo botón, mismo mecanismo de
   navegación en initCarrusel, solo cambia el aspecto */
.block-carrusel-dots-texto .crs-dots {
  gap: 120px;
  flex-wrap: wrap;
  padding: 12px 10px 8px;
}
.crs-dot-texto {
  width: auto;
  height: auto;
  border-radius: 6px;
  padding: 5px 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-oswald);
  font-size: 1.7rem;
  letter-spacing: 0.3px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.crs-dot-texto:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.crs-dot-texto.active {
  background: #ba0c2f;
  color: #fff;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .crs-slide { animation: none; }
}

@media (max-width: 600px) {
  .crs-media { max-height: 240px; }
  .crs-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
}

/* ══════════════════════════════════════════
   POPUP DE GALERÍA "HOJA DE CONTACTO" (carrusel con "popup_galeria":true)
   20 miniaturas del mismo tamaño, 5×4 — usa el bloque "galeria" tal cual
   con el modificador .gal-grid-contacto (ver "BLOQUE: GALERÍA") ── */
.gal-m-popup {
  max-width: 94vw;
  width: 60vw;
  max-height: 92vh;
  overflow-y: auto;
}
.gal-grid.gal-grid-contacto {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  .gal-m-popup { max-width: 96vw; width: 96vw; }
  .gal-grid.gal-grid-contacto { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .gal-grid.gal-grid-contacto { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════
   BLOQUE: GALERÍA
══════════════════════════════════════════ */
.block-galeria { }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  justify-content: center;
  gap: 10px;
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--card-bg);
  transition: transform 0.18s, border-color 0.18s;
}
.gal-item:hover { transform: scale(1.03); border-color: rgba(255,255,255,0.3); }

.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante horizontal (logos): tarjetas rectangulares en vez de cuadradas,
   con la imagen completa visible (sin recortar).
   minmax(220px, 260px) en vez de 1fr: con "1fr" las columnas se estiran a
   ocupar todo el ancho disponible (aunque haya pocos items) y anulan el
   justify-content:center de .gal-grid; con un máximo fijo, sobra espacio
   real que sí se puede centrar. */
.gal-grid-horizontal {
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
}
.gal-grid-horizontal .gal-item {
  aspect-ratio: 16 / 9;
}
.gal-grid-horizontal .gal-item img {
  object-fit: contain;
  padding: 14px;
}

.gal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px;
  background: rgba(0,0,0,0.6);
  font-size: 0.72rem;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

.gal-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed rgba(255,255,255,0.15);
  cursor: default;
  font-size: 1.5rem;
}
.gal-placeholder small { font-size: 0.6rem; color: rgba(255,255,255,0.3); }

/* Lightbox */
.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.93);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gal-lightbox[hidden] { display: none; }

.gal-lb-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 90vw;
  max-height: 90vh;
}

.gal-lb-img {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 8px;
  display: block;
  object-fit: contain;
}

.gal-lb-caption {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.gal-lb-close,
.gal-lb-prev,
.gal-lb-next {
  position: fixed;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.gal-lb-close { top: 20px; right: 20px; font-size: 1.2rem; }
.gal-lb-prev  { left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.gal-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.gal-lb-close:hover,
.gal-lb-prev:hover,
.gal-lb-next:hover { background: rgba(255,255,255,0.22); }


/* ── Loading ── */
.course-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Avatar de persona ── */
.persona-card {
  position: fixed;
  top: 120px;
  left: 60px;
  z-index: 50;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.persona-avatar {
  width: 150px;
  height: 193px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.persona-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.3px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .dash-main { grid-template-columns: 1fr; }
  .lessons-grid { grid-column: 1; padding: 20px; }
  .lesson-preview-wrap { width: 340px; height: 560px; }
  .preview-card { width: 340px; height: 560px; }
  .lessons-label { font-size: 2.5rem; }
}

@media (max-width: 700px) {
  .dash-header-inner { padding: 0 16px; gap: 10px; }
  .header-text p  { display: none; }
  .header-progress { display: none; }
  .lesson-main    { padding: 20px 16px 112px; }
  .lesson-header  { height: 85px; padding: 0 16px; gap: 10px; }
  .lesson-footer  { width: 95%; min-width: unset; padding: 0 10px; height: 50px; }
  .lnb-label      { display: none; }
  .lesson-nav-btn { padding: 0 12px; gap: 4px; }
  .lesson-header-title { font-size: 0.88rem; }
  .global-progress { padding: 0 14px; gap: 10px; }
  .gp-label        { display: none; }
  .gp-count        { display: none; }
  .persona-card    { top: 50px; left: 10px; }
  .persona-avatar  { width: 80px; height: 100px; }
  .persona-name    { font-size: 0.78rem; }
  .lesson-content-card { padding: 24px 20px; }
  .lesson-content-title { font-size: 1.6rem; }
  .block-texto p, .block-lista li, .block-lista-anidada li,
  .def-body, .acordeon-btn { font-size: 0.95rem; }
}

@media (max-width: 2000px) {
  .lessons-grid { margin-left: auto; }
}