/* Aula Virtual CFCL Miguel Paredes
   Paleta institucional: el celeste del logo, el mismo del tríptico y el libro.
   Pensado para celular primero: la mayoría de los alumnos entra desde el teléfono. */

:root{
  --azul:#0C84AC;
  --azul-osc:#402070;
  --vivo:#00A0D0;
  --claro:#BFE6F3;
  --tenue:#E8F6FC;
  --tinta:#1F3744;
  --gris:#5E6E79;
  --linea:#D8E7EE;
  --fondo:#FFFFFF;
  --fondo-2:#F5FBFD;
  --radio:12px;
  --sombra:0 2px 14px rgba(0,160,208,.13);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--tinta); background:var(--fondo);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .4em}
h1{font-size:2rem} h2{font-size:1.45rem} h3{font-size:1.1rem}
p{margin:0 0 1em}

.contenedor{width:100%; max-width:1140px; margin:0 auto; padding:0 18px}
.centrado{text-align:center}
.angosto{max-width:760px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition:.15s; text-align:center;
}
.btn-primario{background:var(--azul); color:#fff}
.btn-primario:hover{background:var(--azul-osc)}
.btn-claro{background:#fff; color:var(--azul); border-color:var(--claro)}
.btn-claro:hover{border-color:var(--vivo)}
.btn-lg{padding:14px 26px; font-size:1rem}
.btn-sm{padding:8px 15px; font-size:.85rem}
.bloque{display:flex; width:100%; margin-bottom:9px}

/* ---------- barra superior ---------- */
.barra-sup{background:var(--azul-osc); color:#fff; font-size:.82rem}
.barra-sup-i{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 18px; flex-wrap:wrap}
.barra-lema{opacity:.9}
.barra-nums{display:flex; gap:7px; flex-wrap:wrap}
.barra-wa{background:rgba(255,255,255,.14); padding:4px 12px; border-radius:999px; font-weight:700; white-space:nowrap}
.barra-wa:hover{background:rgba(255,255,255,.26)}

/* ---------- cabecera ---------- */
.cab{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--linea)}
.cab-i{display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px}
/* El logo ya trae el nombre completo de la institución: no se repite al lado,
   se lo deja respirar y se lo muestra lo bastante grande para que se lea. */
.marca{display:flex; align-items:center; margin-right:auto}
.marca img{height:54px; width:auto; object-fit:contain; background:#fff; border:1px solid var(--linea); border-radius:10px; padding:5px 9px;}
@media(min-width:900px){ .marca img{height:62px} }
.nav{display:none; gap:22px; font-weight:600; font-size:.95rem}
.nav a{padding:6px 0; color:var(--tinta); border-bottom:2px solid transparent}
.nav a:hover{color:var(--azul)}
.nav a.on{color:var(--azul); border-bottom-color:var(--vivo)}
.cab-cta{display:none}
.hamb{display:block; background:none; border:0; font-size:1.5rem; color:var(--azul-osc); cursor:pointer; padding:4px 8px}
.nav-movil{display:none; flex-direction:column; border-top:1px solid var(--linea); background:#fff}
.nav-movil.abierto{display:flex}
.nav-movil a{padding:13px 18px; border-bottom:1px solid var(--linea); font-weight:600}

@media(min-width:900px){
  .nav{display:flex} .cab-cta{display:inline-flex} .hamb{display:none}
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(170deg,var(--tenue) 0%,#fff 100%); padding:44px 0 50px}
.hero-i{display:grid; gap:30px}
.etiqueta{
  display:inline-block; background:#fff; border:1px solid var(--claro); color:var(--azul);
  padding:5px 14px; border-radius:999px; font-size:.78rem; font-weight:700; margin-bottom:14px;
}
.hero h1{font-size:2.1rem; color:var(--azul-osc)}
.hero-bajada{color:var(--gris); font-size:1.05rem; max-width:48ch}
.hero-botones{display:flex; gap:11px; flex-wrap:wrap; margin-top:20px}
.hero-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.hero-nums div{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px 12px; text-align:center; box-shadow:var(--sombra);
}
.hero-nums strong{display:block; font-size:1.5rem; color:var(--azul)}
.hero-nums span{font-size:.76rem; color:var(--gris)}
@media(min-width:900px){
  .hero-i{grid-template-columns:1.35fr .65fr; align-items:center}
  .hero h1{font-size:2.7rem}
  .hero-nums{grid-template-columns:1fr}
}

/* ---------- secciones ---------- */
.seccion{padding:46px 0}
.seccion-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:22px}
.seccion-cab h2{margin:0; color:var(--azul-osc)}
.enlace{color:var(--azul); font-weight:700; font-size:.92rem}
.sub{color:var(--gris); margin-top:-.4em; margin-bottom:1.6em}

/* ---------- grilla de cursos ---------- */
.grilla{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:620px){ .grilla{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .grilla{grid-template-columns:repeat(3,1fr)} }

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s;
}
.tarjeta:hover{box-shadow:var(--sombra); transform:translateY(-3px); border-color:var(--claro)}
.tarjeta-img{position:relative; aspect-ratio:16/10; background:var(--tenue); overflow:hidden}
.tarjeta-img img{width:100%; height:100%; object-fit:cover}
.chip{
  position:absolute; left:10px; top:10px; background:rgba(5,78,109,.92); color:#fff;
  font-size:.7rem; font-weight:700; padding:4px 11px; border-radius:999px;
}
.tarjeta-cuerpo{padding:15px 16px 16px; display:flex; flex-direction:column; flex:1}
.tarjeta-cuerpo h3{color:var(--azul-osc); font-size:1.05rem}
.tarjeta-cuerpo p{color:var(--gris); font-size:.9rem; flex:1}
.tarjeta-datos{display:flex; gap:7px; font-size:.78rem; color:var(--gris); margin-bottom:12px}
.tarjeta-pie{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--linea); padding-top:12px}
.precio{display:block; font-size:1.12rem; font-weight:700; color:var(--azul)}
.tarjeta-pie small{font-size:.72rem; color:var(--gris)}

/* ---------- filtros ---------- */
.filtros{margin-bottom:24px}
.filtros input[type=search]{
  width:100%; max-width:420px; padding:11px 16px; border:1px solid var(--linea);
  border-radius:999px; font:inherit; font-size:.95rem; margin-bottom:14px;
}
.filtros input[type=search]:focus{outline:2px solid var(--vivo); outline-offset:1px; border-color:transparent}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip-f{
  padding:7px 15px; border-radius:999px; border:1px solid var(--linea);
  font-size:.85rem; font-weight:600; color:var(--gris); background:#fff;
}
.chip-f:hover{border-color:var(--vivo); color:var(--azul)}
.chip-f.on{background:var(--azul); border-color:var(--azul); color:#fff}

.vacio{background:var(--fondo-2); border:1px dashed var(--linea); border-radius:var(--radio);
  padding:40px 20px; text-align:center; color:var(--gris)}

/* ---------- franja ---------- */
.franja{background:var(--fondo-2); padding:46px 0}
.franja h2{color:var(--azul-osc); margin-bottom:28px}
.razones{display:grid; gap:18px; grid-template-columns:1fr}
.razones div{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px}
.razones h3{color:var(--azul)}
.razones p{color:var(--gris); font-size:.92rem; margin:0}
@media(min-width:720px){ .razones{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .razones{grid-template-columns:repeat(4,1fr)} }

/* ---------- página de curso ---------- */
.curso-cab{background:linear-gradient(170deg,var(--tenue) 0%,#fff 100%); padding:30px 0 40px}
.curso-cab-i{display:grid; gap:26px}
.volver{display:inline-block; color:var(--azul); font-weight:600; font-size:.88rem; margin-bottom:12px}
.curso-cab h1{color:var(--azul-osc); font-size:1.9rem; margin-top:10px}
.curso-resumen{color:var(--gris); font-size:1.05rem}
.curso-datos{display:flex; gap:26px; margin-top:20px; flex-wrap:wrap}
.curso-datos div{display:flex; flex-direction:column}
.curso-datos strong{font-size:1.25rem; color:var(--azul)}
.curso-datos span{font-size:.78rem; color:var(--gris)}

.caja-precio{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra); align-self:start}
.caja-precio img{aspect-ratio:16/10; object-fit:cover; width:100%}
.caja-precio-i{padding:18px}
.precio-gr{font-size:1.9rem; font-weight:700; color:var(--azul); line-height:1.1}
.precio-gr small{display:block; font-size:.72rem; color:var(--gris); font-weight:400}
.matricula{font-size:.88rem; color:var(--gris); margin:8px 0 16px}
.caja-nota{font-size:.78rem; color:var(--gris); margin:10px 0 0; text-align:center}

.curso-cuerpo{display:grid; gap:30px}
.curso-cuerpo h2{color:var(--azul-osc); font-size:1.25rem; margin-top:1.4em}
.curso-cuerpo h2:first-child{margin-top:0}
.temario{padding-left:1.1em; margin:0 0 1em}
.temario li{margin-bottom:9px}
.temario li::marker{color:var(--vivo); font-weight:700}
.requisitos{padding-left:1.1em; color:var(--gris)}
.cajita{background:var(--tenue); border:1px solid var(--claro); border-radius:var(--radio); padding:20px; position:sticky; top:92px}
.cajita h3{color:var(--azul-osc)}
.cajita p{font-size:.9rem; color:var(--gris)}

@media(min-width:900px){
  .curso-cab-i{grid-template-columns:1.4fr .6fr}
  .curso-cuerpo{grid-template-columns:1.4fr .6fr}
  .curso-cab h1{font-size:2.4rem}
}

/* ---------- contacto ---------- */
.contactos{display:grid; gap:14px; grid-template-columns:1fr}
.contacto{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:18px;
  display:flex; flex-direction:column; gap:3px}
.contacto strong{color:var(--azul-osc)}
.contacto span{font-size:.82rem; color:var(--gris)}
@media(min-width:720px){ .contactos{grid-template-columns:repeat(3,1fr)} }

/* ---------- pie ---------- */
.pie{background:var(--fondo-2); color:var(--tinta); border-top:1px solid var(--linea); margin-top:40px; padding:40px 0 0}
.pie-i{display:grid; gap:26px; grid-template-columns:1fr; padding-bottom:30px}
.pie h4{font-size:.9rem; letter-spacing:.6px; text-transform:uppercase; color:var(--azul); margin-bottom:12px}
.pie a{display:block; color:var(--tinta); font-size:.9rem; padding:4px 0}
.pie a:hover{color:var(--azul)}
.pie-txt{color:var(--gris); font-size:.88rem}
/* El logo es azul oscuro: sobre el pie oscuro necesita su propio fondo claro */
.pie-logo{width:168px; background:#fff; border:1px solid var(--linea); border-radius:10px; padding:9px 12px; margin-bottom:14px}
.pie-legal{border-top:1px solid var(--linea); padding:16px 18px; font-size:.78rem; color:var(--gris)}
@media(min-width:760px){ .pie-i{grid-template-columns:1.4fr .8fr .8fr 1fr} }

/* ---------- WhatsApp flotante ---------- */
.wa-flota{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}
.wa-flota:hover{background:#1da851}

/* ================= página de curso ================= */
.miga{padding:16px 18px 0; font-size:.84rem; color:var(--gris)}
.miga a{color:var(--azul); font-weight:600}
.miga span{margin:0 5px; color:var(--linea)}

.curso{display:grid; gap:26px; grid-template-columns:1fr; padding-top:14px; padding-bottom:40px}
@media(min-width:960px){ .curso{grid-template-columns:1fr 330px; gap:34px; align-items:start} }

.chip-cat{display:inline-block; background:var(--tenue); color:var(--azul); border:1px solid var(--claro);
  font-size:.74rem; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:10px}
.curso-col h1{color:var(--azul-osc); font-size:1.9rem; margin-bottom:14px}
@media(min-width:960px){ .curso-col h1{font-size:2.3rem} }
.curso-col h2{color:var(--azul-osc); font-size:1.35rem; margin:34px 0 6px}
.curso-col h3{color:var(--azul-osc); font-size:1.02rem; margin:20px 0 5px}

.beneficios{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:7px}
.beneficios li{position:relative; padding-left:26px; color:var(--tinta); font-size:.97rem}
.beneficios li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--vivo); font-weight:700}

.datos-fila{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:6px}
.datos-fila span{background:var(--fondo-2); border:1px solid var(--linea); border-radius:999px;
  padding:5px 13px; font-size:.82rem; color:var(--gris); font-weight:600}

.sub-mod{color:var(--gris); font-size:.88rem; margin:0 0 12px}
.indice{border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; background:#fff}
.modulo{border-bottom:1px solid var(--linea)}
.modulo:last-child{border-bottom:0}
.modulo summary{display:flex; align-items:center; gap:11px; padding:13px 15px; cursor:pointer;
  list-style:none; font-weight:600; color:var(--azul-osc); font-size:.95rem}
.modulo summary::-webkit-details-marker{display:none}
.modulo summary:hover{background:var(--tenue)}
.modulo[open] summary{background:var(--tenue)}
.mod-n{flex:none; width:25px; height:25px; border-radius:50%; background:var(--azul); color:#fff;
  font-size:.76rem; display:flex; align-items:center; justify-content:center; font-weight:700}
.mod-t{flex:1}
.mod-meta{flex:none; font-size:.76rem; font-weight:600; color:var(--gris); white-space:nowrap}
.mod-vacio{margin:0; padding:11px 15px 15px 51px; font-size:.87rem; color:var(--gris)}
.lecciones{list-style:none; margin:0; padding:4px 15px 12px 51px}
.lecciones li{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.9rem;
  border-top:1px solid var(--linea)}
.lecciones li:first-child{border-top:0}
.lec-t{flex:1}
.lec-d{color:var(--gris); font-size:.8rem}
.lec-libre{background:var(--tenue); color:var(--azul); font-size:.72rem; font-weight:700;
  padding:2px 9px; border-radius:999px}

.dos-col{display:grid; gap:22px; grid-template-columns:1fr; margin-top:22px}
@media(min-width:700px){ .dos-col{grid-template-columns:1fr 1fr; gap:30px} }
.tildes{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.tildes li{position:relative; padding-left:24px; font-size:.93rem; color:var(--tinta)}
.tildes li::before{content:"✓"; position:absolute; left:0; color:var(--vivo); font-weight:700}

.curso-caja{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra)}
@media(min-width:960px){ .curso-caja{position:sticky; top:96px} }
.curso-caja img{aspect-ratio:16/10; object-fit:cover; width:100%}
.curso-caja-i{padding:17px}
.curso-caja h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.6px; color:var(--azul);
  margin:18px 0 9px; padding-top:14px; border-top:1px solid var(--linea)}
.incluye{list-style:none; padding:0; margin:0; display:grid; gap:7px}
.incluye li{position:relative; padding-left:22px; font-size:.88rem; color:var(--tinta)}
.incluye li::before{content:"✓"; position:absolute; left:0; color:var(--vivo); font-weight:700}
.caja-pie{margin:16px 0 0; padding-top:13px; border-top:1px solid var(--linea);
  font-size:.8rem; color:var(--gris); text-align:center; line-height:1.5}
/* ================= portada ================= */
.hero-i{display:grid; gap:24px; grid-template-columns:1fr; align-items:center}
@media(min-width:1000px){
  .hero-i{grid-template-columns:1fr .85fr .75fr; gap:26px}
}
/* El nombre completo de la institución es largo: el tamaño se achica para que
   entre en pocos renglones y no empuje hacia abajo al resto de la portada. */
.hero-txt h1{font-size:1.7rem; color:var(--azul-osc); line-height:1.2; margin-bottom:18px}
.hero-txt h1 span{color:var(--azul)}
@media(min-width:1000px){ .hero-txt h1{font-size:2rem} }

.hero-tildes{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px}
.hero-tildes li{position:relative; padding-left:32px; font-size:1rem; color:var(--tinta)}
.hero-tildes li::before{
  content:"✓"; position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%; background:var(--vivo); color:#fff;
  font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.hero-prueba{display:flex; flex-wrap:wrap; gap:18px; padding:13px 0; margin-bottom:18px;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.hero-prueba span{font-size:.85rem; color:var(--gris)}
.hero-prueba strong{color:var(--azul); font-size:1.15rem; margin-right:3px}

.hero-foto{display:flex; align-items:center; justify-content:center}
.hero-foto img{border-radius:var(--radio); width:100%; max-height:430px; object-fit:cover; object-position:center top; box-shadow:var(--sombra)}
.foto-pendiente{
  width:100%; min-height:260px; border:2px dashed var(--claro); border-radius:var(--radio);
  background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:26px 20px; text-align:center;
}
.foto-pendiente strong{color:var(--azul); font-size:1rem}
.foto-pendiente span{color:var(--gris); font-size:.84rem; line-height:1.5; max-width:34ch}

.hero-caja{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px; box-shadow:var(--sombra)}
.hero-caja h3{color:var(--azul-osc); font-size:1.08rem}
.hero-caja p{color:var(--gris); font-size:.9rem}
.hero-caja-pie{margin:12px 0 0; font-size:.78rem; text-align:center; color:var(--gris)}
/* ================= docentes ================= */
.grilla-doc{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:620px){ .grilla-doc{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .grilla-doc{grid-template-columns:repeat(3,1fr)} }

.tarjeta-doc{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 20px 22px; text-align:center; display:flex; flex-direction:column;
  align-items:center; transition:.18s; color:inherit; text-decoration:none;
}
.tarjeta-doc:hover{box-shadow:var(--sombra); transform:translateY(-3px); border-color:var(--claro)}

/* El retrato es redondo y siempre del mismo tamaño, venga la foto como venga */
.doc-foto{
  width:118px; height:118px; border-radius:50%; object-fit:cover; object-position:center top;
  border:3px solid var(--tenue); background:var(--tenue); margin-bottom:15px;
}
.doc-foto.sin-foto, .doc-retrato.sin-foto{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--vivo),var(--azul-osc)); border-color:var(--claro);
}
.doc-foto.sin-foto span{color:#fff; font-size:2.1rem; font-weight:700; letter-spacing:1px}

.doc-cuerpo{display:flex; flex-direction:column; gap:5px; align-items:center}
.tarjeta-doc h3{margin:0; color:var(--azul-osc); font-size:1.08rem; line-height:1.3}
.doc-cargo{margin:0; color:var(--azul); font-weight:700; font-size:.86rem}
.doc-esp{margin:0; color:var(--gris); font-size:.88rem; line-height:1.45}
.doc-cursos{
  margin:4px 0 0; font-size:.78rem; color:var(--azul); background:var(--tenue);
  border-radius:999px; padding:4px 13px;
}
.doc-ver{margin-top:11px; font-size:.86rem; font-weight:700; color:var(--vivo)}

/* ---------- perfil de un docente ---------- */
.doc-cab{background:linear-gradient(170deg,var(--tenue) 0%,#fff 100%); padding:30px 0 36px}
.doc-cab-i{display:grid; gap:22px; grid-template-columns:1fr; justify-items:center; text-align:center}
@media(min-width:760px){
  .doc-cab-i{grid-template-columns:190px 1fr; justify-items:start; text-align:left;
             align-items:center; gap:32px}
}
.doc-retrato{
  width:170px; height:170px; border-radius:50%; object-fit:cover; object-position:center top;
  border:4px solid #fff; background:var(--tenue); box-shadow:var(--sombra);
}
.doc-retrato.sin-foto span{color:#fff; font-size:3rem; font-weight:700; letter-spacing:2px}
.doc-cab h1{color:var(--azul-osc); font-size:1.8rem; margin:8px 0 6px}
.doc-cargo-g{margin:0; color:var(--azul); font-weight:700; font-size:1.02rem}
.doc-esp-g{margin:6px 0 0; color:var(--gris); font-size:.95rem}

.doc-detalle h2{color:var(--azul-osc); font-size:1.2rem; margin:30px 0 12px}
.doc-detalle h2:first-child{margin-top:0}
.doc-detalle p{color:var(--tinta); line-height:1.7; max-width:72ch}
.doc-form{margin:0; padding:0; list-style:none; display:grid; gap:9px; max-width:72ch}
.doc-form li{position:relative; padding-left:24px; color:var(--tinta); font-size:.95rem}
.doc-form li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:50%; background:var(--vivo);
}

/* ================= redes sociales ================= */
.barra-redes{display:inline-flex; gap:6px; align-items:center}
.barra-redes a{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.14); color:#fff; transition:.15s;
}
.barra-redes a:hover{background:#fff; color:var(--azul-osc)}

.pie-redes{display:flex; gap:8px; margin-top:12px}
.pie-redes a{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--tenue); color:var(--azul);
  border:1px solid var(--linea); transition:.15s;
}
.pie-redes a:hover{background:var(--azul); color:#fff; border-color:var(--azul)}
.pie-redes svg{width:17px; height:17px}

/* Portada pendiente: el curso ya se puede publicar sin tener la foto lista */
.portada-pendiente{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--claro),var(--vivo));
}
.portada-pendiente span{
  font-size:3.2rem; font-weight:700; color:#fff; opacity:.85; line-height:1;
}
.curso-foto .portada-pendiente{min-height:240px; border-radius:var(--radio)}

/* ================= material descargable ================= */
.materiales{display:grid; gap:8px; margin:14px 0 4px}
.mat-tit{font-size:.74rem; font-weight:700; color:var(--gris);
  text-transform:uppercase; letter-spacing:.4px}
.material{
  display:flex; gap:11px; align-items:center; padding:10px 13px;
  background:var(--tenue); border:1px solid var(--linea); border-radius:9px;
  transition:.15s;
}
.material:hover{border-color:var(--vivo); background:#fff}
.mat-ext{
  font-size:.66rem; font-weight:700; color:#fff; background:var(--azul);
  border-radius:5px; padding:4px 7px; letter-spacing:.3px; flex:none;
}
.mat-nombre{flex:1; font-size:.92rem; color:var(--tinta); word-break:break-word}
.material .mat-peso{font-size:.78rem; color:var(--gris); white-space:nowrap}

/* ================= misión y visión ================= */
.mv{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:800px){ .mv{grid-template-columns:1fr 1fr} }
.mv > div{background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 24px; box-shadow:var(--sombra)}
.mv h2{color:var(--azul); margin-bottom:12px}
.mv p{color:var(--tinta); line-height:1.75; margin:0}

/* ================= galería de eventos ================= */
.galeria{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.foto-evento{
  position:relative; display:block; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea); background:var(--tenue); transition:.18s;
}
.foto-evento:hover{box-shadow:var(--sombra); transform:translateY(-3px); border-color:var(--claro)}
.foto-evento img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.foto-pie{
  position:absolute; left:0; right:0; bottom:0; padding:22px 13px 10px; color:#fff;
  font-size:.86rem; line-height:1.35;
  background:linear-gradient(to top, rgba(10,40,55,.85), rgba(10,40,55,0));
}

/* ================= mapa ================= */
.mapa{
  border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
  margin:16px 0 14px; background:var(--tenue);
}
.mapa iframe{display:block; width:100%; height:330px; border:0}

/* ================= contacto ================= */
.contacto-i{display:grid; gap:34px; grid-template-columns:1fr; margin-top:30px}
@media(min-width:900px){ .contacto-i{grid-template-columns:1.15fr .85fr; gap:46px} }

.form-consulta label{display:block; font-weight:700; font-size:.88rem;
  color:var(--tinta); margin-bottom:15px}
.form-consulta input, .form-consulta select, .form-consulta textarea{
  display:block; width:100%; margin-top:6px; padding:11px 14px; font:inherit; font-size:.95rem;
  border:1px solid var(--linea); border-radius:9px; background:#fff; color:var(--tinta);
  font-weight:400;
}
.form-consulta textarea{resize:vertical; min-height:110px}
.form-consulta input:focus, .form-consulta select:focus, .form-consulta textarea:focus{
  outline:2px solid var(--vivo); outline-offset:1px; border-color:transparent;
}
.dos-campos{display:grid; gap:0 16px; grid-template-columns:1fr}
@media(min-width:540px){ .dos-campos{grid-template-columns:1fr 1fr} }
.form-pie{margin:12px 0 0; font-size:.84rem; color:var(--gris)}

.redes-lista h2{color:var(--azul-osc); font-size:1.2rem; margin-bottom:18px}
.redes-lista a{
  display:flex; gap:9px; align-items:baseline; flex-wrap:wrap;
  padding:11px 0; border-bottom:1px solid var(--linea);
}
.redes-lista a:hover .red-v{text-decoration:underline}
.red-n{font-weight:700; color:var(--tinta); font-size:.92rem}
.red-v{color:var(--azul); font-size:.95rem; word-break:break-word}
.donde{margin-top:24px; background:var(--tenue); border:1px solid var(--linea);
  border-radius:var(--radio); padding:18px 20px}
.donde h3{color:var(--azul); font-size:1rem; margin-bottom:6px}
.donde p{margin:0; color:var(--tinta); font-size:.93rem}

.gracias{
  background:#E3F5E8; border:1px solid #BFE3C9; border-radius:var(--radio);
  padding:22px 24px; margin:22px 0; text-align:center;
}
.gracias strong{display:block; color:#1E6B33; font-size:1.1rem; margin-bottom:7px}
.gracias p{color:#2C6B3D; margin-bottom:16px}

/* ================= apartados del listado de cursos ================= */
.grupo{margin-bottom:46px}
.grupo:last-child{margin-bottom:0}
.grupo h2{
  color:var(--azul-osc); font-size:1.45rem; margin:0 0 4px;
  padding-bottom:9px; border-bottom:2px solid var(--claro);
}
.grupo-bajada{color:var(--gris); font-size:.95rem; margin:10px 0 20px; max-width:70ch}

/* ================= cuentas de alumnos ================= */
.cab-alumno{display:none; align-items:center; gap:11px}
@media(min-width:900px){ .cab-alumno{display:flex} }
.cab-nombre{font-weight:700; color:var(--azul-osc); font-size:.92rem}

.caja-entrar{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:32px 30px; box-shadow:var(--sombra); max-width:420px; margin:0 auto;
}
.form-entrar label{display:block; font-weight:700; font-size:.88rem; margin-bottom:14px; color:var(--tinta)}
.form-entrar input{
  display:block; width:100%; margin-top:6px; padding:12px 14px; font:inherit; font-size:1rem;
  border:1px solid var(--linea); border-radius:9px; background:#fff; font-weight:400;
}
.form-entrar input:focus{outline:2px solid var(--vivo); outline-offset:1px; border-color:transparent}
.entrar-pie{margin:18px 0 0; font-size:.88rem; color:var(--gris); text-align:center}
.entrar-pie a{color:var(--azul); font-weight:600}

.aviso-error{background:#FDECEA; border:1px solid #F5C6C2; color:#9B2C22;
  padding:11px 15px; border-radius:9px; margin-bottom:18px; font-size:.92rem}
.aviso-ok{background:#E3F5E8; border:1px solid #BFE3C9; color:#1E6B33;
  padding:11px 15px; border-radius:9px; margin-bottom:18px; font-size:.92rem}

/* ---------- mis cursos ---------- */
.tarjeta-mio{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s;
}
.tarjeta-mio:hover{box-shadow:var(--sombra); transform:translateY(-3px); border-color:var(--claro)}
.tarjeta-mio.vencido{opacity:.72}
.mio-img{aspect-ratio:16/10; background:var(--tenue); overflow:hidden}
.mio-img img{width:100%; height:100%; object-fit:cover}
.mio-cuerpo{padding:15px 16px 16px; display:flex; flex-direction:column; flex:1}
.mio-cuerpo h3{color:var(--azul-osc); font-size:1.05rem; margin-bottom:4px}
.mio-meta{color:var(--gris); font-size:.84rem; margin:0 0 8px}
.mio-estado{font-size:.86rem; margin:0 0 10px; flex:1}
.mio-estado.ok{color:var(--azul)}
.mio-estado.no{color:#B3261E}
.mio-alerta{color:#B3261E; font-weight:700}
.mio-ver{font-size:.88rem; font-weight:700; color:var(--vivo)}

.mi-cuenta{
  margin-top:46px; padding-top:26px; border-top:1px solid var(--linea); max-width:430px;
}
.mi-cuenta h2{color:var(--azul-osc); font-size:1.15rem}
.mi-cuenta summary{cursor:pointer; color:var(--azul); font-weight:600; font-size:.92rem; padding:6px 0}

/* ---------- franja de acceso en la página del curso ---------- */
.franja-acceso{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 18px; border-radius:var(--radio); margin:16px 0 0; font-size:.94rem;
}
.franja-acceso strong{font-weight:700}
.franja-acceso.ok{background:#E3F5E8; border:1px solid #BFE3C9; color:#1E6B33}
.franja-acceso.vencido{background:#FDECEA; border:1px solid #F5C6C2; color:#9B2C22}
.franja-acceso.neutro{background:var(--tenue); border:1px solid var(--claro); color:var(--azul-osc)}
.franja-acceso .btn{margin-left:auto}

.material-cerrado{
  padding:12px 14px; background:var(--fondo-2); border:1px dashed var(--linea);
  border-radius:9px; color:var(--gris); font-size:.9rem;
}

/* ================= avance del alumno ================= */
.avance{margin:14px 0 0}
.avance-cab{display:flex; justify-content:space-between; align-items:baseline;
  font-size:.88rem; color:var(--gris); margin-bottom:6px}
.avance-cab strong{color:var(--azul-osc)}
.barra{height:9px; background:var(--linea); border-radius:999px; overflow:hidden}
.barra span{display:block; height:100%; background:var(--vivo); border-radius:999px; transition:width .3s}
.avance.chico{margin:0 0 10px}
.avance.chico .barra{height:6px}
.avance-txt{display:block; font-size:.78rem; color:var(--gris); margin-top:5px}

.modulo.hecho > summary .mod-n{background:var(--green-ok, #1E6B33); color:#fff}
.modulo.hecho > summary .mod-t{color:var(--gris)}
.marcar{margin:14px 0 2px}

/* ====== recuadro lateral cuando el alumno ya está cursando ====== */
.caja-alumno{margin-bottom:4px}
.caja-et{
  display:inline-block; background:#E3F5E8; color:#1E6B33; border:1px solid #BFE3C9;
  border-radius:999px; padding:4px 13px; font-size:.78rem; font-weight:700; margin-bottom:12px;
}
.caja-et.vencida{background:#FDECEA; color:#9B2C22; border-color:#F5C6C2}
.caja-avance{margin:0 0 10px; font-size:.95rem; color:var(--tinta)}
.caja-avance strong{color:var(--azul-osc)}