/* Mancia Apps — estilos autónomos (prefijo .mapp), pensados para convivir
   con cualquier tema y con los plugins tarot-apps (.tapp) y oraculo-apps
   (.oapp). Todo es fluido: no hay ni una medida fija en píxeles de escena. */

/* El width: 100 % no sobra. Si el tema mete la app dentro de un contenedor
   flex o grid, sin el la caja se mide por su contenido y las rejillas de los
   formularios la estiran por encima de la pantalla en movil. */
.mapp { width: 100%; max-width: 780px; margin: 0 auto; font-size: 1rem; }
.mapp * { box-sizing: border-box; }
.mapp [hidden] { display: none !important; }

.mapp .mapp-intro {
  margin: 0;
  font-size: clamp(.95rem, 2.7vw, 1.08rem);
  line-height: 1.45;
  max-width: 34rem;
}

.mapp .mapp-acciones { margin: 0; }

.mapp .mapp-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #fff;
  padding: .62rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a54d8, #5a34b8);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  transition: transform .12s ease, filter .12s ease;
}
.mapp .mapp-btn:hover { filter: brightness(1.09); }
.mapp .mapp-btn:active { transform: translateY(1px); }
.mapp .mapp-btn:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
.mapp .mapp-btn[disabled] { opacity: .55; cursor: default; filter: none; transform: none; }

/* Sin recuadro/fondo azul del navegador al pulsar las piezas interactivas */
.mapp button { -webkit-tap-highlight-color: transparent; }
.mapp button:focus { outline: none; }
.mapp button:focus-visible { outline: 2px solid #ffd76b; outline-offset: 3px; }

/* ── Cara o Cruz: mesa nocturna + moneda de 36 fotogramas ───────── */
.mapp .mapp-mn {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  padding: 1.35rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 10% 16%, rgba(255, 238, 185, .72), transparent 100%),
    radial-gradient(1px 1px at 84% 13%, rgba(255, 255, 255, .55), transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 48%, rgba(239, 208, 128, .48), transparent 100%),
    radial-gradient(1px 1px at 19% 67%, rgba(255, 255, 255, .38), transparent 100%),
    radial-gradient(ellipse at 50% 38%, rgba(171, 128, 58, .25), transparent 32%),
    linear-gradient(145deg, #172344 0%, #0e1731 48%, #070d20 100%);
  border: 1px solid rgba(217, 177, 96, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 42px rgba(2, 6, 18, .36),
    0 16px 34px rgba(0, 0, 0, .27),
    0 0 26px rgba(187, 139, 57, .08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  overflow: hidden;
}
.mapp .mapp-mn::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(88%, 35rem);
  aspect-ratio: 1;
  top: 2.7rem;
  left: 50%;
  border: 1px solid rgba(220, 179, 94, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(220, 179, 94, .025), 0 0 0 5rem rgba(220, 179, 94, .018);
  transform: translateX(-50%);
  pointer-events: none;
}
.mapp .mapp-mn .mapp-intro {
  position: relative;
  z-index: 1;
  color: #e8edf9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.mapp .mapp-mn-inicial .mapp-mn-resultado,
.mapp .mapp-mn-inicial .mapp-mn-lema,
.mapp .mapp-mn-inicial .mapp-mn-frase { display: none; }

.mapp .mapp-mn-mesa {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3.2rem; /* aire para el salto de la moneda */
}
.mapp .mapp-mn-mesa::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -.15rem;
  width: min(78%, 28rem);
  height: 4.5rem;
  border: 1px solid rgba(218, 175, 89, .27);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(210, 163, 75, .18), rgba(17, 27, 57, .12) 52%, transparent 72%);
  box-shadow: inset 0 0 22px rgba(232, 192, 108, .08), 0 0 18px rgba(0, 0, 0, .28);
  transform: translateX(-50%);
  pointer-events: none;
}
.mapp .mapp-mn-moneda {
  position: relative;
  z-index: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: clamp(9rem, 42vw, 14rem);
  line-height: 0;
  filter: drop-shadow(0 .7rem .7rem rgba(0, 0, 0, .46)) drop-shadow(0 0 1rem rgba(222, 180, 93, .12));
  transition: transform .18s ease, filter .18s ease;
}
.mapp .mapp-mn-moneda:hover { transform: translateY(-2px) scale(1.015); filter: drop-shadow(0 .85rem .8rem rgba(0, 0, 0, .5)) drop-shadow(0 0 1.25rem rgba(232, 194, 113, .2)); }
.mapp .mapp-mn-moneda:active { transform: translateY(0) scale(.99); }
/* El sprite es una rejilla 6×6 (36 fotogramas de una vuelta completa).
   Con background-size 600% cada fotograma ocupa justo el elemento y se
   elige con background-position (columna/5 y fila/5 en %). */
.mapp .mapp-mn-cara {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-size: 600% 600%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  will-change: transform;
}
.mapp .mapp-mn-sombra {
  position: relative;
  z-index: 1;
  display: block;
  width: 58%;
  height: .85rem;
  margin-top: -4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0) 70%);
  transition: transform .1s linear, opacity .1s linear;
}

