@import url('https://fonts.googleapis.com/css2?family=Syne+Tactile&display=swap');
:root { font-family: "Syne Tactile", Georgia, "Times New Roman", serif; color: #f8edd5; background: #171715; }
* { box-sizing: border-box; } body { min-height: 100vh; margin: 0; } button, input, select { font: inherit; }
button { padding: .78rem 1rem; color: #fff2cf; background: linear-gradient(#b58840, #6d421d); border: 1px solid #e2c075; border-radius: .4rem; box-shadow: inset 0 1px #fff5, 0 3px 0 #321a0c; font-weight: bold; cursor: pointer; } button:hover { filter: brightness(1.12); } button:active { transform: translateY(2px); box-shadow: inset 0 1px #fff5, 0 1px 0 #321a0c; }
.corner-logo { position: fixed; top: 1.15rem; left: 1.15rem; z-index: 5; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55)); }
.auth-page { overflow-x: hidden; background: radial-gradient(circle at center, #483524aa, #10110fdf), url("assets/EufratesYTigris.jpg") center / cover fixed; }
.ishtar-page { overflow: hidden; background: #080d14; }.ishtar-intro { position: relative; min-height: 100vh; overflow: hidden; perspective: 1400px; }.ishtar-world { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: center center; }.ishtar-gate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.04); transform: rotateX(1.8deg) scale(1.035); animation: ishtar-breathe 7s ease-in-out infinite alternate; }.ishtar-world::after { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, transparent 15%, #02050bbb 94%); content: ""; pointer-events: none; }.ishtar-question { position: absolute; z-index: 8; top: 50%; left: 50%; width: min(92vw, 650px); padding: 1.4rem 1.65rem; color: #fff0c8; background: linear-gradient(135deg, #071421d9, #12100ad9); border: 1px solid #d8a84f99; border-radius: .8rem; box-shadow: 0 20px 55px #000b, inset 0 0 30px #d5962540; text-align: center; transform: translate(-50%, -50%); }.ishtar-question .eyebrow { color: #f1c76e; text-shadow: 0 1px #000; }.ishtar-question h1 { margin: .5rem 0; color: #ffe3a4; font-size: clamp(1.7rem, 4vw, 3.3rem); line-height: 1.05; text-shadow: 0 3px 10px #000; }.ishtar-question p { color: #fae2ae; }.ishtar-actions { display: flex; justify-content: center; gap: .85rem; margin-top: 1.1rem; }.ishtar-actions .outline { background: #101b27d9; }.ishtar-message { min-height: 1.35rem; margin: .85rem 0 0; color: #ffdfa0; font-weight: bold; }.ishtar-door { position: absolute; z-index: 4; bottom: 7.5%; width: 12.8%; height: 45.5%; background: linear-gradient(90deg, #041427, #0d3f6a 25%, #092a4b 75%, #020b14); border: 3px solid #d39c3b; box-shadow: inset 0 0 0 5px #0d5b8a, inset 0 0 18px #000, 0 6px 14px #000b; transform-style: preserve-3d; }.ishtar-door::after { position: absolute; inset: 9% 12%; border: 1px solid #e5bb5a; background: repeating-linear-gradient(0deg, transparent 0 15px, #d3a44888 16px 18px), repeating-linear-gradient(90deg, transparent 0 18px, #d3a44855 19px 21px); content: ""; }.ishtar-door--left { left: 37.2%; transform-origin: left center; }.ishtar-door--right { right: 37.2%; transform-origin: right center; }.ishtar-corridor { position: absolute; z-index: 2; bottom: 7.5%; left: 37%; width: 26%; height: 46%; opacity: 0; background: linear-gradient(90deg, #020814, #124069 25%, #07162c 50%, #124069 75%, #020814), repeating-linear-gradient(0deg, #d99d3e10 0 28px, #0000 29px 58px); box-shadow: inset 0 0 40px #000; transform: perspective(700px) rotateX(5deg) scale(.2); }.corridor-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 70%, #ffe6a799, transparent 48%); animation: corridor-light 1.1s ease-in-out infinite alternate; }
.is-entering .ishtar-question { animation: ishtar-question-away .65s ease-in forwards; }.is-entering .ishtar-door--left { animation: ishtar-open-left 1.45s cubic-bezier(.5,0,.16,1) .35s forwards; }.is-entering .ishtar-door--right { animation: ishtar-open-right 1.45s cubic-bezier(.5,0,.16,1) .35s forwards; }.is-entering .ishtar-corridor { animation: corridor-reveal 1.05s ease .85s forwards, corridor-cross 1.4s cubic-bezier(.3,.75,.35,1) 1.3s forwards; }.is-entering .ishtar-world { animation: ishtar-cross 2.45s cubic-bezier(.32,.72,.28,1) .1s forwards; }.is-closing .ishtar-door--left { animation: ishtar-refuse-left .8s ease-in-out; }.is-closing .ishtar-door--right { animation: ishtar-refuse-right .8s ease-in-out; }.is-closing .ishtar-question { animation: ishtar-question-shake .5s ease-in-out; }
.tablet-shell { min-height: 100vh; display: grid; place-items: center; padding: 3rem 1.5rem; }
.tablet-card { position: relative; isolation: isolate; width: min(100%, 640px); min-height: 780px; padding: 4.9rem 5.2rem 3.2rem; color: #3d250e; background: url("assets/tablilla-acceso-transparente.png") center / 100% 100% no-repeat; filter: drop-shadow(0 20px 34px #000b); animation: tablet-settle 900ms cubic-bezier(.2,.8,.2,1) both; }
.tablet-card::after { position: absolute; inset: 3% 4%; z-index: 0; border-radius: 8%; background: linear-gradient(115deg, transparent 14%, #ffe8ae33 43%, transparent 69%); content: ""; pointer-events: none; animation: torchlight 5.5s ease-in-out infinite alternate; mix-blend-mode: screen; }.tablet-card > * { position: relative; z-index: 1; }
.tablet-card h1 { margin: .3rem 0 .6rem; color: #351806; font-size: clamp(2.2rem, 5vw, 3.65rem); line-height: 1; text-shadow: 1px 1px #ffe9ab, 3px 3px #6b3f16cc; }.eyebrow { margin: 0; color: #3c1c08; font-size: .86rem; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; text-shadow: 1px 1px #ffe9a8, 0 0 8px #fff1b455; }.tablet-subtitle { margin: 0 0 2rem; color: #3a1a07; font-size: 1.25rem; font-weight: bold; text-shadow: 1px 1px #ffe9a8, 0 0 7px #fff1b455; }
.tablet-form, form { display: grid; gap: .95rem; } label { display: grid; gap: .35rem; color: #351705; font-weight: bold; text-shadow: 1px 1px #fff0b5, 0 0 6px #fff0b899; transition: color 180ms ease, text-shadow 180ms ease; } input, select { width: 100%; padding: .72rem .85rem; color: #301d0d; background: #fff7e6f5; border: 2px solid #654018; border-radius: .45rem; box-shadow: inset 0 2px 6px #4c2c1d66, 0 1px 0 #fff0b8; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .tablet-form input:hover { border-color: #3d220b; } .tablet-form label:focus-within { color: #1f0d02; text-shadow: 1px 2px #fff1ad; } .tablet-form input:focus { outline: none; transform: translateY(2px); background: #fff0cf; border-color: #3b1e08; box-shadow: inset 0 5px 10px #4c2c1d88, inset 0 0 0 1px #e3be74; }.tablet-form button { margin-top: .5rem; font-size: 1.15rem; }.message { min-height: 1.35rem; margin: .75rem 0; color: #8a2115; font-weight: bold; }.account-link { margin: 1rem 0 0; color: #351705; font-size: .94rem; font-weight: bold; text-align: center; text-shadow: 1px 1px #fff0af; } a { color: inherit; } .account-link a { color: #642a03; }
.music-toggle { position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 8; padding: .58rem .8rem; color: #f8e6bb; background: #20170fcc; border-color: #d8a64b; box-shadow: 0 6px 18px #0009; font-size: .82rem; }
#river-transition { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; background: #0a2442 url("assets/rio-relieve-mesopotamico.png") 50% 0 / auto 155% repeat-x; clip-path: ellipse(150% 0% at 50% 100%); opacity: 0; transition: clip-path 1050ms cubic-bezier(.48,0,.2,1), opacity 180ms linear; animation: river-flow 1.45s ease-in-out infinite alternate; }
#river-transition::before, #river-transition::after { position: absolute; inset: -14% -22%; content: ""; pointer-events: none; } #river-transition::before { background: url("assets/rio-relieve-mesopotamico.png") 15% 50% / auto 160% repeat-x; opacity: .28; mix-blend-mode: screen; filter: blur(5px) saturate(1.2); animation: river-surface 1.1s linear infinite; } #river-transition::after { background: linear-gradient(105deg, #061a38aa 8%, transparent 38%, #f0c56a36 51%, transparent 67%, #061a3899 94%); mix-blend-mode: soft-light; animation: river-relief-light 2s ease-in-out infinite alternate; }
.river-transition__current, .river-transition__foam { display: none; }
#river-transition.is-active { opacity: 1; clip-path: ellipse(150% 145% at 50% 100%); } #river-transition.is-arriving { opacity: 1; clip-path: ellipse(150% 145% at 50% 0%); animation: river-recede 1080ms cubic-bezier(.48,0,.2,1) forwards, river-flow 1.45s ease-in-out infinite alternate; } body.river-leaving > :not(#river-transition) { animation: page-swept 900ms ease-in forwards; }
#god-transition { position: fixed; inset: 0; z-index: 120; display: grid; place-items: end center; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; background: radial-gradient(ellipse at 50% 36%, #d89c4055 0 8%, #1f1108df 45%, #05090fd9 100%); transition: opacity 220ms ease, visibility 0s 220ms; }.god-aura { position: absolute; inset: -20%; background: repeating-radial-gradient(ellipse at 50% 43%, #ffd8842b 0 2px, transparent 3px 34px); opacity: .5; animation: god-aura-spin 6s linear infinite; }.god-gate { position: absolute; top: 0; bottom: 0; width: 51%; background-color: #3a2617; background-image: linear-gradient(90deg, #120c08aa, transparent 14% 83%, #0d0806bb), repeating-linear-gradient(90deg, #6d4b2a 0 4px, #2b1b0f 6px 11px, #8f6232 13px 16px, #24170e 18px 25px); box-shadow: inset 0 0 70px #000b; }.god-gate--left { left: 0; transform-origin: left center; }.god-gate--right { right: 0; transform-origin: right center; }.god-radiance { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 42%, #ffe6a344 50%, transparent 58%); opacity: 0; }.god-figure { position: relative; z-index: 3; width: min(74vw, 700px); max-height: 96vh; object-fit: contain; filter: drop-shadow(0 0 28px #e8b34d88) drop-shadow(0 24px 30px #000b); transform: translateY(35%) scale(.63); opacity: 0; }.god-legend { position: absolute; z-index: 5; bottom: 6vh; margin: 0; color: #ffe3a3; font-size: clamp(1rem, 2vw, 1.55rem); letter-spacing: .14em; opacity: 0; text-align: center; text-shadow: 0 2px 9px #000; text-transform: uppercase; }.god-leaving > :not(#god-transition) { animation: page-yield 1.1s ease-in forwards; }
#god-transition.is-active { visibility: visible; opacity: 1; transition-delay: 0s; }.is-active .god-figure { animation: god-rise 1.35s cubic-bezier(.17,.82,.28,1) .22s forwards, god-arms-raised .72s ease-in-out 1.54s 2 alternate; }.is-active .god-gate--left { animation: god-open-left 1.18s cubic-bezier(.55,0,.2,1) 1.72s forwards; }.is-active .god-gate--right { animation: god-open-right 1.18s cubic-bezier(.55,0,.2,1) 1.72s forwards; }.is-active .god-radiance { animation: god-flash .95s ease-out 1.58s forwards; }.is-active .god-legend { animation: god-legend 1s ease 1.2s forwards, god-legend-out .35s ease 2.65s forwards; }
@keyframes river-flow { from { background-position: 42% 0; } to { background-position: 58% 17%; } } @keyframes river-surface { from { transform: translateX(-7%) translateY(-2%); } to { transform: translateX(7%) translateY(3%); } } @keyframes river-relief-light { from { opacity: .42; transform: translateX(-8%); } to { opacity: .9; transform: translateX(8%); } } @keyframes river-recede { to { opacity: 0; clip-path: ellipse(150% 0% at 50% 0%); } } @keyframes page-swept { to { opacity: .12; transform: translateX(-2.5%) scale(.985); filter: saturate(.7) blur(1px); } }
@keyframes mule-circle { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes mule-step { from { transform: translateY(-2px) rotate(-1deg); } to { transform: translateY(3px) rotate(1deg); } }
@keyframes god-aura-spin { to { transform: rotate(1turn); } } @keyframes god-rise { 0% { opacity: 0; transform: translateY(35%) scale(.63); } 65% { opacity: 1; transform: translateY(-2%) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes god-arms-raised { from { filter: drop-shadow(0 0 28px #e8b34d88) drop-shadow(0 24px 30px #000b); transform: translateY(0) scale(1); } to { filter: drop-shadow(0 -16px 28px #ffe09aee) drop-shadow(0 24px 30px #000b); transform: translateY(-1.5%) scale(1.025); } } @keyframes god-open-left { to { transform: perspective(900px) rotateY(68deg) translateX(-84%); opacity: .15; } } @keyframes god-open-right { to { transform: perspective(900px) rotateY(-68deg) translateX(84%); opacity: .15; } } @keyframes god-flash { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .12; } } @keyframes god-legend { to { opacity: 1; transform: translateY(0); } } @keyframes god-legend-out { to { opacity: 0; } } @keyframes page-yield { to { opacity: 0; transform: scale(.95); filter: brightness(.45) blur(2px); } }
@keyframes ishtar-breathe { from { transform: rotateX(1.8deg) scale(1.035); } to { transform: rotateX(0) scale(1.075); } } @keyframes ishtar-question-away { to { opacity: 0; transform: translate(-50%, -58%) scale(.88); } } @keyframes ishtar-open-left { to { transform: perspective(1000px) rotateY(-108deg); } } @keyframes ishtar-open-right { to { transform: perspective(1000px) rotateY(108deg); } } @keyframes corridor-reveal { to { opacity: 1; transform: perspective(700px) rotateX(5deg) scale(1); } } @keyframes corridor-cross { to { opacity: .96; transform: perspective(700px) rotateX(2deg) scale(5.2); filter: brightness(1.7) blur(2px); } } @keyframes ishtar-cross { 60% { transform: translateZ(80px) scale(1.1); } to { transform: translateZ(500px) scale(1.9); filter: brightness(1.35) blur(2px); } } @keyframes corridor-light { from { opacity: .38; } to { opacity: 1; } } @keyframes ishtar-refuse-left { 50% { transform: perspective(800px) rotateY(-12deg); } } @keyframes ishtar-refuse-right { 50% { transform: perspective(800px) rotateY(12deg); } } @keyframes ishtar-question-shake { 25% { transform: translate(-51.5%, -50%); } 75% { transform: translate(-48.5%, -50%); } }
@keyframes tablet-settle { from { opacity: 0; transform: perspective(900px) translateY(-22px) rotateX(11deg) rotateZ(-1.5deg); } 68% { opacity: 1; transform: perspective(900px) translateY(4px) rotateX(-2deg) rotateZ(.35deg); } to { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0) rotateZ(0); } }
@keyframes torchlight { from { opacity: .28; transform: translateX(-7%) skewX(-8deg); } to { opacity: .62; transform: translateX(8%) skewX(-8deg); } }
.workspace-page { background: linear-gradient(#081321c7, #081321df), url("assets/EufratesYTigris.jpg") center / cover fixed; }.workspace { max-width: 1180px; margin: auto; padding: 1.5rem; }.topbar, .user-actions, .page-nav, .section-actions, .item-builder { display: flex; align-items: center; gap: .75rem; }.topbar { justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #d4a94e66; }.topbar h1 { margin: .3rem 0 0; }.topbar .eyebrow { color: #e9bf65; text-shadow: none; }.user-actions { color: #f5dfaa; }.outline { background: #192536bf; }
.page-nav { margin: 1.25rem 0; padding: .45rem; background: #101b2bdb; border: 1px solid #d4a94e55; border-radius: .45rem; }.nav-button { flex: 1; padding: .75rem; color: #f3dfb0; border: 1px solid transparent; border-radius: .3rem; font-weight: bold; text-align: center; text-decoration: none; }.nav-button:hover, .nav-button.active { background: #a46a13; border-color: #e9bf65; }.page-heading { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }.page-heading > span { color: #e9bf65; font-size: 3rem; font-weight: bold; }.page-heading h2, .page-heading p, .content-card h3 { margin: .2rem 0; }.page-heading p { color: #f0e0c6; }
.content-card { padding: 1.5rem; color: #f5dfaa; background: #1b283bea; border: 1px solid #d4a94e77; border-radius: .55rem; box-shadow: 0 18px 45px #0008; }.content-card label { color: #f5dfaa; text-shadow: none; }.narrow { max-width: 560px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }.wide { grid-column: 1 / -1; }.line-items { margin: 1rem 0; padding: 1rem; background: #09152799; border-left: 3px solid #d4a94e; }.item-builder { align-items: end; }.item-builder label:first-child { flex: 1; }.order-cart { position: relative; min-height: 245px; overflow: hidden; border: 1px solid #d4a94e88; border-left: 4px solid #e4b858; border-radius: .5rem; background: linear-gradient(135deg, #0e1e32dd, #172f47dd); }.mule-stage { position: absolute; top: .35rem; right: 1rem; width: 180px; height: 120px; opacity: .96; pointer-events: none; }.mule-stage::before { position: absolute; inset: 23px 2px; border: 1px dashed #e4b85866; border-radius: 50%; content: ""; }.mule-orbit { position: absolute; width: 82px; height: 50px; offset-path: ellipse(75px 37px at 50% 50%); offset-rotate: auto 0deg; animation: mule-circle 10s linear infinite; }.mule-orbit img { width: 110px; height: auto; filter: drop-shadow(0 7px 6px #0008); animation: mule-step .55s ease-in-out infinite alternate; }.cart-heading { min-height: 82px; padding-right: 175px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.cart-heading h3 { margin: .1rem 0; color: #f4cd76; }.cart-kicker { margin: 0; color: #dcb464; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }.cart-count { display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: .25rem; color: #fff4d1; background: #aa6d13; border: 1px solid #efd082; border-radius: 50%; font-weight: bold; }.item-list { margin: .8rem 0 0; padding: 0; list-style: none; }.item-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem; border-bottom: 1px solid #d4a94e33; }.item-list .empty { color: #d7c59f; }.cart-item { align-items: center; background: #07111e66; }.cart-product { font-weight: bold; }.cart-controls { display: flex; align-items: center; gap: .4rem; }.cart-controls button { min-width: 2rem; padding: .28rem .45rem; background: #24384bbf; border-color: #d4a94e88; }.cart-controls .cart-remove { color: #ffceb0; border-color: #d78b63; }.cart-note { margin: .75rem 0 0; color: #d7c59f; font-size: .85rem; }.section-actions { justify-content: space-between; }.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: .75rem; text-align: left; border-bottom: 1px solid #d4a94e33; } th { color: #e9bf65; }.status { color: #f9d983; font-size: .75rem; font-weight: bold; }.status.ENVIADO { color: #a9d4ff; }.status.ENTREGADO { color: #aee6bc; }
@media (max-width: 700px) { .corner-logo { top: .65rem; left: .65rem; width: 92px; height: 92px; }.tablet-shell { padding: 5rem .5rem 1rem; }.tablet-card { min-height: 690px; padding: 4rem 2.45rem 2.4rem; }.tablet-card h1 { font-size: 2.15rem; }.tablet-subtitle { font-size: 1rem; margin-bottom: 1.25rem; }.workspace { padding: 1rem; }.topbar, .page-nav, .item-builder { flex-direction: column; align-items: stretch; }.form-grid { grid-template-columns: 1fr; }.wide { grid-column: auto; }.user-actions { flex-wrap: wrap; }.order-cart { min-height: 285px; }.mule-stage { top: .25rem; right: .25rem; transform: scale(.75); transform-origin: top right; }.cart-heading { padding-right: 125px; }.ishtar-gate { object-position: 50% center; }.ishtar-question { top: 58%; padding: 1.1rem; }.ishtar-actions { flex-direction: column; }.ishtar-door { bottom: 16%; width: 18%; height: 35%; }.ishtar-door--left { left: 32%; }.ishtar-door--right { right: 32%; }.ishtar-corridor { bottom: 16%; left: 31%; width: 38%; height: 36%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* Entrada nocturna de la Puerta de Ishtar: la escena completa precede a la pregunta. */
.ishtar-intro { background: radial-gradient(ellipse at 50% 18%, #173c73 0%, #07152d 47%, #02050d 100%); }
.ishtar-world { background: #030817; }
.ishtar-world::before { position: absolute; z-index: 2; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 59%, #c9edff00 0 5%, #87cfff22 12%, #17528d00 28%); content: ""; pointer-events: none; }
.ishtar-gate { object-fit: contain; object-position: center; filter: saturate(1.04) contrast(1.04); transform: scale(1); animation: ishtar-night-breathe 10s ease-in-out infinite alternate; image-rendering: auto; }
.ishtar-world::after { background: radial-gradient(ellipse at 50% 54%, transparent 32%, #01040ab0 100%); }
.ishtar-question { top: auto; bottom: -17rem; width: min(91vw, 610px); padding: 0; color: #fff0c8; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 0; text-shadow: 0 2px 10px #000, 0 0 22px #000; transform: translateX(-50%); animation: ishtar-message-rise 1.25s cubic-bezier(.16,.84,.28,1) 3.7s forwards; }
.ishtar-question .eyebrow { margin: 0; color: #efc66b; font-size: .82rem; letter-spacing: .17em; }
.ishtar-question h1 { margin: .45rem 0; color: #ffe5a9; font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.1; text-shadow: 0 3px 12px #000; }
.ishtar-question p { margin: .4rem auto; color: #f6dfae; font-size: clamp(.92rem, 1.6vw, 1.08rem); }
.ishtar-actions { margin-top: .95rem; }
.ishtar-actions button { min-width: 178px; box-shadow: 0 6px 16px #000a; }
.ishtar-message { min-height: 1.3rem; margin-top: .75rem; }
.ishtar-door { display: none; }
.ishtar-door { z-index: 4; bottom: 18.3%; width: 8%; height: 40.5%; background: linear-gradient(90deg, #031329, #0e4677 25%, #092c50 75%, #020b16); border: 2px solid #c99942; box-shadow: inset 0 0 0 3px #0b5b8a, inset 0 0 14px #000, 0 5px 12px #000b; }
.ishtar-door::after { inset: 8% 11%; background: repeating-linear-gradient(0deg, transparent 0 13px, #d3a44855 14px 16px), repeating-linear-gradient(90deg, transparent 0 16px, #d3a44844 17px 19px); }
.ishtar-door--left { left: 42%; transform-origin: left center; }
.ishtar-door--right { right: 42%; transform-origin: right center; }
.ishtar-corridor { display: none; }
.ishtar-brazier { position: absolute; z-index: 5; bottom: 10.5%; width: 4.8%; height: 8%; opacity: .78; filter: drop-shadow(0 6px 7px #000); }
.ishtar-brazier::before { position: absolute; right: 3%; bottom: 0; left: 3%; height: 32%; border: 2px solid #9e7431; border-radius: 0 0 48% 48%; background: linear-gradient(90deg, #16191c, #68502b 48%, #181818); box-shadow: inset 0 5px 5px #000; content: ""; }
.ishtar-brazier::after { position: absolute; bottom: 20%; left: 26%; width: 48%; height: 65%; opacity: 0; border-radius: 58% 42% 56% 44%; background: radial-gradient(ellipse at 50% 78%, #fff6a4 0 16%, #ffd342 25%, #ef7020 53%, #9c260d 76%, transparent 78%); box-shadow: 0 0 12px #ffbd3c, 0 0 30px #f0711b; content: ""; transform: scale(.35) translateY(12px); transform-origin: bottom; }
.ishtar-brazier--one { left: 3.4%; }.ishtar-brazier--two { left: 21%; }.ishtar-brazier--three { right: 21%; }.ishtar-brazier--four { right: 3.4%; }
.is-entering .ishtar-question { animation: ishtar-question-away .45s ease-in forwards; }.is-entering .ishtar-world::before { animation: ishtar-portal-bloom 1.9s ease-out .25s forwards; }.is-entering .ishtar-world { animation: ishtar-cross-clean 2.8s cubic-bezier(.25,.7,.3,1) .1s forwards; }.is-entering .ishtar-brazier::after { animation: torch-ignite-clean 1.15s ease-out forwards, torch-flicker-clean 1.7s ease-in-out 1.15s infinite alternate; }.is-entering .ishtar-brazier--two::after { animation-delay: .16s, 1.31s; }.is-entering .ishtar-brazier--three::after { animation-delay: .31s, 1.46s; }.is-entering .ishtar-brazier--four::after { animation-delay: .46s, 1.61s; }
@keyframes ishtar-night-breathe { from { transform: scale(1); } to { transform: scale(1.018); } }
@keyframes ishtar-message-rise { 0% { opacity: 0; bottom: -17rem; } 65% { opacity: 1; bottom: 19vh; } 100% { opacity: 1; bottom: 17vh; } }
@keyframes ishtar-open-left-clean { to { opacity: .1; transform: perspective(1000px) translateX(-112%) rotateY(12deg) scaleX(.72); } }
@keyframes ishtar-open-right-clean { to { opacity: .1; transform: perspective(1000px) translateX(112%) rotateY(-12deg) scaleX(.72); } }
@keyframes ishtar-portal-bloom { 0% { opacity: 0; } 35% { opacity: .82; } 100% { opacity: .28; } }
@keyframes ishtar-cross-clean { 55% { transform: translateZ(30px) scale(1.04); } to { transform: translateZ(220px) scale(1.28); filter: brightness(1.18); } }
@keyframes torch-ignite-clean { 0% { opacity: 0; transform: scale(.35) translateY(12px); } 58% { opacity: 1; transform: scale(1.22) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes torch-flicker-clean { from { filter: brightness(.82) scale(.94); } to { filter: brightness(1.22) scale(1.08) skewX(-4deg); } }
@media (max-width: 700px) { .ishtar-gate { object-fit: cover; }.ishtar-question { width: min(90vw, 430px); }.ishtar-question h1 { font-size: 1.5rem; }.ishtar-brazier { bottom: 15%; width: 8%; }.ishtar-brazier--two { left: 18%; }.ishtar-brazier--three { right: 18%; }.ishtar-door { bottom: 23%; width: 12%; height: 34%; }.ishtar-door--left { left: 38%; }.ishtar-door--right { right: 38%; }.ishtar-corridor { bottom: 23%; left: 37.7%; width: 24.6%; height: 35%; } @keyframes ishtar-message-rise { 0% { opacity: 0; bottom: -17rem; } 65% { opacity: 1; bottom: 13vh; } 100% { opacity: 1; bottom: 11vh; } } }

/* Ajustes finales de composición: sin bandas, diálogo tenue y fuego dentro de cada calderón. */
.ishtar-gate { object-fit: cover; object-position: center; }
.ishtar-question { width: min(88vw, 560px); padding: .85rem 1.2rem 1rem; background: linear-gradient(135deg, #06172b82, #08101d6b); border: 1px solid #f0c66b42; border-radius: 1.35rem; box-shadow: 0 12px 35px #0007, inset 0 1px #fff2; backdrop-filter: blur(5px); }
.ishtar-question h1 { font-size: clamp(1.35rem, 2.6vw, 2.1rem); }.ishtar-question p { font-size: clamp(.84rem, 1.35vw, 1rem); }
.ishtar-brazier { top: 65.5%; bottom: auto; width: 5.4%; height: 11%; opacity: 1; filter: none; }
.ishtar-brazier::before { display: none; }
.ishtar-brazier::after { bottom: 0; left: 17%; width: 66%; height: 100%; border-radius: 50% 50% 46% 46% / 64% 64% 34% 34%; clip-path: polygon(50% 0%, 67% 26%, 65% 43%, 88% 63%, 69% 86%, 53% 100%, 34% 87%, 12% 67%, 34% 45%, 29% 25%); background: radial-gradient(ellipse at 50% 78%, #fffbd1 0 10%, #ffe36a 14% 25%, #ff9e21 38% 57%, #d54210 73%, #761408 100%); box-shadow: 0 0 9px #ffe670aa, 0 0 22px #ff8e22a8, 0 0 40px #e14c1980; transform: scale(.26) translateY(18px); }
.ishtar-brazier--one { left: 3.5%; }.ishtar-brazier--two { left: 20.4%; }.ishtar-brazier--three { right: 20.4%; }.ishtar-brazier--four { right: 3.5%; }
@media (max-width: 700px) { .ishtar-question { padding: .75rem 1rem .85rem; }.ishtar-brazier { top: 67%; width: 8%; }.ishtar-brazier--two { left: 18%; }.ishtar-brazier--three { right: 18%; } }

/* Llamas de dos capas: una silueta curva en vez de figuras circulares o geométricas. */
.ishtar-brazier::before { display: block; position: absolute; z-index: 2; right: auto; bottom: 14%; left: 35%; width: 31%; height: 56%; opacity: 0; border: 0; border-radius: 55% 8% 55% 55%; background: radial-gradient(ellipse at 42% 72%, #fffde7 0 18%, #fff08a 42%, #ffbb27 75%, #ee6d16 100%); box-shadow: 0 0 10px #fff087aa; content: ""; transform: rotate(45deg) scale(.2) translateY(15px); transform-origin: bottom center; }
.ishtar-brazier::after { bottom: 0; left: 17%; width: 66%; height: 96%; border-radius: 58% 8% 58% 58%; clip-path: none; background: radial-gradient(ellipse at 43% 75%, #fff8ae 0 9%, #ffe15a 18%, #ff9b1f 40%, #e95010 69%, #8a1508 100%); box-shadow: 0 0 9px #ffe670aa, 0 0 22px #ff8e22a8, 0 0 40px #e14c1980; transform: rotate(45deg) scale(.2) translateY(15px); transform-origin: bottom center; }
.is-entering .ishtar-brazier::after, .is-entering .ishtar-brazier::before { animation: torch-ignite-clean 1.15s ease-out forwards, torch-flicker-clean 1.7s ease-in-out 1.15s infinite alternate; }.is-entering .ishtar-brazier--two::after, .is-entering .ishtar-brazier--two::before { animation-delay: .16s, 1.31s; }.is-entering .ishtar-brazier--three::after, .is-entering .ishtar-brazier--three::before { animation-delay: .31s, 1.46s; }.is-entering .ishtar-brazier--four::after, .is-entering .ishtar-brazier--four::before { animation-delay: .46s, 1.61s; }
@keyframes torch-ignite-clean { 0% { opacity: 0; transform: rotate(45deg) scale(.2) translateY(15px); } 58% { opacity: 1; transform: rotate(43deg) scale(1.14) translateY(-2px); } 100% { opacity: 1; transform: rotate(45deg) scale(1) translateY(0); } }
@keyframes torch-flicker-clean { from { filter: brightness(.86); transform: rotate(43deg) scale(.95) skewX(-2deg); } to { filter: brightness(1.22); transform: rotate(48deg) scale(1.06) skewX(2deg); } }

/* Recurso vectorial de llama: conserva una forma natural sin deformarse al animar. */
.ishtar-brazier::before { display: none; }
.ishtar-brazier::after { bottom: 2%; left: 24%; width: 52%; height: 96%; border-radius: 0; background: url("assets/llama-antorcha.svg") center / contain no-repeat; box-shadow: 0 0 12px #ffbb3e99, 0 0 30px #ed671a80; transform: scale(.2) translateY(15px); }
@keyframes torch-ignite-clean { 0% { opacity: 0; transform: scale(.2) translateY(15px); } 58% { opacity: 1; transform: scale(1.16) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes torch-flicker-clean { from { filter: brightness(.88); transform: scale(.95) skewX(-2deg); } to { filter: brightness(1.2); transform: scale(1.05) skewX(2deg); } }

/* Apertura ceremonial: la puerta se expresa con dos haces de luz, sin paneles artificiales. */
.ishtar-portal-light { position: absolute; z-index: 6; top: 29%; left: 34%; width: 32%; height: 58%; overflow: hidden; opacity: 0; border-radius: 48% 48% 0 0 / 28% 28% 0 0; background: radial-gradient(ellipse at 50% 66%, #fff9c9 0 7%, #ffe89cbb 16%, #e4a53655 35%, #f8d87b00 67%); filter: blur(1px); mix-blend-mode: screen; pointer-events: none; }
.ishtar-portal-light::before, .ishtar-portal-light::after { position: absolute; top: 13%; bottom: 0; width: 50%; opacity: 0; background: linear-gradient(90deg, #ffe9a800, #fff9cfcc); content: ""; }.ishtar-portal-light::before { left: 0; transform-origin: left center; }.ishtar-portal-light::after { right: 0; background: linear-gradient(270deg, #ffe9a800, #fff9cfcc); transform-origin: right center; }
.is-entering .ishtar-portal-light { animation: ishtar-portal-open 2.35s cubic-bezier(.2,.72,.23,1) .12s forwards; }.is-entering .ishtar-portal-light::before { animation: ishtar-ray-left 1.45s ease-out .25s forwards; }.is-entering .ishtar-portal-light::after { animation: ishtar-ray-right 1.45s ease-out .25s forwards; }
.ishtar-brazier::after { mix-blend-mode: screen; }
@keyframes ishtar-portal-open { 0% { opacity: 0; transform: scale(.35); } 28% { opacity: 1; transform: scale(.84); } 70% { opacity: .94; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes ishtar-ray-left { 0% { opacity: 0; transform: scaleX(.12); } 45% { opacity: .95; transform: scaleX(.75); } 100% { opacity: 0; transform: translateX(-135%) scaleX(.9); } }
@keyframes ishtar-ray-right { 0% { opacity: 0; transform: scaleX(.12); } 45% { opacity: .95; transform: scaleX(.75); } 100% { opacity: 0; transform: translateX(135%) scaleX(.9); } }

.ishtar-brazier { top: 68%; height: 10.5%; }.ishtar-brazier--one { left: 4%; }.ishtar-brazier--two { left: 20.5%; }.ishtar-brazier--three { right: 20.5%; }.ishtar-brazier--four { right: 4%; }
@media (max-width: 700px) { .ishtar-brazier { top: 70%; } }

/* Nueva introducción: los guardianes emergen del umbral oscuro. */
.guardian-page { overflow: hidden; background: #01030a; }.guardian-intro { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 42%, #172c4e 0%, #081222 34%, #02050c 67%, #000 100%); }.guardian-intro::before { position: absolute; z-index: -1; inset: 0; opacity: .65; background: repeating-linear-gradient(90deg, #6697b30a 0 1px, transparent 1px 64px), linear-gradient(180deg, transparent 62%, #000b); content: ""; }
.guardian-mist { position: absolute; z-index: 1; inset: 35% -10% -12%; opacity: .65; background: radial-gradient(ellipse at 50% 54%, #4c80ad38, transparent 47%), linear-gradient(90deg, #020712cc, transparent 35% 65%, #020712cc); filter: blur(18px); animation: guardian-mist 8s ease-in-out infinite alternate; pointer-events: none; }
.guardian-bearer { position: absolute; z-index: 2; bottom: -4vh; width: min(22vw, 280px); max-height: 77vh; object-fit: contain; opacity: 0; filter: drop-shadow(0 18px 24px #000) drop-shadow(0 0 16px #d59b3866); }.guardian-bearer--left { left: 3.5vw; animation: bearer-rise-left 1.8s cubic-bezier(.18,.82,.26,1) 3s forwards, bearer-breathe 4.4s ease-in-out 5s infinite alternate; }.guardian-bearer--right { right: 3.5vw; transform: scaleX(-1); animation: bearer-rise-right 1.8s cubic-bezier(.18,.82,.26,1) 3.2s forwards, bearer-breathe-right 4.4s ease-in-out 5.2s infinite alternate; }
.lamassu-stage { position: absolute; z-index: 3; bottom: -4vh; left: 50%; width: min(51vw, 680px); opacity: 0; transform: translateX(-50%) translateY(20vh) scale(.82); animation: lamassu-emerge 2.1s cubic-bezier(.17,.8,.22,1) 3.35s forwards; }.lamassu { display: block; width: 100%; max-height: 77vh; object-fit: contain; filter: drop-shadow(0 22px 30px #000) drop-shadow(0 0 22px #cb92336b); animation: lamassu-speak 2.6s ease-in-out 5.45s infinite; }
.guardian-question { position: absolute; z-index: 7; bottom: 6vh; left: 50%; width: min(90vw, 620px); padding: 1rem 1.35rem 1.1rem; color: #fff0c8; opacity: 0; background: linear-gradient(135deg, #07121bc9, #17263bbb); border: 1px solid #d9ac5b66; border-radius: 1.35rem; box-shadow: 0 18px 45px #000a, inset 0 1px #fff2; backdrop-filter: blur(5px); text-align: center; transform: translate(-50%, 5rem); animation: guardian-question-rise 1.25s cubic-bezier(.16,.84,.28,1) 5s forwards; }.guardian-question h1 { margin: .4rem 0; color: #ffe5a9; font-size: clamp(1.45rem, 3vw, 2.35rem); line-height: 1.1; text-shadow: 0 3px 12px #000; }.guardian-question p { margin: .35rem auto; color: #f5dfad; }.guardian-question .eyebrow { color: #f0c875; font-size: .82rem; letter-spacing: .16em; }
.guardian-radiance { position: absolute; z-index: 6; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, #fff9c7 0%, #f4ca67cc 12%, #b77a2d65 30%, transparent 59%); mix-blend-mode: screen; pointer-events: none; }.is-entering .guardian-radiance { animation: guardian-ascend 2.25s cubic-bezier(.18,.72,.25,1) forwards; }.is-entering .guardian-bearer, .is-entering .lamassu-stage { filter: brightness(1.48) drop-shadow(0 0 34px #ffe1a1aa); }.is-entering .guardian-question { animation: guardian-question-out .45s ease-in forwards; }.is-closing .guardian-question { animation: guardian-question-shake .5s ease-in-out; }
@keyframes guardian-mist { from { transform: translateX(-3%) scale(1); opacity: .38; } to { transform: translateX(3%) scale(1.08); opacity: .75; } } @keyframes bearer-rise-left { to { opacity: .92; transform: translateY(0); } } @keyframes bearer-rise-right { to { opacity: .92; transform: scaleX(-1) translateY(0); } } @keyframes bearer-breathe { from { transform: translateY(0); } to { transform: translateY(-10px) rotate(-.8deg); } } @keyframes bearer-breathe-right { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-10px) rotate(-.8deg); } } @keyframes lamassu-emerge { 0% { opacity: 0; transform: translateX(-50%) translateY(20vh) scale(.82); } 70% { opacity: 1; transform: translateX(-50%) translateY(-1vh) scale(1.02); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes lamassu-speak { 0%, 100% { transform: translateX(0) rotate(0); } 16% { transform: translateX(-7px) rotate(-.5deg); } 32% { transform: translateX(6px) rotate(.45deg); } 48% { transform: translateX(-4px) rotate(-.3deg); } 64% { transform: translateX(3px) rotate(.2deg); } } @keyframes guardian-question-rise { to { opacity: 1; transform: translate(-50%, 0); } } @keyframes guardian-question-out { to { opacity: 0; transform: translate(-50%, 2rem) scale(.94); } } @keyframes guardian-ascend { 0% { opacity: 0; transform: scale(.5); } 34% { opacity: .95; transform: scale(1); } 100% { opacity: 1; transform: scale(2.4); } }
@media (max-width: 700px) { .guardian-bearer { width: 29vw; bottom: -1vh; }.guardian-bearer--left { left: -2vw; }.guardian-bearer--right { right: -2vw; }.lamassu-stage { width: 82vw; bottom: 8vh; }.guardian-question { bottom: 2vh; width: min(92vw, 480px); padding: .85rem 1rem; }.guardian-question h1 { font-size: 1.4rem; }.guardian-question .ishtar-actions { flex-direction: column; }.guardian-page .music-toggle { top: auto; bottom: 1rem; right: 1rem; } }

/* Secuencia refinada: portadores primero, Lamassu avanza después desde la penumbra. */
.guardian-intro { background: radial-gradient(ellipse at 50% 47%, #101c30 0%, #050914 42%, #010207 72%, #000 100%); }.guardian-intro::before { opacity: .38; background: repeating-linear-gradient(90deg, #587fa10b 0 1px, transparent 1px 74px), linear-gradient(180deg, #0005, #000d 72%, #000); }
.guardian-bearer { bottom: -7vh; width: min(40vw, 500px); max-height: 93vh; filter: drop-shadow(0 22px 32px #000) drop-shadow(0 0 25px #d9a33b99) brightness(1.08); }.guardian-bearer--left { left: -1vw; animation: bearer-rise-left 2.15s cubic-bezier(.18,.82,.26,1) 3s forwards, bearer-breathe 3.4s ease-in-out 5.2s infinite alternate, bearer-aura 2.8s ease-in-out 5.2s infinite alternate; }.guardian-bearer--right { right: -1vw; animation: bearer-rise-right 2.15s cubic-bezier(.18,.82,.26,1) 3.18s forwards, bearer-breathe-right 3.4s ease-in-out 5.35s infinite alternate, bearer-aura 2.8s ease-in-out 5.35s infinite alternate; }
.lamassu-stage { z-index: 4; bottom: -5vh; width: min(55vw, 760px); opacity: 0; transform: translateX(-50%) translateY(32vh) scale(.58); animation: lamassu-emerge-slow 3.8s cubic-bezier(.14,.8,.2,1) 4.85s forwards; }.lamassu-walk { width: 100%; animation: lamassu-advance 6s ease-in-out 8.65s infinite alternate; }.lamassu { max-height: 81vh; filter: drop-shadow(0 28px 36px #000) drop-shadow(0 0 30px #d49a3f85) brightness(1.08); animation: lamassu-speak-mystic 3.1s ease-in-out 8.7s infinite; }
.guardian-question { z-index: 8; bottom: 5vh; animation-delay: 8.45s; }.guardian-radiance { z-index: 10; background: radial-gradient(ellipse at 50% 51%, #fffde1 0%, #ffe9a3 16%, #efbd5eaf 35%, #c47d2d42 56%, transparent 74%); }.is-entering .guardian-radiance { animation: guardian-ascend-single 2.15s cubic-bezier(.17,.73,.21,1) forwards; }.is-entering .guardian-intro { animation: guardian-scene-fade 2.15s ease-in forwards; }.is-entering .guardian-bearer, .is-entering .lamassu-stage { filter: brightness(1.72) drop-shadow(0 0 42px #ffe7a8cc); }
@keyframes bearer-aura { from { filter: drop-shadow(0 22px 32px #000) drop-shadow(0 0 19px #d9a33b77) brightness(1.04); } to { filter: drop-shadow(0 22px 32px #000) drop-shadow(0 0 34px #f4cb77cc) brightness(1.2); } } @keyframes lamassu-emerge-slow { 0% { opacity: 0; transform: translateX(-50%) translateY(32vh) scale(.58); filter: brightness(.25); } 55% { opacity: .78; transform: translateX(-50%) translateY(8vh) scale(.86); filter: brightness(.75); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); filter: brightness(1); } } @keyframes lamassu-advance { from { transform: translateY(0) scale(1); } to { transform: translateY(-8px) scale(1.055); } } @keyframes lamassu-speak-mystic { 0%, 100% { transform: translateX(0) rotate(0); filter: brightness(1.04); } 15% { transform: translateX(-9px) rotate(-.65deg); } 30% { transform: translateX(8px) rotate(.55deg); filter: brightness(1.2); } 48% { transform: translateX(-5px) rotate(-.35deg); } 65% { transform: translateX(4px) rotate(.25deg); } } @keyframes guardian-ascend-single { 0% { opacity: 0; transform: scale(.3); } 38% { opacity: .9; transform: scale(1); } 100% { opacity: 1; transform: scale(3.3); } } @keyframes guardian-scene-fade { to { filter: brightness(1.3) saturate(.7); } }
@media (max-width: 700px) { .guardian-bearer { width: 42vw; bottom: -2vh; }.guardian-bearer--left { left: -9vw; }.guardian-bearer--right { right: -9vw; }.lamassu-stage { width: 88vw; bottom: 9vh; }.guardian-question { bottom: 2vh; animation-delay: 8.45s; } }

/* Acceso global, visible sin distraer del contenido principal. */
.return-to-guardians { position: fixed; z-index: 40; bottom: 1.15rem; left: 1.15rem; padding: .42rem .7rem; color: #e9cc8a; background: #07111bbd; border: 1px solid #d5a84e66; border-radius: 999px; box-shadow: 0 5px 16px #0008; font-size: .76rem; letter-spacing: .04em; text-decoration: none; opacity: .7; transition: opacity .2s ease, background .2s ease, transform .2s ease; }.return-to-guardians:hover, .return-to-guardians:focus-visible { color: #fff1c3; background: #493314e8; opacity: 1; outline: 0; transform: translateY(-2px); }
@media (max-width: 700px) { .return-to-guardians { bottom: .8rem; left: .8rem; } }

/* Corriente continua: el trayecto se compone de capas de agua, espuma y reflejos,
   sin utilizar una imagen estática como cortina. */
#river-transition { z-index: 100; isolation: isolate; opacity: 1; background: #062545; clip-path: inset(100% 0 0 0); transition: none; animation: none; }
#river-transition::before { inset: -35% -22%; opacity: .68; filter: none; mix-blend-mode: screen; background: repeating-radial-gradient(ellipse 126% 22% at 50% 116%, transparent 0 25px, #a6e8ff42 26px 28px, transparent 30px 57px), repeating-radial-gradient(ellipse 100% 18% at 50% 112%, transparent 0 35px, #e1f8ff39 36px 38px, transparent 40px 75px); animation: river-ripples 1.35s linear infinite; }
#river-transition::after { inset: -20%; opacity: .82; background: linear-gradient(112deg, transparent 19%, #dff9ff00 34%, #dff9ff70 47%, #a3e6ff20 55%, transparent 68%), radial-gradient(ellipse at 48% 95%, #2d9aceaa, transparent 57%); mix-blend-mode: screen; animation: river-light-run 1.65s linear infinite; }
.river-transition__depth { position: absolute; inset: 0; display: block; z-index: -1; background: radial-gradient(ellipse at 50% 108%, #4ab9e2 0%, #1674aa 36%, #0b4774 67%, #062444 100%); }
.river-transition__current { position: absolute; inset: -28% -24%; display: block; border-radius: 48%; opacity: .8; background: repeating-radial-gradient(ellipse 105% 18% at 50% 115%, transparent 0 25px, #b8efff78 26px 28px, transparent 30px 58px), repeating-radial-gradient(ellipse 80% 14% at 50% 111%, transparent 0 43px, #075483aa 45px 48px, transparent 49px 87px); transform: perspective(420px) rotateX(48deg) scale(1.3); animation: river-current-forward .98s linear infinite; }
.river-transition__current--back { opacity: .42; filter: blur(2px); animation-duration: 1.65s; }
.river-transition__current--mid { opacity: .62; animation-duration: 1.22s; animation-delay: -.6s; }
.river-transition__current--front { opacity: .76; filter: drop-shadow(0 -5px 7px #b7ecff4d); animation-duration: .82s; animation-delay: -.3s; }
.river-transition__foam { position: absolute; inset: -30% -20%; display: block; opacity: .85; background: radial-gradient(ellipse 7px 3px at 12% 91%, #f4ffff 0 38%, transparent 48%) 0 0 / 123px 88px, radial-gradient(ellipse 11px 4px at 70% 72%, #d9f7ff 0 36%, transparent 47%) 0 0 / 167px 116px; filter: blur(.25px); animation: river-foam-forward 1.1s linear infinite; }
.river-transition__glints { position: absolute; inset: 0; display: block; opacity: .72; background: linear-gradient(102deg, transparent 18%, #d9f9ff00 41%, #edffffaa 50%, #d9f9ff00 59%, transparent 80%); transform: translateX(-120%) skewX(-16deg); animation: river-glint-pass 1.45s ease-in-out infinite; }
#river-transition.is-active { clip-path: inset(0); animation: river-flood-in 1.55s cubic-bezier(.22,.72,.2,1) forwards; }
#river-transition.is-arriving { clip-path: inset(0); animation: river-drain-away 1.55s cubic-bezier(.25,.7,.25,1) forwards; }
body.river-leaving > :not(#river-transition) { animation: page-carried-away 1.52s cubic-bezier(.22,.72,.2,1) forwards; }
@keyframes river-flood-in { 0% { clip-path: inset(100% 0 0 0); } 42% { clip-path: inset(53% 0 0 0); } 100% { clip-path: inset(0); } }
@keyframes river-drain-away { 0% { clip-path: inset(0); } 62% { clip-path: inset(0 0 52% 0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes river-current-forward { from { background-position: 0 0, 0 0; transform: perspective(420px) rotateX(48deg) scale(1.3) translateY(-4%); } to { background-position: 0 108px, 0 164px; transform: perspective(420px) rotateX(48deg) scale(1.3) translateY(4%); } }
@keyframes river-ripples { from { background-position: 0 0, 0 0; transform: translateY(-3%); } to { background-position: 0 112px, 0 167px; transform: translateY(3%); } }
@keyframes river-foam-forward { from { background-position: 0 -8px, 0 -25px; transform: translateY(-4%); } to { background-position: 0 126px, 0 149px; transform: translateY(5%); } }
@keyframes river-light-run { from { background-position: -130% 0, 0 0; } to { background-position: 145% 0, 0 0; } }
@keyframes river-glint-pass { 0% { opacity: 0; transform: translateX(-120%) skewX(-16deg); } 25% { opacity: .78; } 65% { opacity: .35; } 100% { opacity: 0; transform: translateX(125%) skewX(-16deg); } }
@keyframes page-carried-away { 0% { opacity: 1; transform: translateY(0) scale(1); filter: none; } 100% { opacity: .08; transform: translateY(-3.5%) scale(.975); filter: saturate(.7) blur(1px); } }
@media (prefers-reduced-motion: reduce) { #river-transition, #river-transition::before, #river-transition::after, .river-transition__current, .river-transition__foam, .river-transition__glints { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Tablillas de trabajo: profundidad de piedra, oro y lapislázuli sin efectos costosos. */
.workspace-page { background: radial-gradient(circle at 50% 0, #173654 0, #091522 47%, #050a12 100%); color: #f5e5be; }
.workspace-page .workspace { position: relative; }
.workspace-page .topbar, .workspace-page .content-card, .workspace-page .client-figures-panel { border: 1px solid #c99b4c70; box-shadow: inset 0 1px #fff2, inset 0 -14px 30px #130b0540, 0 15px 38px #0007; }
.workspace-page .topbar { background: linear-gradient(115deg, #162f43ed, #0b1c2de8); border-radius: 1.25rem; }
.workspace-page .page-nav { gap: .7rem; padding: .55rem; background: #07111dbd; border: 1px solid #c99b4c42; border-radius: 1rem; box-shadow: 0 8px 22px #0005; }
.workspace-page .nav-button { border-radius: .7rem; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.workspace-page .nav-button:hover { transform: translateY(-2px); box-shadow: 0 5px 13px #0006; }
.workspace-page .content-card { background: linear-gradient(140deg, #e8d1a0 0%, #b8844e 7%, #e5c68d 11%, #e1c188 76%, #8f5b2b 100%); color: #28180d; border-radius: 1.25rem; }
.workspace-page .content-card input, .workspace-page .content-card select { border-color: #89562685; background: #fff7e4e8; color: #2c190d; box-shadow: inset 0 2px 5px #6e451c28; }
.workspace-page .content-card button:not(.outline) { background: linear-gradient(135deg, #704010, #bb8130 50%, #704010); box-shadow: inset 0 1px #ffe7a1aa, 0 4px 10px #55300d55; }
.tablet-kicker { margin: 0 0 .3rem; color: #75501d; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.card-intro { margin: .25rem 0 1.3rem; color: #51351b; }
.client-registration-layout { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(260px, .96fr); gap: clamp(1rem, 2.6vw, 2rem); align-items: stretch; }
.registration-card { margin: 0; }.registration-card h3, .client-figures-panel h3 { margin: .15rem 0 .2rem; }
.client-figures-panel { position: relative; overflow: hidden; display: flex; min-height: 500px; flex-direction: column; align-items: center; padding: 1.3rem 1.45rem .9rem; color: #f6e4b9; background: radial-gradient(ellipse at 50% 86%, #c1873755, transparent 42%), linear-gradient(145deg, #102d44, #07131f 73%); border-radius: 1.25rem; text-align: center; }
.client-figures-panel::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #d9a64212, transparent 23% 77%, #d9a64212); content: ""; }
.client-figures-panel > p:not(.tablet-kicker), .client-figures-panel small { position: relative; z-index: 1; color: #e6cf9c; }.client-figures-panel small { margin-top: auto; font-size: .78rem; }
.client-figures { position: relative; z-index: 1; width: min(100%, 420px); margin: .3rem auto -.35rem; transform-origin: 50% 94%; animation: clients-observe 8s ease-in-out infinite; will-change: transform; }
.client-figures img { display: block; width: 100%; max-height: 350px; object-fit: contain; filter: drop-shadow(0 17px 13px #000b) drop-shadow(0 0 13px #d8a94b4f); }
.client-figures.is-celebrating { animation: clients-celebrate 1.05s cubic-bezier(.2,.82,.28,1) both; }
@keyframes clients-observe { 0%, 22%, 100% { transform: rotate(0) translateY(0); } 29% { transform: rotate(-1.1deg) translateX(-3px); } 39% { transform: rotate(-.3deg) translateX(-1px); } 62% { transform: rotate(1.15deg) translateX(3px); } 72% { transform: rotate(.2deg) translateX(1px); } }
@keyframes clients-celebrate { 0% { transform: translateY(0) rotate(0); } 22% { transform: translate(-7px, -15px) rotate(-2deg); } 46% { transform: translate(8px, -25px) rotate(2deg); } 70% { transform: translate(-4px, -10px) rotate(-1deg); } 100% { transform: translateY(0) rotate(0); } }
.workspace-page .order-cart { border: 1px solid #80501e5c; border-radius: 1rem; background: linear-gradient(135deg, #fff0c9a8, #d5a36580); box-shadow: inset 0 1px #fff8; }
.workspace-page .table-wrap { border: 1px solid #8351254d; border-radius: .85rem; background: #fff4d7ad; overflow: hidden; }
.workspace-page table thead { background: #563411; color: #ffe9b5; }.workspace-page table tr:nth-child(even) { background: #bd86432a; }
@media (max-width: 780px) { .client-registration-layout { grid-template-columns: 1fr; }.client-figures-panel { min-height: 410px; }.client-figures { max-width: 310px; }.workspace-page .page-nav { display: grid; grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .client-figures, .client-figures.is-celebrating { animation: none; } }

/* Contraste estable para lectura cómoda sobre piedra y tonos oscuros. */
.workspace-page .page-heading h2, .workspace-page .topbar h1 { color: #fff0c5; text-shadow: 0 2px 8px #000b; }
.workspace-page .page-heading p, .workspace-page .topbar .eyebrow, .workspace-page .user-actions, .workspace-page .cart-note { color: #f1dbab; text-shadow: 0 1px 4px #000a; }
.workspace-page .content-card h3, .workspace-page .content-card label, .workspace-page .content-card p, .workspace-page .content-card li, .workspace-page .content-card td { color: #2d190d; text-shadow: none; }
.workspace-page .content-card .tablet-kicker, .workspace-page .content-card .cart-kicker { color: #694116; }
.workspace-page .content-card .empty { color: #5e3a18; }.workspace-page .content-card .cart-note { color: #4e3018; text-shadow: none; }
.order-journey { display: grid; gap: 1.15rem; }.order-step-card, .destination-step-card { margin: 0; }
.step-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }.step-title > span { display: grid; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; place-items: center; color: #ffedb6; background: #563411; border: 1px solid #d5a84e; border-radius: 50%; box-shadow: 0 3px 7px #54310e55; font-weight: 800; }.step-title h3 { margin: 0; }.step-title .tablet-kicker { margin-bottom: .1rem; }
.destination-step-card { padding-bottom: 1.3rem; }.delivery-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.delivery-choice { position: relative; overflow: hidden; display: grid; min-height: 178px; padding: 0; color: #fff0c5; background: #102337; border: 2px solid #704617; border-radius: .95rem; box-shadow: 0 7px 17px #50300e44; cursor: pointer; isolation: isolate; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.delivery-choice::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 16%, #07101be8 92%); content: ""; }.delivery-choice:hover, .delivery-choice:focus-visible, .delivery-choice.is-selected { border-color: #f0c76f; box-shadow: 0 0 0 3px #f1c86d31, 0 10px 20px #38200770; outline: none; transform: translateY(-3px); }.delivery-choice img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: destination-breathe 7s ease-in-out infinite alternate; }.delivery-choice:nth-child(2) img { animation-delay: -3.5s; }.delivery-choice span { align-self: end; padding: .85rem .95rem; }.delivery-choice strong, .delivery-choice small { display: block; color: #fff2c8; text-shadow: 0 2px 5px #000; }.delivery-choice strong { font-size: 1.08rem; }.delivery-choice small { margin-top: .16rem; font-family: inherit; font-size: .78rem; line-height: 1.25; }
.order-cart .step-title { margin-bottom: .4rem; }.order-cart .cart-heading p { margin: .1rem 0; }.order-cart .cart-heading .cart-kicker { font-weight: 800; }.order-cart .item-list { background: #fff7e0a6; border: 1px solid #80501e55; border-radius: .75rem; }.order-cart .cart-item { border-color: #94633376; }.order-cart .cart-remove { color: #fff0c4; background: #763316; border-color: #4f1f0d; }.seal-order { width: min(100%, 430px); justify-self: center; padding: .9rem 1.2rem; border-radius: .8rem; font-size: 1rem; }
@keyframes destination-breathe { from { transform: scale(1.01); filter: saturate(.94) brightness(.86); } to { transform: scale(1.08); filter: saturate(1.1) brightness(1.08); } }
@media (max-width: 700px) { .delivery-choices { grid-template-columns: 1fr; }.delivery-choice { min-height: 155px; }.step-title { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .delivery-choice img { animation: none; }.delivery-choice:hover, .delivery-choice:focus-visible, .delivery-choice.is-selected { transform: none; } }

/* Sello ceremonial al registrar la tablilla: solo transforma capas pequeñas y no bloquea la interfaz. */
.order-seal-overlay { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 1.2rem; pointer-events: none; opacity: 0; background: #02070b58; transition: opacity .16s ease; }.order-seal-overlay.is-visible { opacity: 1; }
.seal-tablet { position: relative; width: min(88vw, 470px); min-height: 270px; overflow: hidden; display: grid; align-content: center; justify-items: center; padding: 2.3rem 1.6rem 1.45rem; color: #4d2e12; background: linear-gradient(135deg, #f2d59c, #b9793c 10%, #e4bd7c 18%, #d49a58 84%, #8e5528); border: 2px solid #72451f; border-radius: 1.2rem 1.2rem 2.5rem 2.5rem; box-shadow: inset 0 2px #fff6, inset 0 -17px 25px #56301144, 0 22px 55px #000a; transform: translateY(2.2rem) scale(.88); }.order-seal-overlay.is-visible .seal-tablet { animation: tablet-present 1.3s cubic-bezier(.18,.78,.25,1) forwards; }
.seal-tablet__line { position: relative; z-index: 0; width: min(90%, 300px); height: 2px; margin: .36rem 0; opacity: .35; background: #70441d; border-radius: 50%; transform: skewX(-10deg); }.seal-tablet p { z-index: 3; margin: .85rem 0 0; color: #543115; font-family: Georgia, serif; font-size: clamp(.98rem, 2.4vw, 1.25rem); font-weight: 700; letter-spacing: .03em; text-shadow: 0 1px #ffe8b0; }
.mesopotamian-seal { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: clamp(104px, 22vw, 144px); height: clamp(104px, 22vw, 144px); place-items: center; color: #e7b95c; background: radial-gradient(circle at 36% 30%, #a97023, #4a250c 66%, #271306); border: 7px double #e6b95f; border-radius: 50%; box-shadow: inset 0 0 0 5px #291407, 0 8px 13px #44230f80; font-family: Georgia, serif; opacity: 0; transform: translate(-50%, -160%) rotate(-22deg) scale(1.7); }.mesopotamian-seal::before { position: absolute; inset: 13%; border: 1px dashed #e8c36d88; border-radius: inherit; content: ""; }.mesopotamian-seal span, .mesopotamian-seal b, .mesopotamian-seal i { position: absolute; font-size: 1.55rem; font-style: normal; text-shadow: 0 1px #2a1206; }.mesopotamian-seal span { top: 23%; }.mesopotamian-seal b { left: 24%; bottom: 19%; }.mesopotamian-seal i { right: 22%; bottom: 19%; }.order-seal-overlay.is-visible .mesopotamian-seal { animation: seal-imprint 1.08s cubic-bezier(.12,.82,.28,1) .12s forwards; }
@keyframes tablet-present { 0% { opacity: 0; transform: translateY(2.2rem) scale(.88); } 24% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes seal-imprint { 0% { opacity: 0; transform: translate(-50%, -160%) rotate(-22deg) scale(1.7); } 45% { opacity: 1; transform: translate(-50%, -50%) rotate(3deg) scale(1.04); } 60% { transform: translate(-50%, -50%) rotate(0) scale(.92); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .order-seal-overlay.is-visible .seal-tablet, .order-seal-overlay.is-visible .mesopotamian-seal { animation-duration: .01ms; } }