/* ────────────────────────────────────────────────────────────────────────
   PRESENTACIÓN DE EDUCREIA  ·  capa 3 (pantalla)
   educreia.com/presentacion-educreia — la grabación de la presentación en
   vivo de la plataforma. Reusa el look de la landing (body.mk.calm, .mk-nav,
   .mk-footer, .btn-*) y el CTA de cierre del blog (.art-cta, en blog.css).

   El video vive en la library PÚBLICA de Educreia en Bunny (sin token). La
   portada es CSS puro: el reproductor de Bunny recién se carga al tocar play,
   así la página no paga su peso al abrir.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --pres-max:   64rem;           /* ancho de la cabecera, el video y la agenda   */
  --pres-lead:  46rem;           /* ancho de la bajada                            */
  --pres-ratio: 1710 / 1074;     /* proporción de la grabación (pantalla de Zoom) */
  --pres-play:  5.5rem;          /* diámetro del botón de play                    */
  --pres-logo:  15rem;           /* ancho del logo en la portada                  */
  --pres-num:   1.75rem;         /* círculo con el número de la agenda            */
  --pres-tick:  1.25rem;         /* tilde de "incluido" en tablas y listas        */
  --pres-cover: radial-gradient(120% 90% at 50% 0%, var(--navy-700) 0%, var(--navy-900) 70%);
  --pres-dur-bg: rgba(5, 14, 30, .6);
}

body.pres-page{ background:var(--bg-2); }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.pres-hero{
  background:var(--calm-hero);
  padding:var(--sp-8) var(--sp-5) var(--sp-7);
}
.pres-in{ max-width:var(--pres-max); margin:0 auto; text-align:center; }
.pres-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);
}
.pres-hero .edu-display{ font-size:var(--fs-48); color:var(--navy-800); margin:0 0 var(--sp-4); }
.pres-hero .edu-display em{ color:var(--teal-500); font-style:italic; font-weight:500; }
.pres-lead{
  font-size:var(--fs-18);
  color:var(--navy-600);
  max-width:var(--pres-lead);
  margin:0 auto var(--sp-6);
}

/* ── Video: portada → reproductor ──────────────────────────────────────── */
.pres-video{
  position:relative;
  aspect-ratio:var(--pres-ratio);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--navy-900);
  box-shadow:var(--shadow-xl);
}
.pres-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* La portada es un <button>: se pisa todo lo que trae el botón global
   (padding, margen, radio, fondo). Su hover azul es solo para botones sin clase. */
.pres-play{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:var(--sp-5);
  border:0;
  border-radius:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  background:var(--pres-cover);
  color:var(--navy-100);
  font:inherit;
  cursor:pointer;
}
.pres-play:focus-visible{ outline:3px solid var(--teal-300); outline-offset:-3px; }
.pres-cover-logo{ width:var(--pres-logo); max-width:60%; height:auto; }
.pres-cover-t{ font-size:var(--fs-20); color:var(--navy-100); }
.pres-cover-t em{ color:var(--teal-300); font-style:italic; }
.pres-play-ic{
  width:var(--pres-play);
  height:var(--pres-play);
  border-radius:var(--r-pill);
  display:grid;
  place-items:center;
  background:var(--brand-gradient-control);
  box-shadow:var(--shadow-accent);
  transition:transform var(--t-base) var(--ease-out);
}
.pres-play-ic svg{ width:40%; height:40%; fill:#fff; margin-left:8%; }
.pres-play:hover .pres-play-ic{ transform:scale(1.06); }
.pres-dur{
  position:absolute;
  right:var(--sp-4);
  bottom:var(--sp-4);
  font-size:var(--fs-13);
  font-weight:700;
  color:#fff;
  background:var(--pres-dur-bg);
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-pill);
}

