/* ============================================================
   SECCIÓN NUEVA — "¿Por qué estudiar...?" en filas alternadas con mockups,
   al estilo de coursera.org/courseraplus. Reemplaza a las tabs en la home.
   Los mockups están armados con HTML/CSS y datos reales, no son imágenes.
   ============================================================ */
.mk-fila {
  display: grid; gap: 2.4rem; align-items: center;
  padding: 3.4rem 0;
}
@media (min-width: 900px) {
  .mk-fila { grid-template-columns: 1fr 1.05fr; gap: 4.5rem; padding: 4.2rem 0 }
  /* filas pares: el mockup va a la izquierda */
  .mk-fila.inv > .mk-texto { order: 2 }
  .mk-fila.inv > .mk-art { order: 1 }
}
.mk-fila + .mk-fila { border-top: 1px solid var(--linea) }

.mk-texto h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: .7rem }
.mk-texto p { color: var(--tinta-2) }
.mk-texto p + p { margin-top: .8rem }
.mk-texto .btn { margin-top: 1.5rem }

/* lienzo del mockup */
.mk-art {
  position: relative; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem .5rem;
}
.mk-art::before {
  content: ''; position: absolute; inset: 0; border-radius: 22px;
  background: radial-gradient(70% 80% at 50% 45%, var(--bordo-050), transparent 72%);
}
.mk-art > * { position: relative }

/* ---------- pieza base: tarjeta blanca ---------- */
.mk-card {
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(20, 16, 17, .35);
}

/* ---------- 1. certificados apilados ---------- */
.mk-certs { position: relative; width: min(450px, 100%); height: 250px }
.mk-cert {
  position: absolute; left: 0; top: 0; width: 198px; padding: .85rem .95rem;
  display: flex; flex-direction: column; gap: .55rem;
  translate: var(--tx, 0) var(--ty, 0);
  rotate: var(--rot, 0deg);
  z-index: var(--z, 1);
  transition: translate .7s cubic-bezier(.4, 0, .2, 1),
              rotate .7s cubic-bezier(.4, 0, .2, 1);
}
/* cada una se apila sobre la anterior y corrida a la derecha: así el ángulo
   superior izquierdo —bandera e idioma— queda siempre visible.
   mockups.js va rotando qué tarjeta ocupa cada lugar. */
.mk-cert.p0 { --tx: 0px;   --ty: 40px; --rot: -6deg; --z: 1 }
.mk-cert.p1 { --tx: 112px; --ty: 0px;  --rot: 2deg;  --z: 2 }
.mk-cert.p2 { --tx: 224px; --ty: 76px; --rot: 7deg;  --z: 3 }
.mk-cert .top { display: flex; align-items: center; gap: .5rem }
.mk-cert img {
  width: 26px; height: 19px; object-fit: cover; border-radius: 3px; flex: none;
  box-shadow: 0 0 0 1px rgba(20, 16, 17, .12);
}
.mk-cert .idi { font-size: .88rem; font-weight: 700; letter-spacing: -.01em }
.mk-cert .lin { height: 5px; border-radius: 99px; background: var(--linea) }
.mk-cert .lin.c { width: 62% }
.mk-cert .pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem }
.mk-cert .niv { font-size: .7rem; color: var(--tinta-3); font-weight: 600 }
.mk-cert .sello {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--bordo); color: #fff; display: grid; place-items: center;
  font-size: .52rem; font-weight: 800; letter-spacing: .02em;
}

