/* Concepto: una mesa de lectura a la luz de las velas; columna central, cartas que se despliegan como sobre terciopelo. */
:root {
  --noche: #15101f;
  --terciopelo: #241a33;
  --terciopelo-2: #33254a;
  --oro: #d1ad63;
  --oro-claro: #ecd49b;
  --pergamino: #f1e6cf;
  --tinta: #2b1f17;
  --carmin: #a3313f;
  --niebla: #b9aecb;
  --linea: rgba(209, 173, 99, .35);
  --f-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-texto: "Cormorant Garamond", "Garamond", Georgia, serif;
  --carta-w: 104px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--pergamino);
  font-family: var(--f-texto);
  font-size: 19px;
  line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}
.cielo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(209,173,99,.13), transparent 70%),
    radial-gradient(1px 1px at 12% 22%, var(--oro-claro), transparent),
    radial-gradient(1px 1px at 78% 14%, var(--oro-claro), transparent),
    radial-gradient(1.5px 1.5px at 64% 42%, var(--niebla), transparent),
    radial-gradient(1px 1px at 30% 70%, var(--niebla), transparent),
    radial-gradient(1px 1px at 88% 66%, var(--oro-claro), transparent),
    linear-gradient(var(--noche), var(--terciopelo));
}
#app { max-width: 720px; margin: 0 auto; padding-block: 40px 32px; }
.barra { max-width: 720px; margin: 0 auto; padding-block: 18px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; border-bottom: 1px solid var(--linea); padding-bottom: 14px; }
.barra-marca { font-family: var(--f-display); font-size: .9rem; letter-spacing: .08em; color: var(--oro-claro); }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; counter-reset: paso; }
.pasos li { counter-increment: paso; font-family: var(--f-display); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--niebla); opacity: .55; display: flex; align-items: center; gap: 6px; }
.pasos li::before { content: counter(paso, upper-roman); display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: .58rem; letter-spacing: 0; }
.pasos li.hecho { opacity: .85; color: var(--oro); }
.pasos li.actual { opacity: 1; color: var(--oro-claro); }
.pasos li.actual::before { background: var(--oro); color: var(--noche); border-color: var(--oro); }
@media (max-width: 520px) { .barra { justify-content: center; } .pasos { gap: 12px; } }
.pantalla { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; animation: aparecer .6s ease both; }
.pantalla-ancha { max-width: 100%; }
@keyframes aparecer { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1, h2, .eyebrow, .btn, label { font-family: var(--f-display); }
h1, h2 { text-wrap: balance; margin: 0; font-weight: 500; color: var(--oro-claro); }
.marca { font-size: clamp(2.1rem, 7vw, 3.4rem); letter-spacing: .04em; line-height: 1.1; }
h2 { font-size: clamp(1.4rem, 4.5vw, 2rem); }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; color: var(--oro); }
.sello { font-size: 1.4rem; color: var(--oro); letter-spacing: .5em; }
.intro { max-width: 34em; margin: 0; color: var(--pergamino); font-size: 1.1rem; }

