/* ────────────────────────────────────────────────────────────────────────
   CREÁ TU CURSO CON EDUCREIA  ·  capa 3 (pantalla)
   educreia.com/crea-tu-curso — landing del ciclo de 3 encuentros en vivo y
   gratis. Reusa el look de la landing (body.mk.calm, .mk-nav, .mk-footer,
   .btn-*), el de la presentación (cabecera con --calm-hero, títulos en
   --calm-serif) y el CTA de cierre del blog (.art-cta, en blog.css).
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --ctc-max:      64rem;     /* ancho del contenido                          */
  --ctc-lead:     44rem;     /* ancho de bajadas y párrafos                  */
  --ctc-card-min: 17rem;     /* ancho mínimo de una tarjeta antes de apilar  */
  --ctc-fecha:    5.25rem;   /* lado de cada "hoja de calendario"            */
  --ctc-tick:     1.25rem;   /* tilde de las listas                          */
  --ctc-borde:    1px solid var(--navy-100);
  --ctc-barra-h:  calc(var(--ctl-h) + var(--sp-3) * 2);   /* barra fija del celular */
}

body.ctc-page{ background:var(--bg-1); }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.ctc-hero{
  background:var(--calm-hero);
  padding:var(--sp-8) var(--sp-5) var(--sp-8);
}
.ctc-in{ max-width:var(--ctc-max); margin:0 auto; text-align:center; }
.ctc-kicker{
  display:inline-block;
  font-size:var(--fs-12);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--teal-700);
  margin-bottom:var(--sp-3);
}
.ctc-hero .edu-display{ font-size:var(--fs-56); color:var(--navy-800); margin:0 0 var(--sp-4); }
.ctc-hero .edu-display em{ display:block; color:var(--teal-500); font-style:italic; font-weight:500; }
.ctc-lead{
  font-size:var(--fs-18);
  color:var(--navy-600);
  max-width:var(--ctc-lead);
  margin:0 auto var(--sp-6);
}

/* Las tres fechas como hojitas de calendario */
.ctc-fechas{
  list-style:none;
  margin:0 0 var(--sp-3);
  padding:0;
  display:flex;
  justify-content:center;
  gap:var(--sp-3);
}
.ctc-fechas li{
  width:var(--ctc-fecha);
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--bg-1);
  border:var(--ctc-borde);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.ctc-fecha-d{
  align-self:stretch;
  background:var(--brand-gradient-control);
  color:#fff;
  font-size:var(--fs-12);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:var(--sp-1) 0;
}
.ctc-fechas strong{
  font-size:var(--fs-32);
  font-weight:900;
  color:var(--navy-800);
  line-height:1.1;
  padding-top:var(--sp-2);
}
.ctc-fecha-m{
  font-size:var(--fs-13);
  font-weight:700;
  color:var(--navy-500);
  padding-bottom:var(--sp-2);
}
.ctc-hora{
  font-size:var(--fs-15);
  color:var(--navy-600);
  margin:0 0 var(--sp-6);
}
.ctc-hora strong{ color:var(--navy-800); }
.ctc-hora-local{
  display:block;
  margin-top:var(--sp-1);
  font-weight:800;
  color:var(--teal-700);
}
.ctc-hora-local[hidden]{ display:none; }
.ctc-nota{
  font-size:var(--fs-14);
  color:var(--navy-500);
  max-width:var(--ctc-lead);
  margin:var(--sp-4) auto 0;
}

/* ── Cuatro datos del formato ──────────────────────────────────────────── */
.ctc-datos{
  max-width:var(--ctc-max);
  margin:calc(var(--sp-7) * -1) auto 0;
  padding:0 var(--sp-5);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-3);
  position:relative;
}
.ctc-dato{
  background:var(--bg-1);
  border:var(--ctc-borde);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:var(--sp-4) var(--sp-4) var(--sp-5);
  text-align:center;
}
.ctc-dato strong{
  display:block;
  font-size:var(--fs-32);
  font-weight:900;
  color:var(--teal-600);
  line-height:1.15;
  margin-bottom:var(--sp-1);
}
.ctc-dato span{ font-size:var(--fs-14); color:var(--navy-600); }

