:root {
  --fondo: #0b1029;
  --superficie: #141c42;
  --superficie-2: #1c2656;
  --texto: #eef0ff;
  --suave: #aeb6d8;
  --acento: #d9b45a;
  --acento-texto: #1c1630;
  --error: #ff9a9a;
  --borde: #2c386e;
  --reverso-1: #16204d;
  --reverso-2: #1f2c63;
  --frente: #fbf6ea;
  --frente-texto: #2a2140;
  --radio: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 .6rem; }
h2 { font-size: 1.2rem; margin: 0 0 .4rem; color: var(--acento); }

.cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--borde);
}
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.logo { display: block; height: 46px; width: auto; overflow: visible; }
.logo .logo-halo { animation: halo 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { opacity: .65; scale: .9; } }
@media (max-width: 480px), (max-height: 700px) { .logo { height: 36px; } }
@media (prefers-reduced-motion: reduce) { .logo .logo-halo { animation: none; } }
.contador { color: var(--suave); font-size: .9rem; }
.contenido { max-width: 760px; margin: 0 auto; padding: 16px; }
.pie { max-width: 760px; margin: 24px auto; padding: 0 16px 24px; color: var(--suave); font-size: .8rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 16px; margin-bottom: 16px; }
.suave { color: var(--suave); }
.aviso { background: var(--superficie-2); border-left: 3px solid var(--acento); padding: 10px 12px; border-radius: 6px; }
.aviso-simulado { background: #4a3b10; color: #ffe7a8; padding: 8px 12px; border-radius: 8px; font-size: .85rem; }
.alerta { background: #4a2030; color: var(--error); padding: 10px 12px; border-radius: 8px; }
.error { color: var(--error); font-size: .9rem; margin: .3rem 0 0; }
.mensaje-ia { font-size: 1.05rem; }
.pregunta-reformulada { font-family: Georgia, serif; font-size: 1.2rem; font-style: italic; margin: 0 0 .3rem; }
.objetivo { font-size: 1.1rem; color: var(--acento); min-height: 1.6em; margin: .8rem 0; text-align: center; }
.cargando { text-align: center; color: var(--suave); animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .4; } }

/* Formularios */
.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 6px; color: var(--suave); font-size: .95rem; }
.campo input:not([type=checkbox]), .campo textarea {
  width: 100%; padding: 12px; font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo-casilla label { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; }
.campo-casilla input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--acento); }
.boton {
  display: inline-block; width: 100%; padding: 14px 18px; border: 0; border-radius: 999px;
  background: var(--acento); color: var(--acento-texto); font: 600 1rem system-ui, sans-serif;
  text-align: center; text-decoration: none; cursor: pointer;
}
.boton:disabled { opacity: .6; cursor: wait; }
.boton.secundario { background: transparent; color: var(--acento); border: 1px solid var(--acento); }

