/* ============================================
   COLLADO FORMACIÓN V2 — Sistema de diseño v2 "CINEMA"
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --rojo: #E63946;
  --rojo-oscuro: #C1121F;
  --rojo-claro: #F0616D;
  --rojo-hi: #FF9AA2;
  --navy: #1D3557;
  --navy-claro: #457B9D;
  --celeste: #A8DADC;
  --crema: #F8F9FA;
  --blanco: #FFFFFF;
  --gris: #6C757D;
  --gris-claro: #E9ECEF;
  --verde: #2A9D8F;
  --amarillo: #E9C46A;
  --ng: #0B1626;
  --ng-l: #10203A;
  --sombra: 0 6px 24px rgba(11, 22, 38, 0.09);
  --sombra-hover: 0 22px 50px rgba(11, 22, 38, 0.20);
  --radio: 18px;
  --fuente: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: 'Montserrat', 'Inter', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente); color: var(--navy); background: var(--crema); line-height: 1.7; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); letter-spacing: -0.5px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
::selection { background: var(--rojo); color: #fff; }

/* ---------- Reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.on { opacity: 1; transform: translateY(0); }

/* ---------- Topbar ---------- */
.topbar { background: var(--ng); color: #9fb0c5; font-size: 13px; padding: 8px 0; border-bottom: 1px solid rgba(248,249,250,.06); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar a { color: #fff; }
.topbar a:hover { color: var(--celeste); }

/* ---------- Header / Nav ---------- */
header.site { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(11,22,38,.08); }
header.site .container { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; color: var(--navy); font-family: var(--fuente-titulo); letter-spacing: -0.5px; }
.logo .cruz { width: 40px; height: 40px; background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro)); border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 900; box-shadow: 0 6px 16px rgba(230,57,70,.35); transition: transform .3s ease; }
.logo:hover .cruz { transform: rotate(90deg); }
.logo span b { color: var(--rojo); }
nav.principal { display: flex; align-items: center; gap: 26px; }
nav.principal a { font-weight: 600; font-size: 14.5px; color: var(--navy); padding: 6px 2px; position: relative; transition: .25s; }
nav.principal a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--rojo); border-radius: 2px; transition: width .3s cubic-bezier(.2,.8,.2,1); }
nav.principal a:hover, nav.principal a.activo { color: var(--rojo); }
nav.principal a:hover::after, nav.principal a.activo::after { width: 100%; }
.nav-acciones { display: flex; gap: 10px; align-items: center; }

/* ---------- Botones ---------- */
.btn { position: relative; display: inline-block; padding: 13px 28px; border-radius: 100px; font-weight: 700; font-size: 14px; letter-spacing: .3px; cursor: pointer; border: none; transition: all .35s cubic-bezier(.2,.8,.2,1); font-family: var(--fuente-titulo); text-align: center; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.btn:hover::after { left: 130%; }
.btn-rojo { background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro)); color: #fff; box-shadow: 0 8px 22px rgba(230,57,70,.35); }
.btn-rojo:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(230,57,70,.45); }
.btn-navy { background: linear-gradient(135deg, var(--navy), var(--ng)); color: #fff; box-shadow: 0 8px 22px rgba(29,53,87,.3); }
.btn-navy:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(29,53,87,.4); }
.btn-borde { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-borde:hover { background: var(--navy); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29,53,87,.3); }
.btn-blanco { background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.btn-blanco:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.3); }
.btn-sm { padding: 9px 20px; font-size: 13px; }
.btn-block { display: block; width: 100%; }

/* ---------- Hero cinematográfico ---------- */
.hero { background: var(--ng); color: #fff; padding: 96px 0 110px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(ellipse 800px 600px at 18% 25%, rgba(230,57,70,.32), transparent 60%),
  radial-gradient(ellipse 700px 520px at 85% 80%, rgba(69,123,157,.30), transparent 60%);
  z-index: 0; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(248,249,250,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,249,250,.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, black 25%, transparent 75%); }
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; position: relative; z-index: 2; }
.hero .ekg { position: absolute; bottom: 8%; left: 0; width: 100%; height: 130px; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 150' preserveAspectRatio='none'%3E%3Cpath d='M0,75 L300,75 L320,40 L340,110 L360,20 L380,130 L400,75 L800,75 L820,40 L840,110 L860,20 L880,130 L900,75 L1000,75' stroke='%23FF9AA2' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 1000px 130px;
  filter: drop-shadow(0 0 8px rgba(230,57,70,.8));
  animation: ekgScroll 7s linear infinite; }
