/* ============================================================
   RETO IQRAʾ · estilos propios de /reto/ (9-sep-2026)
   Se carga DESPUÉS de css/landing.css y solo añade lo que la landing no tiene:
   puntos de progreso, marco de vídeo 16:9 con tarjeta «próximamente»,
   bloques del día, navegación entre días, índice y pie compacto.
   Móvil primero; mismas variables y fuentes que la landing.
============================================================ */

/* ── Barra superior ──
   landing.css tiene un fallo heredado: `.sub-bar a{color:cream}` pisa a `.cdb-cta{color:green}` y el botón
   queda crema sobre crema (se ve también en horario/programa/testimonios). Aquí se corrige solo para /reto/. */
.reto-page .sub-bar .cdb-cta{color:var(--green-900)}
.reto-page .sub-bar .cdb-cta:hover,.reto-page .sub-bar .cdb-cta:focus-visible{color:var(--green-900);text-decoration:none}

/* ── Cabecera del día ── */
.reto-head{padding:clamp(34px,5vw,56px) 24px}
.reto-head h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:8px}
.reto-titulo{font-family:var(--ff-display);font-style:italic;font-size:clamp(1.05rem,2.6vw,1.3rem);color:var(--gold-500)!important;margin-top:4px}
.reto-pasos{list-style:none;display:flex;justify-content:center;gap:8px;margin:0 0 22px;padding:0}
.reto-pasos a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.72);font-family:var(--ff-body);font-size:.85rem;font-weight:600;text-decoration:none;transition:var(--ease)}
.reto-pasos a:hover,.reto-pasos a:focus-visible{border-color:var(--gold-500);color:#fff}
.reto-pasos .is-done a{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff}
.reto-pasos .is-locked a{opacity:.55}
.reto-pasos a[aria-current="page"]{background:var(--gold-500);border-color:var(--gold-500);color:var(--green-900);opacity:1}
@media(max-width:360px){.reto-pasos{gap:6px}.reto-pasos a{width:28px;height:28px;font-size:.78rem}}

/* ── Cuerpo ── */
.reto-main{padding-block:var(--space-6)}
.reto-main .wrap{max-width:760px}

/* Marco del vídeo: 16:9 con reproductor; en estado «próximamente» crece con el texto */
.reto-video{position:relative;width:100%;min-height:220px;border-radius:16px;overflow:hidden;background:var(--green-900);box-shadow:0 10px 30px rgba(15,58,46,.16)}
.reto-video.has-video{aspect-ratio:16/9;min-height:0}
.reto-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reto-video-estado{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:220px;padding:28px 24px;color:#fff;background:linear-gradient(162deg,var(--green-900) 0%,var(--green-800) 100%)}
.reto-video.has-video .reto-video-estado{display:none}
.rv-ico{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--gold-500);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--gold-500)}
.rv-ico svg{width:22px;height:22px;margin-left:3px}
.rv-titulo{font-family:var(--ff-display);font-size:clamp(1.05rem,3.4vw,1.4rem);font-weight:500;line-height:1.3;margin-bottom:8px;color:#fff}
.rv-texto{font-family:var(--ff-body);font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.55;max-width:38ch}
@media(min-width:640px){.reto-video{aspect-ratio:16/9;min-height:0}.reto-video-estado{position:absolute;inset:0;min-height:0}}

/* Bloques «Hoy aprendes» y «Tarea de hoy» (huecos sin rellenar → hidden desde reto.js) */
.reto-bloque{margin-top:var(--space-6)}
.reto-h2{font-family:var(--ff-display);font-size:clamp(1.4rem,3vw,1.8rem);font-weight:500;color:var(--ink-900);letter-spacing:-.01em;line-height:1.2;margin-bottom:12px}
.reto-texto{font-family:var(--ff-body);font-size:1.0625rem;color:var(--ink-700);line-height:1.7}
.reto-texto p+p,.reto-texto p+ul,.reto-texto ul+p{margin-top:10px}
.reto-texto ul,.reto-texto ol{padding-left:1.25em}
.reto-texto li+li{margin-top:6px}
.reto-texto strong{color:var(--ink-900);font-weight:600}
.reto-texto [lang="ar"]{font-family:var(--ff-arabic);font-size:1.35em;line-height:1.4}
.reto-tarea{background:#fff;border:1px solid var(--cream-300);border-radius:18px;padding:22px 22px 24px}
.reto-tarea .reto-h2{font-size:clamp(1.25rem,2.6vw,1.5rem)}

/* Navegación entre días */
.reto-nav{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.reto-nav .btn{flex:1 1 200px;white-space:normal;text-align:center;line-height:1.25}
.reto-nav .btn-disabled{flex:1 1 200px;line-height:1.25}
.reto-nav-nota{flex-basis:100%;font-family:var(--ff-body);font-size:.88rem;color:var(--ink-500);text-align:center;line-height:1.5;margin:0}
.reto-dudas{margin-top:var(--space-4);text-align:center;font-family:var(--ff-body);font-size:.95rem;color:var(--ink-700)}
.reto-dudas a{color:var(--green-800);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Puente al Intensivo (día 7) */
.reto-puente{background:var(--cream-200);padding:var(--space-8) 24px}
.reto-puente .wrap{max-width:760px}
.reto-puente .h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.reto-puente .intensivo-mini{text-align:left;margin-top:28px}
.reto-puente .intensivo-mini .link{font-weight:600;color:var(--green-800);text-decoration:underline;text-underline-offset:3px}
.reto-autodidacta{margin-top:20px;text-align:center;font-family:var(--ff-body);font-size:.95rem;color:var(--ink-700);line-height:1.6}

/* Índice de los 7 días */
.reto-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.reto-lista a{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--cream-300);border-radius:16px;padding:16px 18px;transition:var(--ease);color:var(--ink-900)}
.reto-lista a:hover,.reto-lista a:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,24,20,.08);border-color:rgba(15,58,46,.25)}
.rl-num{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--green-800);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-body);font-weight:700;font-size:1.05rem}
.reto-lista .is-locked .rl-num{background:var(--cream-200);color:var(--ink-500)}
.rl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rl-dia{font-family:var(--ff-body);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700)}
.rl-titulo{font-family:var(--ff-display);font-size:1.1rem;font-weight:500;color:var(--ink-900);line-height:1.3}
.rl-estado{font-family:var(--ff-body);font-size:.85rem;color:var(--ink-500)}
.reto-lista .is-open .rl-estado{color:var(--success);font-weight:600}
.rl-arrow{flex-shrink:0;color:var(--green-800);font-weight:600}
.reto-aviso{margin-top:var(--space-6);background:#fff;border:1px solid var(--cream-300);border-radius:18px;padding:24px 22px;text-align:center;font-family:var(--ff-body);color:var(--ink-700);line-height:1.6}
.reto-aviso strong{color:var(--ink-900)}
.reto-aviso .btn{margin-top:14px;white-space:normal;line-height:1.25}
@media(max-width:480px){.reto-aviso .btn{width:100%}}

/* ── Página de alta (/reto/, 9-sep): cabecera verde con la promesa + tarjeta de alta de la home + índice.
   Todo bajo body.reto-alta: las páginas de día no cambian. La tarjeta y el formulario
   (.leadmag-card, .reto-form, .lm-*) son los de css/landing.css, sin retocar. ── */
.reto-alta .reto-head h1{margin-bottom:14px}
.reto-alta .reto-head p.lm-sub{max-width:560px}
.reto-alta .leadmag.reto-alta-form{padding:var(--space-6) 24px var(--space-8)}   /* la home usa space-12: aquí el formulario va arriba */
.reto-alta .reto-date{margin-top:0}
.reto-indice-head{text-align:center;max-width:620px;margin:0 auto var(--space-4)}
.reto-indice-head .h2{margin-bottom:12px}
.reto-indice-head p{font-family:var(--ff-body);font-size:1.0625rem;color:var(--ink-700);line-height:1.65}
.reto-indice-head strong{color:var(--ink-900);font-weight:600}

/* Pie compacto (sobre .footer de la landing: conserva la cenefa superior) */
.reto-footer .footer-bar{padding:58px 24px 22px;border-top:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.reto-footer .footer-bar a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}
.reto-footer .footer-bar a:hover,.reto-footer .footer-bar a:focus-visible{color:#fff}