:root{
  --fondo:#0e0d0c;
  --panel:#171514;
  --tinta:#e8e2d6;
  --suave:#8b8378;
  --acento:#c9a05e;
  --linea:#2a2622;
}

@media (prefers-color-scheme: light){
  :root{
    --fondo:#f7f4ee; --panel:#fff; --tinta:#171512;
    --suave:#6d655b; --acento:#8a6d3b; --linea:#e0d9cc;
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--fondo); color:var(--tinta);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  line-height:1.55; padding:0 20px 70px;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

/* ---------------- Barra ---------------- */
.barra{
  display:flex; align-items:center; gap:16px;
  max-width:660px; margin:0 auto; padding:24px 0 22px;
}
.marca{ font-size:19px; font-weight:700; letter-spacing:.02em; text-decoration:none; }
.marca span{ color:var(--acento); }
.barra nav{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.barra nav a, .barra nav button{
  font-family:system-ui,sans-serif; font-size:12.5px; letter-spacing:.04em;
  color:var(--suave); text-decoration:none; background:none; border:0;
  cursor:pointer; padding:4px 2px;
}
.barra nav a:hover, .barra nav button:hover{ color:var(--acento); }

main{ max-width:660px; margin:0 auto; }

h1,h2{
  font-family:system-ui,sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--suave);
}

/* ---------------- La cara ---------------- */
.hoy{ padding:26px 0 34px; }
.hoy h1{ margin-bottom:16px; }

.cara, .hoy-cara{
  display:block; text-decoration:none;
  background:var(--panel); border:1px solid var(--linea); border-radius:14px;
  padding:34px 30px;
}
.hoy-cara{ transition:border-color .2s; }
.hoy-cara:hover{ border-color:var(--acento); }
.hoy-cara.tapada{ text-align:center; padding:38px 30px 34px; }
.hoy-cara.tapada .sobre{ width:190px; margin:0 auto; }

/* La pregunta manda: es lo único que tiene que quedarse en la cabeza.
   Las dos frases de arriba la preparan, y por eso van más pequeñas. */
.frase{ font-size:17px; line-height:1.45; color:var(--suave); }
.pregunta{
  font-size:32px; line-height:1.15; font-style:italic; color:var(--acento);
  margin-top:14px; letter-spacing:-.015em;
}

.sello{ color:var(--linea); font-style:normal; }
.sello.grande{ font-size:40px; line-height:1; }
.invita{
  font-family:system-ui,sans-serif; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave); margin-top:18px;
}
.racha{ font-family:system-ui,sans-serif; font-size:12.5px; color:var(--suave); margin-top:14px; }

/* ---------------- Una carta ---------------- */
.unacarta{ padding:26px 0 0; }

blockquote{ border-left:2px solid var(--acento); padding:2px 0 2px 20px; margin:30px 0; }
blockquote p{ font-size:17px; }
blockquote cite{
  display:block; margin-top:11px; font-style:normal;
  font-family:system-ui,sans-serif; font-size:12px; letter-spacing:.07em; color:var(--suave);
}

.acciones{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:40px; }
.acciones a, .acciones button{
  font-family:system-ui,sans-serif; font-size:13px; font-weight:550;
  padding:9px 15px; border-radius:9px; border:1px solid var(--linea);
  background:var(--panel); color:inherit; text-decoration:none; cursor:pointer;
}
.acciones .principal{ background:var(--acento); border-color:var(--acento); color:#141210; }
.acciones a:hover, .acciones button:hover{ border-color:var(--acento); color:var(--acento); }
.acciones .principal:hover{ filter:brightness(1.1); color:#141210; }

/* ---------------- Las trece ---------------- */
.coleccion{ padding:32px 0; border-top:1px solid var(--linea); }
.marcador{ font-family:system-ui,sans-serif; font-size:12.5px; color:var(--suave); margin:8px 0 18px; }

.malla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:9px; }

.mini{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:84px; padding:14px 12px; text-decoration:none;
  background:var(--panel); border:1px solid var(--linea); border-radius:11px;
  font-size:15px; line-height:1.28; font-style:italic; color:var(--acento);
  transition:border-color .2s;
}
.mini{ padding:10px; }
.sobrecito{ width:100%; max-width:118px; height:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28)); transition:transform .18s; }
.mini:hover .sobrecito{ transform:translateY(-2px); }
.mini.hallada{ padding:14px 12px; }
.mini:hover{ border-color:var(--acento); }
.mini.hallada{ border-color:color-mix(in srgb, var(--acento) 45%, var(--linea)); }
.mini.hoy{ box-shadow:0 0 0 1px var(--acento); }