/* ── Secciones ─────────────────────────────────────────────────────────── */
.ctc-sec{
  max-width:var(--ctc-max);
  margin:0 auto;
  padding:var(--sp-8) var(--sp-5) 0;
}
/* La sección "suave" va de borde a borde: el fondo se estira, el contenido no */
.ctc-sec--soft{
  max-width:none;
  background:var(--calm-sky);
  margin-top:var(--sp-8);
  padding-bottom:var(--sp-8);
}
.ctc-sec--soft > *{ max-width:var(--ctc-max); margin-inline:auto; }
.ctc-sec--soft + .ctc-sec{ padding-top:var(--sp-8); }

.ctc-h2{
  font-family:var(--calm-serif);
  font-weight:600;
  font-size:var(--fs-40);
  line-height:1.15;
  color:var(--navy-800);
  text-align:center;
  margin:0 0 var(--sp-3);
}
.ctc-h2 em{ color:var(--teal-500); font-style:italic; font-weight:500; }
.ctc-h2--izq{ text-align:left; }
.ctc-sub{
  font-size:var(--fs-16);
  color:var(--navy-600);
  text-align:center;
  max-width:var(--ctc-lead);
  margin:0 auto var(--sp-6);
}
.ctc-sub--izq{ text-align:left; margin-inline:0; }

/* Lista con tilde (programa y experiencia) */
.ctc-tildes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.ctc-tildes li{
  position:relative;
  padding-left:calc(var(--ctc-tick) + var(--sp-3));
  font-size:var(--fs-15);
  color:var(--navy-700);
}
.ctc-tildes li::before{
  content:"";
  position:absolute;
  left:0;
  top:var(--sp-1);
  width:var(--ctc-tick);
  height:var(--ctc-tick);
  border-radius:var(--r-pill);
  background:var(--teal-050);
  box-shadow:inset 0 0 0 2px var(--teal-600);
}
.ctc-tildes li::after{
  content:"";
  position:absolute;
  left:calc(var(--ctc-tick) * .3);
  top:calc(var(--sp-1) + var(--ctc-tick) * .3);
  width:calc(var(--ctc-tick) * .4);
  height:calc(var(--ctc-tick) * .22);
  border-left:2px solid var(--teal-600);
  border-bottom:2px solid var(--teal-600);
  transform:rotate(-45deg);
}
.ctc-tildes--grande li{ font-size:var(--fs-16); }

/* ── Programa: tres tarjetas + el extra ────────────────────────────────── */
.ctc-encs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--ctc-card-min), 1fr));
  gap:var(--sp-4);
}
.ctc-enc{
  display:flex;
  flex-direction:column;
  background:var(--bg-1);
  border:var(--ctc-borde);
  border-top:4px solid var(--teal-500);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-5);
}
.ctc-enc-n{
  font-size:var(--fs-12);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--teal-700);
  margin:0 0 var(--sp-2);
}
.ctc-enc h3{
  font-size:var(--fs-24);
  font-weight:800;
  color:var(--navy-800);
  line-height:1.2;
  margin:0 0 var(--sp-4);
}
.ctc-enc .ctc-tildes{ flex:1; }
.ctc-enc-lleva{
  margin:var(--sp-5) 0 0;
  padding:var(--sp-3) var(--sp-4);
  background:var(--teal-050);
  border-radius:var(--r-md);
  font-size:var(--fs-14);
  font-weight:700;
  color:var(--navy-800);
}
.ctc-enc-lleva span{
  display:block;
  font-size:var(--fs-11);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--teal-700);
  margin-bottom:var(--sp-1);
}

.ctc-extra{
  margin-top:var(--sp-4);
  padding:var(--sp-5);
  border:2px dashed var(--teal-300);
  border-radius:var(--r-lg);
  background:var(--teal-050);
  text-align:center;
}
.ctc-extra-tag{
  display:inline-block;
  font-size:var(--fs-12);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  background:var(--teal-600);
  border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-3);
}
.ctc-extra h3{ font-size:var(--fs-24); font-weight:800; color:var(--navy-800); margin:var(--sp-3) 0 var(--sp-2); }
.ctc-extra p{ font-size:var(--fs-15); color:var(--navy-600); max-width:var(--ctc-lead); margin:0 auto; }

/* ── La experiencia: texto + lista ─────────────────────────────────────── */
.ctc-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-7);
  align-items:center;
}
.ctc-split .ctc-sub{ margin-bottom:0; }
.ctc-split .ctc-tildes{
  background:var(--bg-1);
  border:var(--ctc-borde);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-5);
}