/* ---------- 2. clase por Zoom + fichas ---------- */
.mk-zoom { position: relative; width: min(400px, 100%) }
.mk-zoom .win { padding: .55rem; border-radius: 14px }
.mk-zoom .barra { display: flex; gap: .28rem; padding: .1rem .15rem .5rem }
.mk-zoom .barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea) }
.mk-zoom .grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem }
.mk-zoom .cel {
  aspect-ratio: 4/3; border-radius: 7px; overflow: hidden;
  background: linear-gradient(150deg, #f3eef0, #e7dfe2);
  display: grid; place-items: center;
}
.mk-zoom .cel img { width: 60%; height: auto; border-radius: 2px; opacity: .95 }
.mk-zoom .cel { transition: outline-color .3s, transform .35s cubic-bezier(.2,.8,.3,1);
  outline: 2px solid transparent; outline-offset: -2px }
.mk-zoom .cel.hab { outline-color: var(--bordo); transform: scale(1.04) }
.mk-ficha {
  position: absolute; background: #fff; border: 1px solid var(--linea);
  border-radius: 10px; padding: .5rem .75rem; box-shadow: 0 14px 30px -14px rgba(20, 16, 17, .45);
}
.mk-ficha b { display: block; font-size: .95rem; color: var(--bordo); letter-spacing: -.02em }
.mk-ficha span { font-size: .68rem; color: var(--tinta-3) }
.mk-zoom .f1 { left: -8%; top: 12%; rotate: -4deg }
.mk-zoom .f2 { right: -10%; top: 44%; rotate: 3deg }
.mk-zoom .f3 { left: 6%; bottom: -12%; rotate: 2deg }

/* ---------- 3. escalera de niveles ---------- */
.mk-niveles { width: min(420px, 100%); padding: 1.1rem 1.2rem 1rem; border-radius: 14px }
.mk-niveles .cab {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 700; margin-bottom: .9rem;
}
.mk-barras { display: flex; align-items: flex-end; gap: .4rem; height: 132px }
.mk-barras span {
  flex: 1; border-radius: 6px 6px 3px 3px; position: relative;
  height: 0; transition: height .55s cubic-bezier(.3, .9, .4, 1);
  background: linear-gradient(180deg, #d98da0, var(--bordo));
  display: flex; align-items: flex-start; justify-content: center; padding-top: .3rem;
  font-size: .64rem; font-weight: 700; color: #fff;
}
.mk-barras span.futuro { background: #e4d7db; color: var(--tinta-3) }
.mk-barras span.on { height: var(--h) }
/* sin animación: se muestran directamente a su altura */
@media (prefers-reduced-motion: reduce) { .mk-barras span { height: var(--h) } }
.mk-niveles .pie {
  display: flex; justify-content: space-between; margin-top: .7rem;
  font-size: .68rem; color: var(--tinta-3); font-weight: 600;
}
.mk-niveles .aca {
  margin-top: .8rem; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bordo-050); border: 1px solid #f0dde1; color: var(--bordo);
  border-radius: 999px; padding: .3rem .7rem; font-size: .74rem; font-weight: 700;
}

/* ---------- 4. tarjeta de precio ---------- */
.mk-precio { width: min(330px, 100%); padding: 1.2rem 1.3rem 1.1rem; border-radius: 14px }
.mk-precio .tit { font-size: .82rem; color: var(--tinta-3); font-weight: 600 }
.mk-precio .tachado {
  position: relative; display: inline-block; margin-top: .5rem;
  font-size: 1.35rem; font-weight: 700; color: var(--tinta-3); letter-spacing: -.02em;
}
.mk-precio .tachado::after {
  content: ''; position: absolute; left: -3%; top: 52%; width: 106%; height: 2.5px;
  background: var(--bordo); border-radius: 2px;
}
.mk-precio .grande {
  display: block; font-size: 2.1rem; font-weight: 700; color: var(--bordo);
  letter-spacing: -.035em; line-height: 1.1; margin-top: .15rem;
}
.mk-precio .grande.cambia { animation: mk-num .45s cubic-bezier(.2, .8, .3, 1) }
@keyframes mk-num {
  from { opacity: 0; transform: translateY(7px) }
  to   { opacity: 1; transform: none }
}
.mk-precio .tachado { transition: opacity .3s }
.mk-precio.total .tachado { opacity: 0 }
.mk-precio .chips b { transition: background .25s, border-color .25s, color .25s }
.mk-precio .sub { font-size: .82rem; color: var(--tinta-2) }
.mk-precio .chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .9rem }
.mk-precio .chips b {
  font-size: .72rem; font-weight: 600; color: var(--tinta-2);
  border: 1px solid var(--linea); border-radius: 999px; padding: .25rem .6rem;
}
.mk-precio .chips b.on { background: var(--bordo); border-color: var(--bordo); color: #fff }

@media (max-width: 560px) {
  /* El abanico se corre con --tx, que es un `translate`. Acá se le sumaba
     además un `left` por tarjeta, así que el corrimiento se aplicaba dos
     veces: la tercera terminaba en 400 px y arrastraba scroll horizontal a
     toda la home. Se ajustan los pasos del translate y `left` queda en 0. */
  .mk-certs { height: 208px; width: 100% }
  .mk-cert { width: 150px; padding: .7rem .8rem; gap: .45rem }
  .mk-cert .idi { font-size: .8rem }
  .mk-cert.p0 { --tx: 0px;   --ty: 30px }
  .mk-cert.p1 { --tx: 74px;  --ty: 0px }
  .mk-cert.p2 { --tx: 148px; --ty: 56px }
  .mk-zoom .f1 { left: -2% }
  .mk-zoom .f2 { right: -2% }
}

@media (max-width: 400px) {
  /* A 320 px el ajuste de arriba todavía no alcanzaba: la tercera tarjeta
     termina en 326 px y su rotación de 7° le suma ~11 px más, así que se salía
     de la pantalla y la home entera scrolleaba de costado. Se achica la
     tarjeta y se acortan los pasos del abanico. */
  .mk-cert { width: 132px }
  .mk-cert.p1 { --tx: 62px }
  .mk-cert.p2 { --tx: 124px }
}