/* ---------------- Pie ---------------- */
.explica{ padding:30px 0; border-top:1px solid var(--linea); color:var(--suave); }
.explica p{ margin-bottom:11px; }
.explica a{ color:var(--acento); }

footer{
  max-width:660px; margin:36px auto 0; padding-top:20px; border-top:1px solid var(--linea);
  font-family:system-ui,sans-serif; font-size:12px; color:var(--suave);
}
footer a{ color:var(--acento); }
footer .lema{ display:block; margin-top:5px; font-style:italic; }

@media (max-width:520px){
  .frase{ font-size:15.5px; }
  .pregunta{ font-size:26px; }
  .malla{ grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); }
}

/* ---------------- El código de cada carta ---------------- */
.codigo{ padding:30px 0; border-top:1px solid var(--linea); }
.codigo h2{ margin-bottom:16px; }

.lienzo{
  width:150px; padding:10px; border-radius:10px; background:#fff;
  border:1px solid var(--linea);
}
.lienzo svg{ display:block; width:100%; height:auto; }

.codigo .menu{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.codigo .menu button, .codigo .menu a{
  font-family:system-ui,sans-serif; font-size:12.5px; font-weight:550;
  padding:8px 13px; border-radius:8px; border:1px solid var(--linea);
  background:var(--panel); color:var(--suave); text-decoration:none; cursor:pointer;
}
.codigo .menu button:hover, .codigo .menu a:hover{ border-color:var(--acento); color:var(--acento); }

.consejo{
  font-family:system-ui,sans-serif; font-size:12px; line-height:1.5;
  color:var(--suave); margin-top:14px; max-width:44ch;
}

/* ---------------- Tu respuesta ---------------- */
.tuya{ padding:30px 0; border-top:1px solid var(--linea); }
.tuya h2{ margin-bottom:14px; }
.tuya textarea{
  width:100%; padding:14px 16px; border-radius:11px;
  border:1px solid var(--linea); background:var(--panel); color:inherit;
  font-family:inherit; font-size:17px; line-height:1.5; resize:vertical;
}
.tuya textarea:focus{ outline:1px solid var(--acento); border-color:transparent; }
.tuya .nota{
  font-family:system-ui,sans-serif; font-size:12px; color:var(--suave); margin:9px 0 16px;
}
.tuya button{
  font-family:system-ui,sans-serif; font-size:13px; font-weight:550;
  padding:10px 17px; border-radius:9px; border:1px solid var(--acento);
  background:var(--acento); color:#141210; cursor:pointer;
}
.tuya button:hover{ filter:brightness(1.1); }
.tuya.hecha .respuesta{
  font-size:17px; font-style:italic; color:var(--suave);
  border-left:2px solid var(--linea); padding-left:20px;
}

.pendiente{
  font-family:system-ui,sans-serif; font-size:12px; letter-spacing:.05em;
  color:var(--acento); margin:-28px 0 40px;
}

/* ---------------- Niveles ---------------- */
.nivel{ padding:32px 0; border-top:1px solid var(--linea); }
.nivel h2{ margin-bottom:4px; }
.nivel .subtitulo{ font-size:19px; margin-bottom:2px; }
.nivel .marcador{
  font-family:system-ui,sans-serif; font-size:12.5px; color:var(--suave); margin:6px 0 18px;
}
.nivel.hecho .marcador{ color:var(--acento); }

.lacre{
  display:flex; align-items:center; gap:24px; margin-top:16px;
  padding:26px 24px; border-radius:14px;
  background:var(--panel); border:1px solid var(--linea);
}
.lacre p{
  font-family:system-ui,sans-serif; font-size:13px; line-height:1.5; color:var(--suave);
}
.sobre{
  width:150px; height:auto; flex:0 0 auto;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

/* Colores del sobre: papel apagado y cera oscura, para que el lacre destaque
   sin que el bloque compita con las cartas abiertas. */
:root{
  --sobre:#2a2521; --sobre-solapa:#221e1a; --sobre-linea:#4a4139;
  --lacre:#9c3527; --lacre-borde:#c25a48; --lacre-letra:#f3d9c9;
}
@media (prefers-color-scheme: light){
  :root{
    --sobre:#efe7d8; --sobre-solapa:#e5dbc9; --sobre-linea:#cdbfa6;
    --lacre:#9c3527; --lacre-borde:#7a2519; --lacre-letra:#f7e6dc;
  }
}

@media (max-width:520px){
  .lacre{ flex-direction:column; align-items:flex-start; gap:18px; }
  .sobre{ width:180px; }
}

/* ---------------- Copia de seguridad ---------------- */
details.respaldo{ padding:22px 0 0; border-top:1px solid var(--linea); margin-top:30px; }
details.respaldo summary{
  font-family:system-ui,sans-serif; font-size:12px; color:var(--suave);
  cursor:pointer; list-style:none; max-width:52ch;
}
details.respaldo summary::-webkit-details-marker{ display:none; }
details.respaldo summary::before{ content:"+ "; color:var(--acento); }
details.respaldo[open] summary::before{ content:"− "; }
details.respaldo > *:not(summary){ margin-top:14px; }
.respaldo .nota{
  font-family:system-ui,sans-serif; font-size:12.5px; line-height:1.55;
  color:var(--suave); max-width:52ch; margin-bottom:14px;
}
.respaldo .menu{ display:flex; gap:8px; flex-wrap:wrap; }
.respaldo button{
  font-family:system-ui,sans-serif; font-size:12.5px; font-weight:550;
  padding:8px 13px; border-radius:8px; border:1px solid var(--linea);
  background:var(--panel); color:var(--suave); cursor:pointer;
}
.respaldo button:hover{ border-color:var(--acento); color:var(--acento); }

.respaldo .codigo-mio{
  display:flex; align-items:baseline; gap:12px; margin-bottom:14px;
}
.respaldo .codigo-mio span{
  font-family:system-ui,sans-serif; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave);
}
.respaldo .codigo-mio strong{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:21px;
  letter-spacing:.2em; color:var(--acento); font-weight:600;
}
.respaldo .nota.fina{ margin:14px 0 0; font-size:11.5px; }

/* ---------------- Los dos pasos ---------------- */
.pasos{
  display:flex; gap:10px; list-style:none; margin-bottom:20px; flex-wrap:wrap;
}
.pasos li{
  display:flex; align-items:center; gap:8px;
  font-family:system-ui,sans-serif; font-size:12px; letter-spacing:.04em;
  color:var(--suave); opacity:.5;
  padding:6px 12px 6px 6px; border:1px solid var(--linea); border-radius:99px;
}
.pasos li span{
  display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  border:1px solid var(--linea); font-size:11px; font-weight:700;
}
.pasos li.ahora{ opacity:1; color:var(--acento); border-color:var(--acento); }
.pasos li.ahora span{ border-color:var(--acento); }
.pasos li.hecho{ opacity:1; color:var(--suave); }
.pasos li.hecho span{
  background:var(--acento); border-color:var(--acento); color:#141210; font-size:0;
}
.pasos li.hecho span::after{ content:"✓"; font-size:11px; }

.acciones .principal.gana{ animation:latir 2.6s ease-in-out infinite; }
@keyframes latir{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,160,94,.5); }
  50%    { box-shadow:0 0 0 7px rgba(201,160,94,0); }
}