/* Crisis */
.lineas { list-style: none; padding: 0; margin: 16px 0; }
.lineas li { background: var(--superficie-2); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.lineas strong { display: block; color: var(--acento); font-size: 1.15rem; }

/* Cartas */
.carta { width: var(--ancho, 64px); aspect-ratio: 4 / 7; perspective: 800px; }
.carta-interior {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4, .2, .2, 1);
}
.carta.volteada .carta-interior { transform: rotateY(180deg); }
.cara { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.reverso {
  background:
    var(--reverso-img, none) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(217, 180, 90, .55) 29%, transparent 31%),
    repeating-linear-gradient(45deg, var(--reverso-1) 0 6px, var(--reverso-2) 6px 12px);
  border: 2px solid var(--acento);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.frente {
  transform: rotateY(180deg);
  background: var(--frente); color: var(--frente-texto); border: 2px solid var(--acento);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 6px; text-align: center;
}
.frente .numero { font-family: Georgia, serif; font-size: 1.2rem; }
.frente .nombre { font-family: Georgia, serif; font-size: .85rem; line-height: 1.2; }
.frente .contenido-frente { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.frente.invertida .contenido-frente, .frente.invertida .imagen-carta { transform: rotate(180deg); }
/* Con imagen, el frente es la ilustración de la carta a sangre */
.frente.con-imagen { padding: 0; overflow: hidden; background: #111; }
.frente .imagen-carta { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frente.con-imagen .contenido-frente { display: none; }

/* Abanico: mazo boca abajo */
.abanico {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px;
  margin: 12px 0;
}
.abanico button {
  padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 4 / 7;
  transition: transform .15s ease;
}
.abanico button .reverso { position: static; display: block; width: 100%; height: 100%; border-width: 1px; border-radius: 5px; }
.abanico button:hover, .abanico button:focus-visible { transform: translateY(-4px); outline: none; }
.abanico button:focus-visible .reverso { outline: 2px solid var(--acento); outline-offset: 2px; }
.abanico.bloqueado button { pointer-events: none; opacity: .6; }

.resultado .bloque { opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; margin-top: 18px; }
.resultado .bloque.visible { opacity: 1; transform: none; }

@media (min-width: 640px) {
  .contenido { padding: 24px; }
  .tarjeta { padding: 28px; }
  .boton { width: auto; }
  .abanico { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .carta-interior, .resultado .bloque, .abanico button { transition: none; }
  .detalle-carta { animation: none; }
  .llama, .resplandor, .mano-cliente, .mano-tarotista { animation: none; transition: none; }
}

/* =====================================================================
   Escena: la mesa del tarotista
   Todas las medidas internas usan cqw (ancho de la mesa) para escalar
   igual en celular y en escritorio.
   ===================================================================== */
.escena { position: relative; }
.pergamino {
  position: relative; z-index: 2; margin: 0 auto -14px; max-width: 520px; padding: 12px 22px 16px;
  background: linear-gradient(180deg, #efe2bd, #dcc792 60%, #cdb57c);
  color: #3a2a14; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  clip-path: polygon(0 6%, 4% 0, 30% 3%, 55% 0, 80% 4%, 100% 0, 98% 50%, 100% 96%, 72% 100%, 45% 97%, 20% 100%, 2% 96%, 1% 50%);
}
.pergamino h1 { margin: 0; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; color: #5a3b12; }
.pergamino p { margin: 4px 0 0; font-family: Georgia, serif; font-style: italic; font-size: 1rem; }
.escena .mesa { margin-top: 22px; }
/* El objetivo y el aviso de carga van escritos sobre el mantel */
.mesa .objetivo, .mesa .cargando {
  position: absolute; z-index: 6; left: 18cqw; right: 18cqw; margin: 0; text-align: center;
  font: 3.9cqw/1.25 Georgia, serif; color: #f0cf7e; text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.mesa .objetivo { bottom: 2.4cqw; }
.mesa[data-disposicion="cruz"] .objetivo { left: 3cqw; right: 30cqw; }
.mesa .cargando { top: 50%; translate: 0 -50%; }

.mesa {
  container-type: inline-size;
  position: relative; overflow: hidden; margin: 0 auto;
  width: min(100%, calc((100svh - 24px) * .8)); min-width: min(100%, 300px);
  aspect-ratio: 4 / 5; border-radius: 18px;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .75), 0 10px 30px rgba(0, 0, 0, .5);
  --reverso-1: #16204d; --reverso-2: #1f2c63;
}
.mesa.ajuste-rueda {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 50% 42%, #1d2b63 0%, #111a42 55%, #070b22 100%);
}
/* La rueda va en un pseudo-elemento: así sus medidas en cqw se toman de la mesa. */
.mesa.ajuste-rueda::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 118cqw; aspect-ratio: 1; left: -9cqw; top: calc(41% - 59cqw);
  background: var(--fondo-mesa) center / contain no-repeat;
}
.mesa.ajuste-foto { background: var(--fondo-mesa) center / cover no-repeat, #0b1029; }
.definiciones { position: absolute; }

/* Velas y su luz sobre el mantel */
.vela { position: absolute; top: -3cqw; width: 13cqw; z-index: 1; pointer-events: none; }
.vela.izquierda { left: -2cqw; }
.vela.derecha { right: -2cqw; }
.vela svg { display: block; width: 100%; overflow: visible; }
.resplandor {
  position: absolute; left: 50%; top: 4cqw; width: 70cqw; height: 70cqw; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 190, 110, .30), rgba(255, 150, 60, .10) 35%, transparent 65%);
  animation: parpadeo 3.2s ease-in-out infinite alternate;
}
.vela.derecha .resplandor { animation-delay: -1.3s; }
.llama { transform-origin: 30px 40px; animation: llama 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #ffb347); }
.vela.derecha .llama { animation-duration: 1.9s; animation-delay: -.7s; }
@keyframes llama {
  0% { transform: scale(1, 1) skewX(0); }
  30% { transform: scale(.96, 1.08) skewX(2deg); }
  60% { transform: scale(1.04, .94) skewX(-3deg); }
  100% { transform: scale(.98, 1.05) skewX(1deg); }
}
@keyframes parpadeo { 0% { opacity: .75; } 50% { opacity: 1; } 100% { opacity: .85; } }

/* Ranuras grabadas en el mantel (posiciones de la tirada) */
.ranuras { position: absolute; inset: 0; z-index: 2; }
.ranura {
  --ancho: 26cqw; --x: 50%; --y: 59%;
  position: absolute; width: var(--ancho); aspect-ratio: 4 / 7;
  left: calc(var(--x) - var(--ancho) / 2); top: calc(var(--y) - var(--ancho) * .875);
}
.ranura .marco {
  position: absolute; inset: 0; border-radius: 1.4cqw;
  border: .35cqw solid rgba(212, 179, 106, .55);
  box-shadow: inset 0 0 0 .6cqw rgba(212, 179, 106, .08), 0 0 2cqw rgba(0, 0, 0, .35);
  background: radial-gradient(circle, rgba(212, 179, 106, .10), transparent 70%);
}
.ranura .marco::after {
  content: "✦"; position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(212, 179, 106, .45); font-size: calc(var(--ancho) * .28);
}
.ranura.activa .marco { border-color: #f0cf7e; animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 3.5cqw rgba(240, 207, 126, .55), inset 0 0 2cqw rgba(240, 207, 126, .25); } }
.ranura .rotulo {
  position: absolute; left: 50%; top: calc(100% + 1.2cqw); translate: -50% 0; white-space: nowrap;
  font: 2.8cqw/1.15 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #d4b36a;
  text-shadow: 0 1px 2px #000;
  width: calc(var(--ancho) + 2cqw); white-space: normal; text-align: center; overflow-wrap: anywhere;
}
.ranura .carta { position: absolute; inset: 0; width: 100%; }
.ranura .cara { border-radius: 1.4cqw; }
.ranura .frente .numero { font-size: calc(var(--ancho) * .16); }
.ranura .frente .nombre { font-size: calc(var(--ancho) * .11); }

/* Tres cartas en fila */
.mesa[data-disposicion="tres"] .ranura-1 { --x: 20.5%; }
.mesa[data-disposicion="tres"] .ranura-3 { --x: 79.5%; }

/* Cruz celta: cruz a la izquierda y báculo a la derecha */
.mesa[data-disposicion="cruz"] .ranura { --ancho: 11.5cqw; }
.mesa[data-disposicion="cruz"] .ranura .rotulo {
  font-size: 2.6cqw; letter-spacing: 0; top: auto; bottom: .8cqw; left: auto; right: .8cqw; translate: none;
  width: 4.2cqw; height: 4.2cqw; display: grid; place-items: center; border-radius: 50%;
  background: rgba(7, 11, 34, .8); border: .25cqw solid #d4b36a; z-index: 3;
}
.mesa[data-disposicion="cruz"] .ranura-1 { --x: 34%; --y: 60.5%; }
.mesa[data-disposicion="cruz"] .ranura-2 { --x: 34%; --y: 60.5%; z-index: 1; }
.mesa[data-disposicion="cruz"] .ranura-2 .marco { transform: rotate(90deg); border-style: dashed; }
.mesa[data-disposicion="cruz"] .ranura-2 .carta { transform: rotate(90deg); }
.mesa[data-disposicion="cruz"] .ranura-2 .rotulo { bottom: auto; top: -2cqw; right: -5cqw; }
.mesa[data-disposicion="cruz"] .ranura-3 { --x: 34%; --y: 78%; }
.mesa[data-disposicion="cruz"] .ranura-4 { --x: 12%; --y: 60.5%; }
.mesa[data-disposicion="cruz"] .ranura-5 { --x: 34%; --y: 43%; }
.mesa[data-disposicion="cruz"] .ranura-6 { --x: 56%; --y: 60.5%; }
.mesa[data-disposicion="cruz"] .ranura-7 { --x: 82%; --y: 88%; }
.mesa[data-disposicion="cruz"] .ranura-8 { --x: 82%; --y: 71%; }
.mesa[data-disposicion="cruz"] .ranura-9 { --x: 82%; --y: 54%; }
.mesa[data-disposicion="cruz"] .ranura-10 { --x: 82%; --y: 37%; }

/* Abanico: el mazo boca abajo, en arco */
.abanico { position: absolute; left: 50%; top: 23.5cqw; width: 0; height: 0; z-index: 4; }
.abanico button {
  --ang: calc((var(--i) / max(var(--n) - 1, 1) - .5) * 64deg);
  position: absolute; left: -5.5cqw; bottom: 0; width: 11cqw; aspect-ratio: 4 / 7; padding: 0; border: 0;
  background: none; cursor: pointer;
  transform-origin: 50% calc(100% + 64cqw);
  transform: rotate(var(--ang));
  transition: transform .45s cubic-bezier(.3, .7, .3, 1), filter .2s;
  transition-delay: var(--retraso, 0ms), 0ms;
}
/* Barajado: el mazo recogido en el centro, partido en dos mitades para el riffle,
   y luego repartido de nuevo en abanico (cada carta con su pequeño retraso). */
.abanico button { --pila-y: 7cqw; }
.abanico.recogido button {
  transform: translate(calc(var(--jx, 0) * .35cqw), calc(var(--pila-y) + var(--jy, 0) * .25cqw - var(--i) * .03cqw))
             rotate(calc(var(--jr, 0) * 1.4deg));
}
.abanico.partido button {
  transform: translate(calc(var(--lado, 1) * 7.5cqw + var(--jx, 0) * .3cqw), calc(var(--pila-y) - 1.5cqw - var(--i) * .03cqw))
             rotate(calc(var(--lado, 1) * 9deg + var(--jr, 0) * 1deg));
}
.abanico.barajando button { pointer-events: none; }
.abanico.esperando button { cursor: pointer; }
.abanico.esperando:hover button, .abanico.esperando button:focus-visible { filter: brightness(1.3); }
.abanico button .reverso {
  position: absolute; inset: 0; border-radius: 1cqw; border-width: .3cqw;
  box-shadow: -.4cqw .2cqw .8cqw rgba(0, 0, 0, .55);
}
.abanico:not(.recogido):not(.barajando) button:hover,
.abanico:not(.recogido):not(.barajando) button:focus-visible {
  transform: rotate(var(--ang)) translateY(-3.5cqw); outline: none; filter: brightness(1.25);
}
.abanico button:focus-visible .reverso { outline: .5cqw solid #f0cf7e; }
.abanico.bloqueado button { pointer-events: none; }

/* Mano del cliente, apoyada sobre el mantel: el brazo entra por la izquierda y la mano
   se estira hacia el mazo. */
.mano-cliente {
  position: absolute; z-index: 5; width: 58cqw; left: -12cqw; bottom: 18cqw;
  rotate: 6deg; transform-origin: 0% 60%; pointer-events: none;
  filter: drop-shadow(1.5cqw 2cqw 1.5cqw rgba(0, 0, 0, .55));
  animation: respirar 7s ease-in-out infinite;
}
@keyframes respirar { 50% { translate: .5cqw -.4cqw; rotate: 7deg; } }

/* Mano de la tarotista: está al otro lado de la mesa (arriba) y entra por el borde superior,
   junto al mazo. Al barajar se acerca a las cartas. */
.mano-tarotista {
  position: absolute; z-index: 5; width: 46cqw; left: 47cqw; top: -8cqw;
  rotate: 102deg; transform-origin: 50% 50%; pointer-events: none;
  filter: drop-shadow(-1.2cqw 1.8cqw 1.4cqw rgba(0, 0, 0, .55));
  transition: translate .6s cubic-bezier(.3, .7, .3, 1);
  animation: vaiven-tarotista 9s ease-in-out infinite;
}
@keyframes vaiven-tarotista {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(.35cqw, -.3cqw) rotate(.5deg); }
  50% { transform: translate(.6cqw, .15cqw) rotate(-.3deg); }
  75% { transform: translate(.15cqw, .35cqw) rotate(.4deg); }
}
.mesa.barajando .mano-tarotista { translate: -5cqw 5cqw; }

/* Mano como cursor (solo con mouse): pequeña y traslúcida sobre la mesa; opaca, más grande y
   tomando la carta sobre el mazo. El punto activo (--punto-x/y) queda justo bajo el puntero. */
.mano-cursor {
  --w: 150px;
  position: fixed; left: 0; top: 0; z-index: 60; width: var(--w); aspect-ratio: var(--proporcion-cursor, 2);
  pointer-events: none; opacity: 0; will-change: transform;
}
.mano-cursor img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  rotate: -55deg;
  translate: calc(var(--punto-x, 80%) * -1) calc(var(--punto-y, 70%) * -1);
  transform-origin: var(--punto-x, 80%) var(--punto-y, 70%);
  transition: opacity .2s, scale .2s, rotate .2s, filter .2s;
}
.mano-cursor .abierta { opacity: .45; scale: .72; filter: saturate(.75); }
.mano-cursor .pinza { opacity: 0; scale: .9; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .55)); }
.mano-cursor.visible { opacity: 1; }
.mano-cursor.pinza-activa .abierta { opacity: 0; }
.mano-cursor.pinza-activa .pinza { opacity: 1; scale: 1; rotate: -8deg; }
@media (pointer: fine) {
  .mesa.con-mano, .mesa.con-mano .abanico button { cursor: none; }
}

/* Significado de cada carta: ventana emergente junto a la carta revelada */
.ranura { pointer-events: none; }
.ranura .carta.revelada { pointer-events: auto; cursor: pointer; }
.ranura .carta.revelada:hover .frente, .ranura .carta.revelada:focus-visible .frente {
  box-shadow: 0 0 0 .4cqw #f0cf7e, 0 0 3cqw rgba(240, 207, 126, .6);
}
.ranura .carta.revelada:focus-visible { outline: none; }
.detalle-carta {
  position: fixed; z-index: 70; width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 16px; border-radius: 14px; background: rgba(12, 17, 44, .97); color: var(--texto);
  border: 1px solid var(--acento); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  pointer-events: none; animation: aparecer .18s ease-out;
}
.detalle-carta.hoja {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 70vh;
  border-radius: 18px 18px 0 0; pointer-events: auto; animation: subir .25s ease-out;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } }
@keyframes subir { from { transform: translateY(100%); } }
.detalle-cabecera { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; margin-bottom: 10px; }
.detalle-carta .miniatura { width: 64px; aspect-ratio: 4 / 7; object-fit: cover; border-radius: 6px; border: 1px solid var(--acento); }
.detalle-carta .miniatura.invertida { transform: rotate(180deg); }
.detalle-carta .posicion-nombre { color: var(--suave); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.detalle-carta h3 { margin: 2px 0 6px; font: 1.1rem Georgia, serif; color: var(--acento); }
.detalle-carta p { margin: 0; font-size: .95rem; }
.detalle-carta .claves { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.detalle-carta .claves li { font-size: .72rem; color: var(--suave); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 8px; }
.detalle-carta .afirmacion { margin-top: 10px; font-family: Georgia, serif; font-style: italic; color: var(--acento); }
.detalle-carta .boton { margin-top: 14px; }

/* Botón de sonido en la cabecera */
.acciones-cabecera { display: flex; align-items: center; gap: 12px; }
.boton-sonido {
  width: 36px; height: 36px; padding: 7px; border-radius: 50%; cursor: pointer;
  color: var(--acento); background: transparent; border: 1px solid var(--borde);
}
.boton-sonido svg { width: 100%; height: 100%; display: block; }
.boton-sonido .tachado { display: none; }
.boton-sonido[aria-pressed="false"] .ondas { display: none; }
.boton-sonido[aria-pressed="false"] .tachado { display: inline; }

/* =====================================================================
   Análisis: animación mientras la IA piensa. Runas doradas que giran,
   se encienden con el progreso y viajan en espiral hacia el ojo central.
   ===================================================================== */
.analisis {
  --oro: #e9c46a;
  --oro-brillo: #ffe29a;
  position: fixed; inset: 0; z-index: 80; container-type: size;
  display: grid; place-items: center; align-content: center; gap: 2cqh;
  background:
    radial-gradient(circle at 50% 45%, rgba(24, 30, 70, .82), rgba(4, 6, 20, .96) 70%);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s ease;
}
.analisis.visible { opacity: 1; }
.analisis-escena { position: relative; width: min(78cqw, 58cqh); aspect-ratio: 1; }
.rueda-analisis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rueda-analisis circle, .rueda-analisis path, .rueda-analisis line { fill: none; stroke: var(--oro); }
.rueda-analisis .tenue { opacity: .35; stroke-width: .8; }
.rueda-analisis .divisiones line { stroke-width: 1.4; opacity: .7; }
.rueda-analisis .relleno { fill: var(--oro); stroke: none; }
.rueda-analisis .brillo { fill: #fff6d6; stroke: none; }
.rueda-analisis .rayos line { stroke-width: 3; stroke-linecap: round; }
.giro-exterior, .giro-runas, .giro-rejilla, .ojo { transform-box: fill-box; transform-origin: center; }
.giro-exterior { animation: girar 60s linear infinite; }
.giro-runas { animation: girar 38s linear infinite; }
.giro-rejilla { animation: girar 22s linear infinite reverse; }
.ojo { animation: latir 2.8s ease-in-out infinite; }
@keyframes girar { to { rotate: 360deg; } }
@keyframes latir { 50% { scale: 1.06; filter: drop-shadow(0 0 10px rgba(255, 226, 154, .8)); } }

/* Runas del anillo: además de girar con el anillo, se acercan al ojo y vuelven, en ola
   (cada una con su retraso). En su sistema local, +y apunta hacia el centro. */
.acercar { transform-box: fill-box; transform-origin: center; animation: acercar 3.4s ease-in-out infinite;
  animation-delay: calc(var(--k) * -0.28s); }
@keyframes acercar {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 52px; scale: .78; }
}
/* Runas del anillo: apagadas hasta que el progreso las alcanza. */
.rueda-analisis .runa use { stroke: var(--oro); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .25; transition: opacity .5s, filter .5s; }
.rueda-analisis .runa.encendida use { opacity: 1; stroke: var(--oro-brillo); filter: drop-shadow(0 0 4px rgba(255, 214, 120, .95)) drop-shadow(0 0 10px rgba(255, 190, 80, .6)); }

/* Espiral: pequeñas runas que giran y caen hacia el centro. */
.espiral { position: absolute; inset: 0; pointer-events: none; }
.particula {
  position: absolute; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 10 / 16; margin: -2.6% 0 0 -1.6%;
  animation: espiral var(--dur, 3s) cubic-bezier(.4, 0, .7, 1) var(--retraso, 0s) infinite;
  opacity: 0;
}
.particula svg { width: 100%; height: 100%; overflow: visible; }
.particula use { stroke: var(--oro-brillo); stroke-width: 1.4; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 214, 120, .9)); }
@keyframes espiral {
  0% { transform: rotate(var(--a0)) translateY(calc(min(78cqw, 58cqh) * -.47)) rotate(0deg) scale(1); opacity: 0; }
  15% { opacity: .95; }
  80% { opacity: .8; }
  100% { transform: rotate(calc(var(--a0) + 300deg)) translateY(0) rotate(180deg) scale(.2); opacity: 0; }
}

.analisis-textos { text-align: center; padding: 0 16px; }
.analisis-titulo {
  margin: 0; font: 600 clamp(1.1rem, 3.2cqh, 1.8rem) Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro-brillo); text-shadow: 0 0 12px rgba(255, 200, 90, .55);
}
.analisis-mensaje { margin: .5rem 0 0; min-height: 1.5em; color: #d8cfae; font-family: Georgia, serif; font-style: italic; transition: opacity .35s; }
.analisis-mensaje.cambiando { opacity: 0; }
.analisis-progreso {
  margin: .4rem 0 0; font: clamp(1.6rem, 5cqh, 2.6rem) Georgia, serif; color: var(--oro);
  text-shadow: 0 0 14px rgba(255, 200, 90, .5); font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .giro-exterior, .giro-runas, .giro-rejilla, .ojo, .particula { animation: none; }
  .particula { display: none; }
}

/* Filas del análisis de la tirada (debajo de la rueda de runas): una barra por carta. */
.filas-analisis { list-style: none; margin: 1.6cqh auto 0; padding: 0; display: grid; gap: 1.1cqh; width: min(560px, 92cqw); text-align: left; }
.fila-analisis {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center;
  font: clamp(.82rem, 1.9cqh, 1.02rem)/1.3 Georgia, serif; color: #efe3c2; opacity: .4; transition: opacity .5s;
}
.fila-analisis.activa, .fila-analisis.lista { opacity: 1; }
.barra-analisis {
  display: flex; gap: 3px; height: 20px; padding: 4px 6px; align-items: stretch;
  border: 1.5px solid #c9a24f; border-radius: 99px; background: rgba(0, 0, 0, .35);
}
.barra-analisis i { flex: 1; border-radius: 3px; background: rgba(233, 196, 106, .12); transition: background .3s, box-shadow .3s; }
.barra-analisis i.llena { background: linear-gradient(180deg, #fff1bf, #e9c46a 60%, #b8872f); box-shadow: 0 0 5px rgba(255, 214, 120, .7); }
.fila-analisis.lista .barra-analisis { border-color: #f0d383; box-shadow: 0 0 8px rgba(240, 211, 131, .4); }
.analisis.con-filas .analisis-escena { width: min(70cqw, 42cqh); }
.analisis.con-filas .analisis-mensaje { display: none; }

/* Botón dorado para pasar a la siguiente pregunta */
.acciones-lectura { display: flex; justify-content: center; margin: 22px 0 8px; }
.boton-dorado {
  position: relative; overflow: hidden; width: auto; padding: 16px 30px;
  font: 600 1.05rem Georgia, serif; letter-spacing: .04em; color: #2a1c05;
  background: linear-gradient(180deg, #fff0b8 0%, #edc860 45%, #c9962f 100%);
  border: 1px solid #fff1c2; box-shadow: 0 0 0 3px rgba(233, 196, 106, .25), 0 8px 24px rgba(233, 196, 106, .35);
}
.boton-dorado::after {
  content: ""; position: absolute; inset: -40% auto -40% -30%; width: 30%; rotate: 20deg;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: destello 3.2s ease-in-out infinite;
}
@keyframes destello { 0%, 55% { left: -30%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .boton-dorado::after, .acercar { animation: none; }
}

/* =====================================================================
   Resumen de la sesión (por páginas, dentro de la pantalla)
   ===================================================================== */
body.pagina-resumen .pie { display: none; }
body.pagina-resumen .contenido { padding: 10px 16px 12px; }
.resumen { display: flex; flex-direction: column; height: calc(100svh - 96px); }
.resumen-cabecera { margin: 0 auto 12px; padding: 8px 18px 12px; }
.resumen-cabecera h1 { font-size: .95rem; }
.diapositivas { flex: 1; min-height: 0; position: relative; }
.diapositiva {
  height: 100%; overflow: auto; padding: 18px 18px 16px; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--borde);
}
.resumen-numero { margin: 0; color: var(--suave); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.resumen-titulo { margin: 4px 0 12px; font-size: 1.15rem; font-style: italic; color: var(--texto); }
.diapositiva h3 { margin: 12px 0 4px; font: 1rem Georgia, serif; color: var(--acento); }
.diapositiva p { margin: 0; line-height: 1.5; }
.resumen-cartas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.resumen-cartas li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; width: 92px; }
.resumen-cartas img { width: 64px; aspect-ratio: 4 / 7; object-fit: cover; border-radius: 6px; border: 1px solid var(--acento); }
.resumen-cartas img.invertida { transform: rotate(180deg); }
.resumen-cartas.muchas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; max-width: 520px; margin: 0 auto; }
.resumen-cartas.muchas li { width: auto; min-width: 0; }
.resumen-cartas.muchas img { width: 38px; }
.resumen-cartas.muchas .resumen-carta { font-size: .68rem; }
.resumen-posicion { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); line-height: 1.2;
  max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.resumen-cartas.muchas .resumen-posicion { font-size: .56rem; letter-spacing: .03em; }
.resumen-carta { max-width: 100%; overflow-wrap: anywhere; }
.resumen-carta { font: .82rem/1.2 Georgia, serif; }
.resumen-intro { text-align: center; color: var(--suave); font-family: Georgia, serif; font-style: italic; }
.resumen-cierre-texto { font-family: Georgia, serif; font-size: 1.04rem; }
.resumen-afirmaciones { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.resumen-afirmaciones li { font-family: Georgia, serif; font-style: italic; color: var(--acento); font-size: .95rem; }
.resumen-acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 18px 0 4px; }
.resumen-acciones form { margin: 0; }
.resumen-acciones .boton { width: auto; padding: 11px 18px; }
.paginador { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.paginador .boton { width: auto; padding: 10px 16px; }
.paginador .boton:disabled { opacity: .35; cursor: default; }
#indicador { color: var(--suave); font-size: .9rem; }

@media print {
  body { background: #fff; color: #222; }
  .cabecera, .pie, .no-imprimir, .aviso-simulado { display: none !important; }
  .tarjeta { background: #fff; border-color: #ccc; break-inside: avoid; }
  .resumen { height: auto; display: block; }
  .diapositiva { display: block !important; height: auto; overflow: visible; margin-bottom: 14px; background: #fff; border-color: #ccc; break-inside: avoid; }
  .resumen-titulo, .resumen-carta, .resumen-cierre-texto, .diapositiva p { color: #222; }
  .diapositiva h3, .resumen-afirmaciones li { color: #7a5a14; }
  .pergamino { box-shadow: none; }
}

/* =====================================================================
   Página de la mesa: todo cabe en la pantalla, sin desplazamiento.
   La mesa toma el alto que dejan la cabecera y el pergamino.
   ===================================================================== */
.insignia-simulado {
  font-size: .72rem; padding: 3px 9px; border-radius: 99px; background: #4a3b10; color: #ffe7a8; white-space: nowrap;
}
body.pagina-mesa { min-height: 100svh; }
body.pagina-mesa .pie { display: none; }
body.pagina-mesa .contenido { padding: 10px 16px 12px; }
body.pagina-mesa .cabecera { padding: 8px 16px; }
body.pagina-mesa .pergamino { padding: 8px 18px 12px; margin-bottom: -12px; }
body.pagina-mesa .pergamino h1 { font-size: .9rem; }
body.pagina-mesa .pergamino p {
  font-size: .95rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.pagina-mesa .escena .mesa {
  margin-top: 16px;
  /* 176 px ≈ cabecera (con el logo) + pergamino + márgenes */
  width: min(100%, calc((100svh - 176px) * .8));
}

/* Avisos y botones sobre la mesa */
.aviso-mesa {
  position: absolute; z-index: 9; left: 8cqw; right: 8cqw; top: 50%; translate: 0 -50%;
  display: grid; gap: 12px; justify-items: center; padding: 16px; text-align: center;
  background: rgba(8, 11, 30, .92); border: 1px solid var(--acento); border-radius: 12px;
}
.aviso-mesa .alerta { margin: 0; }
.acciones-mesa { position: absolute; z-index: 7; left: 0; right: 0; top: 12cqw; display: flex; justify-content: center; }
.acciones-mesa .boton-dorado { padding: 12px 26px; font-size: 1rem; }

/* =====================================================================
   Mensaje superpuesto: marco art déco con la lectura
   ===================================================================== */
.velo {
  position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(10, 14, 40, .45), rgba(3, 5, 18, .78));
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .35s ease;
}
.velo.visible { opacity: 1; }
.marco-deco {
  --oro: #d9b25a;
  position: relative; width: min(640px, 100%); max-height: calc(100svh - 28px); overflow: auto;
  padding: 26px 26px 22px; color: #efe6cf;
  background: linear-gradient(180deg, rgba(16, 20, 48, .96), rgba(9, 12, 32, .97));
  border: 2px solid var(--oro);
  box-shadow: inset 0 0 0 6px rgba(9, 12, 32, .97), inset 0 0 0 7.5px var(--oro), 0 0 40px rgba(0, 0, 0, .65),
              0 0 22px rgba(217, 178, 90, .25);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%,
                     14px 100%, 0 calc(100% - 14px), 0 14px);
  transform: translateY(10px) scale(.98); transition: transform .35s ease;
}
.velo.visible .marco-deco { transform: none; }
/* Adornos escalonados en las esquinas */
.marco-deco::before, .marco-deco::after {
  content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none;
  border: 2px solid var(--oro);
}
.marco-deco::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; box-shadow: -5px -5px 0 -3px var(--oro); }
.marco-deco::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; box-shadow: 5px 5px 0 -3px var(--oro); }
.marco-deco h2 {
  margin: 0 0 14px; text-align: center; font: clamp(1.15rem, 3.4vw, 1.6rem)/1.25 Georgia, serif; color: #f3e3b8;
  text-shadow: 0 0 12px rgba(217, 178, 90, .35);
}
.marco-deco h3 { margin: 14px 0 4px; font: 1.02rem Georgia, serif; color: var(--oro); }
.marco-deco p { margin: 0; font-size: .98rem; line-height: 1.5; }
.paso-marco { text-align: center; color: var(--suave); font-size: .72rem !important; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px !important; }

.lista-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-checks li {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start;
  opacity: 0; transform: translateX(-6px); transition: opacity .5s ease, transform .5s ease;
}
.lista-checks li.visible { opacity: 1; transform: none; }
.lista-checks p { font-family: Georgia, serif; font-size: 1rem; }
.lista-checks strong { color: #f0cd78; font-weight: normal; }
.check { width: 30px; height: 30px; margin-top: 2px; }
.check path {
  fill: none; stroke: #f0cd78; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 210, 110, .9));
}
.lista-pie { text-align: center; margin-top: 16px !important; font-family: Georgia, serif; font-size: 1.05rem !important; }

.acciones-marco { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.acciones-marco .boton { width: auto; padding: 12px 20px; }
/* Botón ornamentado: placa oscura con puntas y filo dorado, como en el marco */
.boton-ornamentado {
  --punta: 18px;
  display: inline-block; position: relative; isolation: isolate; padding: 13px 40px; border: 0; cursor: pointer;
  text-decoration: none; text-align: center; font: 1.08rem Georgia, serif; color: #f6e7bf;
  background: linear-gradient(180deg, #fff0b8, #d9b25a 50%, #9c7426); /* filo dorado */
  clip-path: polygon(var(--punta) 0, calc(100% - var(--punta)) 0, 100% 50%, calc(100% - var(--punta)) 100%,
                     var(--punta) 100%, 0 50%);
  filter: drop-shadow(0 0 10px rgba(217, 178, 90, .35));
}
.boton-ornamentado::before {
  content: ""; position: absolute; inset: 2.5px; z-index: -1;
  background: linear-gradient(180deg, #2c2548, #17122d);
  clip-path: polygon(calc(var(--punta) - 1px) 0, calc(100% - var(--punta) + 1px) 0, 100% 50%,
                     calc(100% - var(--punta) + 1px) 100%, calc(var(--punta) - 1px) 100%, 0 50%);
}
.boton-ornamentado:hover, .boton-ornamentado:focus-visible { color: #fff; filter: drop-shadow(0 0 14px rgba(240, 205, 120, .7)); outline: none; }

.enlaces-marco { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; }
.enlace { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--acento); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.nota-legal { margin-top: 14px !important; text-align: center; color: var(--suave); font-size: .72rem !important; line-height: 1.4 !important; }
.marco-deco .form-pregunta { margin-top: 12px; }
.marco-deco .form-pregunta .boton { width: 100%; }

@media (max-width: 480px) {
  .marco-deco { padding: 22px 18px 18px; }
  .lista-checks li { grid-template-columns: 26px 1fr; gap: 10px; }
  .check { width: 24px; height: 24px; }
  .lista-checks p, .marco-deco p { font-size: .92rem; }
  .boton-ornamentado { padding: 12px 30px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .velo, .marco-deco, .lista-checks li { transition: none; }
}

/* Páginas de formulario compactas: caben en la pantalla del celular sin desplazamiento */
body.pagina-ajustada .pie { display: none; }
body.pagina-ajustada .contenido { padding: 12px 16px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-campos .campo { min-width: 0; }
.autorizacion-completa { margin: 4px 0 0 30px; font-size: .78rem; color: var(--suave); }
.autorizacion-completa summary { cursor: pointer; color: var(--acento); }
.autorizacion-completa p { margin: 6px 0 0; }
@media (max-width: 340px) { .fila-campos { grid-template-columns: 1fr; } }

.resumen-sintesis { font-family: Georgia, serif; font-size: 1.02rem; }
.resumen-afirmaciones li { font-size: .9rem; }

/* Pantallas bajas (p. ej. iPhone SE): menos aire para que todo quepa */
@media (max-height: 700px) {
  .cabecera { padding: 8px 16px; }
  .contenido { padding-top: 8px; padding-bottom: 8px; }
  .apoyo h1 { font-size: 1.25rem; }
  .apoyo p { font-size: .92rem; line-height: 1.4; margin: .4rem 0; }
  .lineas { margin: 8px 0; }
  .lineas li { padding: 7px 10px; margin-bottom: 5px; font-size: .88rem; }
  .lineas strong { font-size: 1rem; }
  .resumen-cabecera { margin-bottom: 8px; }
  .diapositiva { padding: 12px 14px; }
  .diapositiva p { font-size: .92rem; line-height: 1.4; }
  .resumen-cartas img { width: 52px; }
}
.resumen-despedida { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.resumen-despedida .nota-legal { margin-top: 16px; color: var(--suave); font-size: .72rem; }

/* En la cruz celta la mano de la tarotista baja un poco para no tapar la carta 7. */


/* =====================================================================
   Inicio: "Tu consulta mística"
   ===================================================================== */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El cielo estrellado va en una capa fija propia (body::after): con background-attachment: fixed
   el navegador lo repintaba en cada paso del scroll y la ventana de Wompi se sentía pesada. */
body { background: #050817; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 244, 214, .9), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 244, 214, .8), transparent),
    radial-gradient(1.4px 1.4px at 88% 64%, rgba(255, 244, 214, .9), transparent),
    radial-gradient(1px 1px at 6% 72%, rgba(255, 244, 214, .7), transparent),
    radial-gradient(1px 1px at 40% 90%, rgba(255, 244, 214, .6), transparent),
    radial-gradient(.8px .8px, rgba(255, 244, 214, .45), transparent) 0 0 / 120px 120px,
    radial-gradient(.8px .8px, rgba(255, 244, 214, .3), transparent) 60px 40px / 180px 180px,
    radial-gradient(ellipse at 50% 40%, #16204e 0%, #0b1130 55%, #050817 100%);
}
/* La rueda astral, tenue, detrás del formulario */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .28; transform: translateZ(0);
  background: url("escenas/astral/mesa.7a87eb38f9f8.svg") center 55% / min(1150px, 160vw) no-repeat;
}
body > .cabecera, body > .contenido, body > .pie { position: relative; z-index: 1; }
.fondo-mistico { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transform: translateZ(0); }
.carta-fondo {
  position: absolute; width: 230px; top: 50%; opacity: .16;
  filter: grayscale(1) sepia(.7) brightness(.85) contrast(1.1);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 45%, transparent 75%);
}
.carta-fondo.izquierda { left: calc(50% - 560px); translate: 0 -45%; rotate: -9deg; }
.carta-fondo.derecha { right: calc(50% - 560px); translate: 0 -40%; rotate: 8deg; }
.carta-fondo.derecha-atras { right: calc(50% - 470px); translate: 0 -70%; rotate: 18deg; width: 180px; opacity: .09; }
@media (max-width: 1000px) { .fondo-mistico { display: none; } }

.consulta {
  --oro: #d9b25a;
  position: relative; max-width: 620px; margin: 0 auto; padding: 22px 26px 16px;
  color: #efe6cf;
  background: linear-gradient(180deg, rgba(15, 22, 54, .94), rgba(8, 12, 34, .96));
  border: 1.5px solid var(--oro); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(217, 178, 90, .08), 0 0 34px rgba(217, 178, 90, .38), 0 0 90px rgba(217, 178, 90, .12),
              inset 0 0 40px rgba(0, 0, 0, .45);
}
.consulta h1 { margin: 0 0 12px; font: 1.7rem/1.2 Georgia, serif; color: #f6e9c6; }
.consulta .seccion { margin: 16px 0 6px; font: 1.12rem Georgia, serif; color: #f1e3bc; }
.consulta .campo { margin-bottom: 8px; }
.consulta label { display: block; margin-bottom: 5px; color: #d9cfb3; font-size: .92rem; }
.consulta .error { color: var(--error); font-size: .8rem; margin: 3px 0 0; }

/* Pregunta, con la pluma */
.con-icono { position: relative; }
.consulta textarea {
  width: 100%; padding: 11px 46px 11px 12px; font: inherit; color: #f3ecd9; resize: vertical;
  background: rgba(3, 7, 24, .55); border: 1px solid rgba(217, 178, 90, .65); border-radius: 6px;
}
.consulta textarea::placeholder, .consulta input::placeholder { color: rgba(217, 207, 179, .6); }
.consulta textarea:focus, .consulta input:focus, .consulta select:focus {
  outline: none; border-color: #f0cf7e; box-shadow: 0 0 0 2px rgba(240, 207, 126, .25);
}
.icono { width: 22px; height: 22px; fill: none; stroke: var(--oro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icono-pluma { position: absolute; right: 12px; bottom: 12px; width: 26px; height: 26px; }

/* Nombre y correo: líneas doradas con ícono */
.campo-linea { position: relative; }
.consulta .campo-linea input:not([type=checkbox]) {
  width: 100%; padding: 8px 30px 8px 2px; font: inherit; color: #f3ecd9; background: transparent;
  border: 0; border-bottom: 1px solid rgba(217, 178, 90, .7); border-radius: 0;
}
.consulta .campo-linea input:not([type=checkbox]):focus { box-shadow: none; border-bottom-color: #f0cf7e; }
.campo-linea .icono { position: absolute; right: 2px; top: 8px; width: 20px; height: 20px; }

/* Nacimiento: sol, fases de la luna y tres selectores */
.seccion-con-adorno { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fases { width: 132px; height: 20px; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.3; }
.fases .lleno { fill: var(--oro); stroke: none; }
.fecha-selects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.fecha-selects .error { grid-column: 1 / -1; }
.fecha-selects select {
  width: 100%; padding: 10px 8px; font: 1rem Georgia, serif; color: #efe6cf; text-align: center; text-align-last: center;
  background: rgba(3, 7, 24, .55); border: 1px solid rgba(217, 178, 90, .75); border-radius: 4px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fecha-selects select option { color: #111; }

/* Autorización */
.consulta .campo-casilla { margin-top: 14px; }
.consulta .campo-casilla label { display: flex; align-items: center; gap: 10px; color: #efe6cf; font-size: .95rem; margin: 0; }
/* Casilla dorada: marco dorado vacía, fondo dorado con visto oscuro al marcarla */
.consulta .campo-casilla input {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; flex: none; margin: 0; cursor: pointer;
  border: 1.5px solid var(--oro); border-radius: 3px; background: rgba(3, 7, 24, .55);
  display: grid; place-items: center;
}
.consulta .campo-casilla input::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px; rotate: 45deg;
  border: solid #1c1405; border-width: 0 2.5px 2.5px 0; opacity: 0;
}
.consulta .campo-casilla input:checked { background: linear-gradient(180deg, #f6df97, #d4ad55); }
.consulta .campo-casilla input:checked::after { opacity: 1; }
.consulta .campo-casilla input:focus-visible { outline: 2px solid #f0cf7e; outline-offset: 2px; }
.consulta .autorizacion-completa { margin: 6px 0 0 30px; font-size: .82rem; }

/* Botón dorado con las cartas */
.boton-enviar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 14px; padding: 13px 18px;
  font: 600 1.12rem Georgia, serif; color: #2a1c05; border-radius: 4px;
  background: linear-gradient(180deg, #f6df97 0%, #dcb65e 42%, #b88b36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 20px rgba(217, 178, 90, .3);
}
.boton-enviar:hover { filter: brightness(1.06); }
.icono-cartas { width: 28px; height: 24px; fill: none; stroke: #2a1c05; stroke-width: 1.5; }
.icono-cartas .lleno { fill: #2a1c05; stroke: none; }
.consulta .nota-legal { margin: 10px 0 0; text-align: center; color: #b7ae94; font-size: .74rem; line-height: 1.4; }

@media (max-width: 480px) {
  .consulta { padding: 16px 16px 12px; }
  .consulta h1 { font-size: 1.4rem; margin-bottom: 8px; }
  .consulta .seccion { margin-top: 12px; font-size: 1.02rem; }
  .fases { width: 100px; }
  .fecha-selects { gap: 8px; }
  .fecha-selects select { padding: 9px 4px; font-size: .95rem; }
}
@media (max-height: 700px) {
  .consulta h1 { font-size: 1.25rem; margin-bottom: 6px; }
  .consulta .seccion { margin: 8px 0 4px; }
  .consulta textarea { padding-top: 8px; padding-bottom: 8px; }
  .consulta .campo-casilla { margin-top: 8px; }
  .boton-enviar { margin-top: 8px; padding: 10px; }
  .consulta .error { font-size: .74rem; margin-top: 1px; }
  .consulta .nota-legal { margin-top: 6px; }
}

/* =====================================================================
   Globo de la tarotista: habla antes de cada carta, desde su lado de la mesa
   ===================================================================== */
.globo-tarotista {
  position: absolute; z-index: 6; left: 50%; top: 29%; translate: -50% 0;
  width: max-content; max-width: 70cqw; padding: 1.4cqw 3.2cqw 1.8cqw; text-align: center;
  background: rgba(9, 12, 34, .9); border: .3cqw solid #c9a24f; border-radius: 2.2cqw;
  box-shadow: 0 0 2.5cqw rgba(0, 0, 0, .6), 0 0 1.6cqw rgba(217, 178, 90, .25);
  pointer-events: none; opacity: 0; transform: translateY(-.8cqw); transition: opacity .3s, transform .3s;
}
.globo-tarotista.visible { opacity: 1; transform: none; }
/* Punta del globo, hacia la mano de la tarotista (arriba a la derecha) */
.globo-tarotista::before {
  content: ""; position: absolute; top: -1.9cqw; left: 68%; width: 3cqw; height: 3cqw; rotate: 45deg;
  background: rgba(9, 12, 34, .95); border: .3cqw solid #c9a24f; border-right: 0; border-bottom: 0;
}
.globo-tarotista .quien {
  display: block; font-size: 2.2cqw; letter-spacing: .22em; text-transform: uppercase; color: #bfae83;
}
.globo-tarotista p { margin: .4cqw 0 0; font: italic 3.5cqw/1.3 Georgia, serif; color: #f6e8c3; min-height: 1.3em; }
.mesa[data-disposicion="cruz"] .globo-tarotista { top: 26%; left: 46%; max-width: 54cqw; }
.mesa[data-disposicion="cruz"] .globo-tarotista p { font-size: 3cqw; }
@media (prefers-reduced-motion: reduce) { .globo-tarotista { transition: none; } }

/* Resumen: lo que las cartas dijeron de cada pregunta y el mensaje que las une */
.claves-sesion { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: pregunta; }
.claves-sesion li { counter-increment: pregunta; display: grid; gap: 3px; padding-left: 30px; position: relative; }
.claves-sesion li::before {
  content: counter(pregunta); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: .78rem Georgia, serif; color: #1c1405; background: var(--acento);
}
.clave-pregunta { font: italic .86rem/1.3 Georgia, serif; color: var(--suave); }
.clave-frase { font: 1rem/1.4 Georgia, serif; color: var(--texto); }
.resumen-mensaje { font-family: Georgia, serif; font-size: 1.04rem; line-height: 1.55; }

/* Cabecera en celular: logo, sonido, insignia y contador en una sola línea */
.contador { white-space: nowrap; }
@media (max-width: 480px) {
  .acciones-cabecera { gap: 8px; }
  .insignia-simulado { font-size: .62rem; padding: 2px 7px; }
  .contador { font-size: .8rem; }
  .boton-sonido { width: 32px; height: 32px; padding: 6px; }
}

/* Interruptor IA real / simulada (solo personal) */
.cabecera-derecha { display: flex; align-items: center; gap: 10px; }
.interruptor-ia { margin: 0; }
.interruptor-ia button {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; cursor: pointer;
  font: 600 .74rem system-ui, sans-serif; white-space: nowrap; border: 1px solid;
}
.interruptor-ia .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.interruptor-ia .real { color: #9ff0b8; background: rgba(40, 120, 70, .25); border-color: rgba(159, 240, 184, .5); }
.interruptor-ia .simulada { color: #ffe7a8; background: #4a3b10; border-color: rgba(255, 231, 168, .45); }
.interruptor-ia button:disabled { cursor: not-allowed; opacity: .75; }
@media (max-width: 480px) { .interruptor-ia button { font-size: .64rem; padding: 3px 8px; } }

/* =====================================================================
   Botón de pago: placa de oro cepillado con la luna y destellos
   ===================================================================== */
.pagina-pago { text-align: left; }
.pagina-pago form { margin-top: 18px; }
.boton-pago {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 440px; margin: 0 auto; padding: 14px 44px 14px 76px; cursor: pointer; overflow: hidden;
  color: #141a33; font: 700 1.3rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center;
  border: 1.5px solid #f3dfa0; border-radius: 12px;
  background:
    /* destellos */
    radial-gradient(circle at 8% 22%, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
    radial-gradient(circle at 14% 80%, rgba(255, 255, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 28%, rgba(255, 255, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 72%, rgba(255, 255, 255, .85) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 84%, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px),
    /* vetas del metal cepillado */
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .04) 3px 4px),
    /* brillo del oro */
    linear-gradient(100deg, #b98e3c 0%, #e7cb82 18%, #c9a24f 34%, #f6e4ad 52%, #d1aa55 68%, #ecd28d 84%, #b88b36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(90, 60, 10, .35),
              0 0 0 1px rgba(120, 85, 25, .6), 0 8px 24px rgba(217, 178, 90, .3);
  transition: filter .2s, transform .2s;
}
.boton-pago:hover { filter: brightness(1.06); transform: translateY(-1px); }
.boton-pago:active { transform: translateY(0); }
.boton-pago:focus-visible { outline: 2px solid #fff3c9; outline-offset: 3px; }
/* Estrellas de cuatro puntas a la derecha */
.boton-pago::before, .boton-pago::after {
  content: ""; position: absolute; background: #fffdf3; pointer-events: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
}
.boton-pago::before { width: 16px; height: 16px; right: 20px; top: 50%; translate: 0 -50%; }
.boton-pago::after { width: 10px; height: 10px; right: 44px; top: 18%; opacity: .85; }
.pago-luna { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 48px; height: 48px;
  filter: drop-shadow(0 1px 1px rgba(80, 50, 10, .5)); }
.pago-texto { text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.nota-ia { margin: 8px 0 0; text-align: center; color: #cfc4a4; font-size: .8rem; font-style: italic; }
.nota-pago { margin: 10px 0 0; text-align: center; color: #b7ae94; font-size: .76rem; }
@media (max-width: 480px) {
  .boton-pago { font-size: 1.12rem; padding: 12px 38px 12px 64px; }
  .pago-luna { width: 40px; height: 40px; left: 12px; }
}

/* =====================================================================
   Ciclo de runas mientras carga la página o se navega a otra
   ===================================================================== */
/* Carga inicial: solo se ve si tarda más de ~0,35 s. Si el JavaScript fallara, se retira solo. */
body.pagina-cargando .analisis[hidden] { display: grid !important; }
body.pagina-cargando .analisis { animation: cargando-aparece .3s ease .35s forwards, cargando-retira .4s ease 12s forwards; }
@keyframes cargando-aparece { to { opacity: 1; } }
@keyframes cargando-retira { to { opacity: 0; visibility: hidden; } }
/* Sin avance real que medir: sin porcentaje ni filas; las runas se encienden en ola. */
.analisis.modo-espera .analisis-progreso, body.pagina-cargando .analisis-progreso,
.analisis.modo-espera .filas-analisis, body.pagina-cargando .filas-analisis { display: none; }
.analisis.modo-espera .runa use, body.pagina-cargando .runa use { animation: runa-ola 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .2s); }
@keyframes runa-ola {
  0%, 100% { opacity: .25; filter: none; }
  40% { opacity: 1; stroke: var(--oro-brillo); filter: drop-shadow(0 0 4px rgba(255, 214, 120, .95)); }
}
@media (prefers-reduced-motion: reduce) {
  .analisis.modo-espera .runa use, body.pagina-cargando .runa use { animation: none; opacity: .8; }
}

/* Reformulemos tu pregunta: sugerencias seleccionables y opción de escribir la propia */
.form-sugerencias fieldset { border: 0; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.form-sugerencias legend { margin-bottom: 8px; color: var(--suave); font-size: .92rem; }
.opcion-pregunta {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 10px; background: rgba(3, 7, 24, .45);
  font-family: Georgia, serif; font-size: 1rem; line-height: 1.4; transition: border-color .2s, background .2s;
}
.opcion-pregunta:hover { border-color: rgba(217, 178, 90, .6); }
.opcion-pregunta input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--acento); }
.opcion-pregunta:has(input:checked) { border-color: var(--acento); background: rgba(217, 178, 90, .1); box-shadow: 0 0 0 1px rgba(217, 178, 90, .35); }
.opcion-propia span { font-style: italic; color: var(--suave); }
.opcion-propia:has(input:checked) span { color: var(--texto); }
.campo-propia textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--acento); border-radius: 10px;
}
.form-sugerencias .boton { margin-top: 14px; }

.analisis.inmediato { transition: none; }

/* Reformulemos tu pregunta: compacto para que quepa en el celular con la pregunta propia abierta */
@media (max-width: 480px), (max-height: 760px) {
  body.pagina-ajustada .tarjeta h1 { font-size: 1.3rem; margin-bottom: .35rem; }
  .mensaje-ia { font-size: .95rem; line-height: 1.45; margin: .4rem 0; }
  .form-sugerencias fieldset { gap: 7px; margin-top: 6px; }
  .form-sugerencias legend { margin-bottom: 4px; font-size: .85rem; }
  .opcion-pregunta { padding: 8px 11px; font-size: .93rem; gap: 10px; }
  .form-sugerencias .boton { margin-top: 10px; }
  .campo-propia textarea { padding: 8px 10px; }
}

/* =====================================================================
   Bienvenida: dos placas de oro cepillado (Agenda personalizada / Oráculo)
   ===================================================================== */
.bienvenida { max-width: 900px; margin: 0 auto; }
.bienvenida-titulo { text-align: center; margin: 6px 0 18px; }
.bienvenida-titulo h1 {
  margin: 0; font: 600 clamp(1.35rem, 3.4vw, 2.2rem)/1.15 Cinzel, Georgia, serif; letter-spacing: .04em;
  text-transform: uppercase; color: #ecd08c; text-shadow: 0 0 18px rgba(217, 178, 90, .35);
}
.bienvenida-titulo p { margin: 8px 0 0; color: #efe6cf; font-size: clamp(.92rem, 1.6vw, 1.05rem); }
.continuar-lectura { display: block; max-width: 620px; margin: 0 auto 14px; color: var(--texto); text-decoration: none; text-align: center; }
.continuar-lectura strong { color: var(--acento); }

.placas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.placa {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 22px 18px; color: #1b1405; border-radius: 10px; border: 1.5px solid #f6e3a6;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .035) 3px 4px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 220, .55), transparent 60%),
    linear-gradient(100deg, #b98e3c 0%, #e2c47a 18%, #caa352 34%, #f3e0a6 52%, #d0a853 68%, #e8cd87 84%, #b78a36 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 244, 205, .18), inset 0 1px 0 rgba(255, 255, 255, .7),
              0 12px 34px rgba(0, 0, 0, .45), 0 0 26px rgba(217, 178, 90, .22);
}
.placa-antetitulo { margin: 0; font: 600 .78rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.placa-titulo { margin: 6px 0 4px; font: 700 clamp(1.25rem, 2.4vw, 1.7rem)/1.12 Cinzel, Georgia, serif; text-transform: uppercase; color: #1b1405; }
.placa-subtitulo { margin: 0; font: 500 .98rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.placa-cuerpo { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; margin: 14px 0 10px; text-align: left; }
.placa-icono { width: 70px; height: 70px; fill: none; stroke: #2b1f08; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.placa-icono .lleno { fill: #2b1f08; stroke: none; }
.placa-descripcion { margin: 0; font: .92rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
.placa-precio { margin: 4px 0 12px; font: 700 1.45rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.placa-boton {
  display: block; width: 100%; margin-top: auto; padding: 11px 16px; border-radius: 6px; text-decoration: none;
  font: 700 .98rem system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #1b1405;
  background: linear-gradient(180deg, #f8e7b0, #e0bf6c 55%, #c69a46);
  border: 1.5px solid #7d5a1e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 8px rgba(80, 55, 10, .35);
  transition: filter .2s, transform .2s;
}
.placa-boton:hover, .placa-boton:focus-visible { filter: brightness(1.07); transform: translateY(-1px); outline: none; }
.placa-boton:focus-visible { box-shadow: 0 0 0 3px #fff3c9; }
.bienvenida .nota-legal { margin: 18px 0 0; text-align: center; color: #b7ae94; font-size: .76rem; }

@media (max-width: 720px) {
  .bienvenida-titulo { margin: 0 0 10px; }
  .bienvenida-titulo p { margin-top: 4px; }
  .placas { grid-template-columns: 1fr; gap: 12px; }
  .placa { padding: 12px 14px; }
  .placa-titulo { margin: 3px 0 2px; font-size: 1.15rem; }
  .placa-subtitulo { font-size: .86rem; }
  .placa-cuerpo { grid-template-columns: 44px 1fr; gap: 10px; margin: 8px 0 6px; }
  .placa-icono { width: 44px; height: 44px; }
  .placa-descripcion { font-size: .8rem; }
  .placa-precio { margin: 2px 0 8px; font-size: 1.15rem; }
  .placa-boton { padding: 9px; font-size: .88rem; }
  .bienvenida .nota-legal { margin-top: 10px; }
}

/* Agenda */
.subtitulo-agenda { margin: -4px 0 10px; }
.etiqueta-grupo { display: block; margin-bottom: 6px; color: #d9cfb3; font-size: .92rem; }
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { position: relative; cursor: pointer; }
.pastilla input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pastilla span {
  display: inline-block; padding: 7px 14px; border-radius: 99px; font-size: .9rem;
  border: 1px solid rgba(217, 178, 90, .6); color: #efe6cf; background: rgba(3, 7, 24, .5);
}
.pastilla input:checked + span { background: linear-gradient(180deg, #f6df97, #d4ad55); color: #1c1405; border-color: #f6df97; }
.pastilla input:focus-visible + span { outline: 2px solid #f0cf7e; outline-offset: 2px; }
.form-agenda input[type=date] {
  width: 100%; padding: 9px 11px; font: inherit; color: #efe6cf; color-scheme: dark;
  background: rgba(3, 7, 24, .55); border: 1px solid rgba(217, 178, 90, .65); border-radius: 6px;
}
.form-agenda textarea { padding-right: 12px; }
.resumen-agenda { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.resumen-agenda li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-family: Georgia, serif; }
.resumen-agenda span { color: var(--suave); font-family: system-ui, sans-serif; font-size: .85rem; }
.consulta .nota-legal a { color: var(--acento); }
@media (max-width: 480px) {
  .form-agenda .campo { margin-bottom: 6px; }
  .form-agenda label, .etiqueta-grupo { font-size: .84rem; margin-bottom: 3px; }
  .form-agenda .error { font-size: .72rem; margin-top: 1px; line-height: 1.25; }
  .form-agenda .pastillas { gap: 5px; }
  .form-agenda .pastilla span { padding: 5px 10px; font-size: .82rem; }
  .form-agenda input[type=date] { padding: 7px 8px; }
  .form-agenda .campo-casilla { margin-top: 8px; }
  .form-agenda .boton-enviar { margin-top: 8px; padding: 11px; }
  .subtitulo-agenda { font-size: .85rem; margin-bottom: 6px; }
  .consulta .campo-linea input:not([type=checkbox]) { padding-top: 6px; padding-bottom: 6px; }
}

/* Bienvenida en pantallas bajas (p. ej. iPhone SE): sin subtítulos para que quepa sin desplazamiento */
@media (max-width: 720px) and (max-height: 700px) {
  .bienvenida-titulo p, .placa-subtitulo { display: none; }
  .placa-cuerpo { margin: 6px 0 4px; }
  .placa { padding: 10px 12px; }
}

/* Diseño de placas (versión del diseñador): insignia premium, constelaciones grabadas y ojo con rayos */
.placa { position: relative; overflow: hidden; padding-top: 26px; }
.placa > *:not(.constelacion):not(.placa-insignia) { position: relative; z-index: 1; }
.placa-titulo { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.08; margin: 4px 0 8px; letter-spacing: .02em; }
.placa-subtitulo { font-size: 1.05rem; }
.placa-descripcion { font-size: 1.02rem; line-height: 1.4; }
.placa-precio { font-size: 1.75rem; }
.placa-cuerpo { grid-template-columns: 84px 1fr; }
.placa-icono { width: 84px; height: 84px; }
.placa-icono .relleno-claro { fill: rgba(255, 248, 225, .55); }
.placa-icono .brillo-ojo { fill: #fff6dc; stroke: none; }
.placa-icono .rayos-ojo path { stroke-width: 1.4; opacity: .8; }
.placa-insignia {
  position: absolute; z-index: 2; top: 0; left: 50%; translate: -50% 0; padding: 7px 34px 8px;
  font: 700 .8rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #1b1405; white-space: nowrap;
  background: linear-gradient(180deg, #fbeec2, #e3c679);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  filter: drop-shadow(0 1px 0 rgba(90, 60, 10, .5));
}
.placa-premium { padding-top: 40px; }
.constelacion {
  position: absolute; z-index: 0; width: 92px; height: 72px; pointer-events: none;
  fill: rgba(70, 48, 12, .5); stroke: rgba(70, 48, 12, .42); stroke-width: 1.2;
}
.constelacion.sup-izq { top: 10px; left: 10px; }
.constelacion.sup-der { top: 10px; right: 10px; }
.constelacion.inf-izq { bottom: 64px; left: 8px; }
.constelacion.inf-der { bottom: 64px; right: 8px; }
/* Botón premium: filo oscuro, como en el diseño */
.placa-premium .placa-boton {
  border: 2px solid #3a2808;
  box-shadow: inset 0 0 0 2px #f6e3a6, inset 0 1px 0 3px rgba(255, 255, 255, .5), 0 4px 10px rgba(60, 40, 5, .45);
}
@media (max-width: 720px) {
  .placa { padding-top: 14px; }
  .placa-premium { padding-top: 30px; }
  .placa-insignia { padding: 5px 24px 6px; font-size: .7rem; }
  .placa-titulo { font-size: 1.25rem; margin: 2px 0 4px; }
  .placa-subtitulo { font-size: .86rem; }
  .placa-cuerpo { grid-template-columns: 48px 1fr; }
  .placa-icono { width: 48px; height: 48px; }
  .placa-descripcion { font-size: .82rem; }
  .placa-precio { font-size: 1.2rem; }
  .constelacion { width: 58px; height: 46px; opacity: .8; }
  .constelacion.inf-izq, .constelacion.inf-der { bottom: 46px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .placa-premium { padding-top: 26px; }
}
/* Título de las placas: cabe con Cinzel o con la fuente de respaldo */
.placa-titulo { font-size: clamp(1.35rem, 2.5vw, 1.85rem); overflow-wrap: break-word; max-width: 100%; }
.constelacion { fill: rgba(70, 48, 12, .38); stroke: rgba(70, 48, 12, .32); }

/* Ojo grabado del Oráculo: más grande para que se aprecien sus detalles */
.placa-cuerpo:has(.icono-grande) { grid-template-columns: 104px 1fr; }
.placa-icono.icono-grande { width: 104px; height: 104px; }
@media (max-width: 720px) {
  .placa-cuerpo:has(.icono-grande) { grid-template-columns: 58px 1fr; }
  .placa-icono.icono-grande { width: 58px; height: 58px; }
}

/* ---------------------------------------------------------------------------
   Contenido subido en el admin: logo, íconos de las placas y videos de la página inicial
   --------------------------------------------------------------------------- */
.logo-imagen { object-fit: contain; max-width: min(260px, 60vw); }
img.placa-icono { object-fit: contain; }

.bienvenida { position: relative; }
.video-fondo {
  position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -1; opacity: .28; pointer-events: none;
}
.boton-video {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .55rem; padding: .35rem .95rem;
  border: 1px solid rgba(233, 196, 106, .7); border-radius: 999px; background: rgba(12, 10, 30, .55);
  color: #f3dc9a; font: 500 .85rem Montserrat, "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; cursor: pointer;
}
.boton-video:hover, .boton-video:focus-visible { background: rgba(233, 196, 106, .16); }
.boton-video svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.boton-video svg .lleno { fill: currentColor; stroke: none; }

.ventana-video {
  width: min(900px, 94vw); padding: 0; border: 2px solid #d9b25a; border-radius: 10px;
  background: #07061a; box-shadow: 0 0 60px rgba(0, 0, 0, .8); overflow: visible;
}
.ventana-video::backdrop { background: rgba(4, 3, 14, .82); }
.ventana-video video, .ventana-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; }
.ventana-video video { max-height: 82vh; }
.cerrar-video {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #d9b25a; background: #120f2a; color: #f3dc9a; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.boton-video.en-cabecera { display: none; margin: 0; padding: .25rem .7rem; font-size: .75rem; white-space: nowrap; }
@media (max-width: 600px) {
  .boton-video.en-titulo { display: none; }
  .boton-video.en-cabecera { display: inline-flex; }
}

@media print { body::after { display: none; } }

/* ---------------------------------------------------------------------------
   Ventana de pago de Wompi: Wompi la inserta como capa "absolute" y hacía desplazar TODA la página
   (con el fondo, las velas y el desenfoque repintándose detrás). Se fija a la pantalla, se desplaza
   sola, y mientras está abierta la página de atrás queda quieta y sin animaciones.
   --------------------------------------------------------------------------- */
html.wompi-abierto, html.wompi-abierto body { overflow: hidden; }
.waybox-modal.waybox-display-block:not(.waybox-modal-final-close) {
  position: fixed !important; inset: 0 !important; height: auto !important;
  overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.wompi-abierto body *,
html.wompi-abierto body *::before,
html.wompi-abierto body *::after { animation-play-state: paused !important; }
html.wompi-abierto .velo,
html.wompi-abierto .analisis { backdrop-filter: none; }
html.wompi-abierto .video-fondo { display: none; }

/* ---------------------------------------------------------------------------
   Agenda: duración, código de la cita y fecha/franja en el celular
   --------------------------------------------------------------------------- */
.placa-duracion {
  display: inline-flex; align-items: center; gap: .3em; margin-left: .45em; padding: .2em .6em;
  border: 1px solid rgba(43, 31, 8, .45); border-radius: 99px; vertical-align: middle;
  font: 600 .55em/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #2b1f08; white-space: nowrap;
}
.placa-duracion svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sin-cortes { white-space: nowrap; }
.codigo-cita {
  display: grid; justify-items: center; gap: 2px; margin: 12px auto 4px; padding: 10px 14px; max-width: 320px;
  border: 1.5px dashed rgba(217, 178, 90, .8); border-radius: 12px; background: rgba(3, 7, 24, .45); text-align: center;
}
.codigo-cita span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--suave); }
.codigo-cita strong { font: 700 1.5rem/1.2 "Courier New", ui-monospace, monospace; letter-spacing: .18em; color: #ffe29a; }
.codigo-cita small { font-size: .75rem; color: var(--suave); }

/* El campo de fecha de iOS/Android tiene un ancho mínimo propio que lo sacaba de su columna y lo
   montaba sobre «Franja»: se le quita ese mínimo y, en el celular, cada campo va en su propia fila. */
.form-agenda input[type=date] { min-width: 0; max-width: 100%; display: block; }
.form-agenda input[type=date]::-webkit-date-and-time-value { text-align: left; }
@media (max-width: 560px) {
  .fila-fecha-franja { grid-template-columns: 1fr; gap: 6px; }
  .campo-fecha { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; gap: 10px; }
  .campo-fecha label { margin: 0; }
  .campo-fecha .error { grid-column: 1 / -1; }
  .form-agenda .campo-fecha input[type=date] { -webkit-appearance: none; appearance: none; min-height: 36px; }
  .campo-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .campo-franja .etiqueta-grupo { margin: 0; }
  .campo-franja .pastillas { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------------------
   Código promocional en el recuadro de pago
   --------------------------------------------------------------------------- */
.codigo-promo { display: grid; justify-items: center; gap: 6px; margin: 6px 0 2px; }
.codigo-form { display: flex; gap: 8px; width: min(340px, 100%); }
.codigo-form input {
  flex: 1 1 auto; min-width: 0; width: 100%; padding: 9px 12px; border-radius: 8px; font: 600 1rem/1.2 system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #fff4d6;
  background: rgba(3, 7, 24, .6); border: 1px solid rgba(217, 178, 90, .7);
}
.codigo-form input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: #9a93ad; }
/* En celular todo .boton ocupa el 100 %: aquí el botón toma solo su ancho y el campo el resto. */
.codigo-form .boton { flex: none; width: auto; padding: 8px 16px; white-space: nowrap; }
.codigo-aplicado { margin: 0; font-size: .9rem; color: #bfe8c4; }
.codigo-aplicado strong { letter-spacing: .06em; color: #ffe29a; }
.codigo-promo .alerta { margin: 0; font-size: .85rem; }
.pago-texto s { opacity: .65; font-weight: 400; }


/* ---------------------------------------------------------------------------
   Resumen: página final de agradecimiento (marco dorado, ilustración y botones)
   --------------------------------------------------------------------------- */
.resumen-despedida { padding: 10px; }
.despedida-marco {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 100%; padding: 22px 18px 16px; text-align: center; border-radius: 10px;
  border: 1.5px solid rgba(217, 178, 90, .75);
  box-shadow: inset 0 0 0 5px rgba(9, 12, 32, .6), inset 0 0 0 6px rgba(217, 178, 90, .35);
  background:
    radial-gradient(1px 1px at 12% 20%, rgba(255, 244, 214, .8), transparent),
    radial-gradient(1.4px 1.4px at 86% 14%, rgba(255, 244, 214, .9), transparent),
    radial-gradient(1px 1px at 90% 78%, rgba(255, 244, 214, .7), transparent),
    radial-gradient(1.2px 1.2px at 8% 84%, rgba(255, 244, 214, .7), transparent);
}
.despedida-marco::before, .despedida-marco::after {  /* esquinas ornamentales */
  content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid #d9b25a;
}
.despedida-marco::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.despedida-marco::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.despedida-titulo { margin: 0 !important; font: 400 clamp(1.5rem, 5.5vw, 2.1rem)/1.15 Georgia, "Playfair Display", serif !important;
  color: #f0d38a !important; text-shadow: 0 0 18px rgba(233, 196, 106, .3); max-width: 16ch; }
.despedida-texto { max-width: 30ch; color: #efe6cf; font-size: clamp(.95rem, 3.4vw, 1.1rem); }
.despedida-ilustracion { width: min(260px, 62vw); height: auto; margin: 2px 0; filter: drop-shadow(0 0 24px rgba(233, 196, 106, .35)); }
.despedida-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(460px, 100%); }
.boton-despedida {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; min-height: 64px;
  border-radius: 999px; border: 1px solid #fff1c2; cursor: pointer; text-decoration: none; text-align: center;
  font: 600 .98rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #2a1c05;
  background: linear-gradient(180deg, #fff0b8 0%, #edc860 48%, #c9962f 100%);
  box-shadow: 0 0 0 3px rgba(233, 196, 106, .22), 0 8px 22px rgba(233, 196, 106, .32);
  transition: transform .15s, box-shadow .15s;
}
.boton-despedida:hover, .boton-despedida:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(233, 196, 106, .4), 0 10px 28px rgba(233, 196, 106, .45); }
.boton-despedida svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.despedida-linea { width: min(460px, 100%); border: 0; border-top: 1px solid rgba(217, 178, 90, .35); margin: 6px 0 2px; }
.despedida-salida { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.despedida-salida form { margin: 0; }
.boton-terminar {
  padding: 11px 30px; border-radius: 999px; background: transparent; cursor: pointer;
  border: 1.5px solid rgba(217, 178, 90, .8); color: #f0d38a; font: 600 1rem system-ui, sans-serif;
}
.boton-terminar:hover { background: rgba(217, 178, 90, .12); }
.enlace-despedida { color: #e9c46a; font-size: .9rem; }
.resumen-despedida .nota-legal { margin-top: 4px; max-width: 46ch; }
@media (max-width: 420px) {
  .boton-despedida { flex-direction: column; gap: 4px; min-height: 76px; padding: 10px; font-size: .9rem; }
  .despedida-ilustracion { width: min(200px, 56vw); }
}
/* Pantallas bajas (portátiles de 768 px, celulares pequeños): ilustración más chica para que todo quepa. */
@media (max-height: 860px) { .despedida-ilustracion { width: min(160px, 48vw); } .despedida-marco { gap: 7px; padding-top: 16px; } }
@media (max-height: 700px) {
  .despedida-ilustracion { width: min(104px, 30vw); margin: 0; }
  .despedida-marco { gap: 5px; padding: 12px 12px 10px; }
  .despedida-titulo { font-size: 1.35rem !important; }
  .despedida-texto { font-size: .88rem; }
  .boton-despedida { min-height: 54px; padding: 8px 10px; }
  .boton-despedida svg { width: 20px; height: 20px; }
  .despedida-linea { margin: 2px 0 0; }
  .boton-terminar { padding: 8px 24px; }
  .resumen-despedida .nota-legal { font-size: .64rem; line-height: 1.3; margin: 0 8px; }
  .boton-despedida { font-size: .84rem; line-height: 1.15; }
}
/* Si aun así no cabe, el contenido empieza arriba (nunca se corta el título) y el recuadro se desplaza. */
.despedida-marco { justify-content: safe center; }

/* Campo trampa contra robots: fuera de la vista (no con display:none, que algunos robots detectan). */
.campo-trampa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Términos y condiciones del Oráculo y enlaces legales del pie */
.pie-enlaces { margin-top: 8px; }
.pie-enlaces a, .nota-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.terminos { max-width: 760px; margin: 0 auto; line-height: 1.65; }
.terminos h1 { margin-bottom: 4px; }
.terminos h2 { margin: 26px 0 8px; font-size: 1.15rem; color: var(--acento); }
.terminos ul { margin: 6px 0 12px; padding-left: 1.2em; }
.terminos li { margin: 4px 0; }
.terminos-version { font-size: .85rem; margin-top: 0; }
.terminos-volver { margin-top: 28px; text-align: center; }
.campo-casilla a { color: var(--acento); text-decoration: underline; }

/* Preguntas frecuentes */
.faq-item { border-top: 1px solid rgba(217, 180, 90, .25); padding: 4px 0; }
.faq-item:last-of-type { border-bottom: 1px solid rgba(217, 180, 90, .25); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--acento); font-size: 1.4rem; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary h2 { margin: 0; font-size: 1.05rem; }
.faq-respuesta { padding: 0 0 12px; }
.faq-respuesta .boton { display: inline-block; margin-top: 4px; }

/* Reportar un problema: adjuntos */
.campo-archivos input[type=file] { width: 100%; padding: 10px; border: 1px dashed rgba(217, 180, 90, .55); border-radius: 10px;
  background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-size: .9rem; }
.campo-archivos input[type=file]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: var(--acento); color: var(--acento-texto); font: inherit; font-weight: 600; cursor: pointer; }
.ayuda-campo { margin: 6px 0 0; font-size: .78rem; color: var(--suave); }
.lista-archivos { margin: 8px 0 0; padding-left: 1.1em; font-size: .85rem; }
.lista-archivos .pesado { color: #f0a08a; }
.terminos a:not(.boton) { color: var(--acento); text-underline-offset: 2px; }