/* ============================================================
   plataforma-calm.css — VARIANTE estética "tipo Calm" para la
   landing (plataforma-calm.html). Capa de override: se carga
   DESPUÉS de plataforma.css y todo va scopeado a .calm, así la
   landing original queda intacta.
   Vibra: sereno, gradientes suaves, mucho aire, títulos en serif
   (Playfair, local), todo bien redondeado, poco movimiento.
   ============================================================ */

@font-face{ font-family:'Playfair Display'; src:url('fonts/playfair-latin.woff2') format('woff2');
  font-weight:400 800; font-display:swap }
@font-face{ font-family:'Playfair Display'; src:url('fonts/playfair-latin-italic.woff2') format('woff2');
  font-style:italic; font-weight:400 800; font-display:swap }

.calm{
  --calm-hero: linear-gradient(180deg, #dcebf8 0%, #e9eefb 42%, #f3f6fc 74%, #ffffff 100%);
  --calm-sky:  #f2f7fd;
  --calm-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* fuera la mono "cuadrada" (JetBrains): en Calm, todo en Nunito */
  --font-mono: var(--font-sans);
  /* TODA la tipografía en azules (3 navy), sin negro ni slate.
     El teal queda solo para botones, tildes y gráficos, no para texto. */
  --text-strong: var(--navy-800);
  --text-body:   var(--navy-600);
  --text-muted:  var(--navy-500);
  --text-subtle: var(--navy-500);
  --text-accent: var(--navy-600);
  /* El degradado de botones (azul del logo #09A9BA) ya vive en el token base
     --brand-gradient-control de colors_and_type.css, común a toda la interfaz. */
}
/* refuerzo por si algún elemento pide la mono directo */
.calm .mk-plan-num, .calm .mk-plan-cur, .calm .mk-plan-ars, .calm .mk-plan-per,
.calm .mk-calc-row b, .calm .mk-bar-amt, .calm .mk-pie-cap i, .calm .mk-mock-url,
.calm .mk-stat-v, .calm .mk-ring span, .calm .mk-lesson-t, .calm .mk-calc-input input,
.calm .pl-cert-qr ~ *, .calm .pl-chap b{ font-family:var(--font-sans) }

/* ── Hero: imagen más grande (su columna más ancha) y columnas alineadas
   arriba, para que el título crezca hacia abajo sin correr lo de arriba ── */
@media (min-width:901px){
  .calm .mk-hero-in{ grid-template-columns:1fr 1.18fr; gap:var(--sp-7); max-width:1340px; align-items:start }
}

/* ── Títulos en serif, más finos y con aire ── */
.calm .edu-display,
.calm .mk-split-copy h2,
.calm .mk-head h2,
.calm .mk-close-title,
.calm .au-title{
  font-family:var(--calm-serif); font-weight:600; letter-spacing:-.01em; line-height:1.12;
}
.calm .eyebrow, .calm .pill{ letter-spacing:.1em }

/* ── Botones y tarjetas más redondeadas y con sombras suaves ── */
.calm .btn, .calm .btn-lg{ border-radius:var(--r-pill) }
.calm .mk-feat, .calm .pl-tile, .calm .mk-plan, .calm .pl-q{
  border-radius:var(--r-xl); border-color:var(--navy-100);
  box-shadow:0 12px 34px rgba(20,50,90,.06) }
.calm .pl-fig{ border-radius:var(--r-xl); box-shadow:0 18px 44px rgba(20,50,90,.10) }
.calm .mk-plan-feat{ box-shadow:0 18px 44px rgba(15,168,184,.14) }

/* ── Barra de navegación clara y translúcida (logo oscuro en el HTML) ── */
.calm .mk-nav{ background:rgba(255,255,255,.72); border-bottom-color:var(--navy-100);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%) }
.calm .mk-nav-links a{ color:var(--navy-700) }
.calm .mk-nav-links a:hover{ color:var(--teal-700) }
.calm .mk-nav .btn-ghost{ color:var(--navy-700) }
.calm .mk-nav .btn-ghost:hover{ background:var(--navy-050); color:var(--navy-800) }

/* ── Hero claro y sereno (sin partículas ni glow oscuro) ── */
.calm .mk-hero{ background:var(--calm-hero); color:var(--navy-800);
  min-height:auto; padding-block:var(--sp-8) }
.calm .mk-hero::before{ display:none }
.calm .mk-hero-fx{ display:none }
.calm .mk-hero-copy .edu-display{ color:var(--navy-800); font-size:var(--fs-48) }
.calm .mk-hero-copy .edu-display em{ color:var(--teal-500); font-style:italic; font-weight:500 }
/* bajada, botones y nota como bloques centrados debajo de las dos columnas */
.calm .mk-hero-actions--center{ justify-content:center; margin:var(--sp-5) auto 0; padding:0 var(--mk-gutter) }
.calm .mk-hero-note--center{ text-align:center; margin-top:var(--sp-3); padding:0 var(--mk-gutter); color:var(--navy-500) }