/* ── Para quién ────────────────────────────────────────────────────────── */
.ctc-quien{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--ctc-card-min), 1fr));
  gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.ctc-quien-c{
  background:var(--bg-2);
  border:var(--ctc-borde);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
}
.ctc-quien-c p{ font-size:var(--fs-16); color:var(--navy-700); margin:0; }
.ctc-quien-c strong{ color:var(--navy-800); }

/* ── Quién lo da ───────────────────────────────────────────────────────── */
.ctc-host{ text-align:center; }
.ctc-host p{
  font-size:var(--fs-16);
  color:var(--navy-600);
  max-width:var(--ctc-lead);
  margin:0 auto;
}

/* ── Preguntas ─────────────────────────────────────────────────────────── */
.ctc-faq{
  max-width:var(--ctc-lead);
  margin:var(--sp-5) auto 0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.ctc-faq details{
  background:var(--bg-1);
  border:var(--ctc-borde);
  border-radius:var(--r-md);
}
.ctc-faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-16);
  font-weight:800;
  color:var(--navy-800);
}
.ctc-faq summary::-webkit-details-marker{ display:none; }
.ctc-faq summary::after{
  content:"+";
  flex:none;
  font-size:var(--fs-24);
  font-weight:500;
  line-height:1;
  color:var(--teal-600);
  transition:transform var(--t-fast) var(--ease-out);
}
.ctc-faq details[open] summary::after{ transform:rotate(45deg); }
.ctc-faq summary:focus-visible{ outline:3px solid var(--teal-300); outline-offset:-3px; border-radius:var(--r-md); }
.ctc-faq details p{
  margin:0;
  padding:0 var(--sp-5) var(--sp-4);
  font-size:var(--fs-15);
  color:var(--navy-600);
}

/* ── Barra fija del celular (solo ≤720px) ──────────────────────────────── */
.ctc-barra{ display:none; }

/* ── Móvil ─────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .ctc-datos{ grid-template-columns:repeat(2, 1fr); }
  .ctc-split{ grid-template-columns:1fr; gap:var(--sp-5); }
}
@media (max-width:720px){
  .ctc-hero{ padding:var(--sp-6) var(--sp-4) var(--sp-8); }
  .ctc-hero .edu-display{ font-size:var(--fs-40); }
  .ctc-lead{ font-size:var(--fs-16); margin-bottom:var(--sp-5); }
  .ctc-hora{ font-size:var(--fs-14); }
  .ctc-datos{ padding:0 var(--sp-4); gap:var(--sp-2); }
  .ctc-dato{ padding:var(--sp-3) var(--sp-3) var(--sp-4); }
  .ctc-dato strong{ font-size:var(--fs-24); }
  .ctc-dato span{ font-size:var(--fs-13); }
  .ctc-sec{ padding:var(--sp-7) var(--sp-4) 0; }
  .ctc-sec--soft{ margin-top:var(--sp-7); padding-bottom:var(--sp-7); }
  .ctc-sec--soft + .ctc-sec{ padding-top:var(--sp-7); }
  .ctc-h2{ font-size:var(--fs-32); }
  .ctc-sub{ font-size:var(--fs-15); margin-bottom:var(--sp-5); }
  .ctc-enc,
  .ctc-extra,
  .ctc-quien-c,
  .ctc-split .ctc-tildes{ padding:var(--sp-4); }
  .ctc-enc h3,
  .ctc-extra h3{ font-size:var(--fs-20); }
  .ctc-faq summary{ padding:var(--sp-3) var(--sp-4); font-size:var(--fs-15); }
  .ctc-faq details p{ padding:0 var(--sp-4) var(--sp-3); }
  /* el CTA del blog va de borde a borde en móvil: acá con el mismo margen que el resto */
  .ctc-page .art-cta{ margin-inline:var(--sp-4); }

  /* Botón siempre a mano: barra fija abajo; el pie le deja lugar para no taparse */
  .ctc-barra{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    padding:var(--sp-3) var(--sp-4);
    background:var(--bg-1);
    border-top:var(--ctc-borde);
    box-shadow:var(--shadow-lg);
    transition:transform var(--t-base) var(--ease-out);
  }
  .ctc-barra.is-off{ transform:translateY(100%); box-shadow:none; }
  .ctc-barra .btn{ flex:1; justify-content:center; }
  body.ctc-page{ padding-bottom:var(--ctc-barra-h); }
}