/* Tarot Español V2 — mesa granate, marfil, cuero y latón. */
.tapp-es2 {
  --es2-gold: #dfbd70;
  --es2-gold-deep: #a97132;
  --es2-ivory: #fff5df;
  --es2-wine: #4a1527;
  --es2-night: #090a12;
  width: min(100%, 1060px);
  margin: 0 auto;
  color: var(--es2-ivory);
  font-size: 1rem;
}
.tapp-es2 * { box-sizing: border-box; }
.tapp-es2 [hidden] { display: none !important; }
.tapp-es2 button { font: inherit; }
.tapp-es2 .es2-phase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(223, 189, 112, .27);
  border-radius: clamp(18px, 3vw, 30px);
  background: #0a0b12;
  box-shadow: 0 30px 80px rgba(3, 3, 8, .38), inset 0 1px rgba(255, 255, 255, .06);
}

.tapp-es2 .es2-eyebrow {
  margin: 0 0 .65rem;
  color: var(--es2-gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .21em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* ── Portada ────────────────────────────────────────────────────── */
.tapp-es2 .es2-welcome {
  display: flex;
  min-height: clamp(560px, 64vw, 670px);
  align-items: center;
  padding: clamp(1.4rem, 6vw, 5.2rem);
  background-image: var(--es2-hero);
  background-size: cover;
  background-position: center;
}
.tapp-es2 .es2-welcome::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background:
    linear-gradient(90deg, rgba(6, 7, 13, .98) 0%, rgba(7, 8, 15, .91) 37%, rgba(8, 8, 14, .52) 61%, rgba(8, 8, 14, .05) 83%),
    linear-gradient(0deg, rgba(5, 5, 10, .48), transparent 48%);
}
.tapp-es2 .es2-welcome-copy { width: min(100%, 35rem); }
.tapp-es2 .es2-display {
  max-width: 34rem;
  margin: 0;
  color: #fff7e7;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 5.4vw, 4.55rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
}
.tapp-es2 .es2-intro {
  max-width: 32rem;
  margin: 1.2rem 0 .8rem;
  color: rgba(255, 245, 223, .84);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.65;
}
.tapp-es2 .es2-privacy {
  margin: 0 0 1.45rem;
  color: rgba(255, 245, 223, .58);
  font-size: .82rem;
}
.tapp-es2 .es2-privacy span { margin-right: .25rem; color: var(--es2-gold); }
.tapp-es2 .es2-button {
  min-height: 3.1rem;
  padding: .75rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #281708;
  background: linear-gradient(145deg, #f4dfa3, #d4aa5b 54%, #aa7131);
  box-shadow: 0 10px 26px rgba(169, 113, 49, .3), inset 0 1px rgba(255, 255, 255, .55);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tapp-es2 .es2-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(169, 113, 49, .43); }
.tapp-es2 .es2-button:focus-visible,
.tapp-es2 .es2-text-button:focus-visible,
.tapp-es2 .es2-hidden-card:focus-visible { outline: 3px solid #fff1b7; outline-offset: 4px; }

/* ── Barajado ───────────────────────────────────────────────────── */
.tapp-es2 .es2-ceremony,
.tapp-es2 .es2-pick {
  min-height: clamp(500px, 62vw, 620px);
  padding: clamp(1.4rem, 4vw, 3rem);
  background-image:
    linear-gradient(rgba(6, 6, 12, .64), rgba(6, 6, 12, .88)),
    var(--es2-hero);
  background-size: cover;
  background-position: center;
}
.tapp-es2 .es2-ceremony-inner {
  display: flex;
  min-height: 510px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.tapp-es2 .es2-ceremony-title {
  margin: 0 0 1.2rem;
  color: #fff3db;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.4rem, 3.4vw, 2.25rem);
}
.tapp-es2 .es2-deck {
  position: relative;
  width: clamp(115px, 18vw, 155px);
  aspect-ratio: 5 / 8;
  margin: .5rem auto 1.5rem;
  perspective: 900px;
}
.tapp-es2 .es2-deck img {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  animation: es2-shuffle 1.1s ease-in-out infinite;
}
.tapp-es2 .es2-deck img:nth-child(2) { animation-delay: -.36s; }
.tapp-es2 .es2-deck img:nth-child(3) { animation-delay: -.72s; }
@keyframes es2-shuffle {
  0%, 100% { transform: translateX(0) rotate(0); z-index: 3; }
  34% { transform: translateX(-62%) rotate(-8deg); z-index: 1; }
  68% { transform: translateX(58%) rotate(7deg); z-index: 2; }
}
.tapp-es2 .es2-progress {
  width: min(18rem, 72%);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}
.tapp-es2 .es2-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #98602d, #f2d991);
  transform-origin: left;
  animation: es2-progress 2.25s linear both;
}
@keyframes es2-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tapp-es2 .es2-text-button {
  margin-top: 1rem;
  padding: .45rem .7rem;
  border: 0;
  color: rgba(255, 245, 223, .66);
  background: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(223, 189, 112, .38);
  text-underline-offset: .25rem;
  cursor: pointer;
}

/* ── Abanico ────────────────────────────────────────────────────── */
.tapp-es2 .es2-pick { text-align: center; }
.tapp-es2 .es2-pick-head { position: relative; z-index: 8; pointer-events: none; }
.tapp-es2 .es2-pick-title {
  margin: 0;
  color: #fff5df;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4.8vw, 3.5rem);
  font-weight: 400;
}
.tapp-es2 .es2-pick-hint { margin: .55rem 0 0; color: rgba(255, 245, 223, .68); }
.tapp-es2 .es2-fan {
  display: grid;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.4rem .25rem 1.25rem;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(.3rem, .75vw, .7rem);
  align-items: end;
}
.tapp-es2 .es2-hidden-card {
  position: relative;
  width: min(100%, 96px);
  aspect-ratio: 5 / 8;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  transform: rotate(var(--angle)) translateY(var(--lift));
  transform-origin: 50% 115%;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .28s ease, filter .28s ease;
  animation: es2-deal .5s var(--delay) cubic-bezier(.2, .8, .2, 1) both;
}
.tapp-es2 .es2-hidden-card img { display: block; width: 100%; height: auto; border-radius: inherit; box-shadow: 0 11px 24px rgba(0, 0, 0, .55); }
.tapp-es2 .es2-hidden-card:hover { z-index: 12; transform: rotate(var(--angle)) translateY(calc(var(--lift) - 18px)) scale(1.055); }
.tapp-es2 .es2-hidden-card.is-dimmed { opacity: 0; filter: blur(2px); pointer-events: none; }
.tapp-es2 .es2-hidden-card.is-chosen {
  z-index: 20;
  transform: translateY(-34px) rotate(0) scale(1.14);
  pointer-events: none;
}
@keyframes es2-deal { from { opacity: 0; transform: rotate(0) translateY(130px) scale(.8); } }

/* ── Resultado ──────────────────────────────────────────────────── */
.tapp-es2 .es2-result {
  display: grid;
  grid-template-columns: minmax(18rem, .76fr) minmax(0, 1.24fr);
  min-height: 660px;
  background:
    radial-gradient(circle at 78% -10%, rgba(112, 42, 70, .3), transparent 45%),
    linear-gradient(145deg, #12111a, #07080d 72%);
}
.tapp-es2 .es2-result:focus { outline: none; }
.tapp-es2 .es2-card-stage {
  position: relative;
  display: grid;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  background-image: linear-gradient(rgba(6, 7, 12, .48), rgba(6, 7, 12, .83)), var(--es2-hero);
  background-size: cover;
  background-position: 73% center;
}
.tapp-es2 .es2-card-aura {
  position: absolute;
  width: min(86%, 24rem);
  aspect-ratio: 1;
  border: 1px solid rgba(223, 189, 112, .2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 40, 70, .42), rgba(223, 189, 112, .1) 50%, transparent 70%);
  box-shadow: 0 0 75px rgba(223, 189, 112, .12);
}
.tapp-es2 .es2-card {
  position: relative;
  z-index: 2;
  width: min(72%, 18rem);
  margin: 0;
  perspective: 1000px;
}
.tapp-es2 .es2-card img {
  display: block;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 237, 190, .22);
}
.tapp-es2 .es2-result.is-revealed .es2-card { animation: es2-flip .78s cubic-bezier(.2, .7, .2, 1) both; }
.tapp-es2 .es2-result.is-revealed .es2-card-aura { animation: es2-aura 1s .18s ease both; }
@keyframes es2-flip { from { opacity: 0; transform: rotateY(90deg) translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes es2-aura { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.tapp-es2 .es2-reading { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.2rem); }
.tapp-es2 .es2-suit { margin: 0 0 .35rem; color: rgba(255, 245, 223, .5); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tapp-es2 .es2-result-title {
  margin: 0;
  color: #fff4dc;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 5vw, 4.35rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
}
.tapp-es2 .es2-key { margin: .55rem 0 1.25rem; color: var(--es2-gold); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.05rem, 2vw, 1.28rem); font-style: italic; }
.tapp-es2 .es2-message { max-width: 40rem; margin: .55rem 0 0; padding: .72rem .9rem; border-left: 2px solid rgba(223, 189, 112, .36); background: rgba(255, 255, 255, .025); }
.tapp-es2 .es2-message h3 { margin: 0 0 .25rem; color: rgba(223, 189, 112, .82); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.tapp-es2 .es2-message p { margin: 0; color: rgba(255, 245, 223, .86); font-size: .95rem; line-height: 1.58; }
.tapp-es2 .es2-message-main { border-left-color: var(--es2-gold); }
.tapp-es2 .es2-message-advice { border: 1px solid rgba(223, 189, 112, .15); border-left: 3px solid #b5743c; border-radius: 0 11px 11px 0; background: rgba(223, 189, 112, .07); }
.tapp-es2 .es2-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.tapp-es2 .es2-button-quiet { color: rgba(255, 245, 223, .82); border-color: rgba(223, 189, 112, .27); background: rgba(255, 255, 255, .035); box-shadow: none; }
.tapp-es2 .es2-button-quiet:hover { border-color: rgba(223, 189, 112, .58); box-shadow: none; }
.tapp-es2 .es2-share-status { min-height: 1.25em; margin: .65rem 0 0; color: #d8c08b; font-size: .8rem; }
.tapp-es2 .es2-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .tapp-es2 .es2-welcome { min-height: 650px; align-items: flex-end; padding: 1.15rem; background-position: 69% center; }
  .tapp-es2 .es2-welcome::before { background: linear-gradient(0deg, rgba(6, 7, 13, .98) 0%, rgba(7, 8, 15, .9) 52%, rgba(8, 8, 14, .12) 82%); }
  .tapp-es2 .es2-display { max-width: 24rem; font-size: clamp(2.1rem, 11vw, 3.35rem); }
  .tapp-es2 .es2-intro { font-size: .96rem; line-height: 1.53; }
  .tapp-es2 .es2-ceremony, .tapp-es2 .es2-pick { min-height: 530px; padding: 1.2rem .7rem; }
  .tapp-es2 .es2-fan { max-width: 360px; padding: 1.35rem .15rem .5rem; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .65rem 0; }
  .tapp-es2 .es2-hidden-card { width: min(calc(100% - .42rem), 64px); grid-column: span 2; transform: none; }
  .tapp-es2 .es2-hidden-card:nth-child(6) { grid-column: 2 / span 2; }
  .tapp-es2 .es2-hidden-card:hover { transform: translateY(-8px) scale(1.04); }
  .tapp-es2 .es2-hidden-card.is-chosen { transform: translateY(-13px) scale(1.09); }
  .tapp-es2 .es2-result { grid-template-columns: 1fr; }
  .tapp-es2 .es2-card-stage { min-height: 470px; }
  .tapp-es2 .es2-card { width: min(58%, 15.5rem); }
  .tapp-es2 .es2-reading { padding: 1.8rem 1.15rem 2rem; }
  .tapp-es2 .es2-result-title { font-size: clamp(2.35rem, 12vw, 3.7rem); }
}

@media (max-width: 420px) {
  .tapp-es2 .es2-pick-hint { padding: 0 .8rem; font-size: .9rem; }
  .tapp-es2 .es2-fan { row-gap: .55rem; }
  .tapp-es2 .es2-hidden-card { width: min(100%, 61px); }
  .tapp-es2 .es2-card-stage { min-height: 410px; }
  .tapp-es2 .es2-actions .es2-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tapp-es2 .es2-deck img, .tapp-es2 .es2-progress span, .tapp-es2 .es2-hidden-card,
  .tapp-es2 .es2-result.is-revealed .es2-card, .tapp-es2 .es2-result.is-revealed .es2-card-aura { animation: none; }
  .tapp-es2 .es2-button, .tapp-es2 .es2-hidden-card { transition: none; }
}

@media (forced-colors: active) {
  .tapp-es2 .es2-phase, .tapp-es2 .es2-message { border: 1px solid CanvasText; }
  .tapp-es2 .es2-button { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
}