/* ============================================================
   TopoApp — Blog público (Academia)
   ============================================================ */
.blog-body { background: #fffaf6; }
.ld-nav-links a.is-actual { color: var(--ta-orange, #D96A2B); }

/* Portada del listado */
.blog-hero { padding: clamp(110px, 14vw, 150px) 0 34px; text-align: center;
    background: radial-gradient(700px 300px at 50% 0%, rgba(217, 106, 43, .14), transparent 70%); }
.blog-hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: #1c1917; color: #fff; font-size: .8rem; font-weight: 800; margin-bottom: 14px; }
.blog-hero h1 { margin: 0 auto 10px; max-width: 760px; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; color: #1c1917; }
.blog-hero p { margin: 0 auto; max-width: 620px; font-size: 1.05rem; color: #6e625c; }

.blog-contenido { padding-bottom: 60px; }
.blog-filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 22px; padding: 2px; justify-content: center; }
.blog-filtros::-webkit-scrollbar { display: none; }
.blog-filtro { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; border: 1px solid #f0e2d6; background: #fff; color: #44403c; font-weight: 700; font-size: .86rem; text-decoration: none; transition: all .15s; }
.blog-filtro i { color: var(--art-color, #D96A2B); }
.blog-filtro:hover { border-color: #e7c9b2; color: #1c1917; }
.blog-filtro.is-activo { background: #1c1917; border-color: #1c1917; color: #fff; }
.blog-filtro.is-activo i { color: #fff; }
@media (max-width: 767.98px) { .blog-filtros { justify-content: flex-start; } }

/* Tarjetas */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.blog-card { display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid #f0e2d6; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 1px 2px rgba(44, 26, 14, .04); transition: transform .2s, box-shadow .2s, border-color .2s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(44, 26, 14, .10); border-color: color-mix(in srgb, var(--art-color, #D96A2B) 35%, white); color: inherit; }
.blog-card-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; font-size: 2.6rem;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(135deg, var(--art-color, #D96A2B), color-mix(in srgb, var(--art-color, #D96A2B) 50%, #1c1208)); }
.blog-card-cover.has-img { background: #f5f5f4; }
.blog-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-card:hover .blog-card-cover img { transform: scale(1.04); }
.blog-card-cover > i { position: relative; transition: transform .35s; }
.blog-card:hover .blog-card-cover > i { transform: scale(1.12) rotate(-6deg); }
.blog-card-ring { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); }
.blog-card-ring--2 { width: 105%; border-color: rgba(255, 255, 255, .12); }
.blog-card-info { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.blog-cat { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--art-color, #D96A2B); }
.blog-card-titulo { font-size: 1.08rem; line-height: 1.3; font-weight: 800; color: #1c1917; letter-spacing: -.01em; }
.blog-card-resumen { font-size: .9rem; color: #6e625c; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-meta { margin-top: auto; padding-top: 4px; font-size: .8rem; color: #a8a29e; }

.blog-card--destacada { margin-bottom: 26px; }
@media (min-width: 900px) {
    .blog-card--destacada { flex-direction: row; }
    .blog-card--destacada .blog-card-cover { width: 54%; aspect-ratio: auto; min-height: 330px; font-size: 4rem; }
    .blog-card--destacada .blog-card-info { padding: 36px 40px; justify-content: center; }
    .blog-card--destacada .blog-card-titulo { font-size: 1.9rem; line-height: 1.15; }
    .blog-card--destacada .blog-card-resumen { font-size: 1.02rem; -webkit-line-clamp: 3; }
    .blog-card--destacada .blog-card-meta { margin-top: 10px; }
}

.blog-vacio { max-width: 520px; margin: 20px auto; padding: 40px 24px; text-align: center; border-radius: 22px; background: #fff; border: 1.5px dashed #f0e2d6; }
.blog-vacio i { font-size: 2.4rem; color: #D96A2B; }
.blog-vacio h2 { margin: 10px 0 6px; font-size: 1.3rem; font-weight: 800; }
.blog-vacio p { margin: 0; color: #6e625c; }

/* Artículo */
.blog-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.blog-progreso span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #D96A2B, #F5A05A); border-radius: 0 3px 3px 0; }
.blog-articulo { padding: clamp(100px, 12vw, 130px) 0 40px; }
.blog-lectura { max-width: 760px; }
.blog-migas { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .86rem; color: #a8a29e; }
.blog-migas a { color: #6e625c; text-decoration: none; font-weight: 700; }
.blog-migas a:hover { color: #C2410C; }
.blog-cat--grande { padding: 6px 13px; border-radius: 999px; background: color-mix(in srgb, var(--art-color, #D96A2B) 10%, white); font-size: .78rem; }
.blog-titulo { margin: 14px 0 12px; font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 900; line-height: 1.12; letter-spacing: -.03em; color: #1c1917; }
.blog-lead { margin: 0 0 22px; font-size: 1.18rem; line-height: 1.55; color: #57534e; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid #f0e2d6; border-bottom: 1px solid #f0e2d6; }
.blog-autor { display: flex; align-items: center; gap: 10px; }
.blog-autor img { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #f0e2d6; object-fit: cover; }
.blog-autor span { display: flex; flex-direction: column; line-height: 1.25; }
.blog-autor strong { font-size: .92rem; color: #1c1917; }
.blog-autor small { font-size: .8rem; color: #a8a29e; }
.blog-compartir { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid #f0e2d6; background: #fff; font-weight: 700; font-size: .84rem; color: #44403c; transition: all .15s; }
.blog-compartir:hover { border-color: #D96A2B; color: #C2410C; }
.blog-compartir.is-copiado { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.blog-portada-wrap { max-width: 1000px; margin: 28px auto 34px; }
.blog-portada { position: relative; aspect-ratio: 16 / 7; border-radius: 26px; overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 4.2rem;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .25), transparent 45%), linear-gradient(135deg, var(--art-color, #D96A2B), color-mix(in srgb, var(--art-color, #D96A2B) 50%, #1c1208));
    box-shadow: 0 24px 60px rgba(44, 26, 14, .14); }
.blog-portada.has-img { background: #f5f5f4; }
.blog-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-portada > i { position: relative; animation: topoArtFlota 4s ease-in-out infinite; }
@media (max-width: 575.98px) { .blog-portada { aspect-ratio: 16 / 10; border-radius: 18px; font-size: 3rem; } }

.blog-texto { font-size: 1.1rem; line-height: 1.8; }
.blog-texto h3 { font-size: 1.45rem; margin-top: 1.6em; }
.blog-texto h4 { font-size: 1.15rem; }
.blog-texto ol > li { padding-left: 46px; min-height: 32px; }
.blog-texto ol > li::before { width: 32px; height: 32px; font-size: .9rem; }

.blog-accion { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 34px 0 10px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #f0e2d6; }
.blog-accion strong { display: block; color: #1c1917; }
.blog-accion span { font-size: .9rem; color: #6e625c; }
.blog-accion-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: #1c1917; color: #fff !important; font-weight: 800; text-decoration: none; }
.blog-accion-btn:hover { background: #C2410C; }

.blog-relacionados { padding: 40px 0 10px; }
.blog-relacionados h2 { margin: 0 0 18px; font-size: 1.4rem; font-weight: 900; color: #1c1917; }

/* Llamado final */
.blog-cta { padding: 30px 0 60px; }
.blog-cta-caja { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(24px, 4vw, 40px); border-radius: 26px; color: #fff;
    background: radial-gradient(500px 220px at 90% 0%, rgba(245, 160, 90, .4), transparent 60%), #1d120a; }
.blog-cta-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: #fbbf8a; }
.blog-cta h2 { margin: 8px 0 6px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.02em; color: #fff; max-width: 620px; }
.blog-cta p { margin: 0; color: rgba(255, 255, 255, .72); }
.blog-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 14px; background: #D96A2B; color: #fff !important; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 28px rgba(217, 106, 43, .35); }
.blog-cta-btn:hover { background: #C2410C; }
@media (prefers-reduced-motion: reduce) { .blog-portada > i { animation: none; } }

/* ============================================================
   Academia pública (portada y rutas) — estilo «escuela digital»
   ============================================================ */
.aca { --tinta: #1c1917; --suave: #6e625c; --borde: #efe6dd; }
.aca-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c, #D96A2B); }
.aca-kicker--hero { padding: 7px 14px; border-radius: 99px; background: #fff; color: #C2410C; box-shadow: 0 6px 18px rgba(217,106,43,.14); letter-spacing: .04em; }
.aca-kicker--claro { color: rgba(255,255,255,.85); }
.aca-h2 { margin: 6px 0 6px; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.02em; color: var(--tinta); }
.aca-cabeza { max-width: 640px; margin-bottom: 22px; }
.aca-cabeza p { margin: 0; color: var(--suave); }
.aca-seccion { padding: 34px 0 10px; }
.aca-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 14px; font-weight: 800; font-size: .95rem; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.aca-btn:hover { transform: translateY(-2px); }
.aca-btn--primario { background: #1c1917; color: #fff !important; box-shadow: 0 12px 26px rgba(28,25,23,.22); }
.aca-btn--suave { background: #fff; color: #C2410C !important; border: 1.5px solid #f3d6c1; }
.aca-btn--blanco { background: #fff; color: var(--tinta) !important; box-shadow: 0 10px 24px rgba(0,0,0,.18); }

/* Hero */
.aca-hero { padding: clamp(104px, 13vw, 140px) 0 40px; overflow: hidden;
    background: radial-gradient(520px 300px at 8% 10%, rgba(37,99,235,.10), transparent 70%), radial-gradient(520px 320px at 92% 20%, rgba(124,58,237,.12), transparent 70%), radial-gradient(600px 300px at 60% 100%, rgba(217,106,43,.14), transparent 70%), #fffaf6; }
.aca-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.aca-hero h1 { margin: 18px 0 14px; font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; color: var(--tinta); }
.aca-hero h1 span { background: linear-gradient(90deg, #D96A2B, #7C3AED 55%, #2563EB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aca-hero p { max-width: 560px; font-size: 1.08rem; color: #57534e; }
.aca-buscar { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 22px 0 16px; padding: 6px 6px 6px 18px; border-radius: 16px; background: #fff; border: 1.5px solid var(--borde); box-shadow: 0 10px 30px rgba(44,26,14,.07); }
.aca-buscar:focus-within { border-color: #D96A2B; box-shadow: 0 0 0 4px rgba(217,106,43,.12); }
.aca-buscar i { color: #a8a29e; }
.aca-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 0; font-size: 16px; background: transparent; }
.aca-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.aca-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: .88rem; color: var(--suave); }
.aca-stats b { color: var(--tinta); font-size: 1.05rem; }
.aca-hero-arte { position: relative; min-height: 360px; }
.aca-ficha { position: absolute; display: flex; flex-direction: column; gap: 10px; width: 170px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px rgba(44,26,14,.12); border-top: 5px solid var(--c); animation: acaFlota 6s ease-in-out infinite; }
.aca-ficha i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--c); }
.aca-ficha b { font-size: .92rem; color: var(--tinta); line-height: 1.2; }
.aca-ficha--0 { top: 0; left: 4%; transform: rotate(-5deg); }
.aca-ficha--1 { top: 18px; right: 4%; transform: rotate(4deg); animation-delay: -1.5s; }
.aca-ficha--2 { bottom: 10px; left: 10%; transform: rotate(3deg); animation-delay: -3s; }
.aca-ficha--3 { bottom: 0; right: 12%; transform: rotate(-4deg); animation-delay: -4.5s; }
.aca-medalla { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 22px; border-radius: 24px; background: #1c1917; color: #fff; box-shadow: 0 24px 50px rgba(28,25,23,.3); z-index: 2; }
.aca-medalla i { font-size: 2rem; color: #FBBF24; }
.aca-medalla small { color: rgba(255,255,255,.65); font-size: .74rem; }
.aca-metros { position: absolute; top: 38%; right: 0; z-index: 3; padding: 8px 14px; border-radius: 99px; background: #16A34A; color: #fff; font-weight: 800; font-size: .88rem; box-shadow: 0 10px 22px rgba(22,163,74,.3); animation: acaFlota 4s ease-in-out infinite; }
.aca-topi { position: absolute; bottom: 30%; left: 0; z-index: 3; width: 72px; height: 72px; padding: 8px; border-radius: 22px; background: #fff; box-shadow: 0 12px 26px rgba(44,26,14,.15); }
@keyframes acaFlota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Pasos del método */
.aca-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.aca-paso { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--borde); position: relative; overflow: hidden; }
.aca-paso::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--c); opacity: .08; }
.aca-paso > span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: var(--c); margin-bottom: 12px; }
.aca-paso b { display: block; color: var(--tinta); margin-bottom: 4px; }
.aca-paso p { margin: 0; font-size: .88rem; color: var(--suave); }

/* Rutas */
.aca-rutas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.aca-ruta { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 22px; text-decoration: none; color: var(--tinta); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, white), #fff 70%); border: 1.5px solid color-mix(in srgb, var(--c) 22%, white); transition: transform .2s, box-shadow .2s; }
.aca-ruta:hover { transform: translateY(-4px); box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 22%, transparent); color: var(--tinta); }
.aca-ruta-top { display: flex; align-items: center; justify-content: space-between; }
.aca-ruta-icono { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--c); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.aca-ruta-num { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.aca-ruta strong { font-size: 1.12rem; font-weight: 900; margin-top: 4px; }
.aca-ruta-desc { font-size: .86rem; color: var(--suave); flex: 1; }
.aca-ruta-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--suave); padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c) 25%, white); }
.aca-nivel { padding: 3px 9px; border-radius: 99px; background: #fff; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, white); }

/* Empieza aquí */
.aca-empieza { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 28px; text-decoration: none; color: #fff; overflow: hidden; position: relative;
    background: radial-gradient(500px 260px at 100% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #1c1208)); box-shadow: 0 24px 50px color-mix(in srgb, var(--c) 30%, transparent); }
.aca-empieza:hover { color: #fff; }
.aca-empieza-txt { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.aca-empieza strong { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; max-width: 680px; }
.aca-empieza-txt > span:not(.aca-kicker):not(.aca-btn) { color: rgba(255,255,255,.85); max-width: 620px; }
.aca-empieza-arte { width: 150px; height: 150px; border-radius: 40px; display: grid; place-items: center; font-size: 4rem; background: rgba(255,255,255,.16); transform: rotate(-8deg); }

/* Filas por ruta y tarjetas */
.aca-fila-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aca-fila-cabeza h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--tinta); }
.aca-fila-cabeza h2 span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; color: #fff; background: var(--c); }
.aca-fila-cabeza a { font-weight: 800; font-size: .88rem; color: var(--c); text-decoration: none; white-space: nowrap; }
.aca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.aca-card { display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid var(--borde); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.aca-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(44,26,14,.10); border-color: color-mix(in srgb, var(--c) 35%, white); color: inherit; }
.aca-card-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8; overflow: hidden; color: #fff; font-size: 2.4rem;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.28), transparent 45%), linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 50%, #1c1208)); }
.aca-card-cover.has-img { background: #f5f5f4; }
.aca-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.aca-card:hover .aca-card-cover img { transform: scale(1.05); }
.aca-card-forma { position: absolute; width: 120px; height: 120px; border-radius: 34px; background: rgba(255,255,255,.14); transform: rotate(18deg); right: -20px; bottom: -40px; }
.aca-card-cover > i { position: relative; }
.aca-card-num { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.95); color: var(--c); font-size: .72rem; font-weight: 800; }
.aca-card-info { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.aca-card-cat { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.aca-card-info strong { font-size: 1.04rem; line-height: 1.3; color: var(--tinta); }
.aca-card-resumen { font-size: .87rem; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aca-card-meta { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 12px; font-size: .78rem; color: #a8a29e; }
.aca-card-ir { margin-left: auto; font-weight: 800; color: var(--c); }

/* Gamificación */
.aca-juego { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 28px; color: #fff;
    background: radial-gradient(500px 260px at 0% 0%, rgba(124,58,237,.45), transparent 60%), radial-gradient(500px 260px at 100% 100%, rgba(217,106,43,.45), transparent 60%), #1d120a; }
.aca-juego h2 { margin: 10px 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.02em; color: #fff; }
.aca-juego p { color: rgba(255,255,255,.75); margin-bottom: 18px; }
.aca-juego b { color: #FBBF24; }
.aca-rangos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aca-rangos li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); text-align: center; animation: acaEntra .5s calc(var(--i, 0) * 80ms) both; }
.aca-rangos span { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: #D96A2B; color: #fff; }
.aca-rangos b { font-size: .82rem; color: #fff; }
.aca-rangos small { font-size: .72rem; color: rgba(255,255,255,.6); }
.aca-rangos li.is-alfa { background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(251,191,36,.08)); border-color: rgba(251,191,36,.45); }
.aca-rangos li.is-alfa span { background: #FBBF24; color: #1c1917; }
@keyframes acaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Página de una ruta */
.aca-ruta-hero { padding: clamp(104px, 13vw, 130px) 0 30px; background: radial-gradient(600px 260px at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, white), #fffaf6); }
.aca-migas { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .86rem; color: #a8a29e; }
.aca-migas a { color: var(--suave); font-weight: 700; text-decoration: none; }
.aca-ruta-hero-fila { display: flex; gap: 20px; align-items: flex-start; }
.aca-ruta-hero .aca-ruta-icono { width: 76px; height: 76px; border-radius: 24px; font-size: 2rem; flex-shrink: 0; }
.aca-ruta-hero h1 { margin: 6px 0 8px; font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; color: var(--tinta); }
.aca-ruta-hero p { color: #57534e; max-width: 620px; font-size: 1.05rem; }
.aca-ruta-datos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; font-weight: 700; color: var(--suave); }
.aca-ruta-datos i { color: var(--c); }
.aca-temario { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; max-width: 860px; }
.aca-temario a { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--borde); text-decoration: none; color: var(--tinta); transition: transform .15s, box-shadow .15s, border-color .15s; }
.aca-temario a:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--c) 40%, white); box-shadow: 0 12px 26px rgba(44,26,14,.08); color: var(--tinta); }
.aca-temario-num { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--c); }
.aca-temario-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aca-temario-txt small { color: var(--suave); font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.aca-temario-min { flex-shrink: 0; font-size: .82rem; font-weight: 800; color: var(--c); }
.aca-otras h2 { font-size: 1.1rem; font-weight: 900; margin-bottom: 10px; }
.aca-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aca-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 99px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--c) 30%, white); color: var(--tinta); font-weight: 700; font-size: .88rem; text-decoration: none; }
.aca-chips a i { color: var(--c); }
.aca-chips a b { padding: 1px 7px; border-radius: 99px; background: var(--c); color: #fff; font-size: .72rem; }
.aca-resultados { padding: 30px 0; }
.aca-sin, .aca-vacio { padding: 30px; text-align: center; color: var(--suave); }

@media (max-width: 991.98px) {
    .aca-hero-grid { grid-template-columns: 1fr; }
    .aca-hero-arte { min-height: 300px; max-width: 520px; width: 100%; margin: 0 auto; }
    .aca-pasos { grid-template-columns: 1fr 1fr; }
    .aca-juego { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .aca-pasos { grid-template-columns: 1fr; }
    .aca-ficha { width: 140px; padding: 14px; }
    .aca-empieza { grid-template-columns: 1fr; }
    .aca-empieza-arte { display: none; }
    .aca-rangos { grid-template-columns: repeat(2, 1fr); }
    .aca-temario-min { display: none; }
    .aca-ruta-hero-fila { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .aca-ficha, .aca-metros, .aca-rangos li { animation: none; } }

/* Lección dentro de una ruta */
.blog-leccion-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.blog-leccion { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; color: var(--art-color, #D96A2B); }
.blog-leccion-barra { width: 90px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--art-color, #D96A2B) 15%, white); overflow: hidden; }
.blog-leccion-barra span { display: block; height: 100%; border-radius: 99px; background: var(--art-color, #D96A2B); }
.blog-quiz-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 14px; padding: 18px 20px; border-radius: 20px; color: #fff;
    background: radial-gradient(400px 200px at 100% 0%, rgba(217,106,43,.45), transparent 60%), linear-gradient(135deg, #6D28D9, #4c1d95); }
.blog-quiz-cta-icono { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.16); font-size: 1.3rem; color: #FBBF24; flex-shrink: 0; }
.blog-quiz-cta > div { flex: 1; min-width: 220px; }
.blog-quiz-cta strong { display: block; font-size: 1.02rem; }
.blog-quiz-cta div span { font-size: .86rem; color: rgba(255,255,255,.8); }
.blog-quiz-cta a { padding: 10px 16px; border-radius: 12px; background: #fff; color: #4c1d95 !important; font-weight: 800; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.blog-quiz-cta a.is-suave { background: rgba(255,255,255,.12); color: #fff !important; }
.blog-siguiente { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 10px; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--art-color, #D96A2B) 30%, white); text-decoration: none; color: #1c1917; transition: transform .15s, box-shadow .15s; }
.blog-siguiente:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(44,26,14,.08); color: #1c1917; }
.blog-siguiente small { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--art-color, #D96A2B); }
.blog-siguiente strong { font-size: 1.05rem; }
.blog-siguiente > i { font-size: 2rem; color: var(--art-color, #D96A2B); }
.blog-siguiente.is-fin small { color: #B8860B; }

/* Identidad visual con las piezas de la Academia */
.aca-hero-arte.has-topi { display: grid; place-items: center; }
.aca-halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(251,191,36,.35), rgba(217,106,43,.12) 55%, transparent 70%); }
.aca-topi-grande { position: relative; width: min(330px, 80%); height: auto; filter: drop-shadow(0 24px 36px rgba(154,52,18,.28)); animation: acaFlota 5s ease-in-out infinite; z-index: 1; }
.aca-insignia-flota { position: absolute; width: 92px; height: 92px; object-fit: contain; z-index: 2; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); animation: acaFlota 6s ease-in-out infinite; }
.aca-insignia-flota--0 { top: 2%; left: 6%; transform: rotate(-10deg); }
.aca-insignia-flota--1 { top: 6%; right: 6%; transform: rotate(8deg); animation-delay: -2s; }
.aca-insignia-flota--2 { bottom: 8%; left: 2%; transform: rotate(6deg); animation-delay: -3.5s; }
.aca-insignia-flota--3 { bottom: 4%; right: 4%; width: 108px; height: 108px; transform: rotate(-6deg); animation-delay: -1s; }
.has-topi .aca-metros { top: auto; bottom: 34%; right: -2%; }
.aca-rango-chip { position: absolute; top: 40%; left: -2%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #1c1917; color: #fff; font-weight: 800; font-size: .8rem; box-shadow: 0 12px 24px rgba(28,25,23,.3); animation: acaFlota 5.5s ease-in-out infinite; animation-delay: -2.5s; }
.aca-rango-chip img { width: 34px; height: 34px; object-fit: contain; }
.aca-rangos li img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); transition: transform .2s; }
.aca-rangos li:hover img { transform: translateY(-4px) scale(1.06); }
.aca-insignias { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.aca-insignia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 16px; border-radius: 22px; text-align: center; background: #fff; border: 1px solid var(--borde); transition: transform .2s, box-shadow .2s; }
.aca-insignia:hover { transform: translateY(-4px); box-shadow: 0 16px 30px color-mix(in srgb, var(--c) 18%, transparent); }
.aca-insignia img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.14)); transition: transform .3s; }
.aca-insignia:hover img { transform: rotate(-8deg) scale(1.06); }
.aca-insignia-icono { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: var(--c); margin-bottom: 10px; }
.aca-insignia-escalon { margin-top: 6px; padding: 2px 9px; border-radius: 99px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 10%, white); }
.aca-insignia strong { font-size: .92rem; color: var(--tinta); }
.aca-insignia small { font-size: .78rem; color: var(--suave); line-height: 1.35; }
.aca-insignia.is-alfa { background: linear-gradient(180deg, #fffbeb, #fff); border-color: #fde68a; }
.aca-insignias-cta { display: flex; justify-content: center; margin-top: 20px; }
.blog-quiz-cta-topi { width: 84px; height: 84px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.3)); margin: -6px 0; }
@media (max-width: 575.98px) {
    .aca-insignia-flota { width: 64px; height: 64px; }
    .aca-insignia-flota--3 { width: 76px; height: 76px; }
    .aca-insignias { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .aca-topi-grande, .aca-insignia-flota, .aca-rango-chip { animation: none; } }

/* «Empieza aquí»: fresco y luminoso */
.aca-empieza { color: #0f172a; box-shadow: 0 22px 50px rgba(99, 102, 241, .16);
    background: radial-gradient(circle at 1px 1px, rgba(99,102,241,.12) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(120deg, #E0F2FE 0%, #EDE9FE 48%, #FCE7F3 100%);
    border: 1px solid #ddd6fe; }
.aca-empieza:hover { color: #0f172a; transform: translateY(-3px); box-shadow: 0 28px 60px rgba(99, 102, 241, .22); }
.aca-empieza { transition: transform .2s, box-shadow .2s; }
.aca-empieza-kicker { padding: 6px 12px; border-radius: 99px; background: #fff; color: #4F46E5; box-shadow: 0 6px 16px rgba(79,70,229,.12); }
.aca-empieza strong { color: #0f172a; }
.aca-empieza-txt > span:not(.aca-kicker):not(.aca-btn) { color: #475569; }
.aca-empieza-btn { background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff !important; box-shadow: 0 12px 26px rgba(79,70,229,.32); }
.aca-empieza:hover .aca-empieza-btn { transform: translateX(3px); }
.aca-empieza-arte { position: relative; width: 210px; height: 190px; border-radius: 0; background: none; transform: none; font-size: 4rem; color: #6366F1; }
.aca-empieza-arte img { position: relative; z-index: 1; width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(79,70,229,.22)); animation: acaFlota 4.5s ease-in-out infinite; }
.aca-empieza-burbuja { position: absolute; border-radius: 50%; }
.aca-empieza-burbuja--1 { width: 160px; height: 160px; left: 22px; top: 14px; background: #fff; opacity: .85; }
.aca-empieza-burbuja--2 { width: 34px; height: 34px; right: 4px; top: 6px; background: #FDE68A; }
.aca-empieza-burbuja--3 { width: 22px; height: 22px; left: 6px; bottom: 18px; background: #A7F3D0; }
.aca-empieza-chip { position: absolute; z-index: 2; right: -4px; bottom: 10px; padding: 6px 11px; border-radius: 99px; background: #fff; color: #0f172a; font-size: .78rem; font-weight: 800; box-shadow: 0 8px 18px rgba(15,23,42,.12); }
.aca-empieza-chip i { color: #6366F1; }
@media (max-width: 575.98px) { .aca-empieza-arte { display: none; } }

/* Quiz público, cuenta de alumno y avance de ruta */
.aq { margin: 28px 0 14px; scroll-margin-top: 90px; }
.aq-aviso { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 11px 14px; border-radius: 12px; font-size: .9rem; font-weight: 600; }
.aq-aviso.is-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.aq-aviso.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.aq-acceso { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 22px; border: 1px solid #ddd6fe;
    background: radial-gradient(circle at 1px 1px, rgba(99,102,241,.10) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(120deg, #E0F2FE, #EDE9FE 50%, #FCE7F3); }
.aq-topi { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 10px 14px rgba(79,70,229,.2)); }
.aq-acceso-txt { flex: 1; min-width: 0; }
.aq-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: #fff; color: #4F46E5; font-size: .74rem; font-weight: 800; }
.aq-acceso h2 { margin: 10px 0 6px; font-size: 1.35rem; font-weight: 900; color: #0f172a; }
.aq-acceso p { color: #475569; font-size: .94rem; margin-bottom: 12px; }
.aq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aq-form input[type=text], .aq-form input[type=email] { padding: 12px 14px; border-radius: 12px; border: 1.5px solid #c7d2fe; background: #fff; font-size: 16px; }
.aq-form input:focus { outline: 0; border-color: #6366F1; box-shadow: 0 0 0 4px rgba(99,102,241,.15); }
.aq-form .aq-check, .aq-form small { grid-column: 1 / -1; font-size: .82rem; color: #475569; }
.aq-check { display: flex; gap: 8px; align-items: center; }
.aq-form button { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff; font-weight: 800; box-shadow: 0 12px 24px rgba(79,70,229,.28); }
.aq-form--codigo { grid-template-columns: 1fr auto; }
.aq-form--codigo button { grid-column: auto; padding: 13px 22px; }
.aq-codigo { text-align: center; letter-spacing: 10px; font-size: 1.5rem !important; font-weight: 800; }
.aq-opcion { cursor: pointer; position: relative; }
.aq-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.aq-opcion:has(input:checked):not(.is-correcta):not(.is-incorrecta) { border-color: #7C3AED; background: #f5f3ff; }
.aq-opcion:has(input:checked):not(.is-correcta):not(.is-incorrecta) .topo-quiz-letra { background: #7C3AED; color: #fff; }
.aq-opcion:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(124,58,237,.25); }
.aq .topo-quiz-resultado { margin-bottom: 12px; }
.aq-ruta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1.5px solid #fde68a; }
.aq-ruta-txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.aq-ruta-txt small { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #B45309; }
.aq-barra { height: 8px; border-radius: 99px; background: #fef3c7; overflow: hidden; }
.aq-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F59E0B, #16A34A); }
.aq-cert-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #F59E0B, #B45309); color: #fff !important; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px rgba(180,83,9,.3); }
.aq-sesion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #efe6dd; font-size: .84rem; color: #57534e; }
.aq-sesion i { color: #6366F1; }
.aq-sesion form { margin: 0; }
.aq-sesion button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; border: 1.5px solid #e7e5e4; background: #fff; color: #44403c; font-weight: 700; font-size: .82rem; transition: all .15s; }
.aq-sesion button:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.aq-sesion button i { color: inherit; }
@media (max-width: 575.98px) { .aq-acceso { flex-direction: column; } .aq-topi { width: 72px; height: 72px; } .aq-form { grid-template-columns: 1fr; } }
.aca-card--mas { align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--c) 7%, white); border: 1.5px dashed color-mix(in srgb, var(--c) 35%, white); color: var(--tinta); }
.aca-card--mas i { font-size: 2rem; color: var(--c); }
.aca-card--mas span { font-size: .86rem; color: var(--suave); }
.aca-util { color: #15803d; font-weight: 800; }

/* Lectura sobre la cuadrícula: panel blanco translúcido detrás del texto */
.blog-articulo .blog-texto,
.acp .acp-doc {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(236, 231, 226, .9);
    border-radius: 22px;
    padding: clamp(22px, 4vw, 44px);
    box-shadow: 0 12px 40px rgba(44, 26, 14, .05);
}
.blog-articulo .blog-lectura:first-of-type .blog-lead { background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 10px 14px; margin-left: -14px; margin-right: -14px; }
@media (max-width: 575px) {
    .blog-articulo .blog-texto, .acp .acp-doc { border-radius: 16px; padding: 18px 16px; margin-left: -4px; margin-right: -4px; }
}