.conseguida{
  font-family:system-ui,sans-serif; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--acento); margin:-28px 0 40px;
}

/* El botón que abre el sobre habla en dos alturas: qué haces y qué te llevas. */
.acciones .principal.gana{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:11px 18px; line-height:1.25;
}
.acciones .principal.gana strong{ font-weight:650; font-size:13.5px; }
.acciones .principal.gana em{ font-style:normal; font-size:11.5px; opacity:.78; }

/* Los sobres que aún no toca abrir: se ven, se cuentan, pero no se tocan. */
.mini.cerrado{ cursor:default; opacity:.5; }
.mini.cerrado .sobrecito{ filter:grayscale(.55) drop-shadow(0 2px 5px rgba(0,0,0,.22)); }
.mini.cerrado:hover{ border-color:var(--linea); }
.mini.cerrado:hover .sobrecito{ transform:none; }

.hoy-cara .ya{
  font-family:system-ui,sans-serif; font-size:12px; color:var(--suave);
  margin-top:18px; padding-top:14px; border-top:1px solid var(--linea);
}

/* ---------------- Reparte los tuyos ---------------- */
.reparte{ padding:32px 0; border-top:1px solid var(--linea); }
.reparte h2{ margin-bottom:6px; }
.reparte .nota{
  font-family:system-ui,sans-serif; font-size:12.5px; line-height:1.55;
  color:var(--suave); max-width:52ch; margin-bottom:18px;
}
.mios{ display:flex; flex-wrap:wrap; gap:12px; }
.mio{ text-decoration:none; text-align:center; }
.mio .cuadro{
  width:74px; padding:6px; border-radius:8px; background:#fff;
  border:1px solid var(--linea); transition:transform .18s, border-color .18s;
}
.mio:hover .cuadro{ transform:translateY(-2px); border-color:var(--acento); }
.mio .cuadro svg{ display:block; width:100%; height:auto; }
.mio span{
  display:block; margin-top:6px; font-family:system-ui,sans-serif;
  font-size:11px; letter-spacing:.1em; color:var(--suave);
}
.reparte .menu{ margin-top:18px; }
.reparte .menu a{
  font-family:system-ui,sans-serif; font-size:12.5px; font-weight:550;
  padding:8px 13px; border-radius:8px; border:1px solid var(--linea);
  background:var(--panel); color:var(--suave); text-decoration:none;
}
.reparte .menu a:hover{ border-color:var(--acento); color:var(--acento); }

