/* ---------- paleta ----------
   Los tres niveles van de cálido y claro a frío y oscuro, porque la conversación
   baja. Los retos NO están en esa escala: se intercalan cada cinco cartas e
   interrumpen el clima, y por eso rompen el patrón con un cálido intenso.

   Contrastes verificados contra AA. El color fuerte se usa para el marco, las
   marcas de palo y el pictograma — objetos gráficos, umbral 3:1, y los cuatro
   pasan. El texto va siempre en tinta: el coral sobre su propio fondo da 4.40 y
   no llega al 4.5 que pide el texto chico, así que ningún texto va en color.

   Ningún color se escribe fuera de este bloque. */

:root{
  --papel:#F5EFE6;
  --carta:#FFFDF9;
  --tinta:#1E1B18;
  --tinta-suave:#6B5D50;
  --linea:#E5DACA;

  /* Las esquinas dejan de ser de naipe impreso y pasan a las del producto:
     una sola escala, para que nada quede a mitad de camino. */
  /* LOS COLORES DE LA CARTA, que NO cambian con el tema.
     La carta es un objeto: es clara siempre, como una carta de verdad. Lo que
     cambia entre claro y oscuro es la mesa donde está apoyada, no ella.
     Son los mismos valores que usa el PDF, así que la web y lo impreso muestran
     exactamente la misma carta. */
  --anillo:#FFFDF9;
  --tinta-carta:#1E1B18;
  --suave-carta:#6B5D50;
  --linea-carta:#E5DACA;
  --orilla-fijo:#A05D00;      --orilla-fijo-fondo:#FFF3DC;
  --corriente-fijo:#1E7A5F;   --corriente-fijo-fondo:#E2F4EC;
  --hondo-fijo:#2A4B8D;       --hondo-fijo-fondo:#E5EAF7;
  --salto-fijo:#C43D2E;       --salto-fijo-fondo:#FDE8E4;
  --palo-fijo:var(--orilla-fijo);
  --palo-fijo-fondo:var(--orilla-fijo-fondo);

  /* SUPERFICIES POR ELEVACIÓN.
     En tema oscuro la elevación no se hace con sombra —una sombra sobre un
     fondo oscuro no se ve— sino aclarando la superficie: cuanto más "arriba"
     está un elemento, más claro es su fondo. En claro funciona al revés y las
     sombras sí trabajan. */
  --n0:#F5EFE6;   /* la página */
  --n1:#FFFDF9;   /* paneles apoyados */
  --n2:#FFFFFF;   /* elementos levantados */
  --n3:#FFFFFF;   /* diálogos */
  --borde:rgba(30,27,24,.10);

  --r:16px;
  --r-chico:10px;
  --r-pastilla:999px;

  --orilla:#A05D00;        --orilla-fondo:#FFF3DC;      /* nivel 1 · superficie · ámbar      */
  --corriente:#1E7A5F;       --corriente-fondo:#E2F4EC;     /* nivel 2 · conocerse  · verde agua */
  --hondo:#2A4B8D;     --hondo-fondo:#E5EAF7;   /* nivel 3 · profundidad· azul hondo */
  --salto:#C43D2E;      --salto-fondo:#FDE8E4;    /* retos                · coral      */

  --sombra:0 2px 4px rgba(60,42,24,.05), 0 18px 44px -14px rgba(60,42,24,.20);
  --palo:var(--orilla);
  --palo-fondo:var(--orilla-fondo);
}

/* El oscuro no es el claro invertido: mismo tono, fondo hondo y color aclarado
   hasta pasar 4.5 sobre ese fondo. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* El fondo es azul hondo y no marrón: el proyecto se llama A Fondo y el
       fondo ES el agua profunda. Al ser frío, además, las cartas cálidas
       saltan encima en vez de fundirse con la mesa.
       Contrastes verificados sobre la página: tinta 16.28, tinta suave 7.00,
       y los cuatro colores de nivel entre 4.51 y 9.86. */
    --papel:#0F131A;
    --carta:#181D26;
    --n0:#0F131A;
    --n1:#181D26;
    --n2:#212836;
    --n3:#2A3242;
    --borde:rgba(245,239,230,.10);
    --tinta:#F5EFE6;
    --tinta-suave:#93A0B0;
    --linea:#242C38;
    --orilla:#D39F45;      --orilla-fondo:#1B160E;
    --corriente:#45D3A6;     --corriente-fondo:#0E1B17;
    --hondo:#4D7BD5;   --hondo-fondo:#0E121B;
    --salto:#D35345;    --salto-fondo:#1B100E;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  /* El fondo es azul hondo y no marrón: el proyecto se llama A Fondo y el
     fondo ES el agua profunda. Al ser frío, además, las cartas cálidas
     saltan encima en vez de fundirse con la mesa.
     Contrastes verificados sobre la página: tinta 16.28, tinta suave 7.00,
     y los cuatro colores de nivel entre 4.51 y 9.86. */
  --papel:#0F131A;
  --carta:#181D26;
  --n0:#0F131A;
  --n1:#181D26;
  --n2:#212836;
  --n3:#2A3242;
  --borde:rgba(245,239,230,.10);
  --tinta:#F5EFE6;
  --tinta-suave:#93A0B0;
  --linea:#242C38;
  --orilla:#D39F45;      --orilla-fondo:#1B160E;
  --corriente:#45D3A6;     --corriente-fondo:#0E1B17;
  --hondo:#4D7BD5;   --hondo-fondo:#0E121B;
  --salto:#D35345;    --salto-fondo:#1B100E;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:64rem;margin:0 auto;padding:2.5rem 1.25rem 4rem;display:flex;flex-direction:column;gap:2rem}

