/* Amor y Tarot — mesa de tiradas (1.1.0), estética «Postal de amor». Colores del tema con valores de reserva. */
.tm, .tm-dlg, .tm-vuela, .tm-posiciones {
	--tm-rosa: var(--wp--preset--color--rosa, #FBEAE6); --tm-rosa2: var(--wp--preset--color--rosa-2, #F6D9D3);
	--tm-papel: var(--wp--preset--color--papel, #FFFDFB); --tm-fram: var(--wp--preset--color--frambuesa, #B8204F); --tm-fram2: var(--wp--preset--color--frambuesa-2, #93163E);
	--tm-tinta: var(--wp--preset--color--tinta, #1E2347); --tm-tinta2: var(--wp--preset--color--tinta-2, #2C3264);
	--tm-mant: var(--wp--preset--color--mantequilla, #F3CF6A); --tm-gris: var(--wp--preset--color--gris, #5D5F78); --tm-linea: var(--wp--preset--color--linea, #EBCFC8);
	--tm-disp: var(--wp--preset--font-family--titulos, Georgia, serif);
}
.tm { max-width: 1100px; margin: 0 auto; color: var(--tm-tinta); scroll-margin-top: 90px; }
.tm *, .tm-dlg *, .tm-vuela * { box-sizing: border-box; }
.tm [hidden], .tm-dlg [hidden] { display: none !important; }
.tm-panel { position: relative; text-align: center; background: var(--tm-papel); border-radius: 8px; padding: clamp(1.2rem, 3.5vw, 2.2rem); box-shadow: 0 30px 60px -34px rgba(30, 35, 71, .45); }
.tm-panel::before { content: ""; position: absolute; inset: 11px; border: 1.5px dashed var(--tm-linea); border-radius: 4px; pointer-events: none; }
.tm-panel > * { position: relative; }

/* Rótulo */
.tm-rotulo { margin: 0 0 1.2rem; min-height: 3.2em; }
.tm-rotulo b { display: block; font-family: var(--tm-disp); font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 1.8rem); line-height: 1.15; }
.tm-rotulo span { display: block; margin-top: .2rem; font-weight: 700; color: var(--tm-fram); }
.tm-rotulo small { display: block; margin-top: .15rem; font-size: .85rem; color: var(--tm-gris); }

/* Huecos */
.tm-huecos { display: flex; justify-content: center; gap: clamp(.6rem, 2.2vw, 1.5rem); --hw: 132px; }
.tm-hueco { width: var(--hw); }
.tm-hueco-c { position: relative; width: 100%; aspect-ratio: 3 / 5; display: grid; place-items: center; border: 2px dashed #E2B9AF; border-radius: 12px; background: rgba(251, 234, 230, .55); color: #D7A397; font-family: var(--tm-disp); font-size: 2rem; transition: border-color .3s, box-shadow .3s; }
.tm-hueco-c.tm-lleno { border-color: transparent; background: none; }
.tm-hueco.tm-activo .tm-hueco-c { border-color: var(--tm-fram); color: var(--tm-fram); background: #FFF5F7; box-shadow: 0 0 0 5px rgba(184, 32, 79, .08); }
.tm-hueco-n { margin-top: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-gris); line-height: 1.3; }
.tm-inv-et { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 2; background: var(--tm-mant); color: var(--tm-tinta); font-family: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

/* Carta */
.tm-carta { position: relative; display: block; width: 100%; aspect-ratio: 3 / 5; perspective: 1000px; }
.tm-c-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, .7, .2, 1); }
.tm-vista .tm-c-in { transform: rotateY(180deg); }
.tm-cara { position: absolute; inset: 0; border-radius: 11px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 5px solid #fff; outline: 1px solid var(--tm-linea); box-shadow: 0 10px 18px -12px rgba(30, 35, 71, .7); }
.tm-dorso { display: grid; place-items: center; color: var(--tm-mant);
	background: radial-gradient(circle at 50% 50%, transparent 17%, rgba(243, 207, 106, .9) 18%, rgba(243, 207, 106, .9) 20%, transparent 21%),
		repeating-linear-gradient(45deg, rgba(243, 207, 106, .2) 0 2px, transparent 2px 11px),
		repeating-linear-gradient(-45deg, rgba(243, 207, 106, .2) 0 2px, transparent 2px 11px), var(--tm-tinta); }
.tm-dorso svg { width: 22%; }
.tm-frente { transform: rotateY(180deg); container-type: inline-size; background: var(--tm-tinta); color: var(--tm-mant); }
.tm-hueco:nth-child(2) .tm-frente, .tm-caja-c:nth-child(2) .tm-frente { background: var(--tm-fram); }
.tm-f { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12% 5% 10%; }
.tm-inv .tm-f { transform: rotate(180deg); }
.tm-num { font-family: var(--tm-disp); font-size: 16cqw; line-height: 1; }
.tm-emb { width: 62%; aspect-ratio: 1; display: grid; place-items: center; }
.tm-emb svg { width: 100%; height: 100%; }
.tm-nom { font-size: 8.5cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: #F4E9EC; text-align: center; }

/* Mesa: pila, abanico y tira */
.tm-mesa { position: relative; height: 320px; margin: 1.6rem auto .25rem; max-width: 980px; }
.tm-msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; color: var(--tm-gris); font-size: .98rem; }
.tm-desliza { display: none; margin: .25rem 0 0; font-size: .82rem; color: var(--tm-gris); }
.tm-pila { position: absolute; left: 50%; top: 40px; width: 96px; margin-left: -48px; }
.tm-naipe { padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit; }
.tm-pila .tm-naipe { position: absolute; left: 0; top: 0; width: 96px; transition: transform .25s ease; cursor: default; }
.tm-arco .tm-naipe { position: absolute; left: 50%; top: 28px; width: 88px; margin-left: -44px; transition: transform .55s cubic-bezier(.25, .8, .3, 1), opacity .35s; }
.tm-abierta .tm-naipe:hover .tm-dorso, .tm-abierta .tm-naipe:focus-visible .tm-dorso { outline: 2px solid var(--tm-fram); }
.tm-naipe:focus-visible { outline: none; }
.tm-naipe.tm-fuera { opacity: 0; pointer-events: none; }
.tm-cerrada .tm-naipe { pointer-events: none; opacity: .25; }
.tm-abierta .tm-pila { display: none; }
.tm-vuela { position: fixed; z-index: 9990; pointer-events: none; transition: left .6s cubic-bezier(.3, .75, .25, 1), top .6s cubic-bezier(.3, .75, .25, 1), width .6s cubic-bezier(.3, .75, .25, 1), transform .6s cubic-bezier(.3, .75, .25, 1); }

/* Botonera y aviso */
.tm-botonera { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.1rem; }
.tm-botonera .ayt-btn { min-width: 170px; font-size: 1rem; }
.tm-botonera .ayt-btn[disabled] { opacity: .4; cursor: default; transform: none; }
.tm-aviso { margin: 1.1rem 0 0; font-size: .86rem; color: var(--tm-gris); }

/* Ventana «¿Quién es esa persona?» */
.tm-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; margin: auto; padding: clamp(1.25rem, 4vw, 1.9rem); border: 0; border-radius: 20px; background: var(--tm-papel); color: var(--tm-tinta); text-align: left; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); animation: tm-entra .35s cubic-bezier(.2, .8, .3, 1) both; }
.tm-dlg::backdrop { background: rgba(30, 35, 71, .55); }
@keyframes tm-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.tm-dlg-x { position: absolute; top: .5rem; right: .6rem; width: 40px; height: 40px; border: 0; background: none; color: var(--tm-gris); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.tm-dlg-tit { font-family: var(--tm-disp); font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.15; margin: .35rem 0 .3rem; }
.tm-dlg-sub { margin: 0 0 1rem; color: var(--tm-gris); font-size: .95rem; }
.tm-ops { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tm-op { display: flex; gap: .7rem; align-items: center; text-align: left; font: inherit; font-weight: 600; font-size: 1rem; background: #fff; color: var(--tm-tinta); border: 1.5px solid var(--tm-linea); border-radius: 13px; padding: .85rem; cursor: pointer; }
.tm-op svg { width: 28px; height: 28px; flex: none; color: var(--tm-fram); }
.tm-op:hover, .tm-op.tm-on { border-color: var(--tm-fram); box-shadow: inset 0 0 0 1.5px var(--tm-fram); background: #FFF5F7; }
.tm-op:focus-visible, .tm-dlg-x:focus-visible, .tm-saltar:focus-visible { outline: 3px solid var(--tm-mant); outline-offset: 2px; }
.tm-dlg-acc { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-top: 1.2rem; }
.tm-saltar { background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .92rem; color: var(--tm-gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tm-dlg-tel { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--tm-linea); font-size: .9rem; color: var(--tm-gris); }
.tm-dlg-tel a { display: inline-flex; align-items: center; gap: .3rem; color: var(--tm-fram); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Lectura */
.tm-cab:empty { display: none; }
.tm-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; text-align: left; }
.tm-cab h2 { margin: .3rem 0 .2rem; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.tm-cab h2 span { color: var(--tm-fram); }
.tm-cab p { margin: 0; color: var(--tm-gris); font-size: .92rem; }
.tm-compartir { display: flex; gap: .5rem; flex-wrap: wrap; }
.tm-compartir button { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border-radius: 999px; border: 1.5px solid var(--tm-linea); background: #fff; color: var(--tm-tinta); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.tm-compartir button:hover, .tm-compartir button:focus-visible { border-color: var(--tm-fram); outline: none; }
.tm-compartir .ayt-ic { width: 15px; height: 15px; }
.tm-hecha .tm-huecos { padding: 1.3rem 1rem 1.6rem; background: var(--tm-rosa2); border-radius: 18px; --hw: 120px; }
.tm-hecha .tm-hueco.tm-activo .tm-hueco-c { box-shadow: none; }
.tm-lectura { margin-top: 1.3rem; text-align: left; animation: tm-aparece .6s ease both; }
@keyframes tm-aparece { from { opacity: 0; transform: translateY(12px); } }
.tm-vision { background: var(--tm-tinta); color: #E7E5F3; border-radius: 18px; padding: clamp(1.2rem, 3vw, 1.7rem); margin-bottom: 1rem; }
.tm-vision .ayt-kicker { color: var(--tm-mant); }
.tm-vision h3 { margin: .35rem 0 .6rem; color: #fff; font-size: clamp(1.45rem, 3vw, 1.85rem); }
.tm-vision p { margin: 0; }
.tm-vision strong { color: #fff; }
.tm-vision .ayt-botones { margin: 1.1rem 0 0; }
.tm-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tm-caja { background: #fff; border: 1px solid var(--tm-linea); border-radius: 16px; padding: 1.2rem; }
.tm-caja .ayt-kicker { font-size: .74rem; }
.tm-caja h4 { margin: .35rem 0 .5rem; font-family: var(--tm-disp); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.tm-caja h4 small { display: inline-block; font-family: inherit; font-family: var(--wp--preset--font-family--texto, sans-serif); font-size: .72rem; font-weight: 700; background: var(--tm-mant); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.tm-caja p { margin: 0; font-size: .98rem; color: #3A3E62; }
.tm-llamada { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin-top: 1rem; background: var(--tm-fram); color: #fff; border-radius: 18px; padding: 1.3rem 1.6rem; }
.tm-fotos { display: flex; }
.tm-fotos img, .tm-fotos span { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--tm-fram); margin-left: -12px; object-fit: cover; display: grid; place-items: center; font-family: var(--tm-disp); font-size: 1.3rem; color: #fff; }
.tm-fotos > :first-child { margin-left: 0; }
.tm-llamada-t { margin: 0 !important; font-family: var(--tm-disp); font-size: 1.45rem; line-height: 1.15; color: #fff; }
.tm-llamada p { margin: .3rem 0 0; color: #FFE3EA; font-size: .94rem; }
.tm-llamada .ayt-botones { margin: 0; flex-direction: column; }
.tm-llamada .ayt-btn-llamar { background: #fff; color: var(--tm-fram) !important; box-shadow: 0 5px 0 var(--tm-fram2); }
.tm-llamada .ayt-btn-wa { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .75); }
.tm-pie { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap; margin-top: 1rem; font-size: .9rem; color: var(--tm-gris); }
.tm-pie p { margin: 0; }

/* Lista «Las N posiciones» */
.tm-posiciones { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; counter-reset: none; }
.tm-posiciones li { border-top: 2px solid var(--tm-tinta); padding-top: 1rem; display: flex; flex-direction: column; gap: .4rem; color: var(--tm-gris); margin: 0 !important; }
.tm-posiciones strong { display: block; font-family: var(--tm-disp); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--tm-tinta); margin-bottom: .2rem; }
.tm-pos-n { font-family: var(--tm-disp); font-size: 2.6rem; line-height: 1; color: var(--tm-fram); }

/* Móvil */
@media (max-width: 900px) {
	.tm-cajas { grid-template-columns: minmax(0, 1fr); }
	.tm-llamada { grid-template-columns: minmax(0, 1fr); }
	.tm-llamada .ayt-botones { flex-direction: row; }
}
@media (max-width: 640px) {
	.tm-panel { padding: 1.2rem .9rem 1.4rem; }
	.tm-huecos { gap: .55rem; --hw: 96px; }
	.tm-hecha .tm-huecos { --hw: 92px; padding: 1rem .5rem 1.3rem; }
	.tm-hueco-n { font-size: .66rem; letter-spacing: .02em; }
	.tm-cara { border-width: 4px; }
	.tm-mesa { height: auto !important; min-height: 160px; margin: 1.2rem -.9rem .25rem; }
	.tm-msg { position: static; margin-top: .5rem; }
	.tm-msg:empty { display: none; }
	.tm-pila { position: relative; left: auto; top: auto; margin: 10px auto 0; width: 80px; height: 134px; }
	.tm-pila .tm-naipe { width: 76px; }
	.tm-tira { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 24px 20px 10px 46px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.tm-tira::-webkit-scrollbar { display: none; }
	.tm-tira .tm-naipe { position: relative; flex: 0 0 72px; width: 72px; margin-left: -24px; scroll-snap-align: center; transition: transform .25s, opacity .3s; animation: tm-repartir .45s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 22ms); }
	.tm-tira .tm-naipe:active { transform: translateY(-16px); }
	.tm-tira .tm-naipe.tm-fuera { flex-basis: 0; width: 0; margin-left: 0; overflow: hidden; transition: flex-basis .35s ease .15s, width .35s ease .15s, margin .35s ease .15s, opacity .2s; }
	.tm-abierta .tm-desliza { display: block; }
	.tm-botonera .ayt-btn { flex: 1 1 40%; min-width: 0; }
	.tm-ops { grid-template-columns: minmax(0, 1fr); }
	.tm-cab { text-align: left; }
	.tm-vision .ayt-botones .ayt-btn, .tm-llamada .ayt-btn { flex: 1 1 100%; }
	.tm-llamada .ayt-botones { flex-direction: column; }
	.tm-posiciones { grid-template-columns: minmax(0, 1fr); }
}
@keyframes tm-repartir { from { opacity: 0; transform: translateX(-40px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
	.tm *, .tm-dlg, .tm-vuela { animation: none !important; transition: none !important; }
}