/* 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 clara + moneda de 36 fotogramas ──────────── */
.mapp .mapp-mn {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.5rem;
  background: radial-gradient(ellipse at 50% 38%, #fff 0 44%, #eaf0f9 76%, #d7e0f1 100%);
  border: 1px solid rgba(30, 50, 100, .12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  overflow: hidden;
}
.mapp .mapp-mn .mapp-intro { color: #33405e; }

.mapp .mapp-mn-mesa {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3.2rem; /* aire para el salto de la moneda */
}
.mapp .mapp-mn-moneda {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  width: clamp(9rem, 42vw, 14rem);
  line-height: 0;
}
/* 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 %). El multiply
   funde el fondo blanco del JPG con la mesa clara. */
.mapp .mapp-mn-cara {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-size: 600% 600%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  will-change: transform;
}
.mapp .mapp-mn-sombra {
  display: block;
  width: 58%;
  height: .85rem;
  margin-top: -4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 30, 60, .3), rgba(20, 30, 60, 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: #5e9200; animation: mapp-brota .45s ease both; }
.mapp .mapp-mn-r-cruz { color: #d3790a; animation: mapp-brota .45s ease both; }
.mapp .mapp-mn-espera {
  color: #6d7896;
  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: #2b3554;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.15rem);
}
.mapp .mapp-mn-frase {
  margin: 0;
  min-height: 2.6em;
  max-width: 32rem;
  color: #47506e;
  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: #43507a;
}
.mapp .mapp-mn-marcador b { font-weight: 700; }
.mapp .mapp-mn-mc b { color: #5e9200; }
.mapp .mapp-mn-mx b { color: #d3790a; }

/* ── Bola de Cristal: pregunta → respuesta dentro de la esfera ──── */
.mapp .mapp-bo {
  position: relative;
  border-radius: 12px;
  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%);
  color: #e9f0ff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.mapp .mapp-bo .mapp-intro { color: #d5e2ff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

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

.mapp .mapp-bo-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  width: 100%;
  max-width: 32rem;
}
.mapp .mapp-bo-input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .6rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font: inherit;
}
.mapp .mapp-bo-input::placeholder { color: rgba(255, 255, 255, .65); }
.mapp .mapp-bo-input:focus-visible { outline: 2px solid #6fe0ff; outline-offset: 2px; }

.mapp .mapp-bo-err {
  margin: 0;
  background: rgba(150, 10, 10, .82);
  color: #fff;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: 8px;
  max-width: 32rem;
}
.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;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background: radial-gradient(circle at 50% 0%, #2c3061 0%, #191c3a 55%, #0b0d1d 100%);
  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-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;
}
.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; }

/* ── 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 { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.mapp .mapp-da-vaso {
  order: -1;                /* el cubilete, encima del círculo */
  width: clamp(3.4rem, 14vw, 4.6rem);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 90%;
}
.mapp .mapp-da-vaso img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mapp .mapp-da-agitando { animation: mapp-da-agita .28s ease-in-out infinite alternate; }
@keyframes mapp-da-agita { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* El círculo de la mesa donde deben caer los dados (en escorzo) */
.mapp .mapp-da-circulo {
  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); }
}

.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-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: cuatro movimientos en 3D ───────────────────── */
.mapp .mapp-pe {
  --mapp-pe-peso: clamp(1.5rem, 6vw, 2.2rem);   /* ancho del peso y del brazo */
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.6rem;
  background:
    radial-gradient(1px 1px at 14% 16%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 84% 24%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 66% 72%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 50% 12%, #2a2f6d 0%, #14173c 48%, #070812 100%);
  color: #eceaff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
}
.mapp .mapp-pe .mapp-intro { color: #cfd0f2; }

/* La escena tiene una altura fija en proporción para que el peso nunca
   se salga por abajo, sea cual sea el movimiento. */
.mapp .mapp-pe-escena {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 1 / 1.15;
  display: flex;
  justify-content: center;
}
.mapp .mapp-pe-mano-arriba {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -46% 0;
  width: 42%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
}
.mapp .mapp-pe-mano-abajo {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -52% 0;
  width: 40%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
  opacity: .95;
}

/* El punto del que cuelga la cuerda: bajo los dedos de la mano cerrada */
.mapp .mapp-pe-anclaje {
  position: absolute;
  top: 16%;
  left: 50%;
  translate: -50% 0;
  width: 0;
  height: 0;
  perspective: 640px;
}
.mapp .mapp-pe-eje, .mapp .mapp-pe-brazo { transform-style: preserve-3d; }
/* El brazo lleva ANCHO PROPIO a propósito: cuelga de un anclaje de 0×0, así
   que si dependiera del tamaño natural del peso, cualquier reset con
   «img { max-width: 100% }» lo resolvería contra 0 y el peso desaparecería
   (pasaba al publicar la vista previa, donde la página va envuelta en otro
   esqueleto). La cuerda no se veía afectada porque su ancho es explícito. */
.mapp .mapp-pe-brazo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mapp-pe-peso);
  transform-origin: 50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
}
.mapp .mapp-pe-eje { transform-origin: 50% 0; }
.mapp .mapp-pe-cuerda {
  display: block;
  width: 3px;
  height: clamp(6rem, 26vw, 9.5rem);
  background: linear-gradient(180deg, #d9c07a, #a37f2c 45%, #d9c07a);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}
.mapp .mapp-pe-peso {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-top: -2px;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .65));
}

/* Los cuatro movimientos: el brazo gira en Z (izquierda-derecha) y el eje
   en X (adelante-atrás); combinando ambos con un cuarto de periodo de
   desfase, el peso describe un círculo en un sentido o en el otro. */
@keyframes mapp-pe-z { 0%, 100% { transform: rotateZ(-17deg); } 50% { transform: rotateZ(17deg); } }
@keyframes mapp-pe-x { 0%, 100% { transform: rotateX(20deg); } 50% { transform: rotateX(-20deg); } }

.mapp .mapp-pe-izqder .mapp-pe-brazo { animation: mapp-pe-z 1.5s ease-in-out infinite; }
.mapp .mapp-pe-adelante .mapp-pe-eje { animation: mapp-pe-x 1.5s ease-in-out infinite; }
/* Cuál de los dos ejes va un cuarto de periodo por delante decide el sentido
   del giro; está comprobado midiendo el recorrido del peso en pantalla. */
.mapp .mapp-pe-horario .mapp-pe-brazo { animation: mapp-pe-z 1.5s linear infinite; animation-delay: -.375s; }
.mapp .mapp-pe-horario .mapp-pe-eje { animation: mapp-pe-x 1.5s linear infinite; }
.mapp .mapp-pe-antihorario .mapp-pe-brazo { animation: mapp-pe-z 1.5s linear infinite; }
.mapp .mapp-pe-antihorario .mapp-pe-eje { animation: mapp-pe-x 1.5s linear infinite; animation-delay: -.375s; }

.mapp .mapp-pe-estado { margin: 0; min-height: 1.3em; font-style: italic; color: #b6b6e4; font-size: .95rem; }

.mapp .mapp-pe-lectura {
  width: 100%;
  max-width: 34rem;
  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-pe-rotulo { margin: 0 0 .3rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #a3a3d8; }
.mapp .mapp-pe-texto { margin: 0; font-size: clamp(1rem, 3.2vw, 1.15rem); line-height: 1.5; font-weight: 600; }
.mapp .mapp-pe-v-si { color: #85ffa6; }
.mapp .mapp-pe-v-no { color: #ff9aa6; }

/* ── Móvil ──────────────────────────────────────────────────────── */
/* ── Números de la suerte: noche azul, bombo y bolas de oro ────── */
.mapp .mapp-lt {
  position: relative;
  border-radius: 12px;
  padding: 1.3rem 1.1rem 1.4rem;
  background: radial-gradient(ellipse at 50% 8%, #24356e 0%, #16224a 52%, #090e22 100%);
  color: #eef2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.mapp .mapp-lt .mapp-intro { color: #cfd8ff; }

.mapp .mapp-lt-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

/* Los dos pares de pestañas: qué se pide y de dónde sale */
.mapp .mapp-lt-modos,
.mapp .mapp-lt-fuentes {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem;
  padding: .22rem;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(240, 200, 96, .26);
}
.mapp .mapp-lt-modo,
.mapp .mapp-lt-fuente {
  border: 0;
  background: transparent;
  color: #cbd6ff;
  font: inherit;
  font-size: .9rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mapp .mapp-lt-modo:hover,
.mapp .mapp-lt-fuente:hover { color: #fff; }
.mapp .mapp-lt-on {
  background: linear-gradient(180deg, #f2cd6b, #c9932f);
  color: #241703;
  font-weight: 700;
}

/* Las líneas del formulario: «Quiero [6] números del 1 al [49]» */
.mapp .mapp-lt-linea {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  font-size: clamp(.94rem, 2.6vw, 1.05rem);
  line-height: 1.35;
}
.mapp .mapp-lt input[type="number"],
.mapp .mapp-lt input[type="text"],
.mapp .mapp-lt input[type="date"] {
  font: inherit;
  color: #ffe9ae;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(240, 200, 96, .45);
  border-radius: 8px;
  padding: .34rem .4rem;
  text-align: center;
}
.mapp .mapp-lt input[type="number"] { width: 4.1rem; font-weight: 700; }
.mapp .mapp-lt input[type="text"] { width: min(12rem, 100%); text-align: left; padding-left: .7rem; }
.mapp .mapp-lt input[type="date"] { color: #f3e6c4; }
.mapp .mapp-lt input:focus-visible { outline: 2px solid #ffd76b; outline-offset: 2px; }
.mapp .mapp-lt input::placeholder { color: rgba(255, 255, 255, .5); }

.mapp .mapp-lt-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: #b9c6ee;
  cursor: pointer;
}
.mapp .mapp-lt-check input { accent-color: #d9a63f; width: 1rem; height: 1rem; }

/* Atajos: solo rellenan las casillas */
.mapp .mapp-lt-atajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .32rem;
}
.mapp .mapp-lt-rot {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93a4d8;
}
.mapp .mapp-lt-atajo {
  border: 1px solid rgba(240, 200, 96, .3);
  background: rgba(255, 255, 255, .05);
  color: #e7ecff;
  font: inherit;
  font-size: .82rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mapp .mapp-lt-atajo:hover { border-color: rgba(240, 200, 96, .85); background: rgba(255, 255, 255, .1); }

.mapp .mapp-lt-personal { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.mapp .mapp-lt-nota { margin: 0; font-size: .8rem; color: #93a4d8; max-width: 28rem; }
.mapp .mapp-lt-err { margin: 0; font-size: .9rem; color: #ffc0c0; }

/* El bombo */
.mapp .mapp-lt-escena {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.mapp .mapp-lt-bombo {
  position: relative;
  width: clamp(6.5rem, 32vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(240, 200, 96, .5);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05) 42%, rgba(8, 14, 36, .8) 74%),
    radial-gradient(circle at 50% 62%, #27448f, #101c40);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5), inset 0 0 26px rgba(0, 0, 0, .55);
}
.mapp .mapp-lt-tambor { position: absolute; inset: 0; display: block; }
.mapp .mapp-lt-tambor i {
  position: absolute;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff8e6, #e8c87a 55%, #a5761f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.mapp .mapp-lt-gira .mapp-lt-tambor { animation: mapp-lt-vuelta 1.15s linear infinite; }
@keyframes mapp-lt-vuelta { to { transform: rotate(360deg); } }

/* La bandeja donde caen */
.mapp .mapp-lt-bandeja {
  width: 100%;
  min-height: 3.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  padding: .7rem .6rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .28));
  border: 1px solid rgba(240, 200, 96, .2);
}
.mapp .mapp-lt-bola {
  width: clamp(2.5rem, 9.5vw, 3.1rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.22rem);
  font-variant-numeric: tabular-nums;
  color: #2a1c04;
  background: radial-gradient(circle at 32% 27%, #fffdf5, #f4dfa8 52%, #c69a3c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 -3px 8px rgba(120, 80, 10, .3);
  animation: mapp-lt-cae .55s cubic-bezier(.2, .9, .3, 1.25) both;
}
.mapp .mapp-lt-bola-x {
  color: #2b1358;
  background: radial-gradient(circle at 32% 27%, #f8f2ff, #dcc6ff 52%, #7d55d6);
}
.mapp .mapp-lt-mas { color: #c8b3ff; font-size: 1.1rem; }
@keyframes mapp-lt-cae {
  from { transform: translateY(-180%) scale(.5); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* Los rodillos del número de varias cifras */
/* Con ocho rodillos y un móvil estrecho la máquina se salía de la caja: de
   ahí el max-width y que la ventana pueda encogerse hasta 1.5rem. */
.mapp .mapp-lt-maquina {
  display: flex;
  gap: .3rem;
  padding: .6rem .7rem;
  max-width: 100%;
  border-radius: 14px;
  background: linear-gradient(180deg, #e6e9f5, #a8adc4 55%, #767b93);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .6);
}
.mapp .mapp-lt-ventana {
  display: block;
  flex: 0 1 auto;
  width: clamp(1.5rem, 7vw, 2.8rem);
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #2a2f45, #171a2b);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .6);
}
.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;
  font-style: normal;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 4.2vw, 1.55rem);
  color: #ffe9ae;
}

.mapp .mapp-lt-estado { margin: 0; min-height: 1.2em; color: #cfd8ff; font-style: italic; }
.mapp .mapp-lt-resultado { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.mapp .mapp-lt-rotulo {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  color: #f2cd6b;
}
.mapp .mapp-lt-copiar {
  border: 1px solid rgba(240, 200, 96, .5);
  background: transparent;
  color: #f5e7c0;
  font: inherit;
  font-size: .86rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
.mapp .mapp-lt-copiar:hover { background: rgba(240, 200, 96, .14); }

.mapp .mapp-lt-historial { width: 100%; max-width: 30rem; font-size: .85rem; color: #b0bee9; }
.mapp .mapp-lt-historial b { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #93a4d8; }
.mapp .mapp-lt-historial ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .18rem; }
.mapp .mapp-lt-historial li { font-variant-numeric: tabular-nums; }

.mapp .mapp-lt-aviso { margin: 0; max-width: 32rem; font-size: .76rem; line-height: 1.5; color: #8695c4; }

@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 { max-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); }
}

/* 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. */
/* ── 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;
}
.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-nombre { font-size: .84rem; 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;
}
.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;
  animation: mapp-brota .45s ease both;
}
.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); }
.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-ze-carta-gira,
  .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 { 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); }
  }
  @keyframes mapp-da-agita {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(6deg); }
  }
  /* 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 péndulo tampoco se para: se reduce la amplitud a la mitad */
  @keyframes mapp-pe-z { 0%, 100% { transform: rotateZ(-8deg); } 50% { transform: rotateZ(8deg); } }
  @keyframes mapp-pe-x { 0%, 100% { transform: rotateX(10deg); } 50% { transform: rotateX(-10deg); } }
  .mapp .mapp-pe-lectura { animation: none; }
}