/* ---------- cabecera ---------- */
.top{display:flex;flex-direction:column;gap:.9rem;align-items:center;text-align:center}
.eyebrow{
  font-size:.9rem;color:var(--tinta-suave);font-weight:500;
}
h1{
  font-family:"Outfit","Inter",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(3rem,10vw,4.8rem);
  line-height:.95;margin:0;text-wrap:balance;letter-spacing:-.035em;
}
.dek{max-width:32rem;margin:0;color:var(--tinta-suave);font-size:1.02rem;text-wrap:balance}

.views{display:flex;gap:.25rem;padding:.3rem;border:1px solid var(--linea);border-radius:var(--r-pastilla);background:var(--carta)}
.views button{
  font-family:inherit;font-size:.78rem;letter-spacing:0;font-weight:600;
  padding:.5rem 1.1rem;border:0;background:none;color:var(--tinta-suave);cursor:pointer;border-radius:calc(var(--r) - 6px);
  transition:background .18s ease,color .18s ease;
}
.views button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.views button:focus-visible{outline:2px solid var(--palo);outline-offset:2px}

/* ---------- pestañas de palo ---------- */
.palos{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%;max-width:34rem;margin:0 auto}
.palo-tab{
  font-family:inherit;cursor:pointer;background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r-chico);
  padding:.7rem .3rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  color:var(--tinta-suave);transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.palo-tab svg{width:22px;height:22px}
.palo-tab .pn{font-size:.82rem;font-weight:600}
.palo-tab:hover{transform:translateY(-2px)}
.palo-tab[aria-selected="true"]{color:var(--c);border-color:var(--c)}
.palo-tab:focus-visible{outline:2px solid var(--c);outline-offset:2px}

/* ---------- vista mazo ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.nivel{text-align:center;display:flex;flex-direction:column;gap:.25rem}
.nivel h2{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:700;font-size:1.5rem;margin:0;color:var(--palo);
}
.nivel p{margin:0;font-size:.88rem;color:var(--tinta-suave);max-width:26rem}

.carta{
  position:relative;width:min(100%,20rem);aspect-ratio:62/95;
  background:var(--palo-fondo);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);padding:.75rem;
}
.frame{
  position:relative;height:100%;border:2px solid var(--palo);border-radius:calc(var(--r) - 5px);
  padding:1.5rem 1.25rem;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:1.1rem;text-align:center;overflow-y:auto;
}
.pinta{position:absolute;top:calc(.75rem - 1px);left:.75rem;right:.75rem;height:3px;z-index:1;pointer-events:none}
.notch{position:absolute;top:0;height:3px;width:15px;background:var(--palo-fondo);transform:translateX(-50%)}
.frame .marca{position:absolute;color:var(--palo);opacity:.9}
.frame .marca svg{width:18px;height:18px;display:block}
.marca.tl{top:.55rem;left:.6rem}
.marca.br{bottom:.55rem;right:.6rem;transform:rotate(180deg)}
.num{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-size:.72rem;font-weight:600;
  color:var(--palo);letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;opacity:.7;
}
.q{
  font-size:clamp(1.25rem,4.6vw,1.6rem);line-height:1.32;margin:0;font-weight:500;letter-spacing:-.015em;
  text-wrap:balance;max-width:17rem;
}
.carta.deal{animation:deal .38s cubic-bezier(.2,.8,.3,1)}
@keyframes deal{from{opacity:0;transform:translateY(14px) rotate(-4deg) scale(.97)}to{opacity:1;transform:rotate(-1.2deg)}}

.mandos{display:flex;align-items:center;gap:1.1rem}
.mandos button{
  font-family:inherit;cursor:pointer;background:var(--carta);color:var(--tinta);
  border:1px solid var(--linea);border-radius:var(--r-chico);width:2.6rem;height:2.6rem;
  font-size:1rem;display:grid;place-items:center;transition:border-color .18s ease,color .18s ease;
}
.mandos button:hover{border-color:var(--palo);color:var(--palo)}
.mandos button:focus-visible{outline:2px solid var(--palo);outline-offset:2px}
.contador{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-size:1.15rem;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:5rem;text-align:center;color:var(--tinta-suave);
}
.contador b{color:var(--palo);font-weight:700}
.mezclar{
  font-family:inherit;background:none;border:0;cursor:pointer;color:var(--tinta-suave);
  font-size:.9rem;font-weight:500;
  padding:.4rem .2rem;border-bottom:1px solid var(--linea);transition:color .18s ease,border-color .18s ease;
}
.mezclar:hover{color:var(--palo);border-color:var(--palo)}
.mezclar:focus-visible{outline:2px solid var(--palo);outline-offset:3px}
.teclas{font-size:.76rem;color:var(--tinta-suave);text-align:center;margin:0}
.teclas kbd{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-size:.8rem;border:1px solid var(--linea);
  border-radius:var(--r-chico);padding:.05rem .3rem;background:var(--carta);
}

/* ---------- vista lista ---------- */
.lista{display:flex;flex-direction:column;gap:2.6rem}
.grupo{display:flex;flex-direction:column;gap:1rem}
.grupo-head{display:flex;align-items:baseline;gap:.7rem;border-bottom:1px solid var(--linea);padding-bottom:.55rem}
.grupo-head svg{width:19px;height:19px;color:var(--c);align-self:center}
.grupo-head h2{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:1.35rem;margin:0;font-weight:700;color:var(--c)}
.grupo-head .cnt{margin-left:auto;font-size:.74rem;letter-spacing:0;color:var(--tinta-suave);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem}
.mini{
  background:var(--c-fondo,var(--carta));border:1px solid var(--c);border-radius:var(--r-chico);
  padding:.9rem 1rem;display:flex;gap:.7rem;align-items:flex-start;
}
.mini .n{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-size:.82rem;font-weight:700;color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;padding-top:.12rem;flex-shrink:0;
}
.mini p{margin:0;font-size:.93rem;line-height:1.42}

