/* Mi cuenta: tarjetas cálidas sobre el paisaje de puntos (mismo tono que el onboarding y la app). */
body.cta { min-height: 100svh; margin: 0; background-attachment: fixed; }
.cta-tope { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; }
.cta-tope nav { display: flex; gap: 8px; }
.cta-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); text-decoration: none; border: 0; cursor: pointer;
  font: 600 14px "DM Sans"; padding: 9px 16px; border-radius: 999px; box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); transition: transform .2s; }
.cta-pill:hover { transform: translateY(-1px); } .cta-pill img { border-radius: 0; }
.cta-main { width: min(1080px, 100% - 32px); margin: 0 auto; padding: 4vh 0 100px; }
.cta-entrar { width: min(560px, 100%); margin: 6vh auto 0; padding: 34px 36px 28px; animation: caja-entra .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes caja-entra { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cab h1, .cab h2 { font: 700 26px/1.2 "Manrope"; letter-spacing: -.02em; margin: 0; }
.bajada-c { color: var(--muted); margin: 10px 0 22px; }
.cta-entrar .campo { border-radius: 12px; border-color: var(--borde); } .cta-entrar .pill { border-radius: 12px; }
.cta-alt { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; text-align: center; } .cta-alt a { color: var(--ink); font-weight: 600; }
.cta-grid { display: grid; gap: 16px; animation: caja-entra .7s cubic-bezier(.2,.8,.2,1) both; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.25fr .95fr; align-items: start; } }
.cta-lado { display: grid; gap: 16px; }
.cta-caja { padding: 22px 24px; } .cta-caja h2 { font: 700 20px "Manrope"; letter-spacing: -.02em; margin: 0 0 12px; }
.cta-plan { overflow: hidden; }
.plan-banda { position: relative; padding: 26px 28px 24px; color: #fff; background: #2a7fe0 url(img/paisaje.webp) center 30% / cover no-repeat; image-rendering: pixelated; }
.plan-banda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,40,110,.25), rgba(10,40,110,.6)); }
.plan-banda > * { position: relative; }
.plan-banda .cab h2 { color: #fff; font-size: 18px; }
.plan-banda .chip-c { border: 0; }
.plan-precio { font: 800 clamp(52px, 7vw, 68px)/1 "Manrope"; letter-spacing: -.06em; margin: 18px 0 6px; text-shadow: 0 2px 18px rgba(0,20,70,.45); }
.plan-precio small { font: 600 17px "DM Sans"; letter-spacing: 0; opacity: .9; margin-left: 3px; }
.plan-banda p { margin: 0; opacity: .95; font-size: 15px; } .plan-banda s { opacity: .75; }
.plan-cuerpo { padding: 24px 28px 26px; }
.plan-cuerpo .lista-pasos { margin-bottom: 6px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.acciones .pill { border-radius: 12px; }
.estado-c { font: 600 12.5px "DM Sans"; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); }
.estado-c.ok::before { content: "● "; color: #1f9d5b; } .estado-c.espera::before { content: "● "; color: #d9822b; }
.perfil-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 22px "Manrope"; flex: none; }
.perfil-cab b { display: block; font: 700 18px "Manrope"; } .perfil-cab span { color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; }
.cta-caja .fila-form .campo { border-radius: 12px; border-color: var(--borde); height: 46px; } .cta-caja .fila-form .pill { border-radius: 12px; height: 46px; }
.dato { border-top-color: var(--borde); }
.descargas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.descarga { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); text-align: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s; }
.descarga svg { width: 28px; height: 28px; } .descarga b { font: 600 15px "DM Sans"; } .descarga span { color: var(--muted); font-size: 13px; }
.descarga:hover { transform: translateY(-3px); border-color: var(--ink); }
.descarga.apagada { pointer-events: none; opacity: .6; }
.equipo { border-top-color: var(--borde); }
.volver-pill { position: fixed; right: 22px; bottom: 22px; background: #fff; color: var(--ink); text-decoration: none; font: 500 15px "DM Sans"; padding: 11px 20px; border-radius: 999px; box-shadow: 0 10px 30px -14px rgba(0,0,0,.45); }
@media (max-width: 600px) { .cta-entrar { padding: 26px 20px 22px; } .plan-banda, .plan-cuerpo { padding-left: 20px; padding-right: 20px; } .volver-pill { display: none; } }

/* perfil: cerrar sesiones y borrar cuenta; links legales */
.acciones-perfil { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.enlace-c { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font: 500 13px "DM Sans"; text-decoration: underline; text-underline-offset: 3px; }
.enlace-c.peligro { color: #b42318; }
#dlgBorrar .campo { margin: 4px 0 14px; }
.pie-legal-c { text-align: center; font-size: 12px; color: rgba(255,255,255,.9); margin: 24px 0 90px; }
.pie-legal-c a { color: inherit; }
#avisoPago a { color: inherit; font-weight: 600; }

/* ---------- Aprende Estudio: el tutorial por módulos (banda de cielo como el plan; video a la izquierda, etapas a la derecha) ---------- */
.aprende { margin-top: 16px; overflow: hidden; padding: 0; animation: caja-entra .7s .1s cubic-bezier(.2,.8,.2,1) both; }
.ap-banda { position: relative; padding: 24px 28px 22px; color: #fff; background: #2a7fe0 url(img/paisaje.webp) center 30% / cover no-repeat; image-rendering: pixelated; }
.ap-banda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,34,100,.55), rgba(8,34,100,.12) 70%), linear-gradient(180deg, rgba(10,40,110,.2), rgba(10,40,110,.5)); }
.ap-banda > * { position: relative; }
.ap-banda .cab h2 { color: #fff; font-size: 22px; }
.ap-banda > p { margin: 8px 0 16px; max-width: 520px; font-size: 15px; text-shadow: 0 1px 10px rgba(0,20,70,.5); }
.ap-avance { display: flex; align-items: center; gap: 14px; max-width: 520px; }
.ap-barra { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.ap-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: #fff; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ap-avance span { font: 600 13.5px "DM Sans"; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,20,70,.5); }
.ap-cuerpo { display: grid; gap: 20px; padding: 22px; }
@media (min-width: 900px) { .ap-cuerpo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } }
.ap-video { border-radius: 14px; overflow: hidden; background: #0d1220; aspect-ratio: 16 / 9; box-shadow: 0 20px 44px -26px rgba(10,20,50,.55); }
.ap-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d1220; }
.ap-ahora { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 4px 2px; }
.ap-ahora small { color: var(--muted); font: 600 12.5px "DM Sans"; letter-spacing: .02em; }
.ap-ahora b { display: block; font: 800 21px/1.2 "Manrope"; letter-spacing: -.02em; margin: 3px 0 4px; }
.ap-ahora p { margin: 0; color: var(--muted); font-size: 14.5px; }
.ap-nav { display: flex; gap: 8px; flex: none; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--borde); background: #fff; color: var(--ink);
  font: 600 13.5px "DM Sans"; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.ap-btn svg { width: 16px; height: 16px; }
.ap-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink); }
.ap-btn:disabled { opacity: .35; cursor: default; }
.ap-sig { background: var(--ink); color: #fff; border-color: var(--ink); padding: 0 10px 0 14px; }
.ap-visto.ok { color: #1f7a4a; border-color: #bfe3cd; background: #eef8f2; }
.ap-lista { display: grid; gap: 14px; max-height: 560px; overflow: auto; padding: 2px 4px 4px 2px; scrollbar-width: thin; }
.ap-etapa h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 14px "Manrope"; letter-spacing: -.01em; }
.ap-en { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; font: 700 11.5px "DM Sans"; }
.ap-etapa h3 em { margin-left: auto; font: 600 12px "DM Sans"; font-style: normal; color: var(--muted); }
.ap-etapa h3 em.ok { color: #1f7a4a; }
.ap-mod { width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px; margin: 0 0 4px; border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; cursor: pointer; color: var(--ink);
  transition: background .2s, border-color .2s; }
.ap-mod:hover { background: rgba(23,25,29,.04); }
.ap-mod.on { background: #fff; border-color: var(--borde); box-shadow: 0 8px 22px -16px rgba(10,20,50,.45); }
.ap-mini { position: relative; flex: none; width: 96px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0d1220; }
.ap-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-mini i { position: absolute; right: 4px; bottom: 4px; font: 600 10.5px "DM Sans"; font-style: normal; color: #fff; background: rgba(10,14,24,.78); padding: 1px 5px; border-radius: 5px; }
.ap-mod.on .ap-mini { outline: 2px solid var(--ink); outline-offset: 1px; }
.ap-txt { flex: 1; min-width: 0; }
.ap-txt small { display: block; color: var(--muted); font: 600 11.5px "DM Sans"; }
.ap-txt b { display: block; font: 600 14.5px/1.25 "DM Sans"; }
.ap-ck { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; border: 1.5px solid var(--borde); color: transparent; transition: background .25s, border-color .25s, color .25s; }
.ap-ck svg { width: 12px; height: 12px; }
.ap-mod.visto .ap-ck { background: #1f9d5b; border-color: #1f9d5b; color: #fff; }
@media (max-width: 600px) {
  .ap-banda { padding: 20px 20px 18px; } .ap-cuerpo { padding: 14px; }
  .ap-ahora { flex-direction: column; } .ap-nav { width: 100%; } .ap-visto { flex: 1; }
  .ap-lista { max-height: none; overflow: visible; }
}
.aprende .estado-c { white-space: nowrap; }
@media (max-width: 600px) { .ap-banda .cab { align-items: flex-start; } .ap-banda .cab h2 { font-size: 19px; } }