/* ============================================================
   cursos.css — Página de Cursos | Cultura Legal
   Paleta: #005baa | #ffd700 | #1a1a1a | fondo #90adf0
   Tipografía: Segoe UI / Arial
   ============================================================ */

/* ── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #050505;
  background-color: #90adf0;
  background-image: url("img/fondo.png");
  background-repeat: repeat;
  background-attachment: fixed;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Variables ────────────────────────────────────────────────── */
:root {
  --azul:        #005baa;
  --azul-dark:   #003d7a;
  --azul-light:  #1976d2;
  --dorado:      #ffd700;
  --dorado-osc:  #e0c000;
  --blanco:      #ffffff;
  --negro:       #1a1a1a;
  --gris:        #555;
  --gris-claro:  #f4f6f9;
  --borde:       #e5e7eb;
  --shadow:      0 4px 20px rgba(0,0,0,0.09);
  --shadow-h:    0 12px 36px rgba(0,91,170,0.18);
  --radius:      14px;
}

/* ── Util ─────────────────────────────────────────────────────── */
.texto-dorado { color: var(--dorado); }
.hidden { display: none !important; }

/* ============================================================
   HEADER — idéntico al sitio original
   ============================================================ */
.header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(194,177,177,0.1);
  position: sticky; top: 0; z-index: 1000;
}
.header .container {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 1.5rem;
}
.logo img { height: 50px; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)} }
.nav-links { list-style:none; display:flex; gap:.25rem; margin:0; padding:0; }
.nav-links a {
  padding:.5rem 1rem; border-radius:4px; text-decoration:none;
  color:#333; font-weight:400; transition:all .3s; white-space:nowrap;
}
.nav-links a.active, .nav-links a:hover { background:#e0f0ff; color:var(--azul); }
.menu-item-has-children { position:relative; }
.menu-item-has-children .sub-menu {
  position:absolute; top:100%; left:0; background:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,.1); border-radius:8px;
  padding:.5rem 0; min-width:280px; opacity:0; visibility:hidden;
  transition:all .3s; z-index:100; list-style:none;
}
.menu-item-has-children:hover .sub-menu { opacity:1; visibility:visible; top:calc(100% + 5px); }
.sub-menu a { padding:.7rem 1.5rem; color:#333; display:block; font-size:.95rem; transition:background .3s; text-decoration:none; }
.sub-menu a:hover { background:#4a90e2; color:#fff; }
.arrow { font-size:.7rem; margin-left:5px; transition:transform .3s; }
.menu-item-has-children:hover .arrow { transform:rotate(180deg); }
.menu-toggle {
  display:none; flex-direction:column; justify-content:space-around;
  width:30px; height:30px; background:transparent; border:none; cursor:pointer;
  padding:0; z-index:1001;
}
.menu-toggle span { width:30px; height:3px; background:var(--azul); border-radius:10px; transition:all .3s linear; }
.menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

@media(max-width:768px){
  .menu-toggle{display:flex}
  .nav{position:fixed;top:70px;left:0;width:100%;background:#fff;box-shadow:0 4px 6px rgba(0,0,0,.1);transform:translateY(-100%);transition:transform .3s,visibility .3s;visibility:hidden;z-index:999}
  .nav.open{transform:translateY(0);visibility:visible}
  .nav-links{flex-direction:column;gap:0;padding:1rem 0}
  .nav-links li{border-bottom:1px solid #eee}
  .nav-links a{text-align:center;padding:1rem}
  .sub-menu{position:static;opacity:1;visibility:visible;display:none;box-shadow:none;padding-left:1.5rem;min-width:auto;background:transparent}
  .menu-item-has-children.submenu-open .sub-menu{display:block}
  .menu-item-has-children.submenu-open .arrow{transform:rotate(180deg)}
  .sub-menu a{white-space:normal;padding:.8rem 1rem;font-size:1rem;color:#555}
  .sub-menu a:hover{background:#e0f0ff;color:var(--azul)}
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .65rem 1.5rem; border-radius: 30px; font-weight: 600;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: all .3s;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: .9rem;
  white-space: nowrap;
}
.btn-primary-c {
  background: var(--dorado); color: var(--azul); border-color: var(--dorado);
}
.btn-primary-c:hover {
  background: var(--dorado-osc); border-color: var(--dorado-osc);
  transform: translateY(-2px); box-shadow: 0 4px 16px rgba(255,215,0,.4);
}
.btn-outline-c {
  background: transparent; color: var(--azul); border-color: var(--azul);
}
.btn-outline-c:hover { background: var(--azul); color: #fff; transform: translateY(-2px); }
.btn-whatsapp { background:#25d366; color:#fff; border-color:#25d366; }
.btn-whatsapp:hover { background:#1da851; border-color:#1da851; transform:translateY(-2px); }
.btn-lg { padding: .85rem 2rem; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; padding: .9rem; font-size: 1rem; border-radius: 12px; }

/* ============================================================
   HERO
   ============================================================ */
.hero-cursos {
  position: relative; min-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #002060 0%, var(--azul) 60%, var(--azul-light) 100%);
  overflow: hidden;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: url('img/aula-bg.jpg') center/cover no-repeat;
  opacity: .1;
}
.hero-grid-bg {
  position: absolute; inset: 0; opacity: .05;
  background-image: linear-gradient(rgba(255,215,0,1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,215,0,1) 1px, transparent 1px);
  background-size: 55px 55px;
}
.hero-inner {
  position: relative; z-index: 2; text-align: center;
  color: #fff; padding: 5rem 1.5rem 4rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,215,0,.15); border: 1px solid rgba(255,215,0,.4);
  color: var(--dorado); padding: 5px 18px; border-radius: 100px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 1.5rem;
  animation: fadeUp .6s ease both;
}
.hero-inner h1 {
  font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 800;
  line-height: 1.15; margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  animation: fadeUp .6s .15s ease both;
}
.hero-inner p {
  font-size: 1.05rem; color: rgba(255,255,255,.85);
  max-width: 600px; margin: 0 auto 2rem;
  line-height: 1.7; animation: fadeUp .6s .3s ease both;
}
.hero-chips {
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: center; animation: fadeUp .6s .45s ease both;
}
.hero-chips span {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9); padding: 5px 14px;
  border-radius: 100px; font-size: .82rem; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.hero-chips span i { color: var(--dorado); }

/* ============================================================
   BARRA FILTROS
   ============================================================ */
.barra-filtros {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky; top: 70px; z-index: 100;
  padding: .9rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.barra-inner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* Search */
.search-wrap {
  position: relative; flex: 1; min-width: 200px; max-width: 300px;
}
.search-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #aaa; font-size: .85rem;
}
.search-input {
  width: 100%; padding: 9px 14px 9px 36px;
  border: 1.5px solid var(--borde); border-radius: 30px;
  font-size: .875rem; font-family: 'Segoe UI', Arial, sans-serif;
  outline: none; transition: all .2s; background: #fff;
}
.search-input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,91,170,.1); }

/* Filtros */
.filtros-wrap { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.filtro-btn {
  padding: 7px 16px; border-radius: 30px; border: 1.5px solid var(--borde);
  background: #fff; color: #555; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  font-family: 'Segoe UI', Arial, sans-serif;
  display: flex; align-items: center; gap: 5px;
}
.filtro-btn:hover { border-color: var(--azul); color: var(--azul); }
.filtro-btn.active { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Orden */
.orden-select {
  padding: 8px 14px; border: 1.5px solid var(--borde); border-radius: 30px;
  font-size: .82rem; font-family: 'Segoe UI', Arial, sans-serif;
  outline: none; background: #fff; cursor: pointer;
  color: #555; transition: border-color .2s;
}
.orden-select:focus { border-color: var(--azul); }

/* ============================================================
   RESULTADOS
   ============================================================ */
.resultados-section { padding: 2.5rem 0 4rem; }
.resultados-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.resultados-header p { font-size: .875rem; color: #666; }
.resultados-header strong { color: var(--azul); }
.vista-btns { display: flex; gap: .4rem; }
.vista-btn {
  width: 34px; height: 34px; border: 1.5px solid var(--borde);
  border-radius: 8px; background: #fff; color: #888;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.vista-btn.active { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ── GRID MODE ─────────────────────────────────────────────── */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.6rem;
  transition: all .3s;
}

/* ── LIST MODE ─────────────────────────────────────────────── */
.cursos-grid.list-mode {
  grid-template-columns: 1fr;
  gap: 1rem;
}
.cursos-grid.list-mode .curso-card {
  flex-direction: row;
  max-height: 180px;
}
.cursos-grid.list-mode .curso-thumb {
  width: 200px; min-width: 200px; height: auto;
  border-radius: var(--radius) 0 0 var(--radius);
}
.cursos-grid.list-mode .curso-body { padding: 1.2rem 1.4rem; }
.cursos-grid.list-mode .curso-desc { display: none; }
.cursos-grid.list-mode .modulos-row { display: none; }

/* ── CARD ────────────────────────────────────────────────────── */
.curso-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
  display: flex; flex-direction: column;
  cursor: pointer;
  opacity: 0; transform: translateY(20px);
}
.curso-card.visible {
  opacity: 1; transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease, box-shadow .3s;
}
.curso-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-h);
}

/* Thumb */
.curso-thumb {
  height: 162px;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; position: relative;
}
.thumb-1 { background: linear-gradient(135deg,#002060,#005baa); }
.thumb-2 { background: linear-gradient(135deg,#1a1a2e,#16213e); }
.thumb-3 { background: linear-gradient(135deg,#0f3443,#2980b9); }
.thumb-4 { background: linear-gradient(135deg,#003d1e,#1a7a45); }
.thumb-5 { background: linear-gradient(135deg,#3d0030,#a01060); }

/* Badges */
.curso-badge-wrap {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.cbadge {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.cbadge-nuevo    { background: var(--dorado);  color: #002060; }
.cbadge-popular  { background: #22c55e;          color: #fff; }
.cbadge-avanzado { background: #8b5cf6;          color: #fff; }
.cbadge-gratis   { background: #ef4444;          color: #fff; }
.cbadge-basico   { background: #06b6d4;          color: #fff; }

.curso-rating {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.5); color: var(--dorado);
  padding: 3px 9px; border-radius: 100px;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; gap: 3px;
}

/* Body */
.curso-body {
  padding: 1.3rem; flex: 1;
  display: flex; flex-direction: column;
}
.curso-cat {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--azul-light); margin-bottom: 5px;
}
.curso-titulo {
  font-size: 1rem; font-weight: 700; color: #002060;
  margin-bottom: .4rem; line-height: 1.35;
}
.curso-desc {
  font-size: .845rem; color: var(--gris);
  line-height: 1.6; margin-bottom: .9rem; flex: 1;
}

/* Meta chips */
.curso-meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .8rem;
}
.meta-chip {
  background: #f0f6ff; color: var(--azul);
  padding: 3px 10px; border-radius: 100px;
  font-size: .72rem; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}

/* Instructor */
.curso-instructor {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: #666; margin-bottom: .9rem;
}
.inst-ava {
  width: 26px; height: 26px; border-radius: 50%;
  background: #e0f0ff; color: var(--azul);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; flex-shrink: 0;
}

/* Módulos inline */
.modulos-row {
  background: #f8faff; border-radius: 8px;
  padding: .6rem .9rem; margin-bottom: .9rem;
  font-size: .78rem; color: #555;
  display: flex; align-items: center; gap: 6px;
}
.modulos-row i { color: var(--azul); }

/* Footer de la card */
.curso-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .9rem; border-top: 1px solid #f0f0f0;
}
.curso-precio {
  font-size: 1.25rem; font-weight: 800; color: var(--azul); line-height: 1;
}
.curso-precio.gratis { color: #16a34a; }
.cert-nota { font-size: .68rem; color: #bbb; margin-top: 2px; }

.btn-ver-detalle {
  padding: 8px 18px; background: var(--dorado); color: var(--azul);
  border: none; border-radius: 20px; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .2s;
  font-family: 'Segoe UI', Arial, sans-serif;
  display: flex; align-items: center; gap: 5px;
}
.btn-ver-detalle:hover { background: var(--dorado-osc); transform: scale(1.04); }
.btn-ver-detalle.inscrito { background: #dcfce7; color: #16a34a; cursor: default; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 4rem 2rem;
  background: rgba(255,255,255,.6); border-radius: var(--radius);
  border: 2px dashed var(--borde);
}
.empty-ico {
  font-size: 3rem; color: #ccc; margin-bottom: 1rem;
}
.empty-state h3 { font-size: 1.25rem; color: #002060; margin-bottom: .5rem; }
.empty-state p  { color: #888; margin-bottom: 1.5rem; font-size: .9rem; }

/* ============================================================
   MOODLE BANNER
   ============================================================ */
.moodle-section { padding: 3rem 0; }
.moodle-card {
  background: #fff; border-radius: 18px;
  padding: 2.5rem; display: flex; align-items: flex-start;
  gap: 2rem; flex-wrap: wrap;
  box-shadow: var(--shadow);
  border-left: 6px solid var(--dorado);
}
.moodle-icon {
  font-size: 2.8rem; color: var(--azul); flex-shrink: 0;
  width: 68px; height: 68px; background: #e0f0ff;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
}
.moodle-info { flex: 1; min-width: 220px; }
.moodle-tag {
  display: inline-block; background: #e0f0ff; color: var(--azul);
  padding: 3px 12px; border-radius: 100px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .6rem;
}
.moodle-info h3 { font-size: 1.15rem; font-weight: 800; color: #002060; margin-bottom: .5rem; }
.moodle-info p  { font-size: .9rem; color: var(--gris); line-height: 1.6; margin-bottom: .75rem; }
.moodle-list { list-style: none; padding: 0; }
.moodle-list li {
  font-size: .85rem; color: #444; padding: 4px 0;
  display: flex; align-items: center; gap: 8px;
}
.moodle-list li i { color: var(--azul); font-size: .75rem; }
.btn-moodle { align-self: center; flex-shrink: 0; }

/* ============================================================
   CTA
   ============================================================ */
.cta-section {
  background: linear-gradient(135deg, #f7d40fee, var(--azul));
  padding: 4rem 1.5rem;
}
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem; color: #fff;
}
.cta-text h2 { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 800; margin-bottom: .5rem; }
.cta-text p  { color: rgba(255,255,255,.8); font-size: .95rem; }
.cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal-box {
  background: #fff; border-radius: 20px;
  max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  transform: scale(.92) translateY(20px);
  transition: transform .3s;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.modal-overlay.open .modal-box { transform: scale(1) translateY(0); }

.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: #f3f4f6; border: none; cursor: pointer;
  font-size: .9rem; color: #666;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 10;
}
.modal-close:hover { background: #e5e7eb; color: #333; }

/* Thumb grande */
.modal-thumb {
  height: 170px; font-size: 4.5rem;
  background: linear-gradient(135deg, #002060, var(--azul));
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0;
}

/* Head */
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem .3rem;
}
.modal-cat {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--azul-light);
}
.modal-rating { font-size: .82rem; color: #777; font-weight: 600; }

.modal-title {
  font-size: 1.3rem; font-weight: 800; color: #002060;
  padding: 0 1.5rem .8rem; line-height: 1.3;
}

/* Precio */
.modal-precio-box {
  background: #f8faff; margin: 0 1.5rem;
  border-radius: 10px; padding: .9rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.modal-precio {
  font-size: 1.8rem; font-weight: 800; color: var(--azul);
}
.modal-cert-precio { font-size: .8rem; color: #888; }

/* Tabs */
.modal-tabs {
  display: flex; border-bottom: 2px solid #f0f0f0;
  padding: 0 1.5rem; gap: .25rem;
}
.modal-tab {
  padding: .6rem 1rem; border: none; background: transparent;
  color: #888; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  font-family: 'Segoe UI', Arial, sans-serif;
  display: flex; align-items: center; gap: 5px;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.modal-tab.active { color: var(--azul); border-bottom-color: var(--azul); }
.modal-tab:hover:not(.active) { color: #555; }

/* Panels */
.modal-tab-panel { display: none; padding: 1.2rem 1.5rem; }
.modal-tab-panel.active { display: block; }

.modal-desc { font-size: .9rem; color: var(--gris); line-height: 1.7; margin-bottom: 1.2rem; }

.modal-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; margin-bottom: 1.2rem;
}
.mmeta-item {
  background: #f4f6f9; border-radius: 8px;
  padding: .6rem .9rem; display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: #444;
}
.mmeta-item i { color: var(--azul); width: 14px; text-align: center; }

.modal-incluye h4 {
  font-size: .9rem; font-weight: 700; color: #002060;
  margin-bottom: .75rem; display: flex; align-items: center; gap: 6px;
}
.modal-incluye ul { list-style: none; padding: 0; }
.modal-incluye ul li {
  font-size: .85rem; color: #444; padding: 5px 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex; align-items: flex-start; gap: 8px;
}
.modal-incluye ul li::before { content:'✓'; color:var(--azul); font-weight:700; flex-shrink:0; }

/* Módulos list */
.modulos-list { display: flex; flex-direction: column; gap: .6rem; }
.modulo-item {
  background: #f8faff; border-radius: 10px; padding: .9rem 1rem;
  display: flex; align-items: flex-start; gap: .75rem;
}
.modulo-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azul); color: #fff;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.modulo-info strong { display: block; font-size: .88rem; color: #002060; margin-bottom: 3px; }
.modulo-info span  { font-size: .76rem; color: #888; }

/* Instructor card */
.instructor-card {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: #f8faff; border-radius: 12px; padding: 1.2rem;
}
.inst-foto {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #002060, var(--azul));
  color: #fff; font-size: 1.4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.inst-info strong { display: block; font-size: 1rem; color: #002060; margin-bottom: 3px; }
.inst-info em     { font-size: .82rem; color: var(--azul); font-style: normal; font-weight: 600; }
.inst-info p      { font-size: .83rem; color: #666; line-height: 1.6; margin-top: 6px; }

/* Footer modal */
.modal-footer {
  padding: 1.2rem 1.5rem 1.5rem;
  border-top: 1px solid #f0f0f0;
}
.modal-secure {
  text-align: center; font-size: .75rem; color: #aaa;
  margin-top: .7rem; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.modal-secure i { color: #22c55e; }

/* ============================================================
   FOOTER — idéntico al sitio original
   ============================================================ */
.footer-empresarial { background: var(--negro); color: #eee; padding: 3rem 1rem 0; }
.footer-container {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; gap: 2rem;
}
.footer-logo-section { flex: 1.5 1 280px; }
.footer-logo { display: flex; align-items: center; gap: .5rem; }
.footer-logo img { height: 45px; }
.footer-logo span { font-size: 1.2rem; font-weight: bold; color: #fff; }
.footer-description { margin-top: 1rem; line-height: 1.6; color: #ccc; font-size: .9rem; }
.footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: #333; border-radius: 50%;
  color: #fff; transition: all .3s; text-decoration: none;
}
.social-icon:hover:nth-child(1){background:#1877f2}
.social-icon:hover:nth-child(2){background:#1da1f2}
.social-icon:hover:nth-child(3){background:linear-gradient(45deg,#f09433,#d62976,#962fbf,#4f5bd5)}
.social-icon:hover { transform: translateY(-3px); }
.footer-links, .footer-contacto { flex: 1 1 180px; }
.footer-links h4, .footer-contacto h4 { font-size: 1.05rem; margin-bottom: .75rem; color: #b0d8ff; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: .4rem; }
.footer-links a { color: #ccc; text-decoration: none; font-size: .9rem; transition: color .2s; }
.footer-links a:hover { color: var(--dorado); }
.footer-contacto p { color: #ccc; margin-bottom: .5rem; font-size: .9rem; }
.footer-contacto p i { color: #b0d8ff; margin-right: 6px; }
.footer-contacto a { color: #b0d8ff; text-decoration: none; }
.footer-contacto a:hover { color: var(--dorado); }
.footer-legal-bar { background: #111; margin-top: 2rem; padding: 1.1rem 0; border-top: 1px solid #333; }
.footer-legal-container {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 1rem; gap: 1rem;
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 2rem; }
.footer-legal-links a { color: #aaa; text-decoration: none; font-size: .85rem; transition: color .2s; }
.footer-legal-links a:hover { color: var(--dorado); }
.footer-copyright { color: #666; font-size: .85rem; }

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cursos-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-btns  { justify-content: center; }
}
@media (max-width: 700px) {
  .barra-inner { flex-direction: column; align-items: stretch; }
  .search-wrap { max-width: 100%; }
  .filtros-wrap { justify-content: flex-start; }
  .orden-select { width: 100%; }
  .cursos-grid { grid-template-columns: 1fr; }
  .cursos-grid.list-mode .curso-card { flex-direction: column; max-height: none; }
  .cursos-grid.list-mode .curso-thumb { width: 100%; height: 150px; border-radius: var(--radius) var(--radius) 0 0; }
  .moodle-card { flex-direction: column; align-items: flex-start; }
  .modal-meta-grid { grid-template-columns: 1fr; }
  .footer-container { flex-direction: column; text-align: center; }
  .footer-logo { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-legal-container { flex-direction: column; text-align: center; }
  .footer-legal-links { gap: 1rem; justify-content: center; }
}
/* ============================================================
   NAV — Campus Virtual FCL
   Reemplaza el header anterior en cursos.html
   ============================================================ */

nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(13, 27, 42, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 215, 0, 0.18);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo img {
  height: 42px;
  border-radius: 7px;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.nav-logo span {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ffd700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Botones derecha */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-nav {
  padding: 8px 20px;
  border: 1.5px solid #ffd700;
  color: #ffd700;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-nav:hover {
  background: #ffd700;
  color: #002060;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-nav-solid {
  padding: 8px 20px;
  background: #ffd700;
  color: #002060;
  border: 1.5px solid #ffd700;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Segoe UI', Arial, sans-serif;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-nav-solid:hover {
  background: #e0c000;
  border-color: #e0c000;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
}

/* Ajuste del body para que el contenido no quede debajo del nav fijo */
body {
  padding-top: 68px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
  nav {
    padding: 0 1rem;
    height: 60px;
  }
  body { padding-top: 60px; }
  .nav-logo img  { height: 34px; }
  .nav-logo span { font-size: 0.85rem; }
  .btn-nav,
  .btn-nav-solid { padding: 7px 14px; font-size: 0.78rem; }
}