/* ── Agenda: lo que se ve en la grabación ──────────────────────────────── */
.pres-agenda{
  max-width:var(--pres-max);
  margin:0 auto;
  padding:var(--sp-7) var(--sp-5) 0;
}
.pres-agenda h2{
  font-family:var(--calm-serif);
  font-weight:600;
  font-size:var(--fs-32);
  color:var(--navy-800);
  text-align:center;
  margin:0 0 var(--sp-5);
}
/* Dos columnas que se leen hacia abajo (1–5 | 6–10), como en la diapositiva */
.pres-list{
  list-style:none;
  counter-reset:pres;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(5, auto);
  grid-auto-flow:column;
  gap:var(--sp-3) var(--sp-5);
}
.pres-list li{
  counter-increment:pres;
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--fs-16);
  color:var(--navy-700);
  background:var(--bg-1);
  border:1px solid var(--navy-100);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
}
.pres-list li::before{
  content:counter(pres);
  flex:none;
  width:var(--pres-num);
  height:var(--pres-num);
  border-radius:var(--r-pill);
  display:grid;
  place-items:center;
  background:var(--teal-600);
  color:#fff;
  font-size:var(--fs-12);
  font-weight:800;
}
.pres-list strong{ color:var(--navy-800); }

/* ── Planes: tabla comparativa (la de la diapositiva) ──────────────────── */
.pres-planes{
  max-width:var(--pres-max);
  margin:0 auto;
  padding:var(--sp-8) var(--sp-5) 0;
}
.pres-planes h2,
.pres-fund h2{
  font-family:var(--calm-serif);
  font-weight:600;
  font-size:var(--fs-32);
  color:var(--navy-800);
  margin:0 0 var(--sp-5);
}
.pres-planes h2{ text-align:center; }
.pres-planes h2 em,
.pres-fund h2 em{ color:var(--teal-500); font-style:italic; font-weight:500; }

/* Por si en un teléfono chico no entra: la tabla se corre adentro, nunca la página */
.pres-tabla-wrap{
  overflow-x:auto;
  background:var(--bg-1);
  border:1px solid var(--navy-100);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-4) var(--sp-5);
}
.pres-tabla{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--fs-15);
  color:var(--navy-700);
}
.pres-tabla th,
.pres-tabla td{
  padding:var(--sp-2) var(--sp-4);
  text-align:center;
  border-bottom:1px solid var(--navy-050);
  line-height:1.25;
}
.pres-tabla tbody th{ text-align:left; font-weight:600; }
.pres-tabla td{ font-weight:800; color:var(--navy-800); white-space:nowrap; }
.pres-tabla thead th{
  font-size:var(--fs-18);
  font-weight:900;
  color:var(--navy-800);
  border-bottom:2px solid var(--navy-800);
  padding-block:var(--sp-2) var(--sp-3);
}
/* Columna destacada (Creador) */
.pres-tabla .is-dest{ background:var(--teal-050); }
.pres-tabla thead .is-dest{
  background:var(--brand-gradient-control);
  color:#fff;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  border-bottom-color:var(--teal-700);
}
/* Separadores "Cuánto entra" / "Funciones" */
.pres-tabla .sep th{
  background:var(--bg-2);
  font-size:var(--fs-11);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal-700);
  padding-block:var(--sp-1);
}
/* Fila del precio */
.pres-tabla .precio th,
.pres-tabla .precio td{ border-bottom:0; padding-top:var(--sp-3); }
.pres-tabla .precio td{ font-size:var(--fs-20); font-weight:900; }
.pres-tabla .precio .is-dest{ border-radius:0 0 var(--r-sm) var(--r-sm); }
/* El precio en dólares, chico debajo del de pesos */
.pres-tabla .precio small,
.pres-fund-tabla small{
  display:block;
  font-size:var(--fs-13);
  font-weight:700;
  color:var(--navy-500);
  margin-top:var(--sp-1);
}

/* Tilde (incluido) y cruz (no incluido) */
.pres-si{
  display:inline-grid;
  place-items:center;
  width:var(--pres-tick);
  height:var(--pres-tick);
  border-radius:var(--r-pill);
  background:var(--teal-600);
  vertical-align:middle;
}
.pres-si::after{
  content:"";
  width:40%;
  height:22%;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-15%) rotate(-45deg);
}
.pres-no{ color:var(--navy-200); font-weight:800; }

.pres-nota{
  font-size:var(--fs-13);
  color:var(--navy-500);
  text-align:center;
  max-width:var(--pres-lead);
  margin:var(--sp-4) auto 0;
}

