/* ==========================================================
   Horóscopo Épico: página /horoscopo/
   Noche de playa (cielo animado de fondo), oro, pergamino y cartas.
   Prefijos: hs- (interfaz), hc- (cielo), cn- (constelaciones)
   ========================================================== */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2"); }
:root {
  --noche: #070816; --oro: #e8c87a; --oro2: #c9a24a; --crema: #f3ead6; --tinta: #2a2433; --pad: clamp(14px, 3vw, 24px);
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vidrio: linear-gradient(165deg, rgba(48, 44, 96, .5), rgba(10, 12, 30, .72));
  --fuego: #ff9a5c; --tierra: #9bd884; --aire: #a9d8ff; --agua: #62e3dc;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--noche); }
html, body { overflow-x: hidden; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; font-family: var(--sans); color: var(--crema); -webkit-font-smoothing: antialiased; background: var(--noche); position: relative; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ---------------- el cielo de fondo ---------------- */
.hs-cielo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --px: 0; --py: 0; }
.hc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hc-px1 { transform: translate(calc(var(--px) * -9px), calc(var(--py) * -6px)); transition: transform .5s ease-out; }
.hc-px2 { transform: translate(calc(var(--px) * 5px), calc(var(--py) * 3px)); transition: transform .5s ease-out; }
.hc-px3 { transform: translate(calc(var(--px) * 12px), 0); transition: transform .5s ease-out; }
.hc-svg circle, .hc-svg path, .hc-svg rect, .hc-svg g { transform-box: fill-box; }
.hc-t1 { animation: hc-tit 3.2s ease-in-out infinite; }
.hc-t2 { animation: hc-tit 5.1s ease-in-out infinite; }
.hc-t3 { animation: hc-tit 7.3s ease-in-out infinite; }
@keyframes hc-tit { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.hc-sp { transform-origin: center; animation: hc-sp 5.5s ease-in-out infinite; opacity: .9; }
@keyframes hc-sp { 0%, 100% { transform: scale(.45); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }
.hc-ola { animation: hc-ola linear infinite; will-change: transform; }
@keyframes hc-ola { to { transform: translateX(calc(var(--w) * -1)); } }
.hc-ref { transform-origin: center; animation: hc-ref 3.4s ease-in-out infinite; opacity: .5; }
@keyframes hc-ref { 0%, 100% { transform: scaleX(.55); opacity: .18; } 50% { transform: scaleX(1.12); opacity: .7; } }
.hc-nl { animation: hc-nl 4.2s ease-in-out infinite; filter: drop-shadow(0 0 5px #4fe9ff); opacity: 0; }
@keyframes hc-nl { 0%, 100% { opacity: 0; } 35%, 55% { opacity: .95; } }
.hc-luz { animation: hc-luz 4.4s ease-in-out infinite; filter: drop-shadow(0 0 6px #ffe39a); }
@keyframes hc-luz { 0%, 100% { opacity: .25; } 8%, 40% { opacity: 1; } }
.hc-haz { opacity: 0; animation: hc-haz 8.8s ease-in-out infinite; }
.hc-haz2 { animation-delay: 4.4s; }
@keyframes hc-haz { 0%, 100% { opacity: 0; } 12%, 30% { opacity: .9; } 45% { opacity: 0; } }
.hc-pasto { animation: hc-pasto 5s ease-in-out infinite; }
@keyframes hc-pasto { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.hs-fugaz { position: absolute; width: var(--len, 220px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 245, 220, .95)); transform: rotate(28deg); transform-origin: right center; opacity: 0; animation: hs-fugaz 1.3s cubic-bezier(.3, .6, .4, 1) forwards; box-shadow: 0 0 10px rgba(255, 240, 200, .8); }
.hs-fugaz::after { content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(255, 240, 200, .9); }
@keyframes hs-fugaz { 0% { opacity: 0; translate: -50px -28px; } 15% { opacity: 1; } 100% { opacity: 0; translate: 260px 140px; } }

/* constelación grande de un signo */
.hs-const { position: absolute; left: 50%; top: 42%; width: min(88vw, 520px); aspect-ratio: 1; translate: -50% -50%; opacity: 0; transition: opacity .6s; }
.hs-const.on { opacity: .85; }
.hs-const.fija { opacity: .3; }
.cn-l { fill: none; stroke: #f3dfa2; stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1.5px #f3dfa2); animation: cn-traza .9s ease forwards; }
@keyframes cn-traza { to { stroke-dashoffset: 0; } }
.cn-g { fill: #ffe9a8; opacity: 0; animation: cn-pop .6s ease forwards; r: 2.6px; }
.cn-s { fill: #fffbe9; }
.cn-m { opacity: .7; }
@keyframes cn-pop { to { opacity: .32; } }
.hs-cn { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------------- barra y pie: discretos ---------------- */
.hs-top { position: relative; z-index: 5; background: linear-gradient(rgba(4, 5, 14, .78), rgba(4, 5, 14, 0)); }
.hs-top-in { max-width: 1100px; margin: 0 auto; padding: 8px var(--pad); display: flex; align-items: center; gap: 6px; }
.hs-logo { display: inline-flex; align-items: center; min-height: 40px; margin-right: auto; opacity: .92; transition: opacity .2s; }
.hs-logo:hover { opacity: 1; }
.hs-logo img { height: 30px; width: auto; display: block; }
.hs-link { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: rgba(243, 234, 214, .78); font-weight: 500; text-decoration: none; font-size: .88rem; transition: color .2s; }
.hs-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: var(--oro); transform: scaleX(0); transition: transform .3s; }
.hs-link:hover { color: var(--oro); }
.hs-link:hover::after { transform: scaleX(1); }
.hs-wa { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(232, 200, 122, .45); color: var(--oro); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; transition: .25s; }
.hs-wa:hover { background: var(--oro); color: #241a05; border-color: var(--oro); }
.hs-wa svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 639px) { .hs-wa span { display: none; } .hs-wa { padding: 0 11px; } .hs-link.solo-pc { display: none; } .hs-logo img { height: 27px; } }
.hs-foot { position: relative; z-index: 5; padding: 18px var(--pad) 16px; font-size: .72rem; line-height: 1.5; color: rgba(243, 234, 214, .5); text-align: center; background: linear-gradient(rgba(3, 4, 10, 0), rgba(3, 4, 10, .82) 55%); }
.hs-foot p { max-width: 80ch; margin: 4px auto 0; }
.hs-foot b { font-weight: 600; color: rgba(243, 234, 214, .72); }
.hs-foot a { color: rgba(243, 234, 214, .72); text-decoration: none; }
.hs-foot a:hover { color: var(--oro); text-decoration: underline; }
.hs-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin-bottom: 4px; font-size: .78rem; }
.hs-aviso { margin-top: 4px; }
.hs-aviso summary { cursor: pointer; display: inline-block; color: rgba(243, 234, 214, .6); list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.hs-aviso summary::-webkit-details-marker { display: none; }
.hs-aviso p { text-align: left; padding: 8px 0 0; }

/* ---------------- cabecera de la página ---------------- */
.hs-main { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px 56px; text-align: center; }
.hs-main.ancho { max-width: 980px; }
.hs-kicker { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 234, 214, .6); }
.hs-kicker i { font-style: normal; color: var(--oro); margin: 0 6px; animation: hc-tit 3.6s ease-in-out infinite; display: inline-block; }
.hs-h1 { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 10vw, 64px); line-height: 1.05; letter-spacing: .03em; background: linear-gradient(100deg, #b88a2e 0%, #f6dc9a 28%, #fff4d2 50%, #e8c87a 72%, #b88a2e 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hs-brilla 8s linear infinite; filter: drop-shadow(0 2px 18px rgba(232, 200, 122, .25)); }
@keyframes hs-brilla { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.hs-orna { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px auto 2px; max-width: 280px; color: var(--oro); }
.hs-orna span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 200, 122, .7)); }
.hs-orna span:last-child { transform: scaleX(-1); }
.hs-orna b { font-weight: 400; font-size: .9rem; animation: hs-gira 12s linear infinite; display: inline-block; }
@keyframes hs-gira { to { transform: rotate(360deg); } }
.hs-sub { margin: 8px auto 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: rgba(243, 234, 214, .9); }
.hs-fecha { margin-top: 10px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); opacity: .8; }
.hs-main.resultado .hs-sub { display: none; }
.hs-main.resultado .hs-cab { margin-bottom: -4px; }
.hs-main.resultado .hs-h1 { font-size: clamp(26px, 6vw, 38px); }
.hs-main.resultado .hs-orna { margin-top: 6px; }

/* ---------------- elegir cómo entrar: dos caminos ---------------- */
.hs-q { font-family: var(--serif); font-size: 1.2rem; margin: 26px 0 12px; }
.hs-caminos { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 14px; text-align: left; }
@media (min-width: 640px) { .hs-caminos { grid-template-columns: 1fr 1fr; gap: 16px; } .hs-main { max-width: 760px; } }
.hs-camino { position: relative; overflow: hidden; display: grid; grid-template-columns: 74px 1fr; gap: 4px 14px; align-items: center; padding: 18px 18px 18px 16px; border-radius: 16px; border: 1px solid rgba(232, 200, 122, .3); background: var(--vidrio); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--crema); font: inherit; text-align: left; cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s; -webkit-tap-highlight-color: transparent; --mx: 50%; --my: 50%; }
.hs-camino::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(232, 200, 122, .22), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hs-camino::after { content: ""; position: absolute; inset: 5px; border-radius: 12px; border: 1px solid rgba(232, 200, 122, .16); pointer-events: none; transition: border-color .3s; }
.hs-camino:hover, .hs-camino:focus-visible, .hs-camino.on { transform: translateY(-4px); border-color: rgba(232, 200, 122, .85); box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 34px rgba(232, 200, 122, .22); }
.hs-camino:hover::before, .hs-camino.on::before { opacity: 1; }
.hs-camino:hover::after, .hs-camino.on::after { border-color: rgba(232, 200, 122, .5); }
.hs-ico { grid-row: 1 / span 4; width: 74px; height: 96px; display: grid; place-items: center; }
.hs-ico svg { width: 100%; height: 100%; overflow: visible; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hs-camino:hover .hs-ico svg, .hs-camino.on .hs-ico svg { transform: scale(1.1) rotate(-4deg); }
.hs-camino small { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.hs-camino strong { font-family: var(--serif); font-size: 1.28rem; font-weight: 400; line-height: 1.15; }
.hs-camino span { font-size: .86rem; line-height: 1.4; color: rgba(243, 234, 214, .78); }
.hs-camino .hs-tag { font-style: normal; grid-column: 2; white-space: nowrap; justify-self: start; margin-top: 4px; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(232, 200, 122, .5); color: var(--oro); background: rgba(232, 200, 122, .08); }
.hs-camino.nat .hs-tag { background: var(--oro); color: #2a1d05; border-color: var(--oro); font-weight: 700; }
.hs-anillo { transform-origin: 37px 48px; animation: hs-gira 40s linear infinite; }
.hs-minicarta { display: block; width: 50px; aspect-ratio: 300 / 520; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 200, 122, .6); animation: hs-bal 4.6s ease-in-out infinite; transition: box-shadow .3s; }
.hs-minicarta svg { display: block; width: 100%; height: 100%; }
.hs-camino:hover .hs-minicarta, .hs-camino.on .hs-minicarta { box-shadow: 0 10px 24px rgba(0, 0, 0, .6), 0 0 0 1px var(--oro), 0 0 22px rgba(232, 200, 122, .5); }
@keyframes hs-bal { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4px); } }

.hs-panel { margin-top: 18px; text-align: center; animation: hs-sube .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hs-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hs-panel .hs-q { margin-top: 4px; }

/* signos */
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 640px; margin: 0 auto; }
@media (min-width: 640px) { .hs-grid { gap: 10px; } }
.hs-signo { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 92px; padding: 10px 2px 8px; border-radius: 14px; border: 1px solid rgba(232, 200, 122, .26); background: var(--vidrio); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: var(--crema); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; --ec: var(--oro); --mx: 50%; --my: 50%; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .3s; animation: hs-entra .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes hs-entra { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
.hs-signo.fuego { --ec: var(--fuego); } .hs-signo.tierra { --ec: var(--tierra); } .hs-signo.aire { --ec: var(--aire); } .hs-signo.agua { --ec: var(--agua); }
.hs-signo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--mx) var(--my), color-mix(in srgb, var(--ec) 38%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; }
.hs-signo b { font-size: 1.85rem; font-weight: 400; line-height: 1.1; color: var(--ec); transition: transform .4s cubic-bezier(.2, .9, .3, 1.4), text-shadow .3s; }
.hs-signo em { font-style: normal; font-size: .76rem; font-weight: 600; letter-spacing: .01em; }
.hs-signo small { font-size: .6rem; opacity: .6; letter-spacing: .02em; }
.hs-signo i { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; font-style: normal; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: #130f1d; background: var(--ec); transform: translateY(101%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.hs-signo:hover, .hs-signo:focus-visible { transform: translateY(-4px) scale(1.04); border-color: var(--ec); box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 24px color-mix(in srgb, var(--ec) 40%, transparent); outline: none; z-index: 2; }
.hs-signo:hover::before, .hs-signo:focus-visible::before { opacity: 1; }
.hs-signo:hover b, .hs-signo:focus-visible b { transform: scale(1.28) rotate(-8deg); text-shadow: 0 0 16px var(--ec); }
.hs-signo:hover i, .hs-signo:focus-visible i { transform: none; }
.hs-signo:active { transform: scale(.97); }
@media (max-width: 420px) { .hs-signo em { font-size: .7rem; } .hs-signo small { font-size: .56rem; } .hs-signo b { font-size: 1.6rem; } .hs-signo { min-height: 84px; } }

/* fecha de nacimiento */
.hs-form { max-width: 460px; margin: 0 auto; padding: 18px 16px 20px; border-radius: 16px; border: 1px solid rgba(232, 200, 122, .3); background: var(--vidrio); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hs-form p { font-size: .9rem; color: rgba(243, 234, 214, .85); margin-bottom: 12px; line-height: 1.45; }
.hs-fila { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: 8px; }
.hs-sel { position: relative; }
.hs-sel select { width: 100%; appearance: none; -webkit-appearance: none; background: rgba(6, 8, 22, .75); color: var(--crema); border: 1px solid rgba(232, 200, 122, .4); border-radius: 10px; padding: 12px 26px 12px 12px; font: inherit; font-size: .95rem; cursor: pointer; transition: border-color .2s, box-shadow .2s; color-scheme: dark; }
.hs-sel::after { content: "▾"; position: absolute; right: 10px; top: 50%; translate: 0 -50%; color: var(--oro); pointer-events: none; font-size: .8rem; }
.hs-sel select:hover, .hs-sel select:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(232, 200, 122, .15); outline: none; }
.hs-err { min-height: 1.3em; margin: 8px 0 0 !important; color: #ffb59a !important; font-size: .82rem !important; }
.hs-form .hs-btn { margin-top: 6px; width: 100%; }

/* botones */
.hs-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: linear-gradient(180deg, #f2d98e, #d9b45c); color: #2a1d05; font: inherit; font-weight: 700; text-decoration: none; border: 0; border-radius: 10px; padding: 0 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.hs-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-120%); }
.hs-btn:hover, .hs-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 26px rgba(232, 200, 122, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.hs-btn:hover::after, .hs-btn:focus-visible::after { transform: translateX(120%); transition: transform .7s ease; }
.hs-btn:active { transform: translateY(0) scale(.98); }
.hs-btn[disabled] { opacity: .6; cursor: wait; }
.hs-btn.sec { background: rgba(255, 255, 255, .04); color: var(--crema); border: 1px solid rgba(232, 200, 122, .45); font-weight: 500; box-shadow: none; }
.hs-btn.sec:hover { background: rgba(232, 200, 122, .14); border-color: var(--oro); box-shadow: 0 0 22px rgba(232, 200, 122, .2); }
.hs-btn.sec::after { display: none; }

/* ---------------- la carta ---------------- */
.hs-para { margin-top: 18px; font-size: .95rem; color: rgba(243, 234, 214, .9); }
.hs-para b { color: var(--oro); font-weight: 600; }
.hs-mesa { --halo: min(150vw, 640px); position: relative; display: flex; justify-content: center; margin-top: 18px; perspective: 1500px; }
.hs-mesa::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--halo); height: var(--halo); translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(232, 200, 122, .13) 0 2.5deg, transparent 2.5deg 12deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: hs-rayos 90s linear infinite; pointer-events: none; }
.hs-mesa::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(120vw, 460px); aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, rgba(232, 200, 122, .22), transparent 62%); animation: hs-late 5s ease-in-out infinite; pointer-events: none; }
@keyframes hs-rayos { to { transform: rotate(360deg); } }
@keyframes hs-late { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hs-carta { position: relative; z-index: 1; width: min(66vw, 270px); aspect-ratio: 300 / 520; cursor: pointer; border: 0; background: none; padding: 0; animation: hs-flota 4.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.hs-carta.volteada { animation: none; cursor: default; }
.hs-carta:not(.volteada):hover .hs-dorso { box-shadow: 0 22px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(232, 200, 122, .9), 0 0 46px rgba(232, 200, 122, .4); }
@keyframes hs-flota { 50% { translate: 0 -9px; } }
.hs-giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.25, .8, .25, 1); }
.hs-carta.volteada .hs-giro { transform: rotateY(180deg); }
.hs-carta.sin-anim .hs-giro { transition: none; }
.hs-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 162, 74, .5); transition: box-shadow .4s; }
.hs-cara svg { display: block; width: 100%; height: 100%; }
.hs-frente { transform: rotateY(180deg); }
.hs-brillo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 200, .24) 50%, transparent 62%); background-size: 260% 100%; animation: hs-pasa 4s linear infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes hs-pasa { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.hs-reflejo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 244, 214, .26), transparent 60%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s; }
.hs-carta:hover .hs-reflejo { opacity: 1; }
.hs-carta.rara.volteada .hs-cara { box-shadow: 0 0 0 2px rgba(242, 192, 80, .9), 0 0 50px rgba(242, 192, 80, .55); animation: hs-rara 2.6s ease-in-out infinite; }
@keyframes hs-rara { 50% { box-shadow: 0 0 0 2px rgba(242, 192, 80, 1), 0 0 80px rgba(242, 192, 80, .8); } }
.hs-guia { margin-top: 20px; font-size: 1rem; color: var(--oro); animation: hs-late 2.8s ease-in-out infinite; }
.hs-chispa { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: var(--oro); pointer-events: none; animation: hs-vuela 1.2s ease-out forwards; box-shadow: 0 0 10px var(--oro); }
@keyframes hs-vuela { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.hs-mota { position: absolute; z-index: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 8px 2px rgba(255, 233, 168, .7); opacity: 0; bottom: 8%; animation: hs-mota 7s ease-in infinite; pointer-events: none; }
@keyframes hs-mota { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--dx), -320px); } }