/* Todo lo que va DEBAJO del título (bajada, botones, nota y chips) aparece
   recién cuando el título termina de tipearse, para que no baile mientras
   escribe. El JS pone .js-typing al arrancar y .is-typed al terminar; sin JS
   queda visible por defecto. */
.calm .mk-hero.js-typing .mk-hero-copy .pill,
.calm .mk-hero.js-typing .mk-hero-lead-wide,
.calm .mk-hero.js-typing .mk-hero-actions--center,
.calm .mk-hero.js-typing .mk-hero-note--center,
.calm .mk-hero.js-typing .mk-marquee{ opacity:0; animation:none; transition:opacity .7s var(--ease-out) }
.calm .mk-hero.js-typing.is-typed .mk-hero-copy .pill,
.calm .mk-hero.js-typing.is-typed .mk-hero-lead-wide,
.calm .mk-hero.js-typing.is-typed .mk-hero-actions--center,
.calm .mk-hero.js-typing.is-typed .mk-hero-note--center,
.calm .mk-hero.js-typing.is-typed .mk-marquee{ opacity:1 }
.calm .mk-caret{ background:var(--teal-600) }
.calm .mk-hero-lead{ color:var(--navy-600) }
/* bajada arriba, dentro de la columna del título (debajo del h1). Puede
   encimarse con la imagen de la derecha: z-index alto para quedar por encima. */
.calm .mk-hero-lead-wide{ position:relative; z-index:3; max-width:40rem;
  margin:var(--sp-4) 0 0; text-align:left;
  color:var(--navy-600); font-size:var(--fs-18); line-height:var(--lh-prose) }