@keyframes ekgScroll { from { background-position: 0 0; } to { background-position: 1000px 0; } }
.hero .etiqueta { display: inline-flex; align-items: center; gap: 10px; background: rgba(248,249,250,.06); border: 1px solid rgba(248,249,250,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px 18px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 22px; font-family: var(--fuente-titulo); }
.hero .etiqueta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo-hi); box-shadow: 0 0 12px var(--rojo-hi); animation: parpadeo 1.5s ease-in-out infinite; }
@keyframes parpadeo { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.hero h1 { font-size: clamp(38px, 5vw, 56px); line-height: 1.06; font-weight: 900; letter-spacing: -2px; margin-bottom: 20px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--rojo-hi) 0%, var(--celeste) 50%, var(--rojo-hi) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: brilloTexto 4s linear infinite; }
@keyframes brilloTexto { to { background-position: 200% center; } }
.hero p { font-size: 17.5px; color: rgba(248,249,250,.72); margin-bottom: 30px; max-width: 540px; font-weight: 300; }
.hero p strong, .hero p b { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 38px; margin-top: 44px; flex-wrap: wrap; }
.hero-stats .stat b { font-size: 30px; display: block; color: var(--celeste); font-family: var(--fuente-titulo); font-weight: 900; letter-spacing: -1px; }
.hero-stats .stat span { font-size: 11.5px; color: #8fa3bd; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.hero-tarjeta { background: rgba(255,255,255,.97); color: var(--navy); border-radius: 24px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.45); position: relative; }
.hero-tarjeta::before { content: ''; position: absolute; inset: -2px; border-radius: 26px; background: linear-gradient(135deg, var(--rojo), transparent 30%, transparent 70%, var(--navy-claro)); z-index: -1; opacity: .8; }
.hero-tarjeta h3 { margin-bottom: 14px; font-size: 18px; }
.hero-tarjeta .item { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--gris-claro); font-size: 14px; font-weight: 600; }
.hero-tarjeta .item:last-of-type { border-bottom: none; }
.hero-tarjeta .icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }

/* ---------- Marquesina ---------- */
.marquesina { background: var(--ng); padding: 26px 0; overflow: hidden; border-top: 1px solid rgba(248,249,250,.07); border-bottom: 1px solid rgba(248,249,250,.07); }
.marquesina-track { display: flex; gap: 60px; animation: marq 32s linear infinite; white-space: nowrap; width: max-content; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquesina span { font-family: var(--fuente-titulo); font-size: clamp(20px, 3vw, 34px); font-weight: 900; letter-spacing: 0; color: rgba(248,249,250,.32); text-transform: uppercase; transition: .3s; }
.marquesina span:hover { color: var(--rojo); }
.marquesina span::after { content: '✚'; margin-left: 60px; color: var(--rojo); -webkit-text-stroke: 0; }

/* ---------- Secciones ---------- */
section { padding: 90px 0; }
.seccion-cabecera { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.seccion-cabecera .mini { display: inline-flex; align-items: center; gap: 14px; color: var(--rojo); font-weight: 800; text-transform: uppercase; letter-spacing: 4px; font-size: 11px; font-family: var(--fuente-titulo); }
.seccion-cabecera .mini::before, .seccion-cabecera .mini::after { content: ''; width: 36px; height: 1.5px; background: var(--rojo); }
.seccion-cabecera h2 { font-size: clamp(30px, 4vw, 42px); font-weight: 900; letter-spacing: -1.5px; margin: 12px 0 14px; }
.seccion-cabecera h2 .marc { color: var(--rojo); position: relative; display: inline-block; }
.seccion-cabecera h2 .marc::after { content: ''; position: absolute; bottom: 5px; left: -4px; width: calc(100% + 8px); height: 12px; background: rgba(230,57,70,.16); z-index: -1; border-radius: 2px; transform: skewX(-4deg); }
.seccion-cabecera p { color: var(--gris); font-size: 16.5px; }
.fondo-blanco { background: var(--blanco); }
.fondo-navy { background: var(--ng); color: #fff; position: relative; overflow: hidden; }
.fondo-navy::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(circle at 15% 20%, rgba(230,57,70,.14), transparent 40%),
  radial-gradient(circle at 85% 85%, rgba(69,123,157,.14), transparent 40%); pointer-events: none; }
.fondo-navy .container { position: relative; z-index: 1; }

/* ---------- Grids y tarjetas ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tarjeta { background: #fff; border-radius: var(--radio); padding: 32px; box-shadow: var(--sombra); border: 1px solid rgba(11,22,38,.04); transition: all .4s cubic-bezier(.2,.8,.2,1); position: relative; }
.tarjeta:hover { transform: translateY(-7px); box-shadow: var(--sombra-hover); border-color: rgba(230,57,70,.15); }
.tarjeta .icono-grande { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 27px; margin-bottom: 20px; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tarjeta:hover .icono-grande { transform: scale(1.12) rotate(-6deg); }
.tarjeta h3 { font-size: 19px; margin-bottom: 10px; font-weight: 800; }
.tarjeta p { color: var(--gris); font-size: 14.5px; }
.ic-rojo { background: linear-gradient(135deg, #fde8ea, #fbd3d7); color: var(--rojo); }
.ic-azul { background: linear-gradient(135deg, #e3f0f7, #cfe3f0); color: var(--navy-claro); }
.ic-verde { background: linear-gradient(135deg, #e2f3f1, #cdeae6); color: var(--verde); }
.ic-amarillo { background: linear-gradient(135deg, #fbf3dd, #f6e8c2); color: #b7841a; }

/* ---------- Tarjeta de curso ---------- */
.curso-card { background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); border: 1px solid rgba(11,22,38,.04); transition: all .4s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; position: relative; }
.curso-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(11,22,38,.22); }
.curso-portada { height: 155px; display: grid; place-items: center; font-size: 56px; color: #fff; position: relative; overflow: hidden; }
.curso-portada::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.22), transparent 55%); }
.curso-portada::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .8s ease; }
.curso-card:hover .curso-portada::after { left: 150%; }
.curso-portada > * { position: relative; z-index: 1; }
.curso-portada .tag { position: absolute; top: 13px; left: 13px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 5px 13px; border-radius: 100px; font-family: var(--fuente-titulo); z-index: 2; }
.curso-cuerpo { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.curso-cuerpo h3 { font-size: 18px; margin-bottom: 8px; font-weight: 800; }
.curso-cuerpo .meta { display: flex; gap: 14px; color: var(--gris); font-size: 12.5px; margin-bottom: 10px; flex-wrap: wrap; }
.curso-cuerpo p { color: var(--gris); font-size: 14px; flex: 1; }
.curso-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gris-claro); }
.precio { font-size: 25px; font-weight: 900; color: var(--navy); font-family: var(--fuente-titulo); letter-spacing: -1px; }
.precio small { font-size: 13px; color: var(--gris); font-weight: 500; }