.garantias { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); width: 100%; }
.garantias li { background: var(--terciopelo); padding: 16px 18px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.garantias b { font-family: var(--f-display); font-weight: 500; font-size: .86rem; letter-spacing: .06em; color: var(--oro-claro); }
.garantias span { color: var(--niebla); font-size: 1rem; line-height: 1.35; }
@media (max-width: 520px) { .garantias { grid-template-columns: 1fr; } }

.btn {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  padding: 14px 26px; border-radius: 2px; border: 1px solid var(--oro); transition: background .2s, color .2s, transform .2s;
}
.btn-oro { background: var(--oro); color: var(--noche); }
.btn-oro:hover { background: var(--oro-claro); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn:active { transform: translateY(1px); }
.btn-sutil { background: transparent; color: var(--oro); border-color: var(--linea); }
.btn-sutil:hover { border-color: var(--oro); }
.btn:focus-visible, .cat:focus-visible, .carta-boca:focus-visible, .chip:focus-visible, .enlace:focus-visible, textarea:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.nota-gratis { margin: 0; color: var(--niebla); font-style: italic; }

/* Categorías */
.categorias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
@media (max-width: 560px) { .categorias { grid-template-columns: 1fr; } }
.cat {
  background: var(--terciopelo); border: 1px solid var(--linea); color: var(--pergamino); cursor: pointer;
  padding: 26px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; transition: border-color .2s, transform .2s;
}
.cat:hover { border-color: var(--oro); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px var(--linea); }
.cat .glifo { font-size: 2.4rem; color: var(--carmin); line-height: 1; }
.cat[data-cat="dinero"] .glifo, .cat[data-cat="trabajo"] .glifo { color: var(--oro); }
.cat b { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; letter-spacing: .08em; color: var(--oro-claro); }
.cat small { font-family: var(--f-display); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.cat span { color: var(--niebla); font-size: .98rem; line-height: 1.3; }

/* Dorso de carta */
.dorso {
  width: var(--carta-w); aspect-ratio: 7 / 12; max-width: 100%; border-radius: 6px; border: 2px solid var(--oro);
  background:
    radial-gradient(circle at 50% 50%, transparent 15%, rgba(209,173,99,.55) 16%, transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 32%, rgba(209,173,99,.3) 33%, transparent 35%),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--terciopelo-2) 0 10deg, var(--carmin) 10deg 11deg, var(--terciopelo-2) 11deg 30deg),
    var(--terciopelo-2);
  box-shadow: inset 0 0 0 4px var(--terciopelo), inset 0 0 0 5px var(--linea), 0 6px 18px rgba(0,0,0,.45);
}

/* Barajado */
.barajado { position: relative; width: 100%; height: 210px; }
.barajado .dorso { position: absolute; left: 50%; top: 50%; --carta-w: 92px; margin: -79px 0 0 -46px; transition: transform .55s cubic-bezier(.5,.1,.3,1); }
.barajado.intenso .dorso { transition-duration: .28s; }

.form-pregunta { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.form-pregunta label { color: var(--oro-claro); font-size: 1.05rem; letter-spacing: .04em; }
textarea {
  width: 100%; resize: vertical; min-height: 92px; padding: 14px 16px; font: inherit; font-size: 1.15rem;
  background: rgba(21,16,31,.7); color: var(--pergamino); border: 1px solid var(--linea); border-radius: 2px;
}
textarea::placeholder { color: var(--niebla); opacity: .7; }
.ejemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { background: transparent; border: 1px dashed var(--linea); color: var(--niebla); font: inherit; font-size: .98rem; font-style: italic; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.chip:hover { color: var(--oro-claro); border-color: var(--oro); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.error { color: var(--oro-claro); margin: 0; font-style: italic; }

/* Mesa */
.pregunta-hecha { margin: 0; font-style: italic; font-size: 1.25rem; color: var(--oro-claro); max-width: 30em; }
.pregunta-hecha::before { content: "“"; } .pregunta-hecha::after { content: "”"; }
.tirada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 560px; }
.ranura { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ranura .titulo { font-family: var(--f-display); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); min-height: 2.4em; line-height: 1.2; }
.hueco-num { font-family: var(--f-display); color: var(--linea); font-size: 1.1rem; }
.hueco:has(.carta3d) .hueco-num { display: none; }
.hueco { display: grid; place-items: center; width: 100%; max-width: var(--carta-w); aspect-ratio: 7 / 12; border: 1px dashed var(--linea); border-radius: 6px; perspective: 900px; }
.hueco.activo { border-color: var(--oro); box-shadow: 0 0 22px rgba(209,173,99,.25); }

.hueco > .carta3d { place-self: stretch; }
.carta3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.3,.1,.2,1); transform: rotateY(180deg); }
.carta3d.vuelta { transform: rotateY(0deg); }
.carta3d > * { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carta3d .dorso { transform: rotateY(180deg); width: 100%; }
.cara {
  border-radius: 6px; background: var(--pergamino); color: var(--tinta); border: 2px solid var(--oro);
  box-shadow: inset 0 0 0 3px var(--pergamino), inset 0 0 0 4px var(--tinta), 0 6px 18px rgba(0,0,0,.45);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10% 6%;
}
.cara.invertida .cara-int { transform: rotate(180deg); }
.cara-int { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.cara .num { font-family: var(--f-display); font-size: .8rem; font-weight: 700; }
.cara .sim { font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; color: var(--carmin); }
.cara.palo-oros .sim, .cara.palo-bastos .sim { color: var(--tinta); }
.pips { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px 6px; width: 78%; color: var(--carmin); font-style: normal; line-height: 1; }
.pips i { font-style: normal; width: 40%; text-align: center; font-size: clamp(.7rem, 2.6vw, 1rem); }
.pips-2 i, .pips-3 i { width: 100%; font-size: clamp(.9rem, 3.4vw, 1.25rem); }
.cara.palo-oros .pips, .cara.palo-bastos .pips { color: var(--tinta); }
.cara .num { letter-spacing: .06em; }
.cara.arcano-corte .num { font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; }
.cara .nom { font-family: var(--f-display); font-size: .55rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; text-align: center; }
.ranura .estado { font-size: .85rem; color: var(--niebla); font-style: italic; min-height: 1.3em; }

.instruccion { margin: 6px 0 0; color: var(--niebla); font-style: italic; }
.abanico { position: relative; width: 100%; max-width: 620px; height: 170px; margin-top: 4px; }
.abanico[hidden] { display: none !important; }
.carta-boca { position: absolute; bottom: 0; left: 50%; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 120%; transition: transform .3s; }
.carta-boca .dorso { --carta-w: 70px; }
.carta-boca:hover, .carta-boca:focus-visible { z-index: 5; }
.carta-boca.elegida { opacity: 0; pointer-events: none; transition: opacity .3s; }
.abanico.bloqueado .carta-boca { pointer-events: none; filter: brightness(.6); }

.lecturas { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.lectura { background: var(--terciopelo); border: 1px solid var(--linea); padding: 18px 20px; animation: aparecer .8s ease both; }
.lectura h3 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.lectura .nombre-carta { font-family: var(--f-display); color: var(--oro-claro); font-size: 1.1rem; margin: 0 0 8px; }
.lectura p { margin: 0 0 8px; }
.lectura .gancho { color: var(--oro-claro); font-style: italic; margin: 10px 0 0; }
.lectura.final { border-color: var(--oro); }
.cierre { text-align: center; color: var(--niebla); font-style: italic; margin: 0; }
.acciones-mesa { margin-top: 6px; }

/* Pago */
.precio { display: flex; flex-direction: column; align-items: center; font-family: var(--f-display); color: var(--oro-claro); font-size: 2rem; }
.precio small { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.aviso-demo { margin: 0; max-width: 30em; color: var(--niebla); font-size: .95rem; font-style: italic; }

.pie { max-width: 720px; margin: 0 auto; padding-block: 18px 32px; border-top: 1px solid var(--linea); text-align: center; color: var(--niebla); font-size: .92rem; }
.pie p { margin: 0 0 6px; }
.pie-legal a { color: var(--oro); }
.enlace { background: none; border: 0; color: var(--oro); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }

@media (max-width: 520px) {
  :root { --carta-w: 80px; }
  body { font-size: 18px; }
  .tirada { gap: 8px; }
  .carta-boca .dorso { --carta-w: 54px; }
  .abanico { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* La tarotista lee la carta */
.leyendo { margin: 0; text-align: center; color: var(--oro-claro); font-style: italic; font-size: 1.1rem; }
.puntos i { font-style: normal; display: inline-block; animation: punto 1.2s infinite both; }
.puntos i:nth-child(2) { animation-delay: .2s; } .puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes punto { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
.revela { animation: aparecer .7s ease both; }

/* Cómo es la tirada */
.como { width: 100%; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 18px; }
.como-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: como; text-align: left; }
.como-pasos li { counter-increment: como; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.como-pasos li::before { content: counter(como, upper-roman); font-family: var(--f-display); color: var(--oro); font-size: 1.3rem; line-height: 1; margin-bottom: 4px; }
.como-pasos b { font-family: var(--f-display); font-weight: 500; font-size: .82rem; letter-spacing: .06em; color: var(--oro-claro); }
.como-pasos span { color: var(--niebla); font-size: .98rem; line-height: 1.35; }
@media (max-width: 680px) { .como-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .como-pasos { grid-template-columns: 1fr; } }
.significado { margin: -2px 0 12px; padding: 8px 12px; border-left: 2px solid var(--oro); background: rgba(209,173,99,.07); color: var(--niebla); font-size: 1rem; }
.significado span { display: block; font-family: var(--f-display); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }

/* Selene */
.selene { display: flex; gap: 16px; align-items: center; text-align: left; max-width: 560px; margin: 6px 0; }
.selene-avatar { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--oro);
  background: radial-gradient(circle at 35% 30%, var(--terciopelo-2), var(--noche)); box-shadow: 0 0 0 4px var(--terciopelo), 0 0 0 5px var(--linea), 0 0 30px rgba(209,173,99,.18); }
.selene-avatar span { font-size: 2rem; color: var(--oro-claro); }
.selene-texto { display: flex; flex-direction: column; min-width: 0; }
.selene-texto b { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; letter-spacing: .08em; color: var(--oro-claro); }
.selene-texto span { font-family: var(--f-display); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.selene-texto p { margin: 6px 0 0; font-style: italic; color: var(--pergamino); }

/* Ritual */
.respiro { width: 200px; height: 200px; max-width: 70vw; max-height: 70vw; display: grid; place-items: center; margin: 18px 0; }
.respiro-luz { width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--oro);
  background: radial-gradient(circle, rgba(236,212,155,.35), rgba(209,173,99,.06) 60%, transparent 70%);
  animation: respirar 8s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { transform: scale(.55); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
.ritual-guia { margin: 0; font-size: 1.5rem; font-style: italic; color: var(--oro-claro); min-height: 2.2em; }
.ritual-pregunta { margin: 0; color: var(--niebla); font-style: italic; max-width: 30em; }

/* Botón de sonido */
.sonido { position: fixed; z-index: 20; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
  background: rgba(21,16,31,.75); color: var(--oro); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 12px;
  font-family: var(--f-display); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(4px); }
.sonido[aria-pressed="true"] { color: var(--noche); background: var(--oro); border-color: var(--oro); }
.sonido:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
@media (max-width: 860px) { .barra { padding-top: 48px; } }

/* Carta del día */
.carta-dia { width: 100%; max-width: 560px; border: 1px solid var(--oro); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-align: left; background: rgba(209,173,99,.05); animation: aparecer .7s ease both; }
.carta-dia h3 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .06em; color: var(--oro-claro); }
.carta-dia p { margin: 0; color: var(--niebla); }
.carta-dia-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.carta-dia-campos > label { font-family: var(--f-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.carta-dia select, .carta-dia input[type=tel] { font: inherit; font-size: 1.05rem; background: var(--noche); color: var(--pergamino); border: 1px solid var(--linea); border-radius: 2px; padding: 8px 10px; }
.carta-dia input[type=tel] { flex: 1 1 200px; min-width: 0; }
.carta-dia select:focus-visible, .carta-dia input:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.consent { font-family: var(--f-texto); display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; color: var(--pergamino); line-height: 1.35; cursor: pointer; }
.consent input { margin-top: 4px; accent-color: var(--oro); width: 18px; height: 18px; flex: none; }
.carta-dia .btn { align-self: flex-start; }
.carta-dia-ok { margin: 0; color: var(--oro-claro); font-style: italic; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }