/* ===== EL PLANO DE TU RUTA · A Anticrisis → B Emprenderte → C Seix → D Épale =====
   Un solo mapa gráfico para las cuatro plataformas de la cadena + la presentación En5cronia.
   Diseño central, oscuro con luz y profundidad (nunca fondo blanco plano). 2026-11-03 */
.plano-sec{padding:58px 16px 10px}
.plano{--a:#4D7C0F;--b:#EA580C;--c:#2563EB;--d:#5B21B6;--gold:#D4AF37;--prog:12.5%;
  max-width:1060px;margin:0 auto;position:relative;overflow:hidden;
  background:radial-gradient(700px 320px at 12% -10%,rgba(77,124,15,.28),transparent 60%),
             radial-gradient(760px 340px at 88% -12%,rgba(91,33,182,.32),transparent 60%),
             radial-gradient(600px 300px at 50% 115%,rgba(212,175,55,.14),transparent 60%),
             linear-gradient(160deg,#151238,#1E1150 55%,#0B0E2A);
  color:#F4F1FF;border:1px solid rgba(212,175,55,.38);border-radius:28px;
  padding:38px 30px 30px;box-shadow:0 30px 60px -25px rgba(5,3,25,.75),inset 0 1px 0 rgba(255,255,255,.09)}
.plano-kicker{text-align:center;font-size:.78rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.plano-title{text-align:center;font-size:clamp(1.55rem,4.6vw,2.3rem);font-weight:900;line-height:1.15;margin:0 0 10px;color:#fff}
.plano-sub{text-align:center;color:#CFC9EE;max-width:640px;margin:0 auto;font-size:1rem;line-height:1.5}
.plano-xp{display:table;margin:16px auto 0;background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.08));border:1px solid rgba(212,175,55,.55);color:#F3D27A;font-weight:800;font-size:.9rem;padding:8px 18px;border-radius:999px}
.plano-aqui{display:table;margin:14px auto 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:.95rem;padding:8px 18px;border-radius:999px}
.plano-mapa{position:relative;margin:40px 4px 6px}
.plano-track{position:absolute;left:12.5%;right:12.5%;top:37px;height:6px;border-radius:99px;background:rgba(255,255,255,.13)}
.plano-fill{position:absolute;left:0;top:0;height:100%;width:var(--prog);border-radius:99px;background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--d));transition:width 1s cubic-bezier(.6,.05,.2,1)}
.plano-walk{position:absolute;top:50%;left:var(--prog);transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--gold);box-shadow:0 0 0 5px rgba(212,175,55,.28),0 0 22px rgba(212,175,55,.75);transition:left 1s cubic-bezier(.6,.05,.2,1);z-index:3}
.plano-sts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0;padding:0;position:relative;z-index:2}
.plano-st{--sc:var(--gold)}
.plano-st.s0{--sc:var(--a)}.plano-st.s1{--sc:var(--b)}.plano-st.s2{--sc:var(--c)}.plano-st.s3{--sc:var(--d)}
.plano-st button{width:100%;height:100%;cursor:pointer;text-align:center;font:inherit;color:#EDEAFF;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-top:5px solid var(--sc);
  border-radius:20px;padding:16px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;position:relative}
.plano-st button:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
.plano-st.activa button{background:rgba(255,255,255,.11);box-shadow:0 0 0 2px var(--sc),0 18px 34px -14px rgba(0,0,0,.65)}
.plano-letra{width:44px;height:44px;border-radius:50%;background:var(--sc);color:#fff;font-weight:900;font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.plano-punto{font-size:.7rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#B9B2E0}
.plano-plat{font-size:1.12rem;font-weight:900;color:#fff;line-height:1.15}
.plano-verbo{font-size:.78rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--sc);filter:brightness(1.5)}
.plano-chip{background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.6);color:#F3D27A;font-size:.68rem;font-weight:900;letter-spacing:1px;padding:3px 9px;border-radius:999px}
.plano-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),#9A7B1C);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;padding:5px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px rgba(154,123,28,.4);z-index:4}
.plano-panel{margin-top:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:24px 24px 20px;animation:planoIn .45s ease}
@keyframes planoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.plano-panel h3{margin:0 0 14px;font-size:1.3rem;font-weight:900;color:#fff}
.plano-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plano-cols h4{margin:0 0 6px;font-size:.74rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.plano-cols p{margin:0;color:#DCD7F5;line-height:1.55;font-size:.98rem}
.plano-cta{display:inline-block;margin-top:18px;background:linear-gradient(135deg,var(--gold),#9A7B1C);color:#fff;font-weight:900;text-decoration:none;padding:12px 24px;border-radius:999px;box-shadow:0 10px 22px -8px rgba(154,123,28,.6)}
.plano-cta:hover{filter:brightness(1.08)}
.plano-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.plano-nav button{cursor:pointer;font:inherit;font-weight:800;font-size:.95rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:11px 22px;border-radius:999px;transition:background .2s ease}
.plano-nav button:hover:not(:disabled){background:rgba(255,255,255,.16)}
.plano-nav button:disabled{opacity:.35;cursor:default}
.plano-nav .plano-vid{background:linear-gradient(135deg,#E85D3D,#B91C1C);border-color:transparent;box-shadow:0 10px 22px -10px rgba(185,28,28,.7)}
.plano-modal{position:fixed;inset:0;z-index:99990;background:rgba(4,3,16,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.plano-modal[hidden]{display:none}
.plano-modal-in{width:min(92vw,380px);text-align:center}
.plano-modal video{width:100%;border-radius:18px;border:1px solid rgba(212,175,55,.55);background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.plano-modal button{margin-top:14px;cursor:pointer;font:inherit;font-weight:800;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);padding:10px 24px;border-radius:999px}
@media(max-width:760px){
  .plano{padding:30px 18px 24px}
  .plano-sts{grid-template-columns:1fr;gap:16px}
  .plano-track{left:37px;right:auto;top:5%;bottom:5%;width:6px;height:auto}
  .plano-fill{left:0;top:0;width:100%!important;height:var(--prog)}
  .plano-walk{left:50%;top:var(--prog);transition:top 1s cubic-bezier(.6,.05,.2,1)}
  .plano-st button{flex-direction:row;text-align:left;padding:14px 16px;gap:12px}
  .plano-st .plano-punto{display:none}
  .plano-badge{left:auto;right:12px;transform:none;top:-11px}
  .plano-cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .plano-fill,.plano-walk{transition:none}
  .plano-panel{animation:none}
}
/* Glifos vía CSS: los nodos de texto quedan limpios para el diccionario de idiomas */
.plano-xp::before{content:"✦ "}
.plano-nav [data-prev]::before{content:"←";margin-right:9px}
.plano-nav [data-next]::after{content:"→";margin-left:9px}
.plano-nav .plano-vid::before{content:"▶";margin-right:9px}

/* VIDEO DEL RECORRIDO · REGRESO 2026-11-03: modal encajado tambien por altura */
.plano-modal-in{width:min(92vw,380px,calc((100dvh - 160px)*0.5625))}
.plano-modal video{max-height:calc(100dvh - 180px)}