/* ---------- Precios / suscripción ---------- */
.plan { background: #fff; border-radius: 22px; padding: 38px; box-shadow: var(--sombra); text-align: center; position: relative; border: 2px solid transparent; transition: all .4s cubic-bezier(.2,.8,.2,1); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.plan.destacado { border-color: var(--rojo); transform: scale(1.04); box-shadow: 0 24px 60px rgba(230,57,70,.22); }
.plan.destacado:hover { transform: scale(1.04) translateY(-6px); }
.plan .badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro)); color: #fff; padding: 6px 20px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: 2px; font-family: var(--fuente-titulo); box-shadow: 0 8px 20px rgba(230,57,70,.4); }
.plan h3 { font-size: 20px; margin-bottom: 6px; font-weight: 800; }
.plan .plan-precio { font-size: 48px; font-weight: 900; color: var(--navy); margin: 16px 0 4px; font-family: var(--fuente-titulo); letter-spacing: -2px; }
.plan .plan-precio small { font-size: 16px; color: var(--gris); font-weight: 500; letter-spacing: 0; }
.plan ul { list-style: none; text-align: left; margin: 24px 0 28px; }
.plan ul li { padding: 9px 0; border-bottom: 1px solid var(--gris-claro); font-size: 14.5px; color: #3d5570; }
.plan ul li::before { content: '✓ '; color: var(--verde); font-weight: 800; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 7px; }
.campo input, .campo textarea, .campo select { width: 100%; padding: 13px 17px; border: 2px solid var(--gris-claro); border-radius: 12px; font-family: var(--fuente); font-size: 15px; transition: .25s; background: #fff; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(230,57,70,.10); }

/* ---------- Footer ---------- */
footer.site { background: var(--ng); color: #9fb0c5; padding: 64px 0 26px; position: relative; overflow: hidden; }
footer.site::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 180px; height: 2px; background: linear-gradient(90deg, transparent, var(--rojo), var(--navy-claro), transparent); }
footer.site .grid-4 { margin-bottom: 40px; }
footer.site h4 { color: #fff; font-size: 15px; margin-bottom: 16px; letter-spacing: .5px; }
footer.site a { display: block; padding: 5px 0; font-size: 14px; transition: .25s; }
footer.site a:hover { color: var(--celeste); padding-left: 5px; }
.footer-legal { border-top: 1px solid rgba(248,249,250,.1); padding-top: 22px; text-align: center; font-size: 13px; }

/* ---------- Intranet ---------- */
.intranet-layout { display: grid; grid-template-columns: 256px 1fr; min-height: calc(100vh - 74px); }
.sidebar { background: linear-gradient(180deg, var(--ng), var(--ng-l)); color: #9fb0c5; padding: 28px 0; }
.sidebar a { display: flex; align-items: center; gap: 12px; padding: 13px 26px; font-size: 14.5px; font-weight: 600; border-left: 3px solid transparent; transition: .25s; }
.sidebar a:hover, .sidebar a.activo { background: rgba(248,249,250,.06); color: #fff; border-left-color: var(--rojo); }
.sidebar .sep { margin: 18px 26px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px; color: #5c7089; font-family: var(--fuente-titulo); font-weight: 700; }
.panel-contenido { padding: 38px; }
.panel-contenido h1 { font-size: 27px; margin-bottom: 6px; font-weight: 900; letter-spacing: -1px; }
.panel-contenido .sub { color: var(--gris); margin-bottom: 28px; }
.stat-card { background: #fff; border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); border: 1px solid rgba(11,22,38,.04); display: flex; align-items: center; gap: 16px; transition: all .35s cubic-bezier(.2,.8,.2,1); }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.stat-card .num { font-size: 30px; font-weight: 900; font-family: var(--fuente-titulo); letter-spacing: -1px; }
.stat-card .lbl { font-size: 12.5px; color: var(--gris); }

/* ---------- Progreso ---------- */
.barra-progreso { background: var(--gris-claro); border-radius: 100px; height: 9px; overflow: hidden; }
.barra-progreso > div { height: 100%; background: linear-gradient(90deg, var(--rojo), var(--rojo-claro)); border-radius: 100px; transition: width .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 8px rgba(230,57,70,.5); }
.barra-progreso.verde > div { background: linear-gradient(90deg, var(--verde), #43c4b5); box-shadow: 0 0 8px rgba(42,157,143,.5); }

/* ---------- Tablas ---------- */
table.datos { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
table.datos th { background: linear-gradient(135deg, var(--navy), var(--ng)); color: #fff; text-align: left; padding: 14px 18px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--fuente-titulo); }
table.datos td { padding: 15px 18px; border-bottom: 1px solid var(--gris-claro); font-size: 14.5px; }
table.datos tr:last-child td { border-bottom: none; }
table.datos tbody tr { transition: background .2s; }
table.datos tr:hover td { background: #fbfcfd; }
.chip { display: inline-block; padding: 4px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.chip-verde { background: #e2f3f1; color: var(--verde); }
.chip-amarillo { background: #fbf3dd; color: #9a6e12; }
.chip-rojo { background: #fde8ea; color: var(--rojo); }
.chip-azul { background: #e3f0f7; color: var(--navy-claro); }

/* ---------- Reproductor / lección ---------- */
.leccion-layout { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.video-marco { background: var(--ng); border-radius: var(--radio); aspect-ratio: 16/9; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(11,22,38,.35); }
.video-marco::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(circle at 25% 25%, rgba(230,57,70,.18), transparent 50%),
  radial-gradient(circle at 80% 80%, rgba(69,123,157,.18), transparent 50%); }
.video-marco > * { position: relative; z-index: 1; }
.video-marco .play { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro)); display: grid; place-items: center; font-size: 30px; cursor: pointer; transition: .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 0 14px rgba(230,57,70,.22), 0 12px 30px rgba(0,0,0,.4); }
.video-marco .play:hover { transform: scale(1.12); box-shadow: 0 0 0 20px rgba(230,57,70,.15), 0 16px 40px rgba(0,0,0,.5); }
.temario { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; border: 1px solid rgba(11,22,38,.04); }
.temario h3 { padding: 18px 22px; background: linear-gradient(135deg, var(--navy), var(--ng)); color: #fff; font-size: 15px; letter-spacing: .3px; }
.temario .leccion-item { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--gris-claro); font-size: 14px; cursor: pointer; transition: .2s; }
.temario .leccion-item:hover { background: var(--crema); padding-left: 26px; }
.temario .leccion-item.actual { background: #fde8ea; border-left: 3px solid var(--rojo); font-weight: 700; }
.temario .leccion-item .estado { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; background: var(--gris-claro); color: var(--gris); font-weight: 700; }
.temario .leccion-item .estado.hecho { background: var(--verde); color: #fff; box-shadow: 0 0 10px rgba(42,157,143,.4); }
.temario .leccion-item .dur { margin-left: auto; color: var(--gris); font-size: 12px; font-family: 'Space Grotesk', monospace; }

/* ---------- Quiz ---------- */
.quiz-opcion { display: block; padding: 14px 18px; border: 2px solid var(--gris-claro); border-radius: 12px; margin-bottom: 10px; cursor: pointer; font-size: 15px; transition: .2s; background: #fff; }
.quiz-opcion:hover { border-color: var(--navy-claro); transform: translateX(4px); }
.quiz-opcion.sel { border-color: var(--navy); background: #eef4f9; font-weight: 600; }
.quiz-opcion.ok { border-color: var(--verde); background: #e2f3f1; }
.quiz-opcion.mal { border-color: var(--rojo); background: #fde8ea; }

/* ---------- Certificado ---------- */
.certificado { background: #fff; border: 10px double var(--navy); border-radius: 6px; padding: 54px; text-align: center; max-width: 720px; margin: 0 auto; box-shadow: 0 30px 70px rgba(11,22,38,.18); position: relative; }
.certificado::before { content: '✚'; position: absolute; top: 18px; left: 22px; color: rgba(230,57,70,.12); font-size: 30px; }
.certificado::after { content: '✚'; position: absolute; bottom: 18px; right: 22px; color: rgba(230,57,70,.12); font-size: 30px; }
.certificado .sello { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--rojo), var(--rojo-oscuro)); color: #fff; display: grid; place-items: center; font-size: 36px; margin: 0 auto 18px; box-shadow: 0 10px 26px rgba(230,57,70,.4); }
.certificado h2 { font-size: 30px; letter-spacing: 3px; font-weight: 900; }
.certificado .alumno { font-size: 27px; font-weight: 800; color: var(--rojo); margin: 14px 0; border-bottom: 2px solid var(--gris-claro); display: inline-block; padding: 0 30px 6px; font-family: var(--fuente-titulo); }

/* ---------- Modal ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(11,22,38,.75); backdrop-filter: blur(6px); display: none; place-items: center; z-index: 300; padding: 20px; }
.modal-fondo.abierto { display: grid; }
.modal { background: #fff; border-radius: 22px; padding: 36px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.modal h2 { margin-bottom: 8px; }

/* ---------- Aviso demo ---------- */
.aviso-demo { background: linear-gradient(90deg, var(--amarillo), #f0d489); color: #5c470e; text-align: center; font-size: 12.5px; font-weight: 600; padding: 7px 14px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--crema); }
::-webkit-scrollbar-thumb { background: #c3ccd6; border-radius: 100px; border: 3px solid var(--crema); }
::-webkit-scrollbar-thumb:hover { background: var(--rojo); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .container, .grid-3, .grid-4, .grid-2, .leccion-layout { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  nav.principal { display: none; }
  .intranet-layout { grid-template-columns: 1fr; }
  .sidebar { display: flex; overflow-x: auto; padding: 0; }
  .sidebar a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .sidebar .sep { display: none; }
  .plan.destacado { transform: none; }
  .plan.destacado:hover { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  header.site, .topbar, footer.site, .sidebar, .no-print, .aviso-demo { display: none !important; }
  .panel-contenido { padding: 0; }
  body { background: #fff; }
  .rv { opacity: 1 !important; transform: none !important; }
}