/* ---------------- lo que dice el espíritu (pergamino) ---------------- */
.hs-dicho { margin-top: 24px; opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s; }
.hs-dicho.on { opacity: 1; transform: none; }
.hs-rara { margin-bottom: 14px; color: #f2c050; font-weight: 600; letter-spacing: .04em; }
.hs-globo, .hs-mini, .hs-dato { --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .1  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hs-globo { position: relative; text-align: left; color: var(--tinta); border-radius: 14px; padding: 22px 22px 22px; font-size: 1.04rem; line-height: 1.58; background: var(--grano), linear-gradient(170deg, #f6eed9, #e7d8b2); box-shadow: 0 14px 38px rgba(0, 0, 0, .5), inset 0 0 0 5px #f3ead6, inset 0 0 0 6px rgba(168, 128, 48, .75); }
.hs-globo::before { content: "✦"; position: absolute; top: 9px; left: 50%; translate: -50% 0; font-size: .7rem; color: #a88030; background: #f3ead6; padding: 0 8px; }
.hs-quien { margin: 4px 0 8px; text-align: center; font-family: var(--serif); font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; color: #8a6420; }
.hs-globo p + p { margin-top: 10px; }
.hs-globo b { color: #6f4f12; }
.hs-mision { margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(232, 200, 122, .13); border: 1px dashed rgba(232, 200, 122, .6); font-size: .98rem; line-height: 1.5; }
.hs-mision b { color: var(--oro); }
.hs-cielito { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: .84rem; }
.hs-cielito span { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 6px 13px; }
.hs-zona { margin-top: 18px; padding: 18px 16px; border-radius: 14px; background: var(--vidrio); border: 1px solid rgba(232, 200, 122, .3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.hs-zona small { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.hs-zona strong { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; color: var(--oro); margin: 4px 0 12px; }
.hs-acciones { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hs-msg { min-height: 1.4em; margin-top: 10px; font-size: .9rem; color: var(--oro); }
.hs-racha { margin-top: 6px; font-size: .9rem; color: rgba(243, 234, 214, .88); }
.hs-nota { margin: 16px auto 0; max-width: 56ch; font-size: .72rem; color: rgba(243, 234, 214, .5); line-height: 1.5; }
.hs-upsell { margin-top: 24px; padding: 18px 16px; border-radius: 16px; border: 1px solid rgba(232, 200, 122, .55); background: linear-gradient(165deg, rgba(232, 200, 122, .16), rgba(30, 24, 60, .6)); }
.hs-upsell strong { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--oro); }
.hs-upsell p { margin: 6px 0 14px; font-size: .92rem; line-height: 1.45; color: rgba(243, 234, 214, .88); }

/* ---------------- carta natal (lectura detallada) ---------------- */
.hs-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.hs-reveal.in { opacity: 1; transform: none; }
.hs-hero { position: relative; margin-top: 18px; padding: 8px 0 4px; }
.hs-hero-const { width: min(62vw, 250px); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 0 16px rgba(243, 223, 162, .28)); }
.hs-kick2 { margin-top: -4px; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.hs-signo-big { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 9vw, 54px); line-height: 1.1; margin-top: 4px; }
.hs-signo-big span { color: var(--oro); }
.hs-nacio { margin-top: 6px; font-size: .92rem; color: rgba(243, 234, 214, .85); }
.hs-chips { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .hs-chips { grid-template-columns: repeat(4, 1fr); } }
.hs-chips li { padding: 10px 6px 11px; border-radius: 12px; border: 1px solid rgba(232, 200, 122, .3); background: var(--vidrio); font-family: var(--serif); font-size: 1.12rem; transition: transform .3s, border-color .3s, box-shadow .3s; }
.hs-chips li:hover { transform: translateY(-3px); border-color: var(--oro); box-shadow: 0 0 22px rgba(232, 200, 122, .22); }
.hs-chips small { display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); opacity: .85; margin-bottom: 2px; }
.hs-chips em { display: block; font-family: var(--sans); font-style: normal; font-size: .68rem; opacity: .6; margin-top: 1px; }
.hs-cap { margin-top: 38px; text-align: left; }
.hs-cap > h3, .hs-cap .hs-tit { text-align: center; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--oro); margin-bottom: 14px; }
.hs-cap .hs-tit i { display: block; font-style: normal; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 234, 214, .6); font-family: var(--sans); margin-bottom: 2px; }
.hs-lectura { padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(232, 200, 122, .25); background: var(--vidrio); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-size: 1.02rem; line-height: 1.6; }
.hs-lectura + .hs-lectura { margin-top: 10px; }
.hs-lectura h4 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--oro); margin-bottom: 4px; }
.hs-par { display: grid; gap: 22px; align-items: center; justify-items: center; }
@media (min-width: 820px) { .hs-par { grid-template-columns: minmax(250px, 320px) 1fr; justify-items: stretch; gap: 40px; } .hs-par.inv { grid-template-columns: 1fr minmax(250px, 320px); } .hs-par.inv .hs-par-carta { order: 2; } }
.hs-par-carta { width: 100%; text-align: center; }
.hs-par-carta .hs-mesa { margin-top: 0; }
.hs-par-txt { width: 100%; }
.hs-par-txt .hs-tit { text-align: center; }
@media (min-width: 820px) { .hs-par-txt .hs-tit { text-align: left; } .hs-par-txt .hs-quien { text-align: left; } .hs-par-txt .hs-acciones { justify-content: flex-start; } }
.hs-par-txt .hs-quien { color: var(--oro); }
.hs-par-txt .hs-lectura { font-family: var(--serif); font-size: 1.12rem; }
.hs-hoy .hs-dicho { text-align: center; }
.hs-trio { margin-top: 14px; display: grid; gap: 10px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 720px) { .hs-trio { grid-template-columns: repeat(3, 1fr); } }
.hs-mini { position: relative; padding: 16px 16px 16px; border-radius: 14px; color: var(--tinta); font-size: .95rem; line-height: 1.5; background: var(--grano), linear-gradient(170deg, #f3ead6, #e2d2a8); box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 0 0 4px #efe4c8, inset 0 0 0 5px rgba(168, 128, 48, .6); transition: transform .3s; }
.hs-mini:hover { transform: translateY(-4px) rotate(-.5deg); }
.hs-mini h5 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 1.02rem; color: #7a5716; letter-spacing: .02em; }
.hs-mini h5 b { margin-right: 6px; font-size: 1.1rem; }
.hs-datos { margin-top: 14px; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .hs-datos { grid-template-columns: repeat(4, 1fr); } }
.hs-dato { padding: 14px 8px 13px; border-radius: 14px; border: 1px solid rgba(232, 200, 122, .3); background: var(--vidrio); transition: transform .3s, border-color .3s, box-shadow .3s; }
.hs-dato:hover { transform: translateY(-4px); border-color: var(--oro); box-shadow: 0 0 24px rgba(232, 200, 122, .22); }
.hs-dato small { display: block; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); opacity: .9; }
.hs-dato strong { display: block; margin: 5px 0 2px; font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.15; }
.hs-dato strong.chico { font-size: 1.05rem; }
.hs-dato span { font-size: .74rem; opacity: .7; line-height: 1.3; display: block; }
.hs-sw { display: inline-block; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 4px; border: 2px solid rgba(255, 255, 255, .35); box-shadow: 0 0 18px var(--c); background: var(--c); }
.hs-sello { display: inline-block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(232, 200, 122, .5); color: var(--oro); margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hs-carta, .hs-brillo, .hs-carta.rara.volteada .hs-cara, .hs-h1, .hs-orna b, .hs-anillo, .hs-minicarta, .hs-mesa::before, .hs-mesa::after, .hs-guia, .hs-mota, .hs-kicker i, .hc-t1, .hc-t2, .hc-t3, .hc-sp, .hc-ola, .hc-ref, .hc-nl, .hc-luz, .hc-haz, .hc-pasto { animation: none !important; }
  .hc-nl { opacity: .6; } .hc-haz { opacity: 0; }
  .hs-giro { transition: transform .01s; } .hs-dicho, .hs-reveal { transition: none; } .hs-reveal { opacity: 1; transform: none; }
  .hs-signo, .hs-panel { animation: none; }
  .cn-l { animation-duration: .01s; } .cn-g { animation-duration: .01s; }
  .hc-px1, .hc-px2, .hc-px3 { transition: none; }
}

@media (max-width: 480px) { .hs-kicker { font-size: .58rem; letter-spacing: .12em; } .hs-kicker i { margin: 0 3px; } }
.hs-cap .hs-para { text-align: center; }