/* ---------------- El código, solo si lo buscas ---------------- */
.envoltorio{ position:relative; display:block; }
.verqr{
  position:absolute; top:6px; right:6px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:7px; cursor:pointer;
  background:var(--fondo); border:1px solid var(--linea); color:var(--suave);
  font-size:13px; line-height:1; opacity:0; transition:opacity .18s;
}
.envoltorio:hover .verqr, .verqr:focus{ opacity:1; }
.verqr:hover{ border-color:var(--acento); color:var(--acento); }
@media (hover:none){ .verqr{ opacity:.7; } }

.capa{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  padding:24px; background:rgba(0,0,0,.72); backdrop-filter:blur(3px);
}
.visor{
  background:var(--panel); border:1px solid var(--linea); border-radius:16px;
  padding:26px; text-align:center; max-width:320px;
}
.visor .num{
  font-family:system-ui,sans-serif; font-size:11px; letter-spacing:.2em;
  color:var(--suave); margin-bottom:14px;
}
.visor .cuadro{ background:#fff; padding:12px; border-radius:10px; }
.visor .cuadro svg{ display:block; width:100%; height:auto; }
.visor .menu{ display:flex; gap:7px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.visor .menu button{
  font-family:system-ui,sans-serif; font-size:12px; font-weight:550;
  padding:7px 12px; border-radius:8px; border:1px solid var(--linea);
  background:var(--fondo); color:var(--suave); cursor:pointer;
}
.visor .menu button:hover{ border-color:var(--acento); color:var(--acento); }
.visor .nota{
  font-family:system-ui,sans-serif; font-size:11.5px; color:var(--suave); margin-top:14px;
}

/* ---------------- Hay más abajo ---------------- */
.masabajo{ display:grid; place-items:center; height:34px; margin-top:8px; }
.masabajo span{
  width:11px; height:11px; border-right:1.5px solid var(--suave);
  border-bottom:1.5px solid var(--suave); transform:rotate(45deg);
  opacity:.55; animation:baja 2.2s ease-in-out infinite;
}
@keyframes baja{
  0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.35; }
  50%    { transform:rotate(45deg) translate(3px,3px); opacity:.75; }
}
body.rodado .masabajo{ opacity:0; transition:opacity .3s; }

/* ---------------- La clave de un sobre ---------------- */
.clave{ padding:30px 0; border-top:1px solid var(--linea); }
.clave h2{ margin-bottom:14px; }
.clave .menu{ display:flex; gap:8px; }
.clave input{
  flex:0 1 190px; padding:11px 15px; border-radius:9px;
  border:1px solid var(--linea); background:var(--panel); color:inherit;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:19px;
  letter-spacing:.28em; text-transform:uppercase;
}
.clave input:focus{ outline:1px solid var(--acento); border-color:transparent; }
.clave input::placeholder{ letter-spacing:.1em; font-size:12px; text-transform:none; }
.clave button{
  font-family:system-ui,sans-serif; font-size:13px; font-weight:550;
  padding:0 18px; border-radius:9px; border:1px solid var(--acento);
  background:var(--acento); color:#141210; cursor:pointer;
}
.clave button:hover{ filter:brightness(1.1); }
.clave .nota{
  font-family:system-ui,sans-serif; font-size:12px; color:var(--suave);
  margin-top:12px; max-width:46ch;
}

.visor .clave-suya{
  display:flex; align-items:baseline; justify-content:center; gap:10px; margin-top:16px;
}
.visor .clave-suya span{
  font-family:system-ui,sans-serif; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--suave);
}
.visor .clave-suya strong{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:19px;
  letter-spacing:.22em; color:var(--acento);
}

