/* Layout: banda azul marino de El Empuje arriba (con la franja naranja en diagonal de su web), fichas claras abajo y una barra de secciones al pie. */
:root{
  --navy:#172842; --navy-deep:#0E1A2D; --orange:#FD5F14; --orange-deep:#C8450A;
  --bg:#F4F5F7; --paper:#FFFFFF; --ink:#172842; --body:#3E4A5B; --muted:#5D6979; --rule:#D9DDE3; --rule-2:#C3C9D2;
  --band:#172842; --band-2:#0E1A2D; --band-ink:#FFFFFF; --band-muted:#B9C3D2; --band-line:#2B4166;
  --orange-ink:#B33E08; --tint:#FFF1E9; --tile:#172842; --tile-ink:#FFFFFF;
  --ok:#1C7448; --ok-bg:#E6F4EC; --warn:#8F5300; --warn-bg:#FFF3DC; --bad:#B42318; --bad-bg:#FDECEA;
  --dep:#2563A8; --cul:#9B3D8F; --com:#2F7D4F;
  --sombra:0 1px 2px rgba(14,26,45,.06),0 6px 18px rgba(14,26,45,.06);
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --r:14px; --gut:max(16px, env(safe-area-inset-left, 0px)); --gutR:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1524; --paper:#14223A; --ink:#F2F4F7; --body:#CDD4DE; --muted:#9FAABA; --rule:#25385A; --rule-2:#35496D;
    --band:#0E1A2D; --band-2:#08111F; --band-ink:#FFFFFF; --band-muted:#A9B5C6; --band-line:#22365A;
    --orange-ink:#FF8A4C; --tint:#2A1D17; --tile:#1D3254; --tile-ink:#FFFFFF;
    --ok:#62C995; --ok-bg:#12301F; --warn:#F3B65B; --warn-bg:#33240C; --bad:#FF8C80; --bad-bg:#3A1714;
    --dep:#86B7F2; --cul:#E59ADB; --com:#7FCF9E;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1524; --paper:#14223A; --ink:#F2F4F7; --body:#CDD4DE; --muted:#9FAABA; --rule:#25385A; --rule-2:#35496D;
  --band:#0E1A2D; --band-2:#08111F; --band-ink:#FFFFFF; --band-muted:#A9B5C6; --band-line:#22365A;
  --orange-ink:#FF8A4C; --tint:#2A1D17; --tile:#1D3254; --tile-ink:#FFFFFF;
  --ok:#62C995; --ok-bg:#12301F; --warn:#F3B65B; --warn-bg:#33240C; --bad:#FF8C80; --bad-bg:#3A1714;
  --dep:#86B7F2; --cul:#E59ADB; --com:#7FCF9E;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);scroll-padding-bottom:80px}
body{margin:0;background:var(--bg);color:var(--body);font:16px/1.55 var(--text);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--band)}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
.wrap{width:100%;max-width:780px;margin-inline:auto;padding-left:var(--gut);padding-right:var(--gutR)}
.wrap.ancho{max-width:1080px}
main{flex:1 0 auto}
.cuerpo{padding-block:22px 34px;display:flex;flex-direction:column;gap:22px}

/* ---------- Cabecera ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:60px}
.top-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.top-r{display:flex;align-items:center;gap:8px}
.logo{display:block;height:44px;width:auto}
.volver{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--band-ink);font-weight:600;padding:8px 10px 8px 4px;border-radius:999px}
.volver:hover{background:rgba(255,255,255,.08)}
.marca-t{font:700 italic 15px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--band-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notas-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px dashed rgba(255,255,255,.45);color:var(--band-ink);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;white-space:nowrap}
.notas-btn:hover{border-color:var(--orange)}
.perfil-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:0;color:var(--band-ink);border-radius:999px;padding:4px 12px 4px 4px;font-weight:600}
.perfil-btn:hover{background:rgba(255,255,255,.14)}
@media (max-width:520px){.perfil-btn .pn,.notas-btn .nl{display:none}.perfil-btn{padding:4px}}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font:800 italic 15px/1 var(--display);flex:none;letter-spacing:.02em}
.avatar.grande{width:52px;height:52px;font-size:22px}
.avatar.mini{width:38px;height:38px}

/* ---------- Bandas azules ---------- */
.banda{position:relative;background:var(--band);color:var(--band-ink);overflow:hidden;isolation:isolate}
.banda::after{content:"";position:absolute;top:-10%;bottom:-10%;right:14%;width:14px;background:var(--orange);transform:skewX(-14deg);z-index:-1;opacity:.95}
.banda .wrap{padding-block:22px 26px}
.banda .eyebrow{color:var(--orange)}
.banda h1{color:#fff}
.banda .lead,.banda p{color:var(--band-muted)}
.banda .lead b,.banda p b{color:#fff}
@media (max-width:620px){.banda::after{right:-2px;width:10px}}

/* ---------- Tipografía ---------- */
.eyebrow{font:700 12.5px/1.3 var(--text);text-transform:uppercase;letter-spacing:.12em;color:var(--orange-ink)}
h1{font:800 italic clamp(32px,6.2vw,46px)/.98 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.005em;text-wrap:balance}
h2{font:800 italic 24px/1.05 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em;text-wrap:balance}
h3{font:700 italic 19px/1.15 var(--display);text-transform:uppercase;color:var(--ink);letter-spacing:.01em}
.lead{font-size:18px;line-height:1.5;color:var(--body);max-width:62ch}
.muted{color:var(--muted)}
.nota{font-size:13.5px;color:var(--muted)}
.r-lab{font:700 12px/1.3 var(--text);text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:4px}
.link{background:none;border:0;padding:4px 0;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px;align-self:flex-start}
.link:hover{color:var(--orange-ink)}

/* ---------- Cabeza de pantalla ---------- */
.cab{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.cab-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.cab-t h1:focus{outline:none}
.escuchar{display:inline-flex;align-items:center;gap:6px;flex:none;border:2px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:700}
.escuchar:hover{border-color:var(--orange)}
.escuchar[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.banda .escuchar{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.banda .escuchar[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}

/* Lectura en voz alta: palabra que se está leyendo */
.tts-b{background:color-mix(in srgb,var(--orange) 10%,transparent);border-radius:6px;box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 10%,transparent)}
.w{border-radius:3px;transition:background-color .08s}
.tts-w{background:var(--orange);color:var(--navy-deep)!important;box-shadow:0 0 0 2px var(--orange)}

/* ---------- Botones ---------- */
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:700;font-size:16px;line-height:1.2;border:2px solid transparent;text-align:center;transition:transform .12s,background-color .12s,border-color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.prim{background:var(--orange);color:var(--navy-deep);border-color:var(--orange)}
.btn.prim:hover{background:#FF7330}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.sec:hover{border-color:var(--ink)}
.banda .btn.sec{color:#fff;border-color:rgba(255,255,255,.55)}
.btn[aria-pressed="true"].sec{border-color:var(--ink);background:var(--paper)}
.btn .ico{display:inline-flex}

/* ---------- Ámbitos ---------- */
.amb{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:3px 10px 3px 7px;white-space:nowrap;--c:var(--muted);color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.amb svg{flex:none}
.amb.deporte{--c:var(--dep)} .amb.cultura{--c:var(--cul)} .amb.comunidad{--c:var(--com)} .amb.todos{--c:var(--orange-ink)}
.banda .amb{background:rgba(255,255,255,.1);color:#fff}
.ambs{display:flex;gap:6px;flex-wrap:wrap}
.amb-ico{display:inline-flex;gap:3px}
.amb-ico span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;--c:var(--muted);color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent)}
.amb-ico .deporte{--c:var(--dep)} .amb-ico .cultura{--c:var(--cul)} .amb-ico .comunidad{--c:var(--com)}

/* ---------- Fichas ---------- */
.ficha{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px}
.seccion{display:flex;flex-direction:column;gap:12px}
.seccion-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Próximo paso: panel azul con corte diagonal */
.proximo{position:relative;background:var(--tile);color:#fff;border-radius:var(--r);padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;overflow:hidden;isolation:isolate}
.proximo::before{content:"";position:absolute;right:-36px;top:-20px;bottom:-20px;width:110px;background:var(--orange);transform:skewX(-16deg);z-index:-1}
.proximo::after{content:"";position:absolute;right:68px;top:-20px;bottom:-20px;width:6px;background:var(--orange);transform:skewX(-16deg);z-index:-1;opacity:.8}
.proximo .r-lab{color:var(--orange)}
.proximo .px-t{font:800 italic 27px/1 var(--display);text-transform:uppercase;padding-right:70px;text-wrap:balance}
.proximo p{color:#D3DAE5;max-width:52ch;padding-right:58px}
.proximo .amb{background:rgba(255,255,255,.12);color:#fff}
.proximo .nuevo{align-self:flex-start}
.nuevo{display:inline-block;font:800 italic 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--orange);color:var(--navy-deep);border-radius:4px;padding:4px 7px}

/* Marcadores, como el tablero de la web */
.marcadores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.marcador{display:flex;flex-direction:column;gap:6px;min-width:0}
.marcador .mt{position:relative;background:var(--band-2);border:1px solid var(--band-line);border-radius:12px;padding:12px 8px 10px;text-align:center;font:800 italic clamp(30px,8vw,44px)/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.marcador .mt::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45)}
.marcador .mt small{font-size:.48em;color:var(--band-muted);font-style:italic;margin-left:2px}
.marcador .mt.on{color:var(--orange)}
.marcador .ml{font-size:13px;line-height:1.3;color:var(--band-muted);text-align:center}
.cuerpo .marcador .mt{background:var(--tile)}
.cuerpo .marcador .ml{color:var(--muted)}

/* Saludo */
.saludo{display:flex;align-items:center;gap:14px}
.saludo .avatar{box-shadow:0 0 0 3px var(--band),0 0 0 5px var(--orange)}

/* Pills y alertas */
.pill{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.aviso{background:var(--warn-bg);color:var(--warn)}
.pill.actual{background:var(--orange);color:var(--navy-deep)}
.pill.lock{color:var(--muted)}
.alerta{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;background:var(--warn-bg);color:var(--body);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.alerta svg{color:var(--warn);flex:none;margin-top:1px}
.alerta.info{background:var(--paper);border-color:var(--rule)}
.alerta.info svg{color:var(--orange-ink)}
.alerta.mal{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.alerta.mal svg{color:var(--bad)}
.alerta b{color:var(--ink)}
.alerta div{display:flex;flex-direction:column;gap:2px}

/* Mensaje que motiva (Agenda) */
.motiva{position:relative;border-radius:var(--r);background:var(--tint);padding:16px 18px 16px 28px;color:var(--body);overflow:hidden}
.motiva::before{content:"";position:absolute;left:0;top:-10px;bottom:-10px;width:8px;background:var(--orange);transform:skewX(-10deg)}
.motiva b{display:block;font:800 italic 20px/1.1 var(--display);text-transform:uppercase;color:var(--ink);margin-bottom:4px}

/* Confirmación */
.cartel{display:flex;gap:12px;align-items:center;border-radius:var(--r);background:var(--ok-bg);color:var(--ok);padding:14px 16px;border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);animation:aparece .35s ease-out}
.cartel b{font:800 italic 22px/1.05 var(--display);text-transform:uppercase}
.cartel .ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ok);color:var(--paper);flex:none}
@keyframes aparece{from{transform:translateY(6px) scale(.98)}to{transform:none}}

/* Filas de tareas */
.tareas{display:flex;flex-direction:column;gap:8px}
.tarea{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;color:var(--body)}
.tarea:not([disabled]):hover{border-color:var(--ink)}
.tarea .ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--rule-2);color:var(--muted)}
.tarea.hecha .ico{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.tarea.foco{border:2px solid var(--orange)}
.tarea.foco .ico{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.tarea.lock{opacity:.6}
.tarea.nav .ico{border:0;font-size:22px;color:var(--ink)}
.t-t{display:block;font-weight:700;color:var(--ink)}
.t-s{display:block;font-size:14px;color:var(--muted)}
.prog{display:flex;flex-direction:column;gap:6px;width:100%}
.prog-l{font-size:14px;font-weight:600;color:var(--body)}
.prog-b{display:block;height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.prog-b i{display:block;height:100%;background:var(--orange);border-radius:999px}
.banda .prog-l{color:var(--band-muted)} .banda .prog-b{background:rgba(255,255,255,.14)}

/* Semanas */
.semanas{display:flex;flex-direction:column;gap:0;border-left:3px solid var(--rule);margin-left:8px}
.semanas li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:8px 0 8px 18px}
.semanas li::before{content:"";position:absolute;left:-9px;top:13px;width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--rule-2)}
.semanas li.hecho::before{background:var(--ok);border-color:var(--ok)}
.semanas li.actual::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 25%,transparent)}
.semanas .sn{font:700 italic 15px/1.3 var(--display);text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.semanas li.actual .sn{color:var(--orange-ink)}
.semanas .sd{display:flex;flex-direction:column;font-size:15px}
.semanas .sd b{color:var(--ink)}

/* Agenda */
.agenda{display:flex;flex-direction:column;gap:8px}
.ag{width:100%;display:grid;grid-template-columns:62px minmax(0,1fr) 18px;gap:14px;align-items:center;text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:10px 12px 10px 10px;color:var(--body)}
.ag:hover{border-color:var(--ink)}
.ag-f{display:flex;flex-direction:column;align-items:center;background:var(--tile);color:#fff;border-radius:9px;padding:6px 0 7px;line-height:1}
.ag-f span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#C2CBD8}
.ag-f b{font:800 italic 28px/1 var(--display);margin:2px 0}
.ag.pasado .ag-f{background:transparent;border:2px solid var(--rule-2);color:var(--muted)}
.ag.pasado .ag-f span{color:var(--muted)}
.ag.pasado .ag-t{color:var(--body)}
.ag-i{display:flex;flex-direction:column;gap:3px;min-width:0}
.ag-t{font-weight:700;color:var(--ink)}
.ag-d{font-size:14px;color:var(--muted)}
.ag-p{display:flex;gap:6px;flex-wrap:wrap}
.chev{color:var(--muted);font-size:22px;line-height:1}
.datos-ev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.datos-ev div{background:var(--paper);padding:10px 14px}
.datos-ev dt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.datos-ev dd{color:var(--ink);font-weight:600}
@media (max-width:480px){.datos-ev{grid-template-columns:1fr}}
.guia{display:flex;flex-direction:column;gap:8px;counter-reset:g}
.guia li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:baseline}
.guia .min{font:800 italic 18px/1 var(--display);color:var(--orange-ink);text-transform:uppercase}
.consejo{display:flex;gap:10px;align-items:flex-start;border-top:1px dashed var(--rule-2);padding-top:12px;color:var(--ink);font-weight:600}
.consejo svg{color:var(--orange-ink);flex:none;margin-top:2px}
.pregunta{font:700 italic 20px/1.25 var(--display);color:var(--ink);text-transform:none}

/* ---------- Recorrido ---------- */
.grupo{display:flex;flex-direction:column;gap:10px}
.grupo-h{display:flex;flex-direction:column;gap:2px;border-bottom:2px solid var(--ink);padding-bottom:6px}
.grupo-n{font:800 italic 22px/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.grupo-c{font-size:14px;color:var(--muted)}
.grupo-c b{color:var(--orange-ink);font-weight:700}
.mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tile{width:100%;height:100%;display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;color:var(--body);position:relative}
.tile:not([disabled]):hover{border-color:var(--ink)}
.tile-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile-num{font:700 italic 14px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tile-t{font-weight:700;color:var(--ink);line-height:1.3}
.nodo.hecho .tile{background:color-mix(in srgb,var(--ok) 6%,var(--paper))}
.nodo.jug .tile{border:2px solid var(--orange)}
.estado{font-size:12px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.estado.hecho{color:var(--ok)}
.estado.jug{color:var(--navy-deep);background:var(--orange);border-radius:999px;padding:2px 8px}
.tile.encuentro{border-style:dashed;border-width:2px;background:transparent}
.tile.encuentro .tile-num{color:var(--orange-ink)}
.det{border-top:1px solid var(--rule);padding-top:12px}
.det summary{cursor:pointer;font-weight:700;color:var(--ink);list-style-position:outside}
.det[open] summary{margin-bottom:10px}
.lista{display:flex;flex-direction:column;gap:6px}
.lista li{position:relative;padding-left:18px}
.lista li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;background:var(--orange);transform:skewX(-14deg)}

/* ---------- Módulo ---------- */
.porque{border-left:4px solid var(--orange);padding:4px 0 4px 16px;display:flex;flex-direction:column;gap:10px}
.porque p:first-child{font:700 italic 21px/1.25 var(--display);color:var(--ink)}
.escenas{display:flex;flex-direction:column;gap:8px}
.escena-i{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.escena-i p{color:var(--ink)}
.pieza{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:18px}
.pieza-h{display:flex;align-items:center;gap:10px}
.pieza-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--tile);color:#fff;font:800 italic 17px/1 var(--display);flex:none}
.pieza-t{font:800 italic 21px/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.sub{font-weight:700;color:var(--ink)}
.juego-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.juego-n{font:800 italic 28px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.prod{display:flex;flex-direction:column;gap:8px;border:1.5px dashed var(--rule-2);border-radius:12px;padding:12px 14px}
.prod-chip{align-self:flex-start;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ideas{display:flex;flex-direction:column;gap:8px;counter-reset:i}
.ideas li{position:relative;padding:10px 12px 10px 44px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:10px;color:var(--ink)}
.ideas li::before{counter-increment:i;content:counter(i);position:absolute;left:12px;top:9px;font:800 italic 20px/1 var(--display);color:var(--orange-ink)}
.lect{display:flex;flex-direction:column;gap:2px;border-left:3px solid var(--rule-2);padding:2px 0 2px 12px}
.lect b{color:var(--ink)}
.guia-pdf{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;background:var(--tile);color:#fff;border-radius:var(--r);padding:16px;overflow:hidden}
.guia-pdf .doc{position:relative;width:72px;height:94px;background:#fff;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,.3);overflow:hidden}
.guia-pdf .doc::before{content:"";position:absolute;inset:0 0 auto;height:38px;background:var(--navy)}
.guia-pdf .doc::after{content:"";position:absolute;top:-6px;bottom:52px;right:16px;width:6px;background:var(--orange);transform:skewX(-14deg)}
.guia-pdf .doc i{position:absolute;left:8px;right:8px;height:4px;border-radius:2px;background:#D9DDE3}
.guia-pdf .doc span{position:absolute;left:8px;top:46px;font:800 italic 8px/1 var(--display);color:var(--navy);text-transform:uppercase}
.guia-pdf .gp-t{font:800 italic 22px/1.05 var(--display);text-transform:uppercase}
.guia-pdf p{color:#D3DAE5;font-size:15px}
.guia-pdf .acciones{margin-top:6px}
.guia-pdf .btn.sec{color:#fff;border-color:rgba(255,255,255,.5)}
.estado-dl{font-size:14px;color:#FFD2BA}
.nav-mod{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nav-mod .sig{margin-left:auto}

/* Módulo 0 */
.pasos-m0{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pasos-m0 li{height:6px;border-radius:999px;background:var(--rule)}
.pasos-m0 li.on{background:var(--orange)}
.valores{display:flex;flex-wrap:wrap;gap:8px}
.valores span{font:800 italic 18px/1 var(--display);text-transform:uppercase;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:7px 14px}
.cita{font:700 italic 22px/1.25 var(--display);color:var(--ink)}
.tabla-w{overflow-x:auto;border:1px solid var(--rule);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
th{color:var(--ink);font-weight:700}
thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.firma{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.lab{font-weight:700;color:var(--ink);font-size:15px}
input[type=text],textarea,select{width:100%;background:var(--paper);border:2px solid var(--rule-2);border-radius:10px;padding:10px 12px;color:var(--ink)}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--orange);outline:none}
.check,.radio{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input,.radio input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--orange);flex:none}
.firmado{display:flex;gap:12px;align-items:flex-start;background:var(--ok-bg);border-radius:12px;padding:14px}
.firmado .ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ok);color:var(--paper);flex:none}
.firmado b{color:var(--ink)}

/* Certificado */
.req{display:flex;flex-direction:column;gap:10px}
.req li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.req .ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--rule-2);color:var(--muted)}
.req li.ok .ico{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.req b{color:var(--ink);display:block}
.constancia{position:relative;background:var(--navy);color:#fff;border-radius:var(--r);padding:26px 22px 24px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;overflow:hidden;isolation:isolate}
.constancia::before{content:"";position:absolute;inset:10px;border:1.5px solid rgba(255,255,255,.22);border-radius:10px;z-index:-1}
.constancia::after{content:"";position:absolute;right:12%;top:-20px;bottom:-20px;width:10px;background:var(--orange);transform:skewX(-14deg);z-index:-1;opacity:.85}
.constancia img{height:64px;width:auto;margin-bottom:4px}
.c-org{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--orange)}
.c-nom{font:800 italic clamp(30px,7vw,40px)/1 var(--display);text-transform:uppercase}
.c-cert{font:800 italic 24px/1 var(--display);text-transform:uppercase;color:var(--orange)}
.c-det{font-size:13.5px;color:#C6CFDC}
.c-proto{margin-top:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 10px}

/* ---------- Entrada ---------- */
.hero{position:relative;background:var(--band);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;left:52%;top:-20%;bottom:-20%;width:16px;background:var(--orange);transform:skewX(-13deg);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:end;padding-top:26px}
.hero-t{display:flex;flex-direction:column;gap:14px;padding-bottom:30px;align-self:center}
.hero-logo{height:96px;width:auto;align-self:flex-start}
.hero h1{color:#fff;font-size:clamp(38px,7vw,62px)}
.hero h1 span{display:block;color:var(--orange)}
.hero .lead{color:var(--band-muted)}
.hero-art{--h-borde:var(--band);align-self:end;min-width:0}
.hero-art svg{display:block;width:100%;height:auto}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr;gap:6px;padding-top:20px}
  .hero::before{left:auto;right:14%;top:-30px;bottom:auto;height:150px;width:12px}
  .hero-t{padding-bottom:4px}
  .hero-logo{height:74px}
  .hero-art{margin-inline:calc(-1 * var(--gut)) calc(-1 * var(--gutR))}
}
.perfiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:620px){.perfiles{grid-template-columns:1fr}}
.perfil-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;color:var(--body)}
.perfil-card:hover{border-color:var(--orange);box-shadow:var(--sombra)}
.pc-n{display:block;font:800 italic 22px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.pc-r{display:block;font-size:14.5px;color:var(--muted);margin-top:4px}
.flecha{font-size:26px;color:var(--orange-ink);line-height:1}
.inst-banner{display:flex;flex-direction:column;gap:10px;border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;background:var(--paper)}
.inst-n{font:800 italic 22px/1.05 var(--display);text-transform:uppercase;color:var(--ink)}

/* ---------- Coordinación y panel ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.kpi{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi .kn{font-size:13px;font-weight:700;color:var(--muted)}
.kpi b{font:800 italic 34px/1.05 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.kpi span:last-child{font-size:13px;color:var(--muted)}
.barras{display:flex;flex-direction:column;gap:10px}
.barras li{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 52px;gap:10px;align-items:center}
.barras .bl{font-size:14px;color:var(--ink);font-weight:600}
.barras .bt{height:14px;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:4px;overflow:hidden}
.barras .bt i{display:block;height:100%;background:var(--orange);border-radius:4px}
.barras .bt i.mal{background:var(--bad)}
.barras .bt i.deporte{background:var(--dep)} .barras .bt i.cultura{background:var(--cul)} .barras .bt i.comunidad{background:var(--com)}
.barras .bv{font:800 italic 18px/1 var(--display);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:480px){.barras li{grid-template-columns:minmax(0,1fr) 52px}.barras .bt{grid-column:1 / -1;grid-row:2}}
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.filtros label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.preview{border:1.5px dashed var(--rule-2);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.guardado{color:var(--ok);font-weight:700}
.persona{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.persona .avatar{width:34px;height:34px;font-size:14px}

/* ---------- Notas de la maqueta ---------- */
.velo{position:fixed;inset:0;background:rgba(8,17,31,.55);z-index:40;display:flex;justify-content:flex-end}
.hoja{width:min(420px,100%);height:100%;background:var(--paper);color:var(--body);box-shadow:-10px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) max(18px, env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 18px;gap:14px;overflow-y:auto;animation:entra .22s ease-out}
@keyframes entra{from{transform:translateX(24px)}to{transform:none}}
.hoja-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cerrar{border:2px solid var(--rule-2);background:none;border-radius:999px;padding:6px 12px;font-weight:700}
.hoja ul{display:flex;flex-direction:column;gap:10px}
.hoja li{border-left:3px solid var(--orange);padding-left:12px}
.hoja .eyebrow{margin-top:4px}

/* ---------- Barra de secciones ---------- */
.tabbar{position:sticky;bottom:0;z-index:15;margin-top:auto;background:var(--paper);border-top:1px solid var(--rule);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tabbar-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;max-width:780px}
.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:9px 4px 8px;color:var(--muted);font-size:12.5px;font-weight:700}
.tabbar button[aria-current="page"]{color:var(--ink)}
.tabbar button[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:4px;background:var(--orange);border-radius:0 0 4px 4px}
.pie{font-size:12.5px;color:var(--muted);text-align:center;padding-block:10px 14px}

/* ---------- Juego ---------- */
#juegoTop{background:var(--band-2);border-bottom:1px solid var(--band-line)}
#juegoTop .wrap{display:flex;flex-direction:column;gap:10px;padding-block:10px 12px}
.escena{border-radius:12px;overflow:hidden;background:var(--navy-deep)}
.escena svg{display:block;width:100%;height:auto;max-height:210px}
.tablero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ind{display:flex;flex-direction:column;gap:4px;min-width:0}
.ind .lab{font-size:12px;font-weight:700;color:var(--band-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind .val{font:800 italic 22px/1 var(--display);color:#fff;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.delta{font-size:15px;opacity:0}
.delta.up{color:#7FE0A6} .delta.down{color:#FF9C8C}
.delta.show{animation:delta 1.6s ease-out}
@keyframes delta{0%{opacity:0;transform:translateY(4px)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.bar{height:7px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .6s ease}
.pasos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pasos li{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--band-muted);text-align:center;padding-top:6px;border-top:4px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pasos li.hecho{border-color:#7FE0A6;color:#CFEFDC}
.pasos li.actual{border-color:var(--orange);color:#fff}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.datos div{background:var(--tile);border-radius:12px;padding:10px;text-align:center;color:#fff}
.datos dt{font:800 italic 32px/1 var(--display)}
.datos dd{font-size:13px;color:#C6CFDC}
.leyenda{display:flex;flex-direction:column;gap:8px}
.leyenda div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
.leyenda dt{font-weight:700;color:var(--ink)}
.frase{font:800 italic 26px/1.12 var(--display);text-transform:uppercase;color:var(--ink);border-left:6px solid var(--orange);padding:4px 0 4px 16px;text-wrap:balance}
.para{display:flex;gap:10px;flex-wrap:wrap}
.letra-btn{width:58px;height:58px;border-radius:12px;border:2px solid var(--ink);background:var(--paper);font:800 italic 30px/1 var(--display);color:var(--ink)}
.letra-btn.on{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.para-lista{display:flex;flex-direction:column;gap:10px}
.para-lista li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start}
.para-lista .ini{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--tile);color:#fff;font:800 italic 22px/1 var(--display)}
.para-lista div{display:flex;flex-direction:column}
.para-lista b{color:var(--ink)}
.claves{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.clave{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--paper);border:2px solid var(--rule-2);border-radius:12px;padding:14px;min-height:96px;color:var(--body)}
.clave:hover{border-color:var(--ink)}
.clave .ct{font:800 italic 19px/1.08 var(--display);text-transform:uppercase;color:var(--ink)}
.clave .tocar{font-size:13px;font-weight:700;color:var(--orange-ink)}
.clave.on{border-color:var(--orange);background:var(--tint)}
.puntos{display:flex;flex-direction:column;gap:8px}
.puntos li{position:relative;padding-left:20px;color:var(--ink)}
.puntos li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;background:var(--orange);transform:skewX(-14deg)}
.mini{display:flex;flex-direction:column;gap:14px;border-top:1px dashed var(--rule-2);padding-top:14px}
.mini-t{font:800 italic 19px/1 var(--display);text-transform:uppercase;color:var(--orange-ink)}
.mini-q{display:flex;flex-direction:column;gap:8px}
.mini-q > p{color:var(--ink);font-weight:600}
.mini-ops{display:flex;gap:8px;flex-wrap:wrap}
.chipbtn{border:2px solid var(--rule-2);background:var(--paper);border-radius:999px;padding:8px 14px;font-weight:600;color:var(--ink)}
.chipbtn:hover{border-color:var(--ink)}
.chipbtn.bien{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.chipbtn.mal{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.mini-fb{font-size:15px}
.mini-fb.ok b{color:var(--ok)} .mini-fb.no b{color:var(--bad)}
.situacion{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pj{display:flex;gap:12px;align-items:center}
.pj .avatar{width:44px;height:44px;font-size:18px}
.pj .avatar.chico{font-size:13px}
.pj-n{font-weight:700;color:var(--ink)}
.pj-r{font-size:14px;color:var(--muted)}
.ops{display:flex;flex-direction:column;gap:8px}
.op{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;text-align:left;background:var(--paper);border:2px solid var(--rule);border-radius:12px;padding:12px 14px;color:var(--ink)}
.op:not([disabled]):hover{border-color:var(--ink)}
.op .letra{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--ink) 8%,transparent);font:800 italic 18px/1 var(--display);color:var(--ink)}
.op.atenuada{opacity:.5}
.op.elegida.mejor{border-color:var(--ok);background:var(--ok-bg)}
.op.elegida.regular{border-color:var(--warn);background:var(--warn-bg)}
.op.elegida.evitar{border-color:var(--bad);background:var(--bad-bg)}
.op[disabled]{cursor:default}
.resultado{display:flex;flex-direction:column;gap:10px;border-radius:var(--r);padding:16px;background:var(--paper);border:2px solid var(--rule)}
.resultado:focus{outline:none}
.resultado.mejor{border-color:var(--ok)} .resultado.regular{border-color:var(--warn)} .resultado.evitar{border-color:var(--bad)}
.veredicto{font:800 italic 24px/1 var(--display);text-transform:uppercase}
.resultado.mejor .veredicto{color:var(--ok)} .resultado.regular .veredicto{color:var(--warn)} .resultado.evitar .veredicto{color:var(--bad)}
.r-idea{font-size:13.5px;font-weight:700;color:var(--orange-ink)}
textarea{min-height:120px;resize:vertical}
.chat{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.chat-cab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;background:var(--tile);color:#fff}
.chat-cab .pj-n{color:#fff} .chat-cab .pj-r{color:#C6CFDC}
.chat-id{flex:1;min-width:120px}
.lugar{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.12);border-radius:999px;padding:3px 10px}
.termo{flex-basis:100%;display:flex;flex-direction:column;gap:5px}
.termo-l{font-size:13px;color:#D3DAE5}
.termo-l b{color:#fff}
.termo-b{height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.termo-b i{display:block;height:100%;border-radius:999px;transition:width .5s ease}
.termo-b.malo i{background:linear-gradient(90deg,#F3B65B,#FF6B57)}
.termo-b.bueno i{background:linear-gradient(90deg,#F3B65B,#62C995)}
.mensajes{display:flex;flex-direction:column;gap:8px;padding:14px;background:color-mix(in srgb,var(--ink) 4%,var(--paper));min-height:120px}
.msg{max-width:84%;padding:9px 12px;border-radius:14px;font-size:15.5px;line-height:1.4;display:flex;flex-direction:column;gap:2px}
.msg.in{align-self:flex-start;background:var(--paper);border:1px solid var(--rule);color:var(--ink);border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:var(--tint);border:1px solid color-mix(in srgb,var(--orange) 35%,transparent);color:var(--ink);border-bottom-right-radius:4px}
.msg.sis{align-self:center;max-width:100%;background:none;font-size:13.5px;font-weight:700;color:var(--orange-ink);text-align:center}
.hora{font-size:11px;color:var(--muted);align-self:flex-end}
.charla .msg.in{border-radius:14px;border-top-left-radius:4px}
.escribiendo{font-size:13.5px;color:var(--muted);font-style:italic}
.chat-ops{display:flex;flex-direction:column;gap:8px;padding:14px;border-top:1px solid var(--rule)}
.chat-ops-t{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.res-desafio{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:16px}
.res-desafio:focus{outline:none}
.puntaje{font-size:16px} .puntaje b{font:800 italic 40px/1 var(--display);color:var(--ink)}
.rubrica{display:flex;flex-direction:column;gap:10px}
.rubrica li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.rubrica .ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--paper)}
.rubrica li.ok .ico{background:var(--ok)} .rubrica li.rep .ico{background:var(--warn)}
.crit{font-weight:700;color:var(--ink)}
.insignia{display:flex;gap:16px;align-items:center}
.badge{width:96px;height:96px;flex:none}
.badge .b-bg{fill:var(--navy)}
.badge .b-ring{fill:none;stroke:var(--orange);stroke-width:4;stroke-dasharray:6 4}
.badge text{fill:#fff;font-family:var(--display);font-weight:800;font-style:italic}
.ins-n{font:800 italic 28px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.comp{border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.comp legend{font-weight:700;color:var(--ink);padding:0 6px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Escena de la institución */
.esp .ln{stroke:rgba(214,224,238,.3);transition:stroke .5s}
.esp.on .ln{stroke:#FFE6D6}
.esp .glow{opacity:0;transition:opacity .6s}
.esp.on .glow{opacity:1}
.esp-n{font:700 7px/1 var(--text);letter-spacing:.14em;fill:rgba(214,224,238,.35);transition:fill .5s}
.esp.on .esp-n{fill:#FD5F14}
.fig{opacity:0;transform:translateY(3px);transition:opacity .5s,transform .5s}
.fig.on{opacity:1;transform:none}
.banderin{opacity:.14;transition:opacity .5s}
.banderin.on{opacity:.95}
.foco{fill:#2E3D58;transition:fill .5s}
#guir.on .foco{fill:#FFD27A}

.proximo .btn.sec{color:#fff;border-color:rgba(255,255,255,.5)}
.proximo .btn.sec:hover{border-color:#fff}
.hero .escuchar{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.hero .escuchar[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
@media (max-width:620px){.marca-t{display:none}}

/* Desafíos nuevos */
.ronda{display:flex;flex-direction:column;gap:12px}
.ronda-pasos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.ronda-pasos li{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center;padding-top:6px;border-top:4px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ronda-pasos li.hecho{border-color:var(--ok)}
.ronda-pasos li.actual{border-color:var(--orange);color:var(--ink)}
.armar,.seq-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.carta{display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--paper);border:2px solid var(--rule-2);border-radius:12px;padding:12px 14px;color:var(--ink);font-weight:600;line-height:1.35}
.carta:not([disabled]):hover{border-color:var(--ink)}
.carta[disabled]{opacity:.5;cursor:default}
.carta .marca{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;border:2px solid var(--rule-2);color:var(--navy-deep)}
.carta.on{border-color:var(--orange);background:var(--tint)}
.carta.on .marca{background:var(--orange);border-color:var(--orange)}
.secuencia{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:860px){.secuencia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.seq-pool{grid-template-columns:1fr}}
.seq-orden{display:flex;flex-direction:column;gap:8px}
.seq-orden li.vacio{display:flex;gap:10px;align-items:center;border:2px dashed var(--rule-2);border-radius:12px;padding:10px 12px;font-size:14px}
.seq-item{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:10px;align-items:center;text-align:left;background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:10px 12px;color:var(--ink);font-weight:600}
.seq-orden .num{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--tile);color:#fff;font:800 italic 16px/1 var(--display);flex:none}
.seq-orden .vacio .num{background:transparent;border:2px solid var(--rule-2);color:var(--muted)}
.seq-item .x{font-size:20px;color:var(--muted)}
.insignias{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}
.insignias li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.insignias .badge{width:72px;height:72px}
.ins-vacia{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:2px dashed var(--rule-2);font:800 italic 24px/1 var(--display);color:var(--muted)}
.ins-l{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.2}
.insignias li.ok .ins-l{color:var(--ink)}

/* Pasos para finalizar el módulo */
.pasos-mod{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);padding:16px 18px}
.pasos-mod ul{display:flex;flex-direction:column;gap:6px}
.pasos-mod li button{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) 16px;gap:10px;align-items:center;text-align:left;background:none;border:0;border-radius:10px;padding:7px 6px;color:var(--ink);font-weight:600}
.pasos-mod li button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.pasos-mod .ico{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--rule-2);color:var(--paper)}
.pasos-mod li.ok .ico{background:var(--ok);border-color:var(--ok)}
.pasos-mod li.ok span:nth-child(2){color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.pieza{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 76px)}
.pieza-h{flex-wrap:wrap}
.pz-est{margin-left:auto}
.video{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);display:grid;place-items:center;overflow:hidden}
.video::after{content:"";position:absolute;right:18%;top:-10%;bottom:-10%;width:10px;background:var(--orange);transform:skewX(-14deg);opacity:.8}
.video .play{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--orange);color:var(--navy-deep);z-index:1}
.video .play svg{width:26px;height:26px;margin-left:4px}
.video .dur{position:absolute;left:12px;bottom:10px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);border-radius:999px;padding:3px 9px}
.ideas li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.ideas li.leida{background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tilde{display:inline-flex;align-items:center;gap:5px;border:2px solid var(--rule-2);background:var(--paper);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.tilde svg{width:14px;height:14px}
.tilde:hover{border-color:var(--ink);color:var(--ink)}
.tilde.on{background:var(--ok);border-color:var(--ok);color:var(--paper)}
span.tilde.on{padding:5px 7px}
.final{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--paper);border:2px dashed var(--rule-2);border-radius:var(--r);padding:18px}
.final:focus{outline:none}
.final.ok{border:2px solid var(--ok);background:color-mix(in srgb,var(--ok) 6%,var(--paper))}
.final.fiesta .badge{animation:gira .9s ease-out}
@keyframes gira{0%{transform:scale(.4) rotate(-40deg);opacity:0}70%{transform:scale(1.1) rotate(6deg);opacity:1}100%{transform:none}}
.insignia.pendiente .badge{filter:grayscale(1);opacity:.45}
.px-pasos{font-size:14px;color:#FFD2BA!important;font-weight:600}

.sub-ayuda{font-weight:500;color:var(--muted)}
.tilde,span.tilde.on{width:34px;height:34px;padding:0;justify-content:center;border-radius:50%;flex:none}
.tilde svg{width:16px;height:16px;opacity:0}
.tilde:hover svg{opacity:.35}
.tilde.on svg{opacity:1}

.crit .repasar{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;vertical-align:1px}
.op.correcta{border-color:var(--ok);opacity:1}

/* Video del módulo: reproductor propio con la regla de visualización */
.vplayer{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:var(--navy-deep)}
.vplayer video{display:block;width:100%;height:100%;background:#000}
.vaviso{margin:0;background:var(--tint);color:var(--ink);border-left:4px solid var(--orange);border-radius:8px;padding:9px 12px;font-size:14.5px;font-weight:600;line-height:1.4}
.vprog{display:flex;align-items:center;gap:10px;margin:10px 0 2px;font-size:13.5px;font-weight:700;color:var(--muted)}
.vbar{flex:1;height:8px;border-radius:999px;background:var(--rule);overflow:hidden}
.vbar span{display:block;height:100%;background:var(--orange);border-radius:999px;transition:width .3s}
.vtxt{margin-top:4px}
.vfuente{font-size:12.5px;color:var(--muted)}

/* Guía del módulo 0: así sí / así no */
.si-no{padding:8px 12px;border-radius:8px;margin-top:6px}
.si-no.si{background:var(--ok-bg)}
.si-no.si b{color:var(--ok)}
.si-no.no{background:var(--bad-bg)}
.si-no.no b{color:var(--bad)}

/* Guía del módulo 2: el espejo de la semana */
.espejo{display:flex;flex-direction:column;gap:8px}
.espejo li{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.espejo-op{display:flex;flex-wrap:wrap;gap:6px}
.espejo-op label{position:relative;cursor:pointer}
.espejo-op input{position:absolute;opacity:0;width:1px;height:1px}
.espejo-op span{display:inline-block;border:1.5px solid var(--rule-2);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:600;color:var(--body)}
.espejo-op input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.espejo-op input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}

/* Verdadero o Falso */
.vf{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}
.vf-i{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px 14px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:12px;border:2px solid transparent}
.vf-i.bien{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.vf-i.mal{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.vf-n{font:800 italic 22px/1.1 var(--display);color:var(--orange-ink)}
.vf-c{display:flex;flex-direction:column;gap:10px;min-width:0}
.vf-c .it{color:var(--ink);margin:0}
.vf-b{display:flex;gap:8px;flex-wrap:wrap}
.vf-o{flex:1 1 120px;min-height:44px;border:2px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:15px;font-weight:700}
.vf-o:hover:not([disabled]){border-color:var(--ink)}
.vf-o.on{background:var(--orange);border-color:var(--orange);color:var(--navy-deep)}
.vf-o[disabled]{cursor:default;opacity:.75}
.vf-o.on[disabled]{opacity:1}
.vf-e{display:flex;flex-direction:column;gap:4px;border-top:1.5px solid color-mix(in srgb,var(--ink) 12%,transparent);padding-top:8px}
.vf-ver{display:flex;align-items:center;gap:6px;margin:0}
.vf-i.bien .vf-ver{color:var(--ok)}
.vf-i.mal .vf-ver{color:var(--bad)}
.vf-x{margin:0;color:var(--ink)}
.vf-pie{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:4px}
.vf-res{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-radius:12px;padding:14px 16px;margin-top:4px}
.vf-res.ok{background:var(--ok-bg);border:2px solid var(--ok)}
.vf-res.no{background:var(--warn-bg);border:2px solid var(--warn)}
.vf-pt{font:800 italic 22px/1.1 var(--display);margin:0}
.vf-res p{margin:0}
.vf-tag{align-self:flex-start;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:2px 9px;margin-bottom:-4px}
.vf-tag.s{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange-ink)}
.vf-tag.i{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}

/* ---------- Plataforma: formularios, acceso y panel ---------- */
input[type=password],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=search]{width:100%;background:var(--paper);border:2px solid var(--rule-2);border-radius:10px;padding:10px 12px;color:var(--ink)}
input[type=password]:focus,input[type=tel]:focus,input[type=email]:focus,input[type=number]:focus,input[type=date]:focus,input[type=search]:focus{border-color:var(--orange);outline:none}
.campo .ayuda{font-size:13.5px;color:var(--muted)}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.fila2{grid-template-columns:1fr}}
.aviso-guardado{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:60;margin:0 auto;max-width:560px;background:var(--bad-bg);color:var(--ink);border:1px solid var(--bad);border-radius:12px;padding:10px 14px;font-size:14.5px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.cargando{color:var(--muted);padding:40px 0;text-align:center}
.acceso{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding-block:24px 40px}
.acceso h2{font-size:clamp(26px,5vw,34px)}
.caja{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r,16px);padding:18px}
.msg-err{background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);color:var(--ink);border-radius:10px;padding:10px 12px}
.msg-ok{background:var(--ok-bg);border-radius:10px;padding:10px 12px;color:var(--ink)}
.oculto{display:none!important}
/* Panel */
.panel-tabs{display:flex;gap:6px;flex-wrap:wrap}
.panel-tabs button{border:2px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:700}
.panel-tabs button[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tabla-p{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-p th,.tabla-p td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.tabla-p th{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tabla-w{overflow-x:auto}
.p-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.p-kpi{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.p-kpi b{display:block;font:800 italic 30px/1.05 var(--display);color:var(--ink)}
.p-kpi span{font-size:13.5px;color:var(--muted)}
.p-barras{display:flex;flex-direction:column;gap:6px}
.p-barra{display:grid;grid-template-columns:minmax(110px,180px) 1fr 44px;gap:8px;align-items:center;font-size:14px}
.p-barra i{display:block;height:12px;border-radius:6px;background:var(--orange);min-width:2px}
.p-barra .bg{background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:6px}
.pcard{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--paper);display:flex;flex-direction:column;gap:8px}
.pcard-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.pcard-h b{font-size:17px;color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 9px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.nar{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange-ink)}
.encs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.encs label{display:inline-flex;gap:5px;align-items:center;font-size:13.5px;border:1px solid var(--rule-2);border-radius:999px;padding:4px 10px;cursor:pointer}
.encs input{accent-color:var(--orange)}
.codigo{font:700 20px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--ink)}
.link-inv{word-break:break-all;font-size:14.5px}
.pmini{font-size:13.5px}
.btn.chico{padding:6px 12px;font-size:14px;min-height:0}
textarea{min-height:90px}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
.top .btn.sec{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.top .btn.sec:hover{border-color:var(--orange)}
.hero.acc::before{left:auto;right:5%}
@media (max-width:760px){.hero.acc::before{right:3%;top:-40px;height:110px}}
@media (max-width:560px){.top .marca-t{display:none}}