.imprimir{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;justify-content:center;
  border:1px solid var(--linea);border-radius:var(--r-chico);background:var(--carta);padding:.9rem 1.1rem;
}
.imprimir p{margin:0;font-size:.86rem;color:var(--tinta-suave)}
.imprimir button{
  font-family:inherit;cursor:pointer;background:var(--tinta);color:var(--papel);border:0;border-radius:var(--r-chico);
  padding:.55rem 1.2rem;font-size:.76rem;letter-spacing:0;font-weight:700;
}
.imprimir button:focus-visible{outline:2px solid var(--corriente);outline-offset:2px}

/* ---------- reglas ---------- */
.reglas{border-top:1px solid var(--linea);padding-top:1.6rem;display:flex;flex-direction:column;gap:1rem}
.reglas h3{
  font-size:.72rem;letter-spacing:.2em;margin:0;color:var(--tinta-suave);font-weight:700;
}
.reglas ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.5rem;max-width:38rem}
.reglas li{font-size:.92rem;color:var(--tinta-suave)}
.reglas li b{color:var(--tinta);font-weight:600}
.pinta-nota{font-size:.88rem;color:var(--tinta-suave);max-width:38rem;margin:0}
.pinta-nota b{color:var(--tinta)}

/* ---------- vista jugar: el recorrido ---------- */
#vista-jugar{display:flex;flex-direction:column;gap:2rem}

.j-inicio{display:flex;flex-direction:column;align-items:center;gap:1.8rem;text-align:center}
.j-lead{margin:0;max-width:40rem;color:var(--tinta-suave);font-size:.98rem;line-height:1.6;text-wrap:pretty}
.j-sub{
  font-size:.68rem;letter-spacing:.2em;font-weight:700;
  color:var(--tinta-suave);margin:0;
}
.j-guardados{width:100%;max-width:34rem;display:flex;flex-direction:column;gap:.8rem}
.j-lista-rec{display:flex;flex-direction:column;gap:.5rem}
.j-rec{
  font-family:inherit;cursor:pointer;text-align:left;position:relative;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-chico);
  padding:.85rem 1rem 1rem;display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;
  color:var(--tinta-suave);transition:border-color .18s ease;
}
.j-rec:hover{border-color:var(--palo)}
.j-rec:focus-visible{outline:2px solid var(--palo);outline-offset:2px}
.j-rec-n{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:1.05rem;font-weight:700;color:var(--tinta)}
.j-rec-c{
  font-size:.68rem;letter-spacing:0;font-weight:700;
  align-self:center;font-variant-numeric:tabular-nums;
}
.j-rec .pb{grid-column:1/-1;margin-top:.4rem}

.pb{display:block;height:2px;background:var(--linea);border-radius:var(--r-chico);overflow:hidden}
.pb i{display:block;height:100%;background:var(--c,var(--palo));transition:width .3s ease}

.j-nuevo{width:100%;max-width:34rem;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.j-fila{display:flex;gap:.5rem;width:100%;flex-wrap:wrap;justify-content:center}
.j-fila input{
  font-family:inherit;font-size:.95rem;flex:1 1 14rem;min-width:0;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-chico);
  padding:.7rem .9rem;color:var(--tinta);
}
.j-fila input:focus{outline:0;border-color:var(--palo)}
.j-fila input::placeholder{color:var(--tinta-suave);opacity:.75}