/* La clave, en grande y antes que el QR: es lo que se pasa de viva voz. */
.clavegorda{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:30px;
  letter-spacing:.3em; color:var(--acento); margin-bottom:16px;
}


/* ---------------- Derretir el lacre ---------------- */
/* En SVG hay que fijar la caja de referencia: sin fill-box, el origen se
   calcula sobre el lienzo entero y la pieza gira desde donde no debe. */
.sobre .cera, .sobre .sello-marca, .sobre .gota, .sobre .solapa{
  transform-box:fill-box;
}
.sobre .cera, .sobre .sello-marca{ transform-origin:50% 92%; }
.sobre .gota{ transform-origin:50% 0%; }
.sobre .solapa{ transform-origin:50% 0%; }

/* La marca es lo primero que se va: el calor borra el relieve antes que la forma. */
.sobre.rompiendo .sello-marca{ animation:borra-marca .34s ease-out forwards; }
.sobre.rompiendo .cera{ animation:derrite .9s cubic-bezier(.55,.02,.6,1) forwards; }
.sobre.rompiendo .gota{ animation:gotea .9s .2s cubic-bezier(.4,0,.9,1) forwards; }
.sobre.rompiendo .solapa{ animation:abre-solapa .5s .48s ease-in forwards; }

@keyframes borra-marca{
  0%  { opacity:1; filter:blur(0); }
  100%{ opacity:0; filter:blur(2px); transform:scale(.92); }
}
@keyframes derrite{
  0%  { transform:none; filter:blur(0); }
  25% { transform:translateY(2px) scale(1.06,.94); filter:blur(.4px); }
  60% { transform:translateY(12px) scale(1.3,.5); filter:blur(1px); }
  100%{ transform:translateY(20px) scale(1.55,.2); filter:blur(1.6px); opacity:.85; }
}
@keyframes gotea{
  0%  { opacity:0; transform:scaleY(0); }
  35% { opacity:.9; transform:scaleY(.5); }
  100%{ opacity:.75; transform:translateY(10px) scaleY(1.15); }
}
@keyframes abre-solapa{
  0%  { transform:scaleY(1); }
  100%{ transform:scaleY(-.72); }
}