@media (min-width:901px){
  /* se ensancha por encima de la imagen para no cortar tan angosto */
  .calm .mk-hero-lead-wide{ max-width:46rem }
}
/* más aire entre la nota del CTA y la tira de chips */
.calm .mk-marquee{ margin-top:var(--sp-6) }
.calm .mk-hero-note{ color:var(--navy-500) }
.calm .pill-mint{ background:var(--navy-050); color:var(--navy-600); border-color:var(--navy-100) }
.calm .btn-glass{ background:#fff; border-color:var(--navy-100); color:var(--navy-700); box-shadow:0 6px 18px rgba(20,50,90,.08) }
.calm .btn-glass:hover{ background:#fff; color:var(--navy-800); border-color:var(--navy-200) }
.calm .mk-hero-img{ filter:drop-shadow(0 22px 44px rgba(20,50,90,.18)) }
.calm .mk-marquee span{ color:var(--navy-500) }
.calm .mk-marquee span::before{ background:var(--teal-500) }

/* ── Secciones: blancas y con tintes serenos, con más aire ── */
.calm .mk-section{ background:#fff; padding-block:var(--sp-9) }
/* secciones con tinte: bordes difuminados hacia el blanco, para que un bloque
   se funda con el siguiente sin línea dura */
.calm .mk-section-soft{ position:relative; background:var(--calm-sky) }
.calm .mk-section-soft::before,
.calm .mk-section-soft::after{ content:""; position:absolute; left:0; right:0;
  height:110px; pointer-events:none; z-index:0 }
.calm .mk-section-soft::before{ top:0; background:linear-gradient(180deg,#fff,rgba(255,255,255,0)) }
.calm .mk-section-soft::after{ bottom:0; background:linear-gradient(0deg,#fff,rgba(255,255,255,0)) }
.calm .mk-section-soft > *{ position:relative; z-index:1 }
.calm .mk-dots::before{ opacity:.5 }
.calm .mk-split-copy h2, .calm .mk-head h2{ color:var(--navy-800) }
.calm .mk-split-copy .lead, .calm .mk-head .lead{ color:var(--navy-500) }
.calm .eyebrow{ color:var(--navy-500) }

/* nota al pie chica (aclaración del asterisco) */
.calm .mk-foot-note{ font-size:var(--fs-12); color:var(--navy-500); margin-top:var(--sp-2) }

/* puerta del Zoom: veredicto con carita en cada lado */
.calm .pl-door-verdict{ display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-16); font-weight:800 }
/* El título de cada bloque queda como encabezado chico y en mayúsculas, para que
   no compita en tamaño con el veredicto (la conclusión con carita). */
.calm .pl-door-lbl{ text-transform:uppercase; letter-spacing:.04em; font-size:var(--fs-11) }
.calm .pl-door-verdict.bad{ color:#b4544c }
.calm .pl-door-verdict.ok{ color:var(--teal-700) }

/* gráfico de camadas: sin las rayas rojas (Otras plataformas) ni el puntito
   verde de los grupos (Educreia) — quedaban raros */
.calm .pl-dupe::after{ display:none }
.calm .pl-chip-grp::before{ display:none }
/* más aire debajo de la leyenda de cada gráfico */
.calm .pl-cap{ margin-bottom:var(--sp-3) }

/* gráfico de afiliados: los 4 pasos en una sola línea (sin envolverse) */
.calm .pl-aff{ flex-wrap:nowrap; gap:6px; padding:var(--sp-5) var(--sp-3); align-items:center }
.calm .pl-aff-step{ flex:1 1 0; min-width:0; min-height:78px; justify-content:center; padding:var(--sp-2) 6px }
.calm .pl-aff-step .em{ font-size:var(--fs-20) }
.calm .pl-aff-step small{ font-size:10px; line-height:1.2 }
.calm .pl-aff-arrow{ font-size:var(--fs-14) }

/* ── Cierre (CTA + calculadora): gradiente calmo, sigue con texto claro ── */
.calm .mk-close{ background:linear-gradient(160deg, #2f7f8d 0%, #3e6ea6 100%) }
/* Cierre: que veredicto + bajada + frase de cierre + botón se lean como UN todo
   — todos centrados, mismo ancho de columna y mismo acento teal. */
.calm .mk-calc-verdict,
.calm .mk-close-lead,
.calm .mk-close-tagline{ text-align:center; max-width:52rem; margin-left:auto; margin-right:auto }
.calm .mk-close-lead{ color:rgba(255,255,255,.9); margin-top:var(--sp-4) }
.calm .mk-close-tagline{ margin-top:var(--sp-3) }
.calm .mk-close .btn-glass{ margin-top:var(--sp-5) }
.calm .mk-close .btn-glass{ display:flex; width:max-content; margin-left:auto; margin-right:auto }

/* Sin degradé: borde limpio y bloques más cerca (menos padding arriba/abajo). */
.calm .mk-close-in{ padding-block:var(--sp-8) }
/* en el CTA (teal) el eyebrow es claro para leerse sobre el color */
.calm .mk-close .eyebrow{ color:#EAFBF7 }

/* ── Aparición gradual al scrollear (Calm) ──────────────────────────────
   El contenedor de texto no se desvanece como bloque: sus hijos (eyebrow,
   título, bajada, lista y hasta cada bullet) aparecen ESCALONADOS, de a poco.
   Se apoya en el .is-in que ya agrega el observer a cada .edu-reveal. */
.calm .mk-split-copy.edu-reveal,
.calm .mk-head.edu-reveal,
.calm .mk-close-copy.edu-reveal{ opacity:1; transform:none }

.calm .mk-split-copy.edu-reveal > *,
.calm .mk-head.edu-reveal > *,
.calm .mk-close-copy.edu-reveal > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.calm .mk-split-copy.is-in > *,
.calm .mk-head.is-in > *,
.calm .mk-close-copy.is-in > *{ opacity:1; transform:none }
/* escalonado de los hijos directos */
.calm .is-in > *:nth-child(2){ transition-delay:.08s }
.calm .is-in > *:nth-child(3){ transition-delay:.16s }
.calm .is-in > *:nth-child(4){ transition-delay:.24s }
.calm .is-in > *:nth-child(5){ transition-delay:.32s }
.calm .is-in > *:nth-child(6){ transition-delay:.40s }

/* y cada bullet de la lista, uno detrás del otro */
.calm .mk-points li{ opacity:0; transform:translateY(10px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
.calm .mk-split-copy.is-in .mk-points li{ opacity:1; transform:none }
.calm .mk-split-copy.is-in .mk-points li:nth-child(2){ transition-delay:.30s }
.calm .mk-split-copy.is-in .mk-points li:nth-child(3){ transition-delay:.38s }
.calm .mk-split-copy.is-in .mk-points li:nth-child(4){ transition-delay:.46s }
.calm .mk-split-copy.is-in .mk-points li:nth-child(5){ transition-delay:.54s }
.calm .mk-split-copy.is-in .mk-points li:nth-child(6){ transition-delay:.62s }
.calm .mk-split-copy.is-in .mk-points li:nth-child(7){ transition-delay:.70s }

@media (prefers-reduced-motion:reduce){
  .calm .mk-split-copy > *, .calm .mk-head > *, .calm .mk-close-copy > *,
  .calm .mk-points li{ opacity:1; transform:none; transition:none }
}