/* mesa */
.j-mesa{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.j-cab{
  width:100%;max-width:38rem;display:flex;align-items:baseline;gap:.9rem;
  border-bottom:1px solid var(--linea);padding-bottom:.6rem;
}
.j-con{font-family:"Outfit","Inter",system-ui,sans-serif;font-style:italic;font-size:1.15rem;font-weight:700}
.j-prog{
  margin-left:auto;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:.92rem;
  color:var(--tinta-suave);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.j-prog b{color:var(--palo);font-size:1.15rem}

.j-palos{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;width:100%;max-width:38rem}
.j-palo{
  font-family:inherit;cursor:pointer;background:var(--carta);
  border:1px solid var(--linea);border-radius:var(--r-chico);padding:.6rem .35rem .5rem;
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  color:var(--tinta-suave);transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.j-palo svg{width:19px;height:19px}
.j-palo .pn{font-size:.8rem;font-weight:600}
.j-palo .pc{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:.7rem;font-variant-numeric:tabular-nums}
.j-palo .pb{width:100%;--c:var(--linea)}
.j-palo.sel{color:var(--c);border-color:var(--c)}
.j-palo.sel .pb{--c:currentColor}
.j-palo.cerrado{opacity:.38;cursor:not-allowed}
.j-palo:focus-visible{outline:2px solid var(--c);outline-offset:2px}

.j-aviso{
  margin:0;max-width:26rem;text-align:center;font-size:.76rem;line-height:1.4;
  color:var(--salto);letter-spacing:.01em;
}
.j-mandos{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center}
.j-carta-fin{margin:0 auto}

/* fin del mazo */
.j-fin{display:flex;flex-direction:column;align-items:center;gap:1.3rem;text-align:center}

/* botones compartidos */
.p-cta{
  font-family:inherit;cursor:pointer;background:var(--tinta);color:var(--papel);border:0;border-radius:var(--r-chico);
  padding:.85rem 2.2rem;font-size:.86rem;letter-spacing:.02em;font-weight:600;border-radius:var(--r-pastilla);
  transition:opacity .18s ease;
}
.p-cta:hover{opacity:.86}
.p-cta:focus-visible{outline:2px solid var(--palo);outline-offset:3px}
.p-linkbtn{
  font-family:inherit;background:none;border:0;cursor:pointer;color:var(--tinta-suave);
  font-size:.9rem;font-weight:500;
  padding:.35rem .2rem;border-bottom:1px solid var(--linea);
  transition:color .18s ease,border-color .18s ease;
}
.p-linkbtn:hover{color:var(--palo);border-color:var(--palo)}
.p-linkbtn:focus-visible{outline:2px solid var(--palo);outline-offset:3px}
.p-paso{
  font-family:inherit;cursor:pointer;background:var(--carta);color:var(--tinta-suave);
  border:1px solid var(--linea);border-radius:var(--r-chico);padding:.75rem 1.3rem;
  font-size:.73rem;letter-spacing:0;font-weight:700;
  transition:border-color .18s ease,color .18s ease;
}
.p-paso:hover:not(:disabled){border-color:var(--palo);color:var(--palo)}
.p-paso:disabled{opacity:.4;cursor:not-allowed}
.p-paso:focus-visible{outline:2px solid var(--palo);outline-offset:2px}
.p-extra{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem}

/* la carta: tipos y variantes */
.nota-tipo{
  margin:0;font-size:.72rem;line-height:1.35;color:var(--tinta-suave);max-width:15.5rem;
  display:flex;align-items:flex-start;gap:.4rem;text-align:left;
}
.nota-tipo .ei{width:13px;height:13px;flex-shrink:0;margin-top:.14rem;color:var(--palo)}
.frame.es-final{border-width:2px;gap:1.2rem}
.frame.es-final .q{font-size:clamp(.98rem,3.6vw,1.1rem);max-width:16rem}
.frame.es-final .num{color:var(--tinta)}
.cuatro{display:flex;gap:.75rem}
.cuatro svg{width:19px;height:19px;display:block}
.frame.es-blanca{border-style:dashed}
.q-input{
  font-family:inherit;font-size:1rem;line-height:1.4;text-align:center;resize:none;width:100%;max-width:16rem;
  background:none;border:0;border-bottom:1px dashed var(--linea);color:var(--tinta);padding:.4rem 0;
}
.q-input:focus{outline:0;border-bottom-color:var(--palo)}
.q-input::placeholder{color:var(--suave-carta);opacity:.7}

/* resumen */
.p-fin-t{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.9rem,6.5vw,2.7rem);margin:0;line-height:1.03;letter-spacing:-.03em;text-wrap:balance;
}
.p-resumen{
  margin:0;width:100%;max-width:30rem;display:flex;flex-direction:column;
  border:1px solid var(--linea);border-radius:var(--r-chico);background:var(--carta);
}
.p-resumen div{display:flex;align-items:baseline;gap:1rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--linea)}
.p-resumen div:last-child{border-bottom:0}
.p-resumen dt{font-size:.8rem;color:var(--tinta-suave)}
.p-resumen dd{
  margin:0 0 0 auto;font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:700;font-size:1.02rem;
  font-variant-numeric:tabular-nums;color:var(--palo);
}

/* marcas en la lista */
.mini-espejo,.mini-debate{box-shadow:inset 2px 0 0 var(--c)}
.mini-debate{box-shadow:inset 2px 0 0 var(--c),inset 5px 0 0 var(--carta),inset 7px 0 0 var(--c)}
.mini-tag{
  display:block;margin-top:.35rem;font-size:.63rem;letter-spacing:0;
  font-weight:700;color:var(--tinta-suave);
}
.mini-fin{border-style:dashed;background:var(--carta)}
.mini-fin b{font-family:"Outfit","Inter",system-ui,sans-serif;font-style:italic}

/* ---------- barra de acceso ---------- */
.ac-barra{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1.1rem;font-size:.76rem;color:var(--tinta-suave);
}
.ac-barra b{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.ac-barra .p-linkbtn{text-decoration:none;display:inline-block}

/* ---------- diálogo de acceso ---------- */
.dlg{
  border:1px solid var(--linea);border-radius:var(--r);background:var(--carta);color:var(--tinta);
  padding:1.9rem 1.7rem 1.6rem;max-width:26rem;width:calc(100vw - 2rem);box-shadow:var(--sombra);
}
.dlg::backdrop{background:rgba(0,0,0,.55)}
.dlg-x{position:absolute;top:.4rem;right:.5rem;margin:0}
.dlg-x button{
  font-family:"Outfit","Inter",system-ui,sans-serif;background:none;border:0;cursor:pointer;
  color:var(--tinta-suave);font-size:1.5rem;line-height:1;padding:.2rem .4rem;
}
.dlg-x button:hover{color:var(--tinta)}
.dlg-t{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:800;
  font-size:1.8rem;margin:0 0 .9rem;line-height:1.05;letter-spacing:-.02em;
}
.dlg-cuerpo{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.2rem}
.dlg-cuerpo:empty{display:none}
.dlg-form{display:flex;flex-direction:column;gap:.5rem}
.dlg-form label{
  font-size:.85rem;font-weight:600;color:var(--tinta-suave);
}
.dlg-form input{
  font-family:inherit;font-size:1rem;background:var(--papel);color:var(--tinta);
  border:1px solid var(--linea);border-radius:var(--r-chico);padding:.65rem .8rem;
}
.dlg-form input:focus{outline:2px solid var(--palo);outline-offset:1px;border-color:var(--palo)}
.dlg-form .p-cta{margin-top:.4rem}
.dlg-err{margin:0;font-size:.83rem;line-height:1.4;color:var(--corriente)}

/* ---------- fin de la muestra ---------- */
.j-fin-venta{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:30rem}
.j-fin-venta p{margin:0;font-size:.92rem;color:var(--tinta-suave);text-wrap:pretty}
.j-fin-venta .p-cta{text-decoration:none;display:inline-block}

/* ---------- sección de venta ---------- */
.venta{
  border-top:1px solid var(--linea);padding-top:2.2rem;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;
}
.v-t{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:800;
  font-size:clamp(2rem,7vw,3rem);margin:0;line-height:1.02;letter-spacing:-.03em;
}
.v-dek{margin:0;max-width:36rem;color:var(--tinta-suave);font-size:.98rem;text-wrap:pretty}
.v-incluye{
  margin:.4rem 0 0;padding:0;list-style:none;text-align:left;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.4rem 1.8rem;
  max-width:40rem;width:100%;
}
.v-incluye li{
  font-size:.9rem;color:var(--tinta-suave);padding-left:1rem;position:relative;line-height:1.45;
}
.v-incluye li::before{
  content:"·";position:absolute;left:.2rem;color:var(--palo);font-weight:700;
}
.v-incluye b{color:var(--tinta);font-weight:600}
.v-precio{margin:.6rem 0 0;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.v-precio b{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:800;
  font-size:2.1rem;line-height:1;color:var(--tinta);
}
.v-precio span{
  font-size:.85rem;font-weight:600;color:var(--tinta-suave);
}
.v-botones{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;align-items:center}
.v-botones .p-cta{text-decoration:none;display:inline-block}
.v-nota-muestra{margin:0;font-size:.78rem;color:var(--tinta-suave)}

.v-datos{
  width:100%;max-width:30rem;border:1px solid var(--linea);border-radius:var(--r-chico);background:var(--carta);
  padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;align-items:center;
}
.v-datos p{margin:0;font-size:.86rem;color:var(--tinta-suave);text-wrap:pretty}
.v-datos .p-cta{text-decoration:none;display:inline-block}
.v-cuenta{margin:0;width:100%;display:flex;flex-direction:column;gap:.1rem}
.v-cuenta div{display:flex;align-items:baseline;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--linea)}
.v-cuenta div:last-child{border-bottom:0}
.v-cuenta dt{font-size:.68rem;letter-spacing:0;font-weight:700;color:var(--tinta-suave)}
.v-cuenta dd{
  margin:0 0 0 auto;font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:700;font-size:1rem;
  color:var(--tinta);text-align:right;
}
.v-chica{margin:0;max-width:34rem;font-size:.8rem;line-height:1.5;color:var(--tinta-suave)}
.v-chica b{color:var(--tinta);font-weight:600}
.v-chica a,.credito a{color:var(--palo);text-decoration:underline;text-underline-offset:2px}

.dlg-cuerpo p{margin:0;font-size:.88rem;color:var(--tinta-suave);line-height:1.45}
.dlg-o{
  font-size:.68rem !important;letter-spacing:0;font-weight:700;
  text-align:center;margin-top:.3rem !important;
}
.dlg-cuerpo .p-paso{width:100%}

.credito{
  margin:.4rem 0 0;font-size:.74rem;letter-spacing:.08em;color:var(--tinta-suave);
}

/* ---------- pictograma ---------- */
.picto{display:block;color:var(--palo);opacity:.85;margin-top:-.2rem}
.picto svg{width:26px;height:26px;display:block}
.frame.es-final .picto,.frame.es-blanca .picto{display:none}

/* ---------- la marca ---------- */
.titulo{display:flex;align-items:center;justify-content:center;gap:clamp(.7rem,2.5vw,1.2rem)}
/* Se llama .logo y no .marca a propósito: .marca ya son las marcas de palo de
   las esquinas de la carta, y son position:absolute. */
.logo{display:block;flex-shrink:0}
.logo svg{
  display:block;
  width:clamp(2.6rem,9vw,4.2rem);
  height:clamp(2.6rem,9vw,4.2rem);
}
/* A tamaños chicos el trazo de 9 se empasta: se sube en vez de dejarlo afinar. */
@media (max-width:34rem){ .logo svg{--marca-trazo:11} }

/* ---------- confirmación de la muestra ---------- */
.v-listo{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  border:1px solid var(--palo);border-radius:var(--r-chico);background:var(--carta);
  padding:1.1rem 1.3rem;max-width:30rem;width:100%;
}
.v-listo p{margin:0;font-size:.9rem;color:var(--tinta-suave)}
.v-listo b{color:var(--tinta)}
.v-listo .p-cta{text-decoration:none;display:inline-block}

/* ---------- arranque y nombre del mazo ---------- */
.j-inicio-t{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.7rem,6vw,2.3rem);margin:0;line-height:1.05;letter-spacing:-.03em;
}
.j-con{
  font-family:"Outfit","Inter",system-ui,sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:-.02em;background:none;border:0;cursor:pointer;color:var(--tinta);
  padding:.2rem .5rem;margin-left:-.5rem;border-radius:var(--r-chico);
  transition:background .15s ease;
}
.j-con:hover{background:var(--carta)}
.j-con.sin-nombre{color:var(--tinta-suave);font-weight:600}
.j-con::after{content:" ✎";font-size:.72em;opacity:.45}
.j-con:focus-visible{outline:2px solid var(--palo);outline-offset:2px}

/* ---------- la carta, como sticker ----------
   Esta es la carta del encabezado de la encuesta, que es la que funcionaba:
   anillo claro alrededor —como un sticker recortado—, adentro el tinte del
   nivel, marco fuerte y los cortes mordiendo ese marco.

   Lo que la vuelve amigable no es el color de la carta: es la presentación.
   El primer intento fue pintarla de color sólido y quedaba plana; el anillo, la
   rotación y la sombra hacen que se lea como un objeto sobre una mesa.

   Y es la MISMA carta que sale en el PDF, así que la web y lo impreso dejan de
   ser dos cosas distintas. */
.carta{
  background:var(--anillo);
  border:0;
  padding:.85rem;
  border-radius:var(--r);
  box-shadow:var(--sombra);
  transform:rotate(-1.2deg);
  transition:transform .25s ease;
}
.carta:hover{transform:rotate(0deg)}
.carta .frame{
  background:var(--palo-fijo-fondo);
  border:2px solid var(--palo-fijo);
  border-radius:calc(var(--r) - 7px);
  padding:1.6rem 1.3rem;
  color:var(--tinta-carta);
}
.carta .q{color:var(--tinta-carta);font-weight:600}
.carta .num{color:var(--palo-fijo);opacity:.85}
.carta .marca{color:var(--palo-fijo);opacity:.75}
.carta .picto{color:var(--palo-fijo);opacity:.85}
.carta .nota-tipo{color:var(--suave-carta)}
.carta .nota-tipo .ei{color:var(--palo-fijo)}

/* Los cortes muerden el marco: se recortan contra el anillo, no contra el tinte. */
.pinta{top:calc(.85rem - 1px);left:.85rem;right:.85rem;height:4px}
.notch{background:var(--anillo);height:4px;width:17px}

.frame.es-final{border-width:2px}
.frame.es-blanca{border-style:dashed}
.q-input{color:var(--tinta-carta);border-bottom-color:var(--linea-carta)}
.q-input::placeholder{color:var(--suave-carta);opacity:.7}

/* La mesa: un panel de color detrás de la carta, que la apoya en algún lado en
   vez de dejarla flotando en el vacío. Va acotado al bloque, no a la página. */
.j-mesa,.stage{position:relative;padding:1.6rem clamp(.6rem,3vw,1.2rem);border-radius:var(--r);width:100%;box-sizing:border-box}
.j-mesa::before,.stage::before{
  content:"";position:absolute;inset:0;
  background:var(--palo);opacity:.08;border-radius:var(--r);z-index:-1;
  transition:background .3s ease;
}

[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .palo-tab:hover{transform:none}
}

/* ---------- impresión: 100 cartas para recortar ---------- */
@media print{
  @page{margin:9mm}
  body{background:#fff;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top,.palos,.stage,.imprimir,.reglas,.views,
  #vista-jugar,.ac-barra,.dlg,.venta{display:none !important}
  /* se imprime la lista aunque estés parado en otra vista */
  #vista-lista,#vista-lista[hidden]{display:block !important}
  .lista{display:flex !important;gap:0}
  .wrap{padding:0;max-width:none;gap:0}
  .grupo{break-before:page;gap:4mm}
  .grupo:first-child{break-before:auto}
  .grupo-head{border-bottom:.4mm solid #000}

  .grid{grid-template-columns:repeat(3,62mm);gap:0;justify-content:center}
  /* Fondo suave y marco fuerte, nunca color macizo: esto se imprime en casa y
     el color pleno gasta muchísima tinta y ondula el papel. */
  .mini{
    width:62mm;height:88mm;border:.5mm solid var(--c);border-radius:0;
    background:var(--c-fondo,#fff);outline:.3mm dashed #999;outline-offset:0;
    padding:7mm 5mm;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;gap:3mm;break-inside:avoid;
  }
  .mini .n{font-size:9pt;padding:0}
  .mini p{font-size:11pt;line-height:1.35}
  .mini-espejo,.mini-debate{box-shadow:none;border-style:solid;border-width:.5mm}
  .mini-tag{color:#000;font-size:6.5pt;margin-top:2mm}
  .mini-fin p{font-size:9.5pt}
}


/* ═══════════════════════════════════════════════════════════════
   ESTRUCTURA DE PÁGINA
   El sitio era dos productos en un mismo scroll: una landing que vende y una
   app que se juega, mezcladas por un selector de vistas. Ahora hay una sola
   lectura de arriba abajo, y la app vive dentro del hero: no hay mejor foto
   del producto que el producto andando.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- cabecera pegajosa ----------
   Logo, tres destinos y un CTA. Nada más: un header con muchas opciones diluye
   la única acción que importa. Se mantiene por debajo del 15% de la pantalla. */
.cab{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  background:color-mix(in srgb, var(--n0) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--borde);
}
.cab-marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tinta);flex-shrink:0}
.cab-marca .logo svg{width:30px;height:30px;--marca-trazo:11}
.cab-nombre{font-family:"Outfit",system-ui,sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.cab-nav{display:flex;gap:1.4rem;margin-left:auto}
.cab-nav a{
  color:var(--tinta-suave);text-decoration:none;font-size:.94rem;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.cab-nav a:hover{color:var(--tinta);border-bottom-color:var(--palo)}
.cab-cta{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;flex-shrink:0;
  background:var(--tinta);color:var(--n0);border-radius:var(--r-pastilla);
  padding:.6rem 1.2rem;font-size:.92rem;font-weight:600;transition:opacity .18s;
}
.cab-cta:hover{opacity:.86}
.cab-cta b{font-weight:700}
@media (max-width:52rem){
  .cab-nav{display:none}
  .cab{gap:.8rem}
  .cab-cta{margin-left:auto}
  .cab-cta-txt{display:none}
}

/* ---------- hero ---------- */
.wrap{max-width:76rem;padding-top:2.5rem}
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding:clamp(1rem,4vw,3rem) 0 clamp(2rem,5vw,4rem);
}
.hero-txt{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;text-align:left}
.hero-ojo{margin:0;font-size:.9rem;color:var(--tinta-suave);font-weight:500}
.hero h1{
  font-family:"Outfit",system-ui,sans-serif;font-weight:800;margin:0;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;letter-spacing:-.04em;
}
.hero-dek{margin:0;max-width:34rem;font-size:1.08rem;color:var(--tinta-suave);line-height:1.6}
.hero-acc{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.hero-nota{margin:0;font-size:.88rem;color:var(--tinta-suave)}
.hero-nota b{color:var(--tinta);font-weight:600}
.hero-app{display:flex;flex-direction:column;align-items:center;gap:1rem;min-width:0;width:100%}
@media (max-width:60rem){
  .hero{grid-template-columns:1fr;gap:2.5rem}
  .hero-txt{align-items:center;text-align:center}
  .hero-dek{margin-inline:auto}
  .hero-acc{justify-content:center}
}

/* ---------- botones, un solo sistema ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:.98rem;font-weight:600;cursor:pointer;
  padding:.85rem 1.6rem;border-radius:var(--r-pastilla);border:1px solid transparent;
  text-decoration:none;transition:opacity .18s,background .18s,border-color .18s;
}
.btn-primario{background:var(--tinta);color:var(--n0)}
.btn-primario:hover{opacity:.88}
.btn-fantasma{background:none;color:var(--tinta);border-color:var(--borde)}
.btn-fantasma:hover{border-color:var(--palo);color:var(--palo)}
.btn:focus-visible{outline:2px solid var(--palo);outline-offset:3px}

/* ---------- secciones ---------- */
.sec{
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--borde);
}
.sec-ojo{margin:0;font-size:.9rem;font-weight:600;color:var(--palo)}
.sec-t{
  font-family:"Outfit",system-ui,sans-serif;font-weight:800;margin:0;
  font-size:clamp(1.8rem,4.5vw,2.8rem);line-height:1.05;letter-spacing:-.035em;
}
.sec-dek{margin:0;max-width:40rem;color:var(--tinta-suave);font-size:1rem;line-height:1.6}

/* ---------- los cuatro niveles ---------- */
.niveles-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1rem;width:100%;margin-top:1rem;
}
.nivel-card{
  background:var(--n1);border:1px solid var(--borde);border-radius:var(--r);
  padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;text-align:left;
  border-top:4px solid var(--c);
}
.nivel-card .ni{color:var(--c)}
.nivel-card .ni svg{width:26px;height:26px;display:block}
.nivel-card h3{
  font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:1.25rem;
  margin:.2rem 0 0;letter-spacing:-.02em;
}
.nivel-card .nn{font-size:.86rem;color:var(--c);font-weight:600}
.nivel-card p{margin:0;font-size:.92rem;color:var(--tinta-suave);line-height:1.5}
.nivel-card .cortes{display:flex;align-items:center;gap:.25rem;margin-top:auto;padding-top:.7rem}
.nivel-card .cortes i{width:13px;height:3px;background:var(--c);border-radius:2px}
.nivel-card .cortes em{font-style:normal;font-size:.78rem;color:var(--tinta-suave);margin-left:.4rem}

/* ---------- clases de carta ---------- */
.clases-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:1rem;width:100%;margin-top:1rem;
}
.clase{
  background:var(--n1);border:1px solid var(--borde);border-radius:var(--r);
  padding:1.3rem;text-align:left;display:flex;flex-direction:column;gap:.4rem;
}
.clase h3{
  font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:1.1rem;margin:0;
  display:flex;align-items:baseline;gap:.5rem;letter-spacing:-.02em;
}
.clase h3 span{
  font-size:.82rem;font-weight:600;color:var(--palo);
  background:color-mix(in srgb, var(--palo) 14%, transparent);
  padding:.1rem .5rem;border-radius:var(--r-pastilla);
}
.clase p{margin:0;font-size:.92rem;color:var(--tinta-suave);line-height:1.55}
.clase b{color:var(--tinta)}

#mazo-vistas .views{margin-top:.5rem}

/* ---------- la colección de mazos ---------- */
.mazos-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;width:100%;margin-top:1rem;
}
.mazo{
  position:relative;background:var(--n1);border:1px solid var(--borde);
  border-radius:var(--r);padding:1.4rem 1.3rem 1.2rem 1.7rem;
  display:flex;flex-direction:column;gap:.8rem;text-align:left;overflow:hidden;
}
/* El lomo: la carta vista de canto, que es como se reconoce un mazo en un estante. */
.mazo-lomo{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.mazo-txt{display:flex;flex-direction:column;gap:.25rem}
.mazo-marca{
  margin:0;font-family:"Outfit",system-ui,sans-serif;font-size:.78rem;
  font-weight:600;color:var(--tinta-suave);
}
.mazo h3{
  font-family:"Outfit",system-ui,sans-serif;font-weight:800;font-size:1.5rem;
  margin:0;letter-spacing:-.03em;color:var(--c);line-height:1;
}
.mazo p:not(.mazo-marca):not(.mazo-pie){margin:.35rem 0 0;font-size:.92rem;color:var(--tinta-suave);line-height:1.5}
.mazo-pie{
  margin:auto 0 0;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding-top:.6rem;border-top:1px solid var(--borde);
}
.mazo-pie b{font-family:"Outfit",system-ui,sans-serif;font-size:1.05rem;font-weight:700}
.mazo-pie span{font-size:.88rem;color:var(--tinta-suave)}
.mazo-cta{
  font-size:.88rem;font-weight:600;text-decoration:none;color:var(--n0);
  background:var(--tinta);padding:.4rem .9rem;border-radius:var(--r-pastilla);
}
.mazo-cta:hover{opacity:.86}
/* Los que vienen se ven, pero se nota que todavía no están. */
.mazo-pronto{border-style:dashed}
.mazo-pronto .mazo-lomo{opacity:.45}
.mazo-pronto h3{opacity:.7}