.mapp .mapp-mn-resultado {
  margin: 0;
  min-height: 1.1em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: .03em;
}
.mapp .mapp-mn-r-cara { color: #f1cd7b; text-shadow: 0 0 18px rgba(225, 174, 75, .24); animation: mapp-brota .45s ease both; }
.mapp .mapp-mn-r-cruz { color: #b8dcff; text-shadow: 0 0 18px rgba(126, 191, 255, .2); animation: mapp-brota .45s ease both; }
.mapp .mapp-mn-espera {
  color: #c6cede;
  font-family: inherit;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1rem, 3.2vw, 1.15rem);
}
@keyframes mapp-brota {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

.mapp .mapp-mn-lema {
  margin: 0;
  min-height: 1.3em;
  color: #f1e2bb;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.15rem);
}
.mapp .mapp-mn-frase {
  margin: 0;
  min-height: 2.6em;
  max-width: 32rem;
  color: #c2cce1;
  font-style: italic;
  font-size: clamp(.92rem, 2.6vw, 1.02rem);
  line-height: 1.4;
}

.mapp .mapp-mn-marcador {
  margin: 0;
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .92rem;
  color: #aeb9d1;
}
.mapp .mapp-mn-marcador span {
  padding: .35rem .72rem;
  border: 1px solid rgba(219, 180, 101, .2);
  border-radius: 999px;
  background: rgba(3, 8, 22, .34);
}
.mapp .mapp-mn-marcador b { font-weight: 700; }
.mapp .mapp-mn-mc b { color: #f1cd7b; }
.mapp .mapp-mn-mx b { color: #b8dcff; }
.mapp .mapp-mn .mapp-btn {
  color: #211606;
  background: linear-gradient(180deg, #f0cf83, #bd8430);
  border: 1px solid rgba(255, 236, 184, .36);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .36), 0 0 18px rgba(204, 151, 55, .16);
}

/* ── Bola de Cristal: pregunta → respuesta dentro de la esfera ──── */
.mapp .mapp-bo {
  position: relative;
  border-radius: 16px;
  padding: 1.4rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 26% 66%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 62% 82%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 20%, #26408f 0%, #0e1547 46%, #05061a 100%);
  border: 1px solid rgba(107, 158, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 15px 34px rgba(0, 0, 0, .28);
  color: #e9f0ff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.mapp .mapp-bo .mapp-intro {
  color: #e4ebff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  max-width: 37rem;
}

.mapp .mapp-bo-f1, .mapp .mapp-bo-f2 { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .95rem; }

.mapp .mapp-bo-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  width: 100%;
  max-width: 36rem;
  padding: .45rem;
  border: 1px solid rgba(136, 185, 255, .3);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(4, 10, 35, .68), rgba(23, 34, 87, .52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px rgba(0, 0, 0, .26);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mapp .mapp-bo-form::before {
  content: '?';
  position: absolute;
  z-index: 1;
  left: 1.1rem;
  top: 50%;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid rgba(129, 211, 255, .42);
  border-radius: 50%;
  color: #9fdcff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}
.mapp .mapp-bo-form:focus-within {
  border-color: rgba(117, 216, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 3px rgba(75, 179, 255, .1), 0 9px 25px rgba(0, 0, 0, .3);
}
.mapp .mapp-bo-input {
  width: 100%;
  min-width: 0;
  min-height: 2.9rem;
  padding: .7rem 1rem .7rem 2.7rem;
  border-radius: 11px;
  border: 1px solid rgba(166, 197, 255, .28);
  background: rgba(1, 6, 25, .58);
  color: #fff;
  font: inherit;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .26);
}
.mapp .mapp-bo-input::placeholder { color: rgba(218, 228, 255, .67); }
.mapp .mapp-bo-input:focus-visible { outline: none; border-color: rgba(117, 216, 255, .64); }
.mapp .mapp-bo-go {
  min-height: 2.9rem;
  padding: .65rem 1.25rem;
  border: 1px solid rgba(205, 189, 255, .3);
  border-radius: 11px;
  background: linear-gradient(180deg, #8b64e7, #5e38bd);
  box-shadow: 0 4px 13px rgba(2, 5, 20, .38), 0 0 18px rgba(111, 77, 224, .18);
}
.mapp .mapp-bo-go:hover { filter: brightness(1.12); }

.mapp .mapp-bo-err {
  margin: 0;
  background: rgba(150, 10, 10, .82);
  color: #fff;
  font-weight: 700;
  padding: .5rem .9rem;
  border: 1px solid rgba(255, 150, 150, .34);
  border-radius: 10px;
  max-width: 36rem;
}
.mapp .mapp-bo-pregunta {
  margin: 0;
  font-style: italic;
  font-size: clamp(1rem, 2.7vw, 1.2rem);
  background: rgba(0, 0, 0, .42);
  padding: .45rem 1rem;
  border-radius: 8px;
  max-width: 92%;
}

.mapp .mapp-bo-conjunto { display: flex; flex-direction: column; align-items: center; width: 100%; }

.mapp .mapp-bo-bola {
  position: relative;
  width: min(64vw, 16.5rem);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: #04060f;
  overflow: hidden;
  box-shadow: 0 0 32px 6px rgba(0, 140, 255, .32), inset 0 0 34px rgba(0, 0, 0, .55);
  transition: box-shadow .5s ease, transform .3s ease;
}
.mapp .mapp-bo-esfera {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-size: 114%;      /* leve zoom: la esfera llena el círculo */
  background-position: 50% 40%;
  background-repeat: no-repeat;
}
/* Reflejo de cristal + sombra baja (esta última tapa la marca de agua
   del GIF antiguo, que llevaba el dominio de la marca anterior). */
.mapp .mapp-bo-brillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .55) 0 4%, rgba(255, 255, 255, .16) 11%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(to top, rgba(3, 5, 18, .97) 0 14%, rgba(3, 5, 18, .55) 22%, rgba(3, 5, 18, 0) 34%);
  pointer-events: none;
}
.mapp .mapp-bo-respuesta {
  position: absolute;
  inset: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 4, 14, .74) 0 58%, rgba(2, 4, 14, 0) 80%);
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 4.2vw, 1.5rem);
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .5s ease;
}
.mapp .mapp-bo-visible .mapp-bo-respuesta { opacity: 1; animation: mapp-emerge .7s ease both; }
@keyframes mapp-emerge {
  from { opacity: 0; transform: scale(.72); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* La bola late mientras «se aclara» */
.mapp .mapp-bo-pensando { animation: mapp-late 1.1s ease-in-out infinite; }
@keyframes mapp-late {
  0%, 100% { box-shadow: 0 0 26px 4px rgba(0, 140, 255, .3), inset 0 0 34px rgba(0, 0, 0, .55); }
  50%      { box-shadow: 0 0 52px 14px rgba(90, 200, 255, .6), inset 0 0 34px rgba(0, 0, 0, .55); }
}
/* Color del halo según el tono de la respuesta */
.mapp .mapp-bo-si  { box-shadow: 0 0 44px 10px rgba(60, 220, 120, .5), inset 0 0 34px rgba(0, 0, 0, .55); }
.mapp .mapp-bo-no  { box-shadow: 0 0 44px 10px rgba(255, 90, 90, .48), inset 0 0 34px rgba(0, 0, 0, .55); }
.mapp .mapp-bo-duda { box-shadow: 0 0 44px 10px rgba(255, 200, 80, .48), inset 0 0 34px rgba(0, 0, 0, .55); }

.mapp .mapp-bo-base {
  display: block;
  width: 74%;
  max-width: 13rem;
  margin-top: -3%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
.mapp .mapp-bo-estado {
  margin: 0;
  min-height: 1.3em;
  font-size: .95rem;
  font-style: italic;
  color: #b9c9f0;
}

/* ── Cartas Zener: 25 cartas, adivina el símbolo ────────────────── */
.mapp .mapp-ze {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.3rem 1.1rem 1.6rem;
  border: 1px solid rgba(220, 179, 94, .34);
  background:
    radial-gradient(circle at 50% 0%, rgba(93, 70, 164, .48) 0%, transparent 42%),
    linear-gradient(155deg, #202451 0%, #141733 54%, #090b1b 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 16px 36px rgba(0, 0, 0, .28);
  color: #ecebff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-ze .mapp-intro { color: #d0d3f7; }
.mapp .mapp-ze-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mapp .mapp-ze-azar { margin: 0; font-size: .84rem; font-style: italic; color: #969cd2; }
.mapp .mapp-ze-f1, .mapp .mapp-ze-f2, .mapp .mapp-ze-f3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.mapp .mapp-ze-f1 { gap: 0; }
.mapp .mapp-ze-portada {
  width: 100%;
  max-width: 45rem;
  overflow: hidden;
  border: 1px solid rgba(230, 191, 105, .4);
  border-radius: 15px;
  background: rgba(10, 11, 29, .7);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .05);
}
.mapp .mapp-ze-portada img {
  display: block;
  width: 100%;
  height: clamp(13rem, 34vw, 20rem);
  object-fit: cover;
  object-position: 50% 52%;
  border-bottom: 1px solid rgba(230, 191, 105, .3);
}
.mapp .mapp-ze-portada-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem clamp(1rem, 4vw, 2.25rem) 1.35rem;
  background:
    radial-gradient(circle at 50% 0, rgba(100, 70, 181, .2), transparent 52%),
    linear-gradient(180deg, rgba(24, 27, 61, .94), rgba(12, 14, 34, .98));
}
.mapp .mapp-ze-portada-cuerpo .mapp-intro { line-height: 1.62; }
.mapp .mapp-ze-comenzar {
  color: #211803;
  background: linear-gradient(180deg, #ffe5a1, #eec45e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .34), 0 0 20px rgba(238, 196, 94, .12);
}

.mapp .mapp-ze-marcador {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.6rem;
  justify-content: center;
  font-size: .9rem;
  color: #b6bbe9;
}
.mapp .mapp-ze-marcador b { color: #fff; font-variant-numeric: tabular-nums; }

/* Tira de 25 marcas: de un vistazo se ve cómo va el test */
.mapp .mapp-ze-tira { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 24rem; }
.mapp .mapp-ze-marca { width: .68rem; height: .68rem; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.mapp .mapp-ze-marca-ok { background: #3ec95f; }
.mapp .mapp-ze-marca-no { background: #c9445a; }

.mapp .mapp-ze-carta {
  position: relative;
  width: clamp(7rem, 30vw, 9.5rem);
  aspect-ratio: 231 / 372;   /* la proporción de las cartas del legacy */
  border-radius: 12px;
  border: 3px solid #14141c;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapp .mapp-ze-dorso {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 11vw, 4.2rem);
  color: #14141c;
  line-height: 1;
}
.mapp .mapp-ze-simbolo { width: 68%; height: auto; }
.mapp .mapp-ze-carta-gira { animation: mapp-ze-flip .45s ease; }
@keyframes mapp-ze-flip {
  0%   { transform: rotateY(0); }
  50%  { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.mapp .mapp-ze-veredicto {
  margin: 0;
  min-height: 1.4em;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: 1rem;
}
.mapp .mapp-ze-ok { color: #4fdc72; }
.mapp .mapp-ze-no { color: #ff7a8c; }
.mapp .mapp-ze-pregunta { margin: 0; color: #dcdcff; font-size: 1rem; }

.mapp .mapp-ze-opciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.mapp .mapp-ze-op {
  width: clamp(3.1rem, 12vw, 4.1rem);
  padding: .35rem .25rem .3rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mapp .mapp-ze-op svg { width: 100%; aspect-ratio: 1; }
.mapp .mapp-ze-op span { font-size: .62rem; color: #333; }
.mapp .mapp-ze-op:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.mapp .mapp-ze-op[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; }

.mapp .mapp-ze-rotulo { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: #969cd2; }
.mapp .mapp-ze-nivel {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 7vw, 2.7rem);
  line-height: 1.1;
  background: linear-gradient(90deg, #ffd76b, #ff8ad0, #7ee7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mapp .mapp-ze-datos {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 24rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: .4rem 1.2rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(7, 9, 26, .38);
}
.mapp .mapp-ze-datos li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  font-size: .9rem;
}
.mapp .mapp-ze-datos span { color: #a5aade; }
.mapp .mapp-ze-datos b { font-variant-numeric: tabular-nums; }
.mapp .mapp-ze-mensaje { margin: 0; max-width: 34rem; color: #e3e3ff; font-size: .95rem; line-height: 1.5; }
.mapp .mapp-ze-resultado-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
}
.mapp .mapp-ze-share-status {
  min-height: 1.35em;
  margin: .65rem 0 0;
  color: #d8d1a7;
  font-size: .86rem;
  text-align: center;
}
.mapp .mapp-ze-compartir {
  color: #211803;
  background: linear-gradient(180deg, #ffe5a1, #eec45e);
}
.mapp .mapp-ze-otra {
  color: #ecebff;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}

@media (max-width: 560px) {
  .mapp .mapp-ze { padding: .75rem .65rem 1rem; }
  .mapp .mapp-ze-portada img { height: auto; aspect-ratio: 3 / 2; }
  .mapp .mapp-ze-portada-cuerpo { padding: 1rem .9rem 1.15rem; }
}

/* ── Dadomancia: tres dados al círculo del tapete ───────────────── */
.mapp .mapp-da {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(ellipse at 50% 30%, #2f9160 0%, #17643e 55%, #0d3f28 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
  color: #f1fff7;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-da .mapp-intro { color: #d9f5e6; }

.mapp .mapp-da-mesa {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mapp .mapp-da-vaso {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: clamp(3.4rem, 14vw, 4.6rem);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 90%;
  will-change: transform;
}
.mapp .mapp-da-vaso img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mapp .mapp-da-vaso:hover img,
.mapp .mapp-da-vaso:focus-visible img { transform: translateY(-3px); }
.mapp .mapp-da-vaso img { transition: transform .15s ease; }

/* La tirada completa: agita, baja, vuelca y MANTIENE la boca en el punto
   del que nacen los dados. Ese pequeño alto es lo que hace legible la causa
   y el efecto; sin el, el cubilete ya se retiraba cuando aparecian. */
.mapp .mapp-da-lanzando { animation: mapp-da-lanza 1.8s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes mapp-da-lanza {
  0%       { transform: none; }
  8%       { transform: rotate(-13deg); }
  16%      { transform: rotate(12deg); }
  24%      { transform: rotate(-11deg); }
  32%      { transform: rotate(9deg); }
  41%      { transform: translate(-34%, 10%) rotate(34deg); }
  52%, 69% { transform: translate(-122%, 21%) rotate(102deg); }
  78%      { transform: translate(-82%, 17%) rotate(78deg); }
  90%      { transform: translate(-18%, 6%) rotate(18deg); }
  100%     { transform: none; }
}

/* El círculo de la mesa donde deben caer los dados (en escorzo) */
.mapp .mapp-da-circulo {
  position: relative;
  z-index: 1;
  margin-top: clamp(5.6rem, 22vw, 7.4rem);
  width: min(94%, 22rem);
  aspect-ratio: 1.75;
  border: 3px dashed rgba(255, 255, 255, .4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
}
.mapp .mapp-da-dado {
  width: clamp(2.5rem, 11vw, 3.5rem);
  aspect-ratio: 1;
  border-radius: 18%;
  background: linear-gradient(150deg, #fff, #e2e2e6 58%, #bcbcc4);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 -3px 6px rgba(0, 0, 0, .16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  opacity: 0;
  transition: opacity .25s ease;
}
.mapp .mapp-da-tirado .mapp-da-dado { opacity: 1; }
/* El punto se mide contra SU casilla (un tercio del dado), nunca en % del
   dado: un padding en % se resolvería contra el ancho del círculo y dejaría
   la caja a cero. El hueco alrededor sale solo al centrarlo en la casilla. */
.mapp .mapp-da-dado .p {
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #21242c;
  opacity: 0;
  place-self: center;
}
/* Caras del dado: qué puntos se encienden en cada valor */
.mapp .mapp-da-dado[data-v="1"] .p5,
.mapp .mapp-da-dado[data-v="2"] .p1, .mapp .mapp-da-dado[data-v="2"] .p9,
.mapp .mapp-da-dado[data-v="3"] .p1, .mapp .mapp-da-dado[data-v="3"] .p5, .mapp .mapp-da-dado[data-v="3"] .p9,
.mapp .mapp-da-dado[data-v="4"] .p1, .mapp .mapp-da-dado[data-v="4"] .p3, .mapp .mapp-da-dado[data-v="4"] .p7, .mapp .mapp-da-dado[data-v="4"] .p9,
.mapp .mapp-da-dado[data-v="5"] .p1, .mapp .mapp-da-dado[data-v="5"] .p3, .mapp .mapp-da-dado[data-v="5"] .p5, .mapp .mapp-da-dado[data-v="5"] .p7, .mapp .mapp-da-dado[data-v="5"] .p9,
.mapp .mapp-da-dado[data-v="6"] .p1, .mapp .mapp-da-dado[data-v="6"] .p3, .mapp .mapp-da-dado[data-v="6"] .p4,
.mapp .mapp-da-dado[data-v="6"] .p6, .mapp .mapp-da-dado[data-v="6"] .p7, .mapp .mapp-da-dado[data-v="6"] .p9 { opacity: 1; }

.mapp .mapp-da-rodando .mapp-da-dado { animation: mapp-da-tumbo .34s linear infinite; }
.mapp .mapp-da-rodando .mapp-da-dado:nth-child(2) { animation-delay: .11s; }
.mapp .mapp-da-rodando .mapp-da-dado:nth-child(3) { animation-delay: .22s; }
@keyframes mapp-da-tumbo {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-38%) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

/* La fase «en el vaso»: los dados existen pero van dentro del cubilete.
   Va DESPUÉS de .mapp-da-tirado para ganarle con la misma especificidad. */
.mapp .mapp-da-envaso .mapp-da-dado { opacity: 0; transition: none; }

/* La salida: al volcar el vaso, cada dado vuela de la boca a su sitio.
   El vaso está encima del centro, así que el de la izquierda llega desde
   arriba-derecha, el del centro desde arriba y el de la derecha desde
   arriba-izquierda. Estas reglas van después de las de mapp-da-rodando:
   misma especificidad, y así la salida le gana al tumbo mientras conviven. */
.mapp .mapp-da-salen .mapp-da-dado {
  animation: mapp-da-sale1 .72s cubic-bezier(.2, .72, .25, 1) both;
}
.mapp .mapp-da-salen .mapp-da-dado:nth-child(2) { animation-name: mapp-da-sale2; animation-delay: .06s; }
.mapp .mapp-da-salen .mapp-da-dado:nth-child(3) { animation-name: mapp-da-sale3; animation-delay: .12s; }
@keyframes mapp-da-sale1 {
  0%   { opacity: 0; transform: translate(145%, -118%) rotate(-65deg) scale(.58); }
  10%  { opacity: 1; }
  34%  { opacity: 1; transform: translate(86%, -132%) rotate(-190deg) scale(.78); }
  72%  { opacity: 1; transform: translate(-7%, 10%) rotate(-405deg); }
  86%  { opacity: 1; transform: translate(3%, -9%) rotate(-420deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mapp-da-sale2 {
  0%   { opacity: 0; transform: translate(0, -118%) rotate(55deg) scale(.58); }
  10%  { opacity: 1; }
  34%  { opacity: 1; transform: translate(8%, -137%) rotate(190deg) scale(.78); }
  72%  { opacity: 1; transform: translate(-4%, 11%) rotate(405deg); }
  86%  { opacity: 1; transform: translate(2%, -8%) rotate(420deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mapp-da-sale3 {
  0%   { opacity: 0; transform: translate(-145%, -118%) rotate(-45deg) scale(.58); }
  10%  { opacity: 1; }
  34%  { opacity: 1; transform: translate(-83%, -130%) rotate(-180deg) scale(.78); }
  72%  { opacity: 1; transform: translate(7%, 9%) rotate(-400deg); }
  86%  { opacity: 1; transform: translate(-3%, -10%) rotate(-418deg); }
  100% { opacity: 1; transform: none; }
}

.mapp .mapp-da-lectura {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .36);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-da-suma { margin: 0; font-size: .92rem; color: #cdeedd; }
.mapp .mapp-da-total { font-size: 1.5rem; color: #ffe27a; font-variant-numeric: tabular-nums; }
.mapp .mapp-da-titulo { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 4.5vw, 1.6rem); color: #fff; }
.mapp .mapp-da-texto { margin: 0; line-height: 1.5; color: #eafff3; }
.mapp .mapp-da-sino { margin: 0; font-size: .92rem; color: #cdeedd; }
.mapp .mapp-da-resp { font-size: 1.3rem; letter-spacing: .08em; }
.mapp .mapp-da-r-si { color: #85ffa6; }
.mapp .mapp-da-r-no { color: #ff9aa6; }

/* ── Dominomancia: tres fichas sobre el tapete ──────────────────── */
.mapp .mapp-do {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(ellipse at 50% 25%, #2b6f8f 0%, #17475f 55%, #0b2635 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
  color: #eef9ff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-do .mapp-intro { color: #d3ecf7; }
.mapp .mapp-do-inicial .mapp-do-mesa,
.mapp .mapp-do-inicial .mapp-do-estado { display: none; }

.mapp .mapp-do-portada {
  position: relative;
  width: min(100%, 38rem);
  height: clamp(10.5rem, 23vw, 14rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(220, 176, 91, .5);
  border-radius: 15px;
  background: #07141f;
  box-shadow:
    0 14px 28px rgba(2, 8, 15, .42),
    0 0 0 4px rgba(9, 36, 51, .72),
    0 0 30px rgba(216, 167, 77, .12);
  animation: mapp-do-portada-entra .62s ease-out both;
}
.mapp .mapp-do-portada::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 12, 22, .04) 45%, rgba(2, 7, 13, .34) 100%),
    radial-gradient(ellipse at 50% 76%, transparent 38%, rgba(3, 11, 18, .3) 100%);
  box-shadow: inset 0 0 24px rgba(4, 12, 22, .46);
}
.mapp .mapp-do-portada img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 69%;
}
.mapp .mapp-do-portada-sale { animation: mapp-do-portada-sale .42s ease-in both; }
@keyframes mapp-do-portada-entra {
  from { opacity: 0; transform: translateY(.55rem) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes mapp-do-portada-sale {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-.5rem) scale(.975); }
}

.mapp .mapp-do-mesa {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  min-height: 3rem;
  align-items: center;
}
.mapp .mapp-do-ficha {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: clamp(6rem, 27vw, 9.5rem);
  border-radius: 10px;
  transition: transform .15s ease, filter .25s ease;
  animation: mapp-do-cae .45s ease both;
}
.mapp .mapp-do-ficha img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mapp .mapp-do-ficha:nth-child(2) { animation-delay: .12s; }
.mapp .mapp-do-ficha:nth-child(3) { animation-delay: .24s; }
.mapp .mapp-do-ficha:hover { transform: translateY(-4px); }
/* la que señala el oráculo (el legacy la teñía con hue-rotate) */
.mapp .mapp-do-elegida { filter: hue-rotate(70deg) saturate(1.3) brightness(1.12); }
.mapp .mapp-do-activa { outline: 2px solid #ffd76b; outline-offset: 4px; border-radius: 10px; }
@keyframes mapp-do-cae {
  from { opacity: 0; transform: translateY(-38px) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
.mapp .mapp-do-estado { margin: 0; min-height: 1.3em; font-style: italic; color: #b8dcec; font-size: .95rem; }

.mapp .mapp-do-lectura {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-do-veredicto {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  letter-spacing: .01em;
}
.mapp .mapp-do-v-si   { color: #7dffa6; }
.mapp .mapp-do-v-no   { color: #ff9aa6; }
.mapp .mapp-do-v-casi-si { color: #d7ffbe; }
.mapp .mapp-do-v-casi-no { color: #ffd0b0; }
.mapp .mapp-do-rotulo { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: #9fc9dc; }
.mapp .mapp-do-titulo { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 4.5vw, 1.6rem); color: #fff; }
.mapp .mapp-do-texto { margin: 0; line-height: 1.5; color: #eaf7ff; }
.mapp .mapp-do-pista { margin: 0; font-size: .82rem; color: #9fc9dc; font-style: italic; }

/* ── Tarot de los Números: tragaperras de una rueda ─────────────── */
.mapp .mapp-nu {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(ellipse at 50% 20%, #4a2b6b 0%, #2a1745 55%, #120a22 100%);
  color: #f3ecff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.mapp .mapp-nu .mapp-intro { color: #ded1f7; }

.mapp .mapp-nu-maquina {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #d9d9e2, #9a9aa8 55%, #6d6d79);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .6);
}
/* Las cifras del legacy son metálicas: unas casi negras (1, 2) y otras
   plateadas (0, 3, 4), así que la ventana va en un tono medio para que las
   diez se lean, con una sombra que las despega del fondo. */
.mapp .mapp-nu-ventana {
  width: clamp(5rem, 22vw, 7rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #b9bdcc, #8f94a8 52%, #676c80);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .5), inset 0 -3px 10px rgba(0, 0, 0, .35), 0 0 0 3px #55555f;
}
.mapp .mapp-nu-rodillo { display: block; will-change: transform; }
.mapp .mapp-nu-cifra { display: block; width: 100%; aspect-ratio: 1; }
.mapp .mapp-nu-cifra img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .55)) drop-shadow(0 -1px 2px rgba(0, 0, 0, .45));
}

/* La palanca de la tragaperras */
.mapp .mapp-nu-palanca {
  width: .55rem;
  height: clamp(3.4rem, 13vw, 4.6rem);
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c7c8a, #d7d7e2 45%, #5f5f6b);
  cursor: pointer;
  position: relative;
  transform-origin: 50% 100%;
  transition: transform .18s ease;
}
.mapp .mapp-nu-bola {
  position: absolute;
  top: -.55rem;
  left: 50%;
  translate: -50% 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8f8f, #c01f1f 60%, #7d0e0e);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
.mapp .mapp-nu-tirada { transform: rotate(28deg); }

.mapp .mapp-nu-lectura {
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .32);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-nu-titulo { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 5vw, 1.8rem); color: #fff; }
.mapp .mapp-nu-clave { margin: 0; font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; color: #c7b0ff; }
.mapp .mapp-nu-texto { margin: 0; line-height: 1.55; color: #f0e9ff; }

/* ── Péndulo online: escena de radiestesia y cuatro movimientos ─── */
.mapp .mapp-pe {
  --mapp-pe-peso: clamp(2.2rem, 7vw, 3.05rem);
  position: relative;
  border: 1px solid rgba(203, 169, 88, .22);
  border-radius: 24px;
  padding: clamp(1rem, 3vw, 1.75rem);
  background:
    radial-gradient(circle at 50% -10%, rgba(64, 74, 156, .34), transparent 43%),
    linear-gradient(155deg, #12142e 0%, #090b1d 62%, #070812 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
  color: #f2efff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.mapp .mapp-pe::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(1px 1px at 10% 18%, #fff, transparent 75%),
    radial-gradient(1px 1px at 88% 31%, #d9c06c, transparent 75%),
    radial-gradient(1px 1px at 17% 79%, #fff, transparent 75%),
    radial-gradient(1px 1px at 76% 91%, #d9c06c, transparent 75%);
}
.mapp .mapp-pe > * { position: relative; z-index: 1; }
.mapp .mapp-pe-cabecera { width: 100%; max-width: 42rem; }
.mapp .mapp-pe .mapp-intro {
  max-width: 39rem;
  margin: 0 auto .9rem;
  color: #d9d8ef;
  line-height: 1.65;
}
.mapp .mapp-pe-form {
  padding: .85rem;
  border: 1px solid rgba(203, 169, 88, .2);
  border-radius: 16px;
  background: rgba(4, 6, 19, .46);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  text-align: left;
}
.mapp .mapp-pe-form label {
  display: block;
  margin: 0 0 .45rem;
  color: #e7d59b;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.mapp .mapp-pe-form-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: stretch;
}
.mapp .mapp-pe-input {
  min-width: 0;
  min-height: 3rem;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  padding: .74rem 1.05rem;
  background: rgba(17, 20, 49, .88);
  color: #fff;
  font: inherit;
  line-height: 1.35;
  outline: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mapp .mapp-pe-input::placeholder { color: #a7a7c3; opacity: 1; }
.mapp .mapp-pe-input:focus {
  border-color: rgba(226, 191, 102, .72);
  background: #151836;
  box-shadow: 0 0 0 3px rgba(226, 191, 102, .13);
}
.mapp .mapp-pe-form .mapp-btn {
  min-height: 3rem;
  margin: 0;
  white-space: nowrap;
  box-shadow: 0 9px 25px rgba(81, 46, 180, .28);
}
.mapp .mapp-pe-privacidad {
  margin: .45rem .45rem 0;
  color: #9292b0;
  font-size: .76rem;
  line-height: 1.4;
}

/* La ilustración no contiene el péndulo: cadena y cristal permanecen como
   capas independientes para que el movimiento nazca exactamente del anclaje. */
.mapp .mapp-pe-escena {
  position: relative;
  width: min(100%, 31rem);
  aspect-ratio: 1;
  display: block;
  padding: 0;
  border: 1px solid rgba(217, 184, 99, .28);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: #080b20;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .42), inset 0 0 50px rgba(37, 51, 120, .18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mapp .mapp-pe-escena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 55px rgba(2, 4, 16, .46), inset 0 0 0 1px rgba(255, 255, 255, .035);
}
.mapp .mapp-pe-escena:focus-visible {
  outline: 3px solid rgba(231, 199, 112, .78);
  outline-offset: 4px;
}
.mapp .mapp-pe-escena:disabled { cursor: wait; }
.mapp .mapp-pe-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  user-select: none;
}

/* Punto de agarre en la yema de los dedos de la ilustración. */
.mapp .mapp-pe-anclaje {
  position: absolute;
  z-index: 5;
  top: 31.25%;
  left: 51%;
  translate: -50% 0;
  width: 0;
  height: 0;
  perspective: 720px;
}
.mapp .mapp-pe-eje, .mapp .mapp-pe-brazo {
  transform-style: preserve-3d;
  transform-origin: 50% 0;
}
.mapp .mapp-pe-brazo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mapp-pe-peso);
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
  will-change: transform;
}
.mapp .mapp-pe-cuerda {
  display: block;
  width: 2px;
  height: clamp(6.8rem, 27vw, 9.35rem);
  background: linear-gradient(90deg, #856520, #f3d980 48%, #8d6b22);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255, 219, 115, .34), 0 1px 5px rgba(0, 0, 0, .72);
}
.mapp .mapp-pe-peso {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: -1px;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .72)) drop-shadow(0 0 10px rgba(53, 116, 255, .46));
  user-select: none;
}

/* Estela orientativa: hace legible el tipo de movimiento mientras se anima. */
.mapp .mapp-pe-traza {
  position: absolute;
  z-index: 3;
  top: 58%;
  left: 51%;
  translate: -50% -50%;
  width: 20%;
  height: 8%;
  border: 1px solid rgba(125, 159, 255, .22);
  border-radius: 50%;
  opacity: .28;
  transition: width .35s ease, height .35s ease, opacity .35s ease, border-color .35s ease;
  box-shadow: 0 0 20px rgba(60, 99, 210, .08);
}
.mapp .mapp-pe-traza i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #f1d882;
  box-shadow: 0 0 12px #9fbcff;
  opacity: 0;
}
.mapp .mapp-pe-izqder .mapp-pe-traza { width: 38%; height: 7%; opacity: .76; }
.mapp .mapp-pe-adelante .mapp-pe-traza { width: 10%; height: 27%; opacity: .72; }
.mapp .mapp-pe-horario .mapp-pe-traza,
.mapp .mapp-pe-antihorario .mapp-pe-traza { width: 27%; height: 13%; opacity: .82; border-color: rgba(231, 204, 124, .5); }
.mapp .mapp-pe-izqder .mapp-pe-traza i {
  opacity: 1;
  animation: mapp-pe-punto-h var(--pe-medio-periodo, .6s) ease-in-out infinite alternate;
}
.mapp .mapp-pe-adelante .mapp-pe-traza i {
  opacity: 1;
  animation: mapp-pe-punto-v var(--pe-medio-periodo, .7s) ease-in-out infinite alternate;
}
.mapp .mapp-pe-horario .mapp-pe-traza i,
.mapp .mapp-pe-antihorario .mapp-pe-traza i {
  opacity: 1;
  transform-origin: 0 0;
  animation: mapp-pe-punto-c var(--pe-periodo, 1.25s) linear infinite;
}
.mapp .mapp-pe-antihorario .mapp-pe-traza i { animation-direction: reverse; }
@keyframes mapp-pe-punto-h { from { left: 4%; } to { left: 96%; } }
@keyframes mapp-pe-punto-v { from { top: 4%; } to { top: 96%; } }
@keyframes mapp-pe-punto-c { to { transform: rotate(360deg) translateX(2.5rem); } }

.mapp .mapp-pe-sello {
  position: absolute;
  z-index: 7;
  right: .8rem;
  bottom: .8rem;
  max-width: calc(100% - 1.6rem);
  padding: .55rem .85rem;
  border: 1px solid rgba(226, 194, 109, .42);
  border-radius: 999px;
  background: rgba(5, 8, 24, .86);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
  color: #f0dda1;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
  animation: mapp-brota .35s ease both;
}
.mapp .mapp-pe-sello-si { color: #a8ffc0; border-color: rgba(97, 224, 132, .38); }
.mapp .mapp-pe-sello-no { color: #ffb7c1; border-color: rgba(234, 112, 131, .38); }
.mapp .mapp-pe-estado {
  margin: -.15rem 0 0;
  min-height: 1.35em;
  color: #c4c3e5;
  font-size: .9rem;
  font-style: italic;
}

.mapp .mapp-pe-lectura {
  width: 100%;
  max-width: 42rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid rgba(222, 192, 110, .25);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18, 21, 51, .96), rgba(6, 8, 24, .96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  animation: mapp-brota .42s ease both;
}
.mapp .mapp-pe-pregunta-hecha {
  margin: 0 0 .75rem;
  color: #c8c6df;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.5;
}
.mapp .mapp-pe-rotulo {
  margin: 0 0 .25rem;
  color: #aaa9d3;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.mapp .mapp-pe-veredicto {
  margin: 0 0 .4rem;
  color: #f1d881;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5vw, 2.05rem);
  line-height: 1.2;
}
.mapp .mapp-pe-texto {
  margin: 0;
  color: #f3efff;
  font-size: clamp(.98rem, 3vw, 1.08rem);
  line-height: 1.55;
}
.mapp .mapp-pe-v-si .mapp-pe-veredicto { color: #9bf2b4; }
.mapp .mapp-pe-v-no .mapp-pe-veredicto { color: #ffabb8; }
.mapp .mapp-pe-acciones-resultado {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}
.mapp .mapp-pe-acciones-resultado .mapp-btn { margin: 0; }
.mapp .mapp-pe-repetir {
  border: 0;
  border-bottom: 1px solid rgba(232, 211, 150, .42);
  padding: .45rem .15rem;
  background: transparent;
  color: #ded5ba;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.mapp .mapp-pe-repetir:hover { color: #fff1bc; border-color: #e4c875; }

@media (max-width: 600px) {
  .mapp .mapp-pe { border-radius: 18px; padding: .9rem .72rem 1.15rem; gap: .8rem; }
  .mapp .mapp-pe-form { padding: .72rem; }
  .mapp .mapp-pe-form-fila { grid-template-columns: 1fr; }
  .mapp .mapp-pe-form .mapp-btn { width: 100%; }
  .mapp .mapp-pe-escena { border-radius: 21px; }
  .mapp .mapp-pe-cuerda { height: clamp(6.6rem, 28vw, 7.4rem); }
  .mapp .mapp-pe-sello { right: .55rem; bottom: .55rem; }
  .mapp .mapp-pe-acciones-resultado { flex-direction: column; }
  .mapp .mapp-pe-acciones-resultado .mapp-btn { width: 100%; }
}

/* ── Oráculo de la Lotería: salón nocturno y bombo de latón ───── */
.mapp .mapp-lt {
  --lt-oro: #e2bb5b;
  --lt-oro-claro: #fff0bd;
  --lt-tinta: #070913;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226, 187, 91, .26);
  border-radius: 26px;
  padding: .75rem .75rem 1.45rem;
  background:
    radial-gradient(circle at 12% 8%, rgba(63, 86, 150, .35), transparent 32%),
    radial-gradient(circle at 88% 58%, rgba(73, 37, 89, .23), transparent 30%),
    linear-gradient(155deg, #111a37, #080b19 58%, #060710);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
  color: #f7f3e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.mapp .mapp-lt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle at 10% 16%, #fff 0 1px, transparent 1.7px),
    radial-gradient(circle at 76% 10%, #ffe7a2 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 42%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 72%, #ffe7a2 0 1px, transparent 1.8px);
  background-size: 14rem 12rem, 19rem 17rem, 16rem 18rem, 20rem 16rem;
}

.mapp .mapp-lt-portada {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(17rem, 44vw, 26rem);
  margin: 0;
  border-radius: 20px;
  background: #080b14;
  box-shadow: inset 0 0 0 1px rgba(245, 210, 121, .17);
}
.mapp .mapp-lt-portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 6, 13, .08) 25%, rgba(5, 7, 15, .35) 58%, rgba(4, 5, 12, .95) 100%),
              linear-gradient(0deg, rgba(3, 5, 12, .92), transparent 56%);
  pointer-events: none;
}
.mapp .mapp-lt-portada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.03);
}
.mapp .mapp-lt-portada figcaption {
  position: absolute;
  z-index: 1;
  left: clamp(1.15rem, 4vw, 3rem);
  right: clamp(1.15rem, 4vw, 3rem);
  bottom: clamp(1.2rem, 4vw, 2.8rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .48rem;
  max-width: 37rem;
  text-align: left;
}
.mapp .mapp-lt-eyebrow,
.mapp .mapp-lt-paso,
.mapp .mapp-lt-grupo-rotulo {
  margin: 0;
  color: var(--lt-oro);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.mapp .mapp-lt-portada figcaption strong {
  max-width: 34rem;
  color: #fffaf0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 4.8vw, 3.15rem);
  font-weight: 500;
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .7);
}
.mapp .mapp-lt-portada figcaption > span:last-child {
  max-width: 35rem;
  color: #d8d7df;
  font-size: clamp(.9rem, 1.9vw, 1.02rem);
  line-height: 1.55;
}

.mapp .mapp-lt-form {
  width: min(100%, 58rem);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: .8rem;
}
.mapp .mapp-lt-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .8rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(231, 201, 123, .16);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}
.mapp .mapp-lt-panel-accion {
  grid-column: 1 / -1;
  align-items: center;
  padding-block: .9rem 1.05rem;
  background: linear-gradient(90deg, rgba(226, 187, 91, .03), rgba(226, 187, 91, .1), rgba(226, 187, 91, .03));
}
.mapp .mapp-lt-paso { text-align: left; }

.mapp .mapp-lt-modos,
.mapp .mapp-lt-fuentes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .48rem;
}
.mapp .mapp-lt-modo,
.mapp .mapp-lt-fuente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  min-height: 4rem;
  border: 1px solid rgba(231, 201, 123, .16);
  border-radius: 13px;
  padding: .58rem .7rem;
  background: rgba(4, 6, 14, .32);
  color: #d9dbe7;
  font: inherit;
  font-size: .86rem;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.mapp .mapp-lt-modo > span,
.mapp .mapp-lt-fuente > span { color: #b9a56e; font-size: .7rem; letter-spacing: .2em; }
.mapp .mapp-lt-modo:hover,
.mapp .mapp-lt-fuente:hover { border-color: rgba(235, 203, 118, .55); color: #fff; transform: translateY(-1px); }
.mapp .mapp-lt-on {
  border-color: rgba(255, 222, 134, .68);
  background: linear-gradient(145deg, rgba(225, 185, 86, .25), rgba(133, 89, 24, .14));
  color: #fff6dd;
  box-shadow: inset 0 0 22px rgba(226, 187, 91, .1), 0 5px 20px rgba(0, 0, 0, .18);
}
.mapp .mapp-lt-on > span { color: #ffe8a3; }

.mapp .mapp-lt-campos { min-height: 4.5rem; display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.mapp .mapp-lt-linea {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .42rem;
  color: #dddde6;
  font-size: clamp(.88rem, 2.5vw, .98rem);
  line-height: 1.4;
}
.mapp .mapp-lt input[type="number"],
.mapp .mapp-lt input[type="text"],
.mapp .mapp-lt input[type="date"] {
  min-height: 2.55rem;
  border: 1px solid rgba(226, 187, 91, .38);
  border-radius: 10px;
  padding: .46rem .55rem;
  background: rgba(3, 5, 13, .62);
  color: #fff1c4;
  font: inherit;
  text-align: center;
  color-scheme: dark;
}
.mapp .mapp-lt input[type="number"] { width: 4.2rem; font-size: 1rem; font-weight: 800; }
.mapp .mapp-lt input[type="text"] { width: min(12rem, 100%); padding-inline: .72rem; text-align: left; }
.mapp .mapp-lt input[type="date"] { width: 10.3rem; color: #f7e9c5; }
.mapp .mapp-lt input:focus-visible,
.mapp .mapp-lt button:focus-visible { outline: 2px solid #ffda72; outline-offset: 3px; }
.mapp .mapp-lt input::placeholder { color: rgba(240, 237, 228, .55); }

.mapp .mapp-lt-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #bfc2d2;
  font-size: .84rem;
  cursor: pointer;
}
.mapp .mapp-lt-check input { width: 1rem; height: 1rem; accent-color: #d8a944; }
.mapp .mapp-lt-atajos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; }
.mapp .mapp-lt-rot { margin-right: .15rem; color: #8e96b2; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mapp .mapp-lt-atajo {
  border: 1px solid rgba(226, 187, 91, .22);
  border-radius: 999px;
  padding: .32rem .68rem;
  background: rgba(255, 255, 255, .035);
  color: #dfe1ea;
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.mapp .mapp-lt-atajo:hover { border-color: rgba(241, 208, 122, .68); background: rgba(226, 187, 91, .09); }

.mapp .mapp-lt-personal { display: flex; flex-direction: column; align-items: center; gap: .38rem; padding-top: .1rem; }
.mapp .mapp-lt-nota,
.mapp .mapp-lt-privacidad { max-width: 29rem; margin: 0; color: #9fa7c1; font-size: .75rem; line-height: 1.45; }
.mapp .mapp-lt-privacidad { color: #b9af92; }
.mapp .mapp-lt-privacidad span { margin-right: .32rem; color: var(--lt-oro); }
.mapp .mapp-lt-err { margin: 0; color: #ffc4c4; font-size: .86rem; }
.mapp .mapp-lt-panel-accion .mapp-acciones { margin: 0; }
.mapp .mapp-lt .mapp-btn {
  min-width: min(100%, 16.5rem);
  border: 1px solid #f0d084;
  border-radius: 999px;
  padding: .76rem 1.4rem;
  background: linear-gradient(180deg, #f4d782, #c99735 68%, #a56d1e);
  box-shadow: 0 9px 22px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .58);
  color: #211400;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 1px rgba(255, 255, 255, .35);
}
.mapp .mapp-lt .mapp-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mapp .mapp-lt .mapp-btn span { margin-right: .38rem; }

/* Bombo mecánico: las bolas se agitan por separado y la manivela gira. */
.mapp .mapp-lt-escena {
  width: min(100%, 52rem);
  padding: .75rem .7rem 1rem;
  border: 1px solid rgba(226, 187, 91, .16);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 28%, rgba(49, 70, 125, .34), rgba(4, 6, 14, .72) 62%);
}
.mapp .mapp-lt-aparato { position: relative; width: min(100%, 25rem); height: 18.5rem; margin: 0 auto .2rem; }
.mapp .mapp-lt-bombo {
  position: absolute;
  z-index: 3;
  top: .4rem;
  left: 50%;
  width: 13.4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: .42rem double #b98731;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .32), rgba(66, 83, 125, .13) 40%, rgba(3, 6, 16, .82) 76%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .52), inset 0 0 24px rgba(0, 0, 0, .54), 0 0 0 2px #34200a;
  transform: translateX(-50%);
}
.mapp .mapp-lt-tambor { position: absolute; inset: 8%; display: block; border-radius: 50%; }
.mapp .mapp-lt-tambor i {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffef5, #e9d59b 54%, #9f7427);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 -2px 4px rgba(95, 58, 7, .24);
  transform: translate(-50%, -50%);
}
.mapp .mapp-lt-reflejo { position: absolute; inset: 5% 48% 42% 12%; border-radius: 50%; border-left: 3px solid rgba(255, 255, 255, .38); transform: rotate(28deg); }
.mapp .mapp-lt-soporte {
  position: absolute;
  z-index: 2;
  top: 5.7rem;
  width: 2.15rem;
  height: 10.2rem;
  border: 2px solid #5e3b10;
  background: linear-gradient(90deg, #5b3509, #d1a34c 35%, #7a4d15 68%, #2c1905);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  box-shadow: 0 12px 18px rgba(0, 0, 0, .42);
}
.mapp .mapp-lt-soporte-i { left: 4.3rem; }
.mapp .mapp-lt-soporte-d { right: 4.3rem; }
.mapp .mapp-lt-eje { position: absolute; z-index: 4; top: 6.25rem; left: 2.9rem; right: 2.9rem; height: .72rem; border: 2px solid #624013; border-radius: 999px; background: linear-gradient(#e8c06a, #7b4d13); }
.mapp .mapp-lt-base { position: absolute; z-index: 5; left: 2.1rem; right: 2.1rem; bottom: 1.2rem; height: 1.5rem; border: 2px solid #5d3b11; border-radius: 50% 50% 16px 16px; background: linear-gradient(#d1a552, #6f4310 62%, #261504); box-shadow: 0 12px 18px rgba(0, 0, 0, .45); }
.mapp .mapp-lt-manivela { position: absolute; z-index: 5; top: 5.8rem; right: 1.2rem; width: 4rem; height: .55rem; border-radius: 999px; background: linear-gradient(#e0b75e, #76501b); transform-origin: left center; }
.mapp .mapp-lt-manivela::after { content: ""; position: absolute; right: -.25rem; top: 50%; width: 1.4rem; height: .78rem; border-radius: 999px; background: linear-gradient(#5d3312, #211006); transform: translateY(-50%) rotate(90deg); }
.mapp .mapp-lt-tobogan { position: absolute; z-index: 6; left: calc(50% + 3.1rem); top: 12.5rem; width: 5rem; height: 1.2rem; border: .24rem solid #81561e; border-left: 0; border-radius: 0 0 22px 0; transform: rotate(17deg); }
.mapp .mapp-lt-gira .mapp-lt-tambor { animation: mapp-lt-vuelta 1.25s linear infinite; }
.mapp .mapp-lt-gira .mapp-lt-tambor i { animation: mapp-lt-rebota .72s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: calc(var(--lt-i) * -.11s); }
.mapp .mapp-lt-en-marcha .mapp-lt-manivela { animation: mapp-lt-manivela .72s linear infinite; }
@keyframes mapp-lt-vuelta { to { transform: rotate(360deg); } }
@keyframes mapp-lt-rebota { from { margin: -8% 5% 0 -4%; } to { margin: 8% -7% 0 6%; } }
@keyframes mapp-lt-manivela { to { transform: rotate(360deg); } }

.mapp .mapp-lt-bandeja { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.mapp .mapp-lt-grupo {
  display: grid;
  gap: .55rem;
  min-height: 5rem;
  padding: .72rem;
  border: 1px solid rgba(226, 187, 91, .2);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .28));
}
.mapp .mapp-lt-grupo-extra { border-color: rgba(182, 137, 239, .27); background: linear-gradient(180deg, rgba(163, 113, 226, .08), rgba(0, 0, 0, .28)); }
.mapp .mapp-lt-grupo-rotulo { color: #b8b1a0; }
.mapp .mapp-lt-grupo-extra .mapp-lt-grupo-rotulo { color: #c9aaf2; }
.mapp .mapp-lt-bolas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; min-height: 3.2rem; }
.mapp .mapp-lt-bola {
  width: clamp(2.65rem, 8vw, 3.35rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 246, 210, .7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 31% 25%, #fffef6, #eddba4 53%, #b1812f 86%);
  box-shadow: 0 7px 14px rgba(0, 0, 0, .43), inset 0 -4px 8px rgba(89, 53, 5, .25);
  color: #201503;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  animation: mapp-lt-cae .7s cubic-bezier(.18, .82, .2, 1.18) both;
}
.mapp .mapp-lt-bola-x { border-color: rgba(248, 235, 255, .72); background: radial-gradient(circle at 31% 25%, #fffaff, #dbc1ff 53%, #8152c4 86%); color: #2c1250; }
@keyframes mapp-lt-cae {
  0% { opacity: 0; transform: translate(5.8rem, -8.5rem) scale(.38) rotate(-180deg); }
  55% { opacity: 1; transform: translate(.7rem, .3rem) scale(1.06) rotate(20deg); }
  76% { transform: translate(-.2rem, -.35rem) scale(.97) rotate(-7deg); }
  100% { opacity: 1; transform: none; }
}

.mapp .mapp-lt-maquina-wrap {
  position: relative;
  width: min(100%, 36rem);
  padding: 2rem 1rem 1.15rem;
  border: 1px solid rgba(226, 187, 91, .28);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0, rgba(62, 83, 143, .35), rgba(3, 5, 13, .75));
}
.mapp .mapp-lt-maquina-corona { position: absolute; top: .65rem; left: 50%; color: var(--lt-oro); transform: translateX(-50%); }
.mapp .mapp-lt-maquina {
  display: flex;
  justify-content: center;
  gap: .28rem;
  max-width: 100%;
  padding: .7rem;
  border: 3px double #c99a43;
  border-radius: 14px;
  background: linear-gradient(180deg, #8e6a2e, #2e1e08 23%, #120f14 76%, #74501d);
  box-shadow: 0 13px 28px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 238, 184, .45);
}
.mapp .mapp-lt-ventana { display: block; flex: 0 1 auto; width: clamp(1.65rem, 7vw, 3.3rem); overflow: hidden; border: 1px solid #826228; border-radius: 7px; background: linear-gradient(#242333, #070812); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .8); }
.mapp .mapp-lt-tira { display: block; will-change: transform; }
.mapp .mapp-lt-tira i { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: .72; color: #ffedb0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 4.4vw, 1.8rem); font-style: normal; font-weight: 700; }

.mapp .mapp-lt-estado { min-height: 1.4em; margin: 0; color: #d9c991; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.mapp .mapp-lt-resultado {
  position: relative;
  width: min(100%, 41rem);
  padding: 1.35rem 1rem 1.15rem;
  border: 1px solid rgba(236, 204, 120, .38);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(226, 187, 91, .1), rgba(255, 255, 255, .025));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .05);
}
.mapp .mapp-lt-sello { display: block; margin-bottom: .3rem; color: var(--lt-oro); }
.mapp .mapp-lt-rotulo { margin: 0; color: #f2d789; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.22rem, 3.8vw, 1.75rem); line-height: 1.22; }
.mapp .mapp-lt-cadena { margin: .55rem 0 0; color: #fffaf0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.18rem, 4vw, 1.62rem); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mapp .mapp-lt-acciones-resultado { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .62rem; margin-top: 1rem; }
.mapp .mapp-lt-acciones-resultado .mapp-btn { min-width: 12.5rem; margin: 0; }
.mapp .mapp-lt-copiar,
.mapp .mapp-lt-repetir {
  border: 1px solid rgba(226, 187, 91, .38);
  border-radius: 999px;
  padding: .58rem 1rem;
  background: rgba(3, 5, 13, .28);
  color: #eee3c7;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.mapp .mapp-lt-repetir { border-color: transparent; border-bottom-color: rgba(226, 187, 91, .38); border-radius: 0; background: transparent; }
.mapp .mapp-lt-copiar:hover,
.mapp .mapp-lt-repetir:hover { color: #fff4ce; border-color: rgba(244, 210, 124, .75); }
.mapp .mapp-lt-share-estado { min-height: 1.2em; margin: .55rem 0 0; color: #b9c2dd; font-size: .75rem; }

.mapp .mapp-lt-historial { width: min(100%, 34rem); padding: .8rem 1rem; border-top: 1px solid rgba(226, 187, 91, .14); color: #aeb5cb; font-size: .82rem; }
.mapp .mapp-lt-historial b { color: #8f98b5; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.mapp .mapp-lt-historial ul { display: flex; flex-direction: column; gap: .2rem; margin: .45rem 0 0; padding: 0; list-style: none; }
.mapp .mapp-lt-historial li { font-variant-numeric: tabular-nums; }
.mapp .mapp-lt-aviso { display: flex; align-items: flex-start; gap: .5rem; max-width: 36rem; margin: .1rem 0 0; color: #8e96ad; font-size: .73rem; line-height: 1.55; text-align: left; }
.mapp .mapp-lt-aviso span { flex: 0 0 auto; color: #b8994d; }
.mapp .mapp-lt-aviso p { margin: 0; }

@media (max-width: 720px) {
  .mapp .mapp-lt { border-radius: 20px; padding: .45rem .45rem 1.2rem; }
  .mapp .mapp-lt-form { grid-template-columns: minmax(0, 1fr); padding-inline: .3rem; }
  .mapp .mapp-lt-panel-accion { grid-column: 1; }
  .mapp .mapp-lt-portada { min-height: 25rem; border-radius: 16px; }
  .mapp .mapp-lt-portada img { object-position: 43% center; }
  .mapp .mapp-lt-portada::after { background: linear-gradient(0deg, rgba(3, 5, 12, .98), rgba(4, 6, 13, .1) 72%); }
  .mapp .mapp-lt-portada figcaption { left: 1rem; right: 1rem; bottom: 1rem; }
  .mapp .mapp-lt-aparato { transform: scale(.9); transform-origin: 50% 100%; margin-top: -1rem; }
  .mapp .mapp-lt-escena { padding-inline: .4rem; }
  .mapp .mapp-lt-bolas { gap: .38rem; }
}

@media (max-width: 410px) {
  .mapp .mapp-lt-panel { padding: .85rem .72rem; }
  .mapp .mapp-lt-modo,
  .mapp .mapp-lt-fuente { padding-inline: .4rem; font-size: .78rem; }
  .mapp .mapp-lt-linea { gap: .35rem; }
  .mapp .mapp-lt-portada { min-height: 23rem; }
  .mapp .mapp-lt-aparato { width: 25rem; max-width: none; left: 50%; transform: translateX(-50%) scale(.76); margin: -2.8rem 0 -1.3rem; }
  .mapp .mapp-lt-acciones-resultado { flex-direction: column; }
  .mapp .mapp-lt-acciones-resultado .mapp-btn,
  .mapp .mapp-lt-copiar { width: 100%; }
}

@media (max-width: 480px) {
  .mapp .mapp-mn { padding: 1rem .8rem 1.2rem; }
  .mapp .mapp-mn-mesa { padding-top: 2.4rem; }
  .mapp .mapp-bo { padding: 1.1rem .8rem 1.3rem; }
  .mapp .mapp-bo-bola { width: min(78vw, 15rem); }
  .mapp .mapp-bo-form { grid-template-columns: 1fr; max-width: 100%; }
  .mapp .mapp-bo-form::before { top: 1.9rem; }
  .mapp .mapp-bo-go { width: 100%; }
  .mapp .mapp-ze, .mapp .mapp-da, .mapp .mapp-do, .mapp .mapp-nu { padding: 1.1rem .7rem 1.3rem; }
  .mapp .mapp-ze-opciones { gap: .35rem; }
  .mapp .mapp-ze-marca { width: .58rem; height: .58rem; }
  .mapp .mapp-da-circulo { width: 100%; aspect-ratio: 1.9; }
  .mapp .mapp-do-mesa { gap: .45rem; }
  .mapp .mapp-do-ficha { width: clamp(5rem, 30vw, 7rem); }
  .mapp .mapp-do-portada { height: clamp(10rem, 50vw, 12rem); }
}

/* Menos animación para quien la pide: se quita lo decorativo (los bucles y
   las entradas), pero NO el giro de los dados ni el meneo del cubilete —
   ahí el movimiento ES la mancia. Se suavizan redefiniendo sus keyframes. */
/* ── La galleta de la fortuna ───────────────────────────────────────
   Laca china: rojo profundo con motas doradas. La galleta son dos
   mitades SVG que se parten con migas, y el papelito sale de en medio. */
.mapp .mapp-ga {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background:
    radial-gradient(1.5px 1.5px at 16% 20%, rgba(255, 215, 107, .5), rgba(255, 215, 107, 0)),
    radial-gradient(1px 1px at 82% 30%, rgba(255, 215, 107, .4), rgba(255, 215, 107, 0)),
    radial-gradient(1px 1px at 40% 74%, rgba(255, 215, 107, .35), rgba(255, 215, 107, 0)),
    radial-gradient(ellipse at 50% 16%, #8c2430 0%, #5e1620 55%, #380a12 100%);
  color: #fdf1e3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.mapp .mapp-ga .mapp-intro { color: #f6ddc8; }

.mapp .mapp-ga-mesa { width: 100%; display: flex; justify-content: center; margin: .3rem 0 0; }
.mapp .mapp-ga-galleta {
  position: relative;
  width: min(62vw, 15rem);
  aspect-ratio: 1 / 1.1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
  transition: transform .15s ease;
}
.mapp .mapp-ga-galleta:hover { transform: translateY(-3px); }

.mapp .mapp-ga-mitad {
  position: absolute;
  inset: 0;
  width: 100%;
  transition: transform .8s cubic-bezier(.3, 1.2, .4, 1), opacity .3s ease;
}
.mapp .mapp-ga-cuerpo {
  fill: url(#mapp-ga-degradado);
  fill: #d9a45c; /* respaldo si el degradado no existe */
  stroke: #a9743a;
  stroke-width: 2;
  stroke-linejoin: round;
}
.mapp .mapp-ga-pliegue { stroke: #a9743a; stroke-width: 1.6; opacity: .6; }

/* El crac: cada mitad gira sobre su base y se aparta; asoman las migas. */
.mapp .mapp-ga-mitad { transform-origin: 50% 92%; }
.mapp .mapp-ga-rota .mapp-ga-izq { transform: translateX(-26%) rotate(-16deg); }
.mapp .mapp-ga-rota .mapp-ga-der { transform: translateX(26%) rotate(16deg); }
.mapp .mapp-ga-miga {
  position: absolute;
  left: 50%;
  top: 58%;
  width: .45rem;
  height: .45rem;
  border-radius: 40% 60% 55% 45%;
  background: #c99050;
  opacity: 0;
}
.mapp .mapp-ga-rota .mapp-ga-miga { animation: mapp-ga-cae .7s ease-in both; }
.mapp .mapp-ga-rota .mapp-ga-m1 { animation-delay: .05s; --gx: -2.2rem; }
.mapp .mapp-ga-rota .mapp-ga-m2 { animation-delay: .12s; --gx: .4rem; }
.mapp .mapp-ga-rota .mapp-ga-m3 { animation-delay: .2s; --gx: 1.8rem; }
@keyframes mapp-ga-cae {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--gx, 0rem)), 3.4rem) rotate(140deg); }
}

.mapp .mapp-ga-estado { margin: 0; min-height: 1.2em; opacity: .85; }

/* El papelito: tira blanca con los cantos rojos, letra de imprenta. */
.mapp .mapp-ga-papel {
  max-width: 30rem;
  width: 100%;
  padding: .9rem 1.4rem;
  background: linear-gradient(to bottom, #fffdf6, #f4ecdd);
  border-left: 5px solid #a32738;
  border-right: 5px solid #a32738;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  transform: rotate(-1.2deg);
  animation: mapp-ga-sale .5s ease both;
}
@keyframes mapp-ga-sale {
  from { opacity: 0; transform: rotate(-1.2deg) translateY(-14px); }
  to   { opacity: 1; transform: rotate(-1.2deg); }
}
.mapp .mapp-ga-frase {
  margin: 0;
  color: #3a2a1a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.02rem, 2.8vw, 1.2rem);
  line-height: 1.5;
}

.mapp .mapp-ga-numeros { margin: 0; animation: mapp-brota .4s ease .15s both; }
.mapp .mapp-ga-rotulo {
  margin: 0 0 .45rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.mapp .mapp-ga-bolas { margin: 0; display: flex; gap: .45rem; justify-content: center; flex-wrap: wrap; }
.mapp .mapp-ga-bola {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #5e1620;
  background: radial-gradient(circle at 36% 30%, #ffe9b0, #e8bb55 65%, #c9973a);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* ── Los posos del té (tasseomancia inglesa) ────────────────────────
   Porcelana fina sobre mantel de tarde: platillo, taza con filo dorado
   y EL ASA bien visible, que es la referencia de lectura. Las hojas son
   racimos de hebras (SVG del JS), no manchas: es té, no café. */
.mapp .mapp-te {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 16% 20%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 84% 14%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 16%, #5b3a4e 0%, #3a2434 52%, #22131e 100%);
  color: #f7eef3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.mapp .mapp-te .mapp-intro { color: #ecd9e4; }

.mapp .mapp-te-mesa {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: .2rem 0 0;
}
/* El platillo, un poco mayor que la taza. */
.mapp .mapp-te-platillo {
  width: min(78vw, 21rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fbf7ef 0 58%, #e8dfd2 74%, #cfc2ae 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 -4px 10px rgba(120, 90, 60, .25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapp .mapp-te-taza {
  position: relative;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffdf8 0 52%, #f1e9dc 76%, #ddd0bc 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3), inset 0 3px 8px rgba(255, 255, 255, .7);
  transition: transform 1.6s cubic-bezier(.3, .6, .3, 1);
}
/* El giro de la taza: tres vueltas, como manda el rito. */
.mapp .mapp-te-girando { transform: rotate(1080deg); }
.mapp .mapp-te-girada  { transform: rotate(0); transition: none; }
/* El filo dorado y el fondo con su aro decorado. */
.mapp .mapp-te-filo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(201, 164, 92, .75);
  pointer-events: none;
}
.mapp .mapp-te-fondo {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 38%, #f6efe2 0 44%, #e9decb 72%, #d8c8ae 100%);
  box-shadow: inset 0 4px 12px rgba(120, 90, 60, .3);
}
.mapp .mapp-te-fondo::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1.5px dashed rgba(122, 83, 108, .35);
  pointer-events: none;
}
/* EL ASA: a la derecha, gorda y reconocible — es el punto de referencia. */
.mapp .mapp-te-asa {
  position: absolute;
  right: -9%;
  top: 50%;
  width: 22%;
  aspect-ratio: .62;
  transform: translateY(-50%);
  border: .55rem solid #f1e9dc;
  border-left: 0;
  border-radius: 0 60% 60% 0 / 0 50% 50% 0;
  box-shadow: 2px 0 6px rgba(0, 0, 0, .25);
}

/* Las hojas: racimo de hebras verde-pardo, con su nombre encima. */
.mapp .mapp-te-hoja {
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  animation: mapp-te-posa .5s ease both;
}
@keyframes mapp-te-posa {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-30deg); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.mapp .mapp-te-hoja svg { width: 100%; display: block; fill: rgba(64, 78, 46, .92); transition: fill .15s ease; }
.mapp .mapp-te-hoja:hover svg { fill: rgba(84, 100, 60, .95); }
.mapp .mapp-te-activa svg { fill: #333f22; }
.mapp .mapp-te-activa { filter: drop-shadow(0 0 .35rem rgba(255, 215, 107, .75)); }
/* La señalada, marcada PARA SIEMPRE: borde dorado + latido (la lección
   del café — sobre porcelana clara, marca gruesa o movimiento). */
.mapp .mapp-te-elegida svg { animation: mapp-ca-late 2.2s ease-in-out infinite; }
.mapp .mapp-te-elegida ellipse { stroke: #d9b06a; stroke-width: 4; }
.mapp .mapp-te-hoja:focus-visible { outline: 2px solid #ffd76b; outline-offset: 3px; border-radius: 50%; }
.mapp .mapp-te-nombre {
  position: absolute;
  width: 86%;
  color: #fdf7ec;
  font-size: clamp(.55rem, 1.9vw, .72rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  pointer-events: none;
  hyphens: auto;
}

.mapp .mapp-te-estado { margin: 0; min-height: 1.2em; opacity: .85; }

.mapp .mapp-te-lectura {
  width: 100%;
  max-width: 36rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-te-veredicto { margin: 0; font-weight: 700; color: #ffd76b; min-height: 1.2em; }
.mapp .mapp-te-zona      { margin: 0; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.mapp .mapp-te-titulo    { margin: 0; font-size: clamp(1.1rem, 3.4vw, 1.35rem); }
.mapp .mapp-te-texto     { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .92; }
.mapp .mapp-te-cuando {
  margin: 0;
  padding: .45rem .7rem;
  border-left: 3px solid rgba(201, 164, 92, .8);
  background: rgba(201, 164, 92, .09);
  border-radius: 0 8px 8px 0;
  font-size: .88rem;
  line-height: 1.45;
}
.mapp .mapp-te-pista { margin: 0; font-size: .8rem; opacity: .55; }

/* ── El plomo (Bleigießen) ──────────────────────────────────────────
   Noche de fin de año: el cazo vierte el plomo fundido al barreño y la
   figura cuaja en el agua. Cazo, chorro, barreño y figura, todo CSS/SVG. */
.mapp .mapp-pl {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 16% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 82% 12%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)),
    radial-gradient(1.5px 1.5px at 62% 30%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 14%, #2c3550 0%, #171d33 52%, #0a0d1c 100%);
  color: #e9edf7;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.mapp .mapp-pl .mapp-intro { color: #ccd5ea; }

.mapp .mapp-pl-mesa {
  position: relative;
  width: min(80vw, 17rem);
  height: min(74vw, 15.5rem);
}

/* El cazo: mango largo y cuchara con el plomo dentro. Gira sobre el borde
   del cazo para verter. Sin transform base: la animación no pisa nada. */
.mapp .mapp-pl-cuchara {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 60%;
  height: 20%;
  margin-left: -38%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-origin: 78% 80%;
}
.mapp .mapp-pl-mango {
  position: absolute;
  left: 0;
  top: 42%;
  width: 62%;
  height: 12%;
  border-radius: .3rem;
  background: linear-gradient(to bottom, #6b6f7a, #3c3f48);
}
.mapp .mapp-pl-cazo {
  position: absolute;
  right: 0;
  top: 18%;
  width: 42%;
  height: 74%;
  border-radius: 0 0 46% 46% / 0 0 90% 90%;
  background: linear-gradient(to bottom, #555a66, #23262e 70%);
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .5);
}
/* El plomo fundido asomando en el cazo. */
.mapp .mapp-pl-cazo::before {
  content: '';
  position: absolute;
  left: 10%;
  top: 6%;
  width: 80%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2f5fa, #aeb6c4 60%, #8b93a3);
}
/* El chorro cae del pico del cazo mientras se vierte. */
.mapp .mapp-pl-chorro {
  position: absolute;
  right: 13%;
  top: 91%;
  width: .38rem;
  height: 0;
  border-radius: .35rem;
  background: linear-gradient(90deg, #6f7784 0%, #f8fbff 34%, #c9d0da 68%, #686f7b 100%);
  box-shadow: 0 0 .45rem rgba(255, 221, 147, .32);
  clip-path: polygon(18% 0, 84% 0, 100% 100%, 0 100%);
  opacity: 0;
  transform-origin: 50% 0;
}
.mapp .mapp-pl-chorro::before,
.mapp .mapp-pl-chorro::after {
  content: '';
  position: absolute;
  left: 50%;
  width: .62rem;
  aspect-ratio: 1;
  border-radius: 48% 52% 60% 40%;
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, #d8dde5 34%, #7c8490 76%);
  box-shadow: 0 0 .35rem rgba(255, 220, 140, .4);
  opacity: 0;
}
.mapp .mapp-pl-chorro::before { bottom: -1rem; }
.mapp .mapp-pl-chorro::after { bottom: -2rem; width: .4rem; }
.mapp .mapp-pl-en-marcha .mapp-pl-cazo::before {
  animation: mapp-pl-metal-vivo 2.35s ease-in-out both;
}
.mapp .mapp-pl-vierte { animation: mapp-pl-vierte 2.35s cubic-bezier(.45,.05,.3,1) both; }
@keyframes mapp-pl-vierte {
  0%, 8%   { transform: none; }
  24%, 76% { transform: translate(2%, 3%) rotate(29deg); }
  100%     { transform: none; }
}
.mapp .mapp-pl-vierte .mapp-pl-chorro { animation: mapp-pl-chorro 2.35s ease-in both; }
.mapp .mapp-pl-vierte .mapp-pl-chorro::before { animation: mapp-pl-gota 1.05s .52s ease-in infinite; }
.mapp .mapp-pl-vierte .mapp-pl-chorro::after { animation: mapp-pl-gota .82s .82s ease-in infinite; }
@keyframes mapp-pl-chorro {
  0%, 20%  { height: 0; opacity: 0; transform: scaleX(.55); }
  27%      { opacity: 1; }
  35%, 69% { height: 360%; opacity: 1; transform: scaleX(1); }
  82%, 100%{ height: 0; opacity: 0; transform: scaleX(.45); }
}
@keyframes mapp-pl-gota {
  0%   { opacity: 0; transform: translate(-50%, -15%) scale(.7) rotate(18deg); }
  16%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 3.1rem) scale(1.05) rotate(52deg); }
}
@keyframes mapp-pl-metal-vivo {
  0%, 12% { filter: none; }
  28%, 68% { filter: brightness(1.2) drop-shadow(0 0 .35rem rgba(255, 209, 113, .55)); }
  100% { filter: none; }
}

/* El barreño de agua, visto un poco desde arriba. */
.mapp .mapp-pl-barreno {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  width: 88%;
  aspect-ratio: 1.7;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 34%, #2a4a63 0%, #17293c 58%, #0d1826 100%);
  border: .35rem solid #3e4450;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, .55), 0 8px 16px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El brillo del agua. */
.mapp .mapp-pl-barreno::before {
  content: '';
  position: absolute;
  left: 16%;
  top: 18%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  filter: blur(2px);
}
.mapp .mapp-pl-barreno::after {
  content: '';
  position: absolute;
  inset: 8% 7%;
  border: 1px solid rgba(168, 220, 247, .28);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.15);
}

/* El impacto despierta el agua: ondas concéntricas, gotas y vapor. */
.mapp .mapp-pl-impacto {
  position: absolute;
  z-index: 3;
  left: 57%;
  top: 25%;
  width: 1rem;
  height: .35rem;
  opacity: 0;
  pointer-events: none;
}
.mapp .mapp-pl-impacto::before,
.mapp .mapp-pl-impacto::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.1rem;
  height: .75rem;
  border: 2px solid rgba(206, 237, 255, .72);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.15);
  opacity: 0;
}
.mapp .mapp-pl-impacto i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: .26rem;
  height: .7rem;
  border-radius: 50%;
  background: linear-gradient(#d4f2ff, #70a4bf);
  opacity: 0;
  transform-origin: 50% 100%;
}
.mapp .mapp-pl-impacto i:nth-child(1) { --pl-x: -1.35rem; --pl-y: -.8rem; transform: rotate(-52deg); }
.mapp .mapp-pl-impacto i:nth-child(2) { --pl-x: -.62rem; --pl-y: -1.25rem; transform: rotate(-24deg); }
.mapp .mapp-pl-impacto i:nth-child(3) { --pl-x: .05rem; --pl-y: -1.45rem; transform: rotate(2deg); }
.mapp .mapp-pl-impacto i:nth-child(4) { --pl-x: .72rem; --pl-y: -1.14rem; transform: rotate(29deg); }
.mapp .mapp-pl-impacto i:nth-child(5) { --pl-x: 1.35rem; --pl-y: -.68rem; transform: rotate(55deg); }
.mapp .mapp-pl-impacta .mapp-pl-barreno::after { animation: mapp-pl-onda-agua 1.25s .08s ease-out 2; }
.mapp .mapp-pl-impacta .mapp-pl-impacto { opacity: 1; }
.mapp .mapp-pl-impacta .mapp-pl-impacto::before { animation: mapp-pl-onda .95s ease-out 2; }
.mapp .mapp-pl-impacta .mapp-pl-impacto::after { animation: mapp-pl-onda .95s .28s ease-out 2; }
.mapp .mapp-pl-impacta .mapp-pl-impacto i { animation: mapp-pl-salpica .72s ease-out both; }
.mapp .mapp-pl-impacta .mapp-pl-impacto i:nth-child(2),
.mapp .mapp-pl-impacta .mapp-pl-impacto i:nth-child(4) { animation-delay: .05s; }
@keyframes mapp-pl-onda {
  0% { opacity: .8; transform: translate(-50%, -50%) scale(.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}
@keyframes mapp-pl-onda-agua {
  0% { opacity: .65; transform: scale(.15); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes mapp-pl-salpica {
  0% { opacity: .9; translate: 0 0; scale: .6; }
  58% { opacity: .9; translate: var(--pl-x) var(--pl-y); scale: 1; }
  100% { opacity: 0; translate: var(--pl-x) .25rem; scale: .55; }
}

.mapp .mapp-pl-vapor {
  position: absolute;
  z-index: 5;
  left: 57%;
  top: 17%;
  width: 4rem;
  height: 3rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.mapp .mapp-pl-vapor i {
  position: absolute;
  bottom: 0;
  width: .48rem;
  height: 1.7rem;
  border-radius: 50%;
  border-left: .16rem solid rgba(226, 237, 244, .55);
  filter: blur(1px);
  opacity: 0;
}
.mapp .mapp-pl-vapor i:nth-child(1) { left: 20%; }
.mapp .mapp-pl-vapor i:nth-child(2) { left: 48%; height: 2.1rem; }
.mapp .mapp-pl-vapor i:nth-child(3) { left: 72%; }
.mapp .mapp-pl-impacta .mapp-pl-vapor i { animation: mapp-pl-vapor 1.25s .15s ease-out both; }
.mapp .mapp-pl-impacta .mapp-pl-vapor i:nth-child(2) { animation-delay: .29s; }
.mapp .mapp-pl-impacta .mapp-pl-vapor i:nth-child(3) { animation-delay: .42s; }
@keyframes mapp-pl-vapor {
  0% { opacity: 0; transform: translateY(.6rem) scale(.7) rotate(6deg); }
  24% { opacity: .65; }
  100% { opacity: 0; transform: translateY(-1.5rem) scale(1.25) rotate(-13deg); }
}

/* La figura de plomo cuajada: metal claro sobre el agua oscura. */
.mapp .mapp-pl-figura {
  position: relative;
  z-index: 2;
  width: 52%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
}
.mapp .mapp-pl-figura path {
  fill: #c3cad6;
  stroke: #eef2f8;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.mapp .mapp-pl-formando { animation: mapp-pl-formando 1.57s cubic-bezier(.15,.72,.22,1) both; }
.mapp .mapp-pl-formando path { animation: mapp-pl-enfria 1.57s ease-out both; }
.mapp .mapp-pl-cuaja { animation: mapp-pl-cuaja .32s ease-out both; }
@keyframes mapp-pl-formando {
  0% { opacity: .88; transform: scale(.13) rotate(-32deg); filter: blur(2px) drop-shadow(0 0 9px rgba(255, 174, 69, .9)); }
  38% { opacity: 1; transform: scale(.72) rotate(-13deg); }
  72% { transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
}
@keyframes mapp-pl-enfria {
  0% { fill: #e89535; stroke: #ffe2a0; stroke-width: 3; }
  42% { fill: #bf9463; stroke: #ead5ac; }
  100% { fill: #c3cad6; stroke: #eef2f8; stroke-width: 1.6; }
}
@keyframes mapp-pl-cuaja {
  from { opacity: .96; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}

.mapp .mapp-pl-estado { margin: 0; min-height: 1.2em; opacity: .85; }

.mapp .mapp-pl-lectura {
  width: 100%;
  max-width: 36rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-pl-rotulo {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}
.mapp .mapp-pl-titulo { margin: 0; font-size: clamp(1.1rem, 3.4vw, 1.35rem); color: #ffd76b; }
.mapp .mapp-pl-texto { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .92; }

/* ── La margarita ───────────────────────────────────────────────────
   Un prado y una margarita entera en CSS: tallo, hojas, botón central y
   pétalos. Los pétalos los siembra el JS y cada uno es un botón que se
   arranca pulsándolo. */
.mapp .mapp-mg {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 78% 14%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 118%, #3d8b4e 0%, #235e33 46%, #123920 100%);
  color: #edfbef;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.mapp .mapp-mg .mapp-intro { color: #d5f2da; }

.mapp .mapp-mg-mata {
  position: relative;
  width: min(72vw, 15rem);
  height: min(88vw, 18.5rem);
  margin-top: .4rem;
}
.mapp .mapp-mg-tallo {
  position: absolute;
  left: calc(50% - .14rem);
  top: 42%;
  width: .3rem;
  height: 55%;
  border-radius: .3rem;
  background: linear-gradient(to bottom, #4d9a44, #2e6b2c);
}
.mapp .mapp-mg-hoja {
  position: absolute;
  top: 68%;
  width: 2.6rem;
  height: 1.2rem;
  background: linear-gradient(120deg, #57a94d, #316f2e);
  border-radius: 0 100% 0 100%;
}
.mapp .mapp-mg-hoja-i { left: calc(50% - 2.7rem); transform: rotate(24deg); }
.mapp .mapp-mg-hoja-d { left: calc(50% + .2rem); transform: rotate(-18deg) scaleX(-1); }

/* La flor: los pétalos giran alrededor del centro con --ang, anclados por
   su base al corazón de la flor. */
.mapp .mapp-mg-flor {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
}
.mapp .mapp-mg-petalos { position: absolute; inset: 0; }
.mapp .mapp-mg-petalo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21%;
  height: 46%;
  border: 0;
  padding: 0;
  cursor: pointer;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--ang, 0deg));
  background: linear-gradient(to top, #dbd8ce, #fdfdfb 55%);
  border-radius: 52% 52% 46% 46% / 68% 68% 32% 32%;
  box-shadow: inset 0 -.35rem .5rem rgba(90, 110, 80, .18);
  transition: filter .15s ease;
}
.mapp .mapp-mg-petalo:hover { filter: brightness(1.08) drop-shadow(0 0 .25rem rgba(255, 255, 210, .45)); }
.mapp .mapp-mg-petalo:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
.mapp .mapp-mg-centro {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffe066, #eaa91c 68%, #c8860e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 -3px 6px rgba(140, 90, 0, .35);
}

/* El pétalo arrancado vuela hacia fuera por su propio ángulo y se pierde.
   Los keyframes arrastran el transform base (translate + rotate(--ang)):
   la lección de los dados — una animación que no lo haga pisa el anclaje. */
.mapp .mapp-mg-vuela {
  animation: mapp-mg-vuela .8s ease-in both;
  pointer-events: none;
}
@keyframes mapp-mg-vuela {
  30%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) rotate(var(--ang, 0deg)) translateY(-110%) rotate(74deg);
  }
}

.mapp .mapp-mg-frase { margin: 0; min-height: 1.4em; font-style: italic; color: #ffe9a8; }

.mapp .mapp-mg-lectura {
  width: 100%;
  max-width: 36rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-mg-rotulo {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}
.mapp .mapp-mg-titulo { margin: 0; font-size: clamp(1.1rem, 3.4vw, 1.35rem); color: #ffd76b; }
.mapp .mapp-mg-texto { margin: 0; font-size: .95rem; line-height: 1.5; opacity: .92; }

/* ── Ceromancia ─────────────────────────────────────────────────────
   La vela no es una imagen: cuerpo, mecha y llama son CSS. Así se puede
   teñir la cera del color que elija el consultante y hacer que la llama
   baile distinto según lo que salga, sin un solo fichero de más. */

/* El envoltorio, igual que el de las demás mancias: columna centrada. Sin
   él, los hijos que llevan max-width (la lectura son 36rem dentro de 780px)
   se quedan pegados a la izquierda mientras la vela sí sale centrada. */
.mapp .mapp-ve {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.mapp .mapp-ve-rotulo {
  margin: .2rem 0 -.35rem;   /* pegado a su fila de colores; el resto lo pone el gap */
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
.mapp .mapp-ve-colores {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
/* Cuando pulsa «encender» sin haber elegido: el aviso va en el rótulo de
   estado, y la fila de colores da un aire para que la vista suba hasta ella. */
.mapp .mapp-ve-pide { animation: mapp-ve-pide .55s ease; }
@keyframes mapp-ve-pide {
  0%, 100% { transform: none; }
  25%      { transform: translateY(-4px); }
  60%      { transform: translateY(1px); }
}

.mapp .mapp-ve-color {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .3);
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  padding: .45rem .7rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  transition: border-color .15s ease, background .15s ease;
}
.mapp .mapp-ve-color:hover { border-color: rgba(255, 215, 107, .5); }
.mapp .mapp-ve-elegida {
  border-color: #ffd76b;
  background: rgba(255, 215, 107, .12);
}
.mapp .mapp-ve-muestra {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--ve-cera);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .22);
  flex: none;
}
.mapp .mapp-ve-textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.18;
}
.mapp .mapp-ve-nombre { font-size: .84rem; white-space: nowrap; }
/* El tema del botón: la respuesta a «¿y yo qué vela quiero?». */
.mapp .mapp-ve-tema { font-size: .68rem; opacity: .62; white-space: nowrap; }

.mapp .mapp-ve-mesa {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  min-height: 15rem;
  margin: .5rem 0 0;
}
.mapp .mapp-ve-vela {
  position: relative;
  width: 4.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* El halo de la vela encendida, que se enciende con .mapp-ve-arde */
  filter: drop-shadow(0 0 0 rgba(255, 190, 90, 0));
  transition: filter .6s ease, opacity .35s ease;
  /* Mientras no ha elegido, la vela está apagada del todo: la cera por
     defecto es la misma que la de la blanca, y una vela blanca a la vista
     desde el primer momento hacía creer que el color no pintaba nada. */
  opacity: .38;
}
.mapp .mapp-ve-puesta { opacity: 1; }
.mapp .mapp-ve-arde { filter: drop-shadow(0 -1rem 2.6rem rgba(255, 176, 60, .5)); }

.mapp .mapp-ve-cuerpo {
  order: 3;
  width: 100%;
  height: 9rem;
  border-radius: .5rem .5rem .3rem .3rem;
  position: relative;
  overflow: hidden;
  background: var(--ve-cera, #f4efe4);
  box-shadow: inset -.7rem 0 1rem rgba(0, 0, 0, .28), inset .4rem 0 .8rem rgba(255, 255, 255, .3);
}
.mapp .mapp-ve-cera { position: absolute; inset: 0; background: var(--ve-cera, #f4efe4); }

/* La mecha y las dos llamas (la segunda sólo sale cuando se parte en dos). */
/* La mecha, marrón sobre fondo oscuro, no se veía: al arder se le enciende
   la punta como una brasa y así la llama deja de parecer que flota. */
.mapp .mapp-ve-mecha {
  order: 2;
  width: 2px;
  height: .5rem;
  margin-top: -.18rem;
  background: linear-gradient(to bottom, #6b4a2f, #3a2c22);
  border-radius: 1px;
  transition: box-shadow .5s ease;
}
.mapp .mapp-ve-arde .mapp-ve-mecha { box-shadow: 0 -1px 4px 1px rgba(255, 150, 40, .85); }
.mapp .mapp-ve-l-apaga .mapp-ve-mecha { box-shadow: none; }
.mapp .mapp-ve-llama, .mapp .mapp-ve-llama2 {
  order: 1;
  width: 1.15rem;
  height: 2.4rem;
  border-radius: 50% 50% 40% 40% / 68% 68% 32% 32%;
  background: radial-gradient(ellipse at 50% 78%, #fff6cf 0%, #ffcf5c 32%, #ff9a1f 62%, rgba(255, 120, 10, .1) 100%);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity .4s ease;
}
.mapp .mapp-ve-llama2 { position: absolute; top: 0; left: 55%; width: .8rem; height: 1.7rem; }
.mapp .mapp-ve-nucleo {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 44%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(120, 190, 255, .95), rgba(80, 150, 255, 0) 72%);
  opacity: 0;
}
.mapp .mapp-ve-arde .mapp-ve-llama { opacity: 1; animation: mapp-ve-baila 1.1s ease-in-out infinite alternate; }

.mapp .mapp-ve-humo {
  position: absolute;
  top: -3.4rem;
  width: .55rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(220, 220, 220, .5), rgba(220, 220, 220, 0));
  opacity: 0;
  transition: opacity .6s ease;
}

@keyframes mapp-ve-baila {
  from { transform: scale(1) rotate(-2deg); }
  to   { transform: scale(1.06, 1.1) rotate(2deg); }
}
@keyframes mapp-ve-tiembla {
  0%   { transform: scale(.95, .9) rotate(-9deg) translateX(-2px); }
  35%  { transform: scale(1.05, 1.12) rotate(7deg) translateX(2px); }
  70%  { transform: scale(.9, .96) rotate(-5deg) translateX(-1px); }
  100% { transform: scale(1.02, 1.05) rotate(4deg) translateX(1px); }
}

/* Cada llama, su baile. Aquí está la gracia del motor: el mismo dibujo
   dice ocho cosas distintas sin una sola imagen.
   OJO: la llama SIEMPRE está animada, y una animación en marcha gana en la
   cascada a cualquier «transform» suelto. Por eso las que necesitan girarse
   o desplazarse llevan sus PROPIOS fotogramas en vez de un transform, que
   se quedaba sin efecto (la inclinada salía recta). */
@keyframes mapp-ve-ladea {
  from { transform: rotate(15deg) scale(1); }
  to   { transform: rotate(23deg) scale(1.05, 1.1); }
}
@keyframes mapp-ve-parte {
  from { transform: translateX(-38%) rotate(-4deg) scale(1); }
  to   { transform: translateX(-42%) rotate(1deg) scale(1.05, 1.09); }
}
.mapp .mapp-ve-l-firme .mapp-ve-llama     { height: 3rem; animation-duration: 2.6s; }
.mapp .mapp-ve-l-baja .mapp-ve-llama      { height: 1.4rem; opacity: .82; animation-duration: 1.9s; }
.mapp .mapp-ve-l-temblorosa .mapp-ve-llama{ animation: mapp-ve-tiembla .34s ease-in-out infinite alternate; }
.mapp .mapp-ve-l-doble .mapp-ve-llama     { animation: mapp-ve-parte 1s ease-in-out infinite alternate; }
.mapp .mapp-ve-l-doble .mapp-ve-llama2    { opacity: 1; animation: mapp-ve-baila .9s ease-in-out infinite alternate-reverse; }
.mapp .mapp-ve-l-chispea .mapp-ve-llama   { animation: mapp-ve-tiembla .16s steps(2, end) infinite alternate; }
.mapp .mapp-ve-l-inclinada .mapp-ve-llama { animation: mapp-ve-ladea 2.2s ease-in-out infinite alternate; }
/* El azul de la base: el núcleo solo no se veía sobre el naranja, así que
   además se enfría el arranque de la propia llama. */
.mapp .mapp-ve-l-azulada .mapp-ve-nucleo  { opacity: 1; width: 66%; height: 44%; }
.mapp .mapp-ve-l-azulada .mapp-ve-llama {
  background: radial-gradient(ellipse at 50% 84%, #cfe7ff 0%, #6fb6ff 18%, #ffcf5c 46%, #ff9a1f 72%, rgba(255, 120, 10, .1) 100%);
}
.mapp .mapp-ve-l-apaga .mapp-ve-llama     { opacity: 0; animation: none; }
.mapp .mapp-ve-l-apaga .mapp-ve-humo      { opacity: .85; }
.mapp .mapp-ve-l-apaga.mapp-ve-arde       { filter: none; }

/* Y cada señal, su rastro en el humo o en la cera. */
.mapp .mapp-ve-s-humo_blanco .mapp-ve-humo { opacity: .7; }
.mapp .mapp-ve-s-humo_negro .mapp-ve-humo  { opacity: .85; background: linear-gradient(to top, rgba(40, 40, 46, .85), rgba(40, 40, 46, 0)); }
.mapp .mapp-ve-s-cera_lado .mapp-ve-cuerpo   { transform: skewX(-4deg); box-shadow: inset -1.4rem 0 1.4rem rgba(0, 0, 0, .34); }
.mapp .mapp-ve-s-cera_entera .mapp-ve-cuerpo { height: 6.4rem; border-radius: .5rem .5rem 45% 45% / .3rem .3rem 1.6rem 1.6rem; }
.mapp .mapp-ve-s-lagrimas .mapp-ve-cuerpo::after {
  content: '';
  position: absolute;
  left: 22%;
  top: 8%;
  width: .32rem;
  height: 58%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 1.6rem .9rem 0 rgba(255, 255, 255, .38), .8rem 2.1rem 0 rgba(255, 255, 255, .3);
}
/* El pozo del «arde por dentro». Lleva z-index porque .mapp-ve-cera es un
   hijo posicionado y se pintaba ENCIMA del ::before, dejándolo invisible
   (a las lágrimas no les pasa: van en ::after, que pinta después). */
.mapp .mapp-ve-s-tunel .mapp-ve-cuerpo::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 52%;
  height: 2.4rem;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18));
}
.mapp .mapp-ve-s-gancho .mapp-ve-mecha { transform: rotate(38deg) translateY(-1px); }

.mapp .mapp-ve-estado { margin: 0; min-height: 1.2em; opacity: .85; }

.mapp .mapp-ve-lectura {
  width: 100%;
  text-align: left;   /* son parrafos, no rotulos: centrados se leen peor */
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-ve-r-para, .mapp .mapp-ve-r-senal { margin: 0; }
.mapp .mapp-ve-r-para span, .mapp .mapp-ve-r-senal span {
  display: block;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}
.mapp .mapp-ve-r-para b, .mapp .mapp-ve-r-senal b { color: #ffd76b; font-size: 1.02rem; }
.mapp .mapp-ve-r-llama { margin: .5rem 0 0; font-size: clamp(1.1rem, 3.4vw, 1.35rem); }
.mapp .mapp-ve-para-x, .mapp .mapp-ve-senal-x { margin: 0 0 .4rem; font-size: .93rem; line-height: 1.45; opacity: .88; }
.mapp .mapp-ve-llama-x { margin: 0 0 .5rem; line-height: 1.5; }

/* ── Cafeomancia ────────────────────────────────────────────────────
   La taza vista desde arriba: el aro es el borde, los dos círculos de
   dentro marcan la pared y el poso. Las manchas las dibuja el JS (un
   contorno irregular distinto en cada tirada), así que aquí sólo van la
   porcelana, las tres posiciones y el volteo. */

/* El envoltorio: ver la nota de .mapp-ve, es el mismo caso. */
.mapp .mapp-ca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.mapp .mapp-ca-mesa {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: .2rem 0 0;
}
.mapp .mapp-ca-taza {
  position: relative;
  width: clamp(14rem, 72vw, 20rem);
  aspect-ratio: 1;
  border-radius: 50%;
  /* La porcelana: el aro exterior es el borde de la taza. */
  background: radial-gradient(circle at 38% 32%, #fffdf8 0%, #f3ece0 58%, #ded3c2 100%);
  border: .5rem solid #fbf8f2;
  box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .38), inset 0 .2rem .8rem rgba(120, 96, 66, .28);
  transition: transform .5s ease;
}
/* El asa, a la derecha: en la lectura tradicional representa a quien
   pregunta, y por eso conviene que se vea de dónde se mide. */
.mapp .mapp-ca-asa {
  position: absolute;
  top: 50%;
  right: -14%;
  width: 20%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: .55rem solid #fbf8f2;
  border-left-color: transparent;
  border-radius: 50%;
  box-shadow: .18rem 0 .5rem rgba(0, 0, 0, .22);
}
.mapp .mapp-ca-interior {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
}
/* Los dos anillos que separan borde, pared y poso. Muy tenues: son una
   guía de lectura, no un dibujo. */
.mapp .mapp-ca-interior::before,
.mapp .mapp-ca-interior::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(120, 96, 66, .26);
}
.mapp .mapp-ca-interior::before { inset: 16%; }
.mapp .mapp-ca-interior::after  { inset: 40%; }

.mapp .mapp-ca-mancha {
  position: absolute;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  /* Keyframes PROPIOS y no mapp-brota: brota termina en «transform: none»
     y con el fill both eso pisaba el translate del centrado — las manchas
     quedaban ancladas por la esquina y no por el centro, justo donde las
     posiciones de las tres alturas están afinadas. */
  animation: mapp-ca-brota .45s ease both;
}
@keyframes mapp-ca-brota {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.mapp .mapp-ca-mancha svg { width: 100%; display: block; }
.mapp .mapp-ca-mancha path {
  fill: rgba(74, 47, 27, .88);
  transition: fill .15s ease;
}
.mapp .mapp-ca-mancha:hover path { fill: rgba(97, 62, 34, .95); }
/* La mancha que señala la taza conserva un halo tenue PARA SIEMPRE (como la
   ficha elegida del dominó); la que se está leyendo lleva el halo fuerte.
   El orden importa: mapp-ca-activa va después para ganar cuando coinciden. */
/* El halo tenue no bastaba y el borde fino tampoco: sobre la porcelana
   clara se perdían. Borde gordo y latido dorado — que suba y baje llama la
   vista aunque el fondo sea blanco.
   El latido va en el SVG y NO en el botón, y no es capricho: el botón ya
   lleva mapp-brota, y cambiarle la animación al marcar/leer la reiniciaba
   y le movía el transform (brota termina en «transform: none», que pisa el
   translate del centrado) — la mancha dorada pegaba un salto al pulsar
   otra. En el SVG no hay animación previa con la que chocar. */
.mapp .mapp-ca-elegida svg { animation: mapp-ca-late 2.2s ease-in-out infinite; }
@keyframes mapp-ca-late {
  0%, 100% { filter: drop-shadow(0 0 .12rem rgba(255, 215, 107, .3)); }
  50%      { filter: drop-shadow(0 0 .6rem rgba(255, 200, 80, .95)); }
}
.mapp .mapp-ca-elegida path { stroke: #d9b06a; stroke-width: 5; }
.mapp .mapp-ca-activa path { fill: #3a2416; }
.mapp .mapp-ca-activa { filter: drop-shadow(0 0 .35rem rgba(255, 215, 107, .75)); }
.mapp .mapp-ca-mancha:focus-visible { outline: 2px solid #ffd76b; outline-offset: 3px; border-radius: 50%; }

/* El nombre va encima de la mancha, que es donde se lee de un vistazo. Se
   deja envolver en dos líneas: hay símbolos de nombre largo («La herradura»,
   «La serpiente») y en la taza no caben de una. */
.mapp .mapp-ca-nombre {
  position: absolute;
  width: 70%;
  color: #fdf7ec;
  font-size: clamp(.55rem, 1.9vw, .72rem);
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  pointer-events: none;
  hyphens: auto;
}

/* Las tres alturas, medidas desde el centro de la taza: el borde queda lejos,
   la pared a media distancia y el poso casi en el centro — que es donde está
   el fondo de una taza vista desde arriba. Cuanto más adentro, más grande la
   mancha: abajo se deposita más poso. */
.mapp .mapp-ca-borde { top: 18%; left: 32%; width: 31%; }
.mapp .mapp-ca-medio { top: 52%; left: 78%; width: 32%; }
.mapp .mapp-ca-fondo { top: 62%; left: 44%; width: 36%; }

/* El volteo: la taza da media vuelta y se posa. */
.mapp .mapp-ca-volteando { transform: rotate(190deg) scale(.9); }
.mapp .mapp-ca-lista     { transform: rotate(0) scale(1); }

.mapp .mapp-ca-estado { margin: 0; min-height: 1.2em; opacity: .85; }

.mapp .mapp-ca-lectura {
  width: 100%;
  text-align: left;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .34);
  animation: mapp-brota .4s ease both;
}
.mapp .mapp-ca-veredicto { margin: 0; font-weight: 700; color: #ffd76b; min-height: 1.2em; }
.mapp .mapp-ca-zona      { margin: 0; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.mapp .mapp-ca-titulo    { margin: 0; font-size: clamp(1.1rem, 3.4vw, 1.35rem); }
.mapp .mapp-ca-texto     { margin: 0; line-height: 1.5; }
.mapp .mapp-ca-cuando    { margin: 0; font-size: .92rem; opacity: .8; border-left: 2px solid rgba(255, 215, 107, .5); padding-left: .6rem; }
.mapp .mapp-ca-pista     { margin: 0; font-size: .85rem; opacity: .62; }

@media (max-width: 420px) {
  .mapp .mapp-ca-nombre { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mapp .mapp-bo-pensando { animation: none; }
  .mapp .mapp-bo-visible .mapp-bo-respuesta,
  .mapp .mapp-da-lectura, .mapp .mapp-do-lectura, .mapp .mapp-nu-lectura,
  .mapp .mapp-do-ficha,
  .mapp .mapp-do-portada,
  .mapp .mapp-do-portada-sale,
  .mapp .mapp-ze-carta-gira,
  /* El latido de la mancha señalada NO se apaga aquí: es un fundido de
     brillo, no un desplazamiento, y es señal funcional (dice cuál es la
     principal), no adorno. */
  .mapp .mapp-ca-lectura, .mapp .mapp-ca-mancha,
  .mapp .mapp-mn-r-cara, .mapp .mapp-mn-r-cruz { animation: none; }

  /* La taza no da la vuelta: aparecen los posos y ya. El JS además se salta
     la espera, así que no hay que esperar a nada que no se ve. */
  .mapp .mapp-ca-taza { transition: none; }
  .mapp .mapp-ca-volteando { transform: none; }

  /* La vela SIGUE ardiendo —el baile de la llama ES la mancia, igual que el
     giro de los dados—, pero se le quita el temblor rápido, que es el que
     molesta de verdad, y se deja el vaivén lento. */
  .mapp .mapp-ve-lectura, .mapp .mapp-ve-pide { animation: none; }
  .mapp .mapp-ve-l-temblorosa .mapp-ve-llama,
  .mapp .mapp-ve-l-chispea .mapp-ve-llama {
    animation: mapp-ve-baila 1.6s ease-in-out infinite alternate;
  }

  @keyframes mapp-da-tumbo {
    0%, 100% { transform: none; }
    50%      { transform: rotate(14deg); }
  }
  /* La galleta: el crac va rápido y sin migas volando. */
  .mapp .mapp-ga-mitad { transition-duration: .2s; }
  .mapp .mapp-ga-rota .mapp-ga-miga { animation: none; }
  .mapp .mapp-ga-papel { animation: none; }

  /* El té: la taza gira más corto y las hojas se posan en fundido. El
     latido de la señalada NO se apaga (es fundido y señal funcional). */
  .mapp .mapp-te-taza { transition-duration: .4s; }
  @keyframes mapp-te-posa {
    from { opacity: 0; transform: translate(-50%, -50%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
  }

  /* El plomo sigue virtiéndose (el gesto ES la mancia) pero suave: menos
     inclinación y la figura aparece en fundido, sin giro. */
  .mapp .mapp-pl-vierte { animation-duration: 1.1s; }
  .mapp .mapp-pl-vierte .mapp-pl-chorro { animation-duration: 1.1s; }
  .mapp .mapp-pl-vierte .mapp-pl-chorro::before,
  .mapp .mapp-pl-vierte .mapp-pl-chorro::after,
  .mapp .mapp-pl-impacta .mapp-pl-impacto i,
  .mapp .mapp-pl-impacta .mapp-pl-vapor i { animation: none; }
  .mapp .mapp-pl-impacta .mapp-pl-barreno::after,
  .mapp .mapp-pl-impacta .mapp-pl-impacto::before,
  .mapp .mapp-pl-impacta .mapp-pl-impacto::after { animation-duration: .6s; animation-iteration-count: 1; }
  .mapp .mapp-pl-formando,
  .mapp .mapp-pl-formando path { animation-duration: .7s; }
  @keyframes mapp-pl-vierte {
    0%, 100% { transform: none; }
    30%, 82% { transform: rotate(18deg); }
  }
  @keyframes mapp-pl-cuaja {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* El pétalo arrancado se desvanece en el sitio, sin el vuelo. */
  @keyframes mapp-mg-vuela {
    100% { opacity: 0; }
  }
  .mapp .mapp-mg-lectura { animation: none; }

  /* Los dados siguen saliendo de la boca, pero sin volteretas ni rebotes. */
  @keyframes mapp-da-sale1 {
    0%   { opacity: 0; transform: translate(145%, -82%) scale(.82); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes mapp-da-sale2 {
    0%   { opacity: 0; transform: translate(0, -82%) scale(.82); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes mapp-da-sale3 {
    0%   { opacity: 0; transform: translate(-145%, -82%) scale(.82); }
    100% { opacity: 1; transform: none; }
  }
  .mapp .mapp-da-salen .mapp-da-dado { animation-duration: .48s; }
  /* El cubilete sigue vertiendo: se elimina el temblor, no la relacion
     visual entre su boca y los dados. */
  .mapp .mapp-da-lanzando { animation-duration: 1.15s; }
  @keyframes mapp-da-lanza {
    0%, 100% { transform: none; }
    24%      { transform: rotate(-5deg); }
    50%, 72% { transform: translate(-104%, 19%) rotate(88deg); }
    86%      { transform: translate(-28%, 7%) rotate(22deg); }
  }
  /* En el bombo, el movimiento ES la mancia: las bolas siguen cayendo de una
     en una y el tambor sigue moviéndose. Se suaviza: caída corta y sin
     rebote, y el tambor se mece en vez de dar vueltas. */
  @keyframes mapp-lt-cae {
    from { transform: translateY(-45%); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes mapp-lt-vuelta {
    0%, 100% { transform: rotate(-9deg); }
    50%      { transform: rotate(9deg); }
  }

  /* El motor JS conserva una oscilación corta y suave; la estela deja de
     recorrer la pantalla de forma continua. */
  .mapp .mapp-pe-traza i { animation: none !important; }
  .mapp .mapp-pe-lectura { animation: none; }
}