.hoy-cara.tapada .sobre.rompiendo{ animation:aparta .9s ease-in forwards; }
@keyframes aparta{
  0%  { opacity:1; }
  70% { opacity:1; }
  100%{ transform:translateY(8px) scale(.98); opacity:.12; }
}

@media (prefers-reduced-motion: reduce){
  .sobre.rompiendo, .sobre.rompiendo *{ animation:none !important; }
}

/* La cera derritiéndose a pantalla completa, al acertar una clave. */
.capa.derritiendo{ background:rgba(0,0,0,.82); }
.capa.derritiendo .sobre{ width:min(320px,74vw); filter:drop-shadow(0 6px 24px rgba(0,0,0,.5)); }

/* ---------------- El sobre ya abierto ---------------- */
/* Deja de ser sobre y pasa a ser la carta que llevaba dentro: papel algo más
   claro, una esquina doblada y la mancha de cera que quedó al derretirse. */
.mini.hallada{
  position:relative; overflow:hidden; padding:16px 14px 26px;
  background:
    linear-gradient(225deg, var(--fondo) 0 11px, transparent 11px) top right / 22px 22px no-repeat,
    var(--carta);
  border-color:var(--carta-linea);
  align-items:flex-start;
}
.mini.hallada::after{
  content:""; position:absolute; top:0; right:0; width:22px; height:22px;
  border-left:1px solid var(--carta-linea); border-bottom:1px solid var(--carta-linea);
  transform:rotate(0deg); clip-path:polygon(100% 0, 0 100%, 100% 100%);
  opacity:.9;
}
.carta-abierta{ display:block; width:100%; }
.mini.hallada .preg{ display:block; }
.restos{
  display:block; width:34px; height:auto; margin-top:10px; opacity:.9;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

:root{ --carta:#1d1a17; --carta-linea:#3a342d; }
@media (prefers-color-scheme: light){
  :root{ --carta:#fbf7ee; --carta-linea:#ddd2ba; }
}

/* ---------------- La carta ya sacada del sobre ---------------- */
/* Lo cerrado es oscuro; lo abierto es papel. Esa es toda la señal, y se lee
   de un vistazo sin tener que mirar detalles. */
.mini.hallada{
  position:relative; overflow:hidden;
  padding:15px 14px 22px; align-items:flex-start;
  background:#f6efe0; border-color:#d9cbae;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}
.mini.hallada .preg{
  display:block; color:#2b2418; font-style:italic; font-size:15px; line-height:1.3;
}
/* Doblez de la esquina: el papel venía plegado dentro del sobre. */
.mini.hallada::before{
  content:""; position:absolute; top:0; right:0; width:24px; height:24px;
  background:linear-gradient(225deg, var(--fondo) 0 12px, #e6dbc2 12px);
  border-left:1px solid #d9cbae;
}
.folio{
  position:absolute; left:14px; bottom:9px;
  font-family:Georgia,serif; font-size:11px; letter-spacing:.06em; color:#9a8c72;
}
.mini.hallada:hover{ border-color:var(--acento); box-shadow:0 4px 14px rgba(0,0,0,.34); }