/* ── Miembro fundador ──────────────────────────────────────────────────── */
.pres-fund{
  max-width:var(--pres-max);
  margin:0 auto;
  padding:var(--sp-8) var(--sp-5) 0;
}
.pres-fund-in{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--sp-7);
  align-items:start;
}
.pres-fund-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.pres-fund-list li{
  position:relative;
  padding-left:var(--sp-6);
  font-size:var(--fs-16);
  color:var(--navy-700);
}
.pres-fund-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:var(--sp-1);
  width:var(--pres-tick);
  height:var(--pres-tick);
  border-radius:var(--r-pill);
  background:var(--teal-050);
  box-shadow:inset 0 0 0 2px var(--teal-600);
}
.pres-fund-list strong{ color:var(--navy-800); }

.pres-fund-h{
  font-size:var(--fs-12);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal-700);
  margin:var(--sp-2) 0 var(--sp-3);
}
/* Tres tarjetas alineadas: una tabla con las filas separadas */
.pres-fund-tabla{
  width:100%;
  border-collapse:separate;
  border-spacing:0 var(--sp-2);
  font-size:var(--fs-14);
  color:var(--navy-600);
}
.pres-fund-tabla th,
.pres-fund-tabla td{
  background:var(--bg-1);
  border-block:1px solid var(--navy-100);
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  white-space:nowrap;
}
.pres-fund-tabla th{
  border-left:1px solid var(--navy-100);
  border-radius:var(--r-md) 0 0 var(--r-md);
  font-size:var(--fs-18);
  font-weight:800;
  color:var(--navy-800);
}
.pres-fund-tabla td:last-child{
  border-right:1px solid var(--navy-100);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.pres-fund-tabla .pres-fund-promo{ font-size:var(--fs-24); font-weight:900; color:var(--teal-700); }
.pres-fund-tabla strong{ color:var(--navy-800); }
/* Creador destacado, como en la diapositiva */
.pres-fund-tabla .is-dest th,
.pres-fund-tabla .is-dest td{ background:var(--teal-600); border-color:transparent; color:#fff; }
.pres-fund-tabla .is-dest .pres-fund-promo,
.pres-fund-tabla .is-dest strong,
.pres-fund-tabla .is-dest small{ color:#fff; }

/* ── Móvil ─────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .pres-hero{ padding:var(--sp-6) var(--sp-4) var(--sp-6); }
  .pres-hero .edu-display{ font-size:var(--fs-32); }
  .pres-lead{ font-size:var(--fs-16); margin-bottom:var(--sp-5); }
  .pres-video{ border-radius:var(--r-md); }
  .pres-play{ gap:var(--sp-3); }
  .pres-cover-t{ font-size:var(--fs-14); }
  .pres-play-ic{ width:calc(var(--pres-play) * .7); height:calc(var(--pres-play) * .7); }
  .pres-dur{ right:var(--sp-2); bottom:var(--sp-2); font-size:var(--fs-11); }
  .pres-agenda{ padding:var(--sp-6) var(--sp-4) 0; }
  .pres-agenda h2{ font-size:var(--fs-24); }
  .pres-list{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .pres-list li{ font-size:var(--fs-15); }
  .pres-planes,
  .pres-fund{ padding:var(--sp-7) var(--sp-4) 0; }
  .pres-planes h2,
  .pres-fund h2{ font-size:var(--fs-24); }
  .pres-tabla-wrap{ padding:var(--sp-2); border-radius:var(--r-md); }
  .pres-tabla{ font-size:var(--fs-12); }
  .pres-tabla th,
  .pres-tabla td{ padding:var(--sp-2); }
  .pres-tabla td{ padding-inline:var(--sp-1); font-size:var(--fs-11); }
  .pres-tabla thead th{ font-size:var(--fs-13); padding-inline:var(--sp-1); }
  .pres-tabla .precio td{ font-size:var(--fs-12); }
  .pres-tabla .precio small,
  .pres-fund-tabla small{ font-size:var(--fs-11); }
  .pres-fund-in{ grid-template-columns:1fr; gap:var(--sp-5); }
  .pres-fund-list li{ font-size:var(--fs-15); }
  .pres-fund-tabla th,
  .pres-fund-tabla td{ padding:var(--sp-3) var(--sp-2); }
  .pres-fund-tabla th{ font-size:var(--fs-15); }
  .pres-fund-tabla .pres-fund-promo{ font-size:var(--fs-18); }
  /* el CTA del blog va de borde a borde en móvil: acá con el mismo margen que el resto */
  .pres-page .art-cta{ margin-inline:var(--sp-4); }
}