/* =====================================================================
   KORAX · Escenas de las demos (intro, transición y fondos animados)
   Estados de la capa .dx:
     .dx-cerrado  cubre la pantalla, sin transición (inicio de intro o llegada)
     .dx-pre      posición antes de cubrir (salida hacia otra página)
     (sin clase)  cubierta, con transición
     .dx-abrir    se abre y descubre la página
   ===================================================================== */
html.dx-intro-pendiente::before, html.dx-llega::before {
  content: ""; position: fixed; inset: 0; z-index: 2999; background: var(--dx-cubre, #000);
  animation: dx-seguro .3s 4.5s forwards;
}
@keyframes dx-seguro { to { opacity: 0; visibility: hidden; } }
html[data-escena="corte-norte"] { --dx-cubre: #F4ECDF; }
html[data-escena="raven-selection"] { --dx-cubre: #315368; }
html[data-escena="telar-norte"] { --dx-cubre: #B5532D; }
html[data-escena="valeria-ortiz"] { --dx-cubre: #2F4BFF; }
html[data-escena="vertice"] { --dx-cubre: #0B1F33; }
html[data-escena="solaria"] { --dx-cubre: #0E3B2E; }
html[data-escena="ambar-atelier"] { --dx-cubre: #0D0B09; }

.dx { position: fixed; inset: 0; z-index: 3000; overflow: hidden; pointer-events: auto; --cx: 50vw; --cy: 50vh; }
.dx-abrir { pointer-events: none; }
.dx-cerrado *, .dx-cerrado { transition: none !important; }
.dx__saltar {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid currentColor; background: rgba(0,0,0,.35); color: #fff;
  font: 500 14px "Poppins", Arial, sans-serif; cursor: pointer;
}
.dx-abrir .dx__saltar { opacity: 0; transition: opacity .2s; }
.dx__saltar:focus-visible { outline: 2px solid #FF8000; outline-offset: 3px; }

/* ======================= CORTE NORTE · máquina que corta ======================= */
.dx--corte-norte { color: #17140F; }
.dx--corte-norte .dx__saltar { color: #17140F; background: rgba(244,236,223,.8); }
.dx--corte-norte .dx__p {
  position: absolute; left: 0; right: 0; height: 50.2%; overflow: hidden; background: #F4ECDF;
  background-image: repeating-linear-gradient(135deg, rgba(184,50,42,.06) 0 22px, transparent 22px 44px, rgba(31,58,95,.06) 44px 66px, transparent 66px 88px);
  transition: transform .75s cubic-bezier(.76,0,.24,1);
}
.dx--corte-norte .dx__p--arriba { top: 0; border-bottom: 10px solid transparent; border-image: repeating-linear-gradient(90deg, #B8322A 0 18px, #fff 18px 26px, #1F3A5F 26px 44px, #fff 44px 52px) 10; }
.dx--corte-norte .dx__p--abajo { bottom: 0; border-top: 10px solid transparent; border-image: repeating-linear-gradient(90deg, #B8322A 0 18px, #fff 18px 26px, #1F3A5F 26px 44px, #fff 44px 52px) 10; }
.dx--corte-norte .dx__marca { position: absolute; left: 50%; display: grid; justify-items: center; font-family: "Alfa Slab One", Georgia, serif; line-height: .95; white-space: nowrap; }
.dx--corte-norte .dx__marca b { font-weight: 400; font-size: clamp(3rem, 1.5rem + 7vw, 8rem); }
.dx--corte-norte .dx__marca small { font: 600 clamp(12px, 1.2vw, 16px) "Work Sans", sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #5E564B; margin-top: 10px; }
.dx--corte-norte .dx__p--arriba .dx__marca { bottom: 0; transform: translate(-50%, 50%); }
.dx--corte-norte .dx__p--abajo .dx__marca { top: 0; transform: translate(-50%, -50%); }
.dx--corte-norte .dx__corte { position: absolute; left: 0; top: 50%; width: 100%; height: 3px; margin-top: -1.5px; background: #17140F; transform: scaleX(0); transform-origin: left; z-index: 3; }
.dx--corte-norte .dx__maquina { position: absolute; top: 50%; left: 0; width: clamp(210px, 30vw, 400px); margin-top: calc(clamp(210px, 30vw, 400px) * -.185); transform: translateX(-110%); z-index: 5; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.dx--corte-norte .dx__pelos i { position: absolute; top: 50%; left: var(--x); width: 2px; height: 14px; background: #17140F; border-radius: 2px; opacity: 0; z-index: 4; }
.dx--corte-norte.dx-intro .dx__corte { animation: dx-cn-corte 1.25s .35s cubic-bezier(.45,0,.3,1) forwards; }
.dx--corte-norte.dx-intro .dx__maquina { animation: dx-cn-maquina 1.25s .35s cubic-bezier(.45,0,.3,1) forwards; }
.dx--corte-norte.dx-intro .dx__pelos i { animation: dx-cn-pelo 1.1s calc(.4s + var(--i) * 80ms) ease-in forwards; }
.dx--corte-norte.dx-intro .dx__marca { animation: dx-aparecer .5s both; }
@keyframes dx-cn-corte { to { transform: scaleX(1); } }
@keyframes dx-cn-maquina { 0% { transform: translateX(-110%) rotate(-2deg); } 50% { transform: translateX(45vw) rotate(1.5deg); } 100% { transform: translateX(calc(100vw + 20%)) rotate(-1deg); } }
@keyframes dx-cn-pelo { 0% { opacity: 0; transform: translateY(0) rotate(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(42vh) rotate(220deg) translateX(30px); } }
@keyframes dx-aparecer { from { opacity: 0; } }
.dx--corte-norte.dx-cubrir .dx__maquina { animation: dx-cn-maquina .62s cubic-bezier(.45,0,.3,1) forwards; }
.dx--corte-norte.dx-cubrir .dx__corte { animation: dx-cn-corte .62s cubic-bezier(.45,0,.3,1) forwards; }
.dx--corte-norte.dx-cubrir .dx__marca { opacity: 0; }
.dx--corte-norte.dx-llegada .dx__marca, .dx--corte-norte.dx-llegada .dx__maquina { display: none; }
.dx--corte-norte.dx-llegada .dx__corte { transform: scaleX(1); }
.dx--corte-norte.dx-pre .dx__p--arriba, .dx--corte-norte.dx-abrir .dx__p--arriba { transform: translateY(-104%); }
.dx--corte-norte.dx-pre .dx__p--abajo, .dx--corte-norte.dx-abrir .dx__p--abajo { transform: translateY(104%); }
.dx--corte-norte.dx-abrir .dx__corte { transform: scaleX(1); opacity: 0; transition: opacity .3s; }
.dx--corte-norte.dx-abrir .dx__maquina { opacity: 0; transition: opacity .2s; }
.dx--corte-norte.dx-rapido .dx__p { transition-duration: .45s; }

/* ======================= RAVEN · columnas y logo ======================= */
.dx--raven-selection { color: #fff; }
.dx--raven-selection .dx__col { position: absolute; top: 0; bottom: 0; width: 20.2%; left: calc(var(--i) * 20%); background: #315368; transition: transform .65s cubic-bezier(.76,0,.24,1) calc(var(--i) * 60ms); }
.dx--raven-selection .dx__col:nth-child(even) { background: #243E4E; }
.dx--raven-selection .dx__centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; z-index: 3; transition: opacity .25s, transform .5s; }
.dx--raven-selection .dx__iso { width: clamp(90px, 12vw, 150px); fill: #fff; clip-path: inset(0 100% 0 0); }
.dx--raven-selection .dx__palabra { width: clamp(200px, 28vw, 360px); fill: #fff; opacity: 0; }
.dx--raven-selection .dx__desc { width: clamp(130px, 18vw, 220px); fill: #fff; opacity: 0; }
.dx--raven-selection .dx__linea { width: clamp(200px, 28vw, 360px); height: 1px; background: rgba(255,255,255,.6); transform: scaleX(0); }
.dx--raven-selection.dx-intro .dx__iso { animation: dx-rv-iso 1s .15s cubic-bezier(.65,0,.35,1) forwards; }
.dx--raven-selection.dx-intro .dx__linea { animation: dx-rv-linea .8s .8s cubic-bezier(.65,0,.35,1) forwards; }
.dx--raven-selection.dx-intro .dx__palabra { animation: dx-subir .7s 1s cubic-bezier(.16,1,.3,1) forwards; }
.dx--raven-selection.dx-intro .dx__desc { animation: dx-subir .7s 1.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes dx-rv-iso { to { clip-path: inset(0 0 0 0); } }
@keyframes dx-rv-linea { to { transform: scaleX(1); } }
@keyframes dx-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dx--raven-selection.dx-cubrir .dx__centro, .dx--raven-selection.dx-llegada .dx__centro { opacity: 0; }
.dx--raven-selection.dx-cubrir .dx__iso { clip-path: none; }
.dx--raven-selection.dx-pre .dx__col { transform: translateY(102%); }
.dx--raven-selection.dx-abrir .dx__col { transform: translateY(-102%); }
.dx--raven-selection.dx-abrir .dx__centro { opacity: 0; transform: translateY(-30px); }
.dx--raven-selection.dx-rapido .dx__col { transition-duration: .45s; transition-delay: calc(var(--i) * 30ms); }

/* ======================= TELAR NORTE · hilos que se tejen ======================= */
.dx--telar-norte.dx-intro.dx-cerrado { background: #2A2622; }
.dx--telar-norte .dx__tira { position: absolute; left: 0; right: 0; height: 16.8%; top: calc(var(--i) * 16.66%); transition: transform .7s cubic-bezier(.76,0,.24,1) calc(var(--i) * 55ms); }
.dx--telar-norte .dx__tira i { position: absolute; inset: 0; transform-origin: left; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px); }
.dx--telar-norte .dx__tira:nth-child(even) i { transform-origin: right; }
.dx--telar-norte .dx__tira:nth-child(6n+1) i { background-color: #B5532D; }
.dx--telar-norte .dx__tira:nth-child(6n+2) i { background-color: #2E3A6B; }
.dx--telar-norte .dx__tira:nth-child(6n+3) i { background-color: #C8902F; }
.dx--telar-norte .dx__tira:nth-child(6n+4) i { background-color: #2A2622; }
.dx--telar-norte .dx__tira:nth-child(6n+5) i { background-color: #EFE6D8; }
.dx--telar-norte .dx__tira:nth-child(6n+6) i { background-color: #B5532D; }
.dx--telar-norte .dx__marca { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; font-family: "Fraunces", Georgia, serif; font-size: clamp(2.6rem, 1.4rem + 6vw, 7rem); letter-spacing: -.03em; color: #FAF6EF; background: rgba(42,38,34,.92); padding: .1em .45em .18em; border-radius: 999px; white-space: nowrap; transition: opacity .3s; }
.dx--telar-norte .dx__marca em { color: #F0B496; }
.dx--telar-norte.dx-intro .dx__tira i { animation: dx-tn-tejer .55s calc(var(--i) * 110ms) cubic-bezier(.65,0,.35,1) both; }
.dx--telar-norte.dx-intro .dx__marca { animation: dx-tn-marca .6s .85s cubic-bezier(.16,1,.3,1) both; }
@keyframes dx-tn-tejer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dx-tn-marca { from { opacity: 0; transform: translate(-50%, -40%) scale(.92); } }
.dx--telar-norte.dx-cubrir .dx__marca, .dx--telar-norte.dx-llegada .dx__marca { display: none; }
.dx--telar-norte.dx-pre .dx__tira:nth-child(odd) { transform: translateX(102%); }
.dx--telar-norte.dx-pre .dx__tira:nth-child(even) { transform: translateX(-102%); }
.dx--telar-norte.dx-abrir .dx__tira:nth-child(odd) { transform: translateX(-102%); }
.dx--telar-norte.dx-abrir .dx__tira:nth-child(even) { transform: translateX(102%); }
.dx--telar-norte.dx-abrir .dx__marca { opacity: 0; }

/* ======================= VALERIA ORTIZ · círculo de color ======================= */
.dx--valeria-ortiz .dx__p { position: absolute; inset: 0; background: #2F4BFF; display: grid; place-items: center; clip-path: circle(150% at var(--cx) var(--cy)); transition: clip-path .62s cubic-bezier(.76,0,.24,1); }
.dx--valeria-ortiz .dx__marca { position: relative; z-index: 2; font-family: "Syne", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 1rem + 8vw, 9rem); letter-spacing: -.04em; color: #fff; white-space: nowrap; }
.dx--valeria-ortiz .dx__marca > span { display: inline-block; }
.dx--valeria-ortiz .dx__marca sup { font-size: .3em; color: #FF6B57; }
.dx--valeria-ortiz .dx__bola { position: absolute; left: 50%; top: 50%; width: min(60vw, 520px); aspect-ratio: 1; margin: calc(min(60vw, 520px) / -2) 0 0 calc(min(60vw, 520px) / -2); border-radius: 50%; background: #FF6B57; transform: scale(0); }
.dx--valeria-ortiz .dx__bola--2 { width: min(22vw, 180px); margin: 0; left: 62%; top: 18%; background: #C9B8FF; }
.dx--valeria-ortiz.dx-intro .dx__bola { animation: dx-vo-bola .9s .1s cubic-bezier(.34,1.56,.64,1) forwards; }
.dx--valeria-ortiz.dx-intro .dx__bola--2 { animation: dx-vo-bola2 1.6s .3s ease-in-out forwards; }
.dx--valeria-ortiz.dx-intro .dx__marca > span { animation: dx-vo-letra .5s calc(.35s + var(--i) * 45ms) cubic-bezier(.34,1.56,.64,1) both; }
@keyframes dx-vo-bola { to { transform: scale(1); } }
@keyframes dx-vo-bola2 { 0% { transform: scale(0); } 40% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1) translate(-40px, 30px); } }
@keyframes dx-vo-letra { from { opacity: 0; transform: translateY(60%) rotate(8deg); } }
.dx--valeria-ortiz.dx-cubrir .dx__marca, .dx--valeria-ortiz.dx-llegada .dx__marca, .dx--valeria-ortiz.dx-cubrir .dx__bola, .dx--valeria-ortiz.dx-llegada .dx__bola { display: none; }
.dx--valeria-ortiz.dx-pre .dx__p { clip-path: circle(0% at var(--cx) var(--cy)); }
.dx--valeria-ortiz.dx-abrir .dx__p { clip-path: circle(0% at 88% 12%); transition-duration: .8s; }
.dx--valeria-ortiz.dx-rapido .dx__p { transition-duration: .45s; }

/* ======================= VÉRTICE · plano estructural ======================= */
.dx--vertice .dx__viga { position: absolute; left: 0; right: 0; height: 25.2%; top: calc(var(--i) * 25%); background-color: #0B1F33;
  background-image: linear-gradient(to right, rgba(143,179,217,.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(143,179,217,.12) 1px, transparent 1px);
  background-size: 25px 25px; transition: transform .7s cubic-bezier(.76,0,.24,1) calc(var(--i) * 60ms); border-bottom: 1px solid rgba(242,194,48,.25); }
.dx--vertice .dx__plano { position: absolute; left: 50%; top: 46%; width: min(90vw, 820px); transform: translate(-50%, -50%); z-index: 3; overflow: visible; transition: opacity .3s; }
.dx--vertice .dx__plano path { fill: none; stroke: #8FB3D9; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dx--vertice .dx__plano path:nth-child(n+7) { stroke-dasharray: 1; stroke: rgba(143,179,217,.6); stroke-width: 1.4; }
.dx--vertice .dx__plano .dx__cota { stroke: #F2C230; stroke-width: 1.6; }
.dx--vertice .dx__plano text { fill: #F2C230; font: 13px "IBM Plex Mono", monospace; opacity: 0; }
.dx--vertice .dx__plano circle { fill: #F2C230; opacity: 0; }
.dx--vertice .dx__marca { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 3; color: #fff; font: 600 clamp(1.6rem, 1rem + 2vw, 2.6rem) "IBM Plex Sans", sans-serif; letter-spacing: -.02em; text-align: center; transition: opacity .3s; }
.dx--vertice .dx__marca small { display: block; font: 400 12px "IBM Plex Mono", monospace; letter-spacing: .3em; text-transform: uppercase; color: #F2C230; margin-top: 6px; }
.dx--vertice.dx-intro .dx__plano path { animation: dx-vt-trazo .7s calc(var(--i, 0) * 90ms + .1s) cubic-bezier(.65,0,.35,1) forwards; }
.dx--vertice.dx-intro .dx__plano .dx__cota { animation: dx-vt-trazo .6s 1s ease-out forwards; }
.dx--vertice.dx-intro .dx__plano text, .dx--vertice.dx-intro .dx__plano circle { animation: dx-vt-ver .4s 1.25s forwards; }
.dx--vertice.dx-intro .dx__marca { animation: dx-subir .6s .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes dx-vt-trazo { to { stroke-dashoffset: 0; } }
@keyframes dx-vt-ver { to { opacity: 1; } }
.dx--vertice.dx-cubrir .dx__plano, .dx--vertice.dx-llegada .dx__plano, .dx--vertice.dx-cubrir .dx__marca, .dx--vertice.dx-llegada .dx__marca { display: none; }
.dx--vertice.dx-pre .dx__viga:nth-child(odd) { transform: translateX(-102%); }
.dx--vertice.dx-pre .dx__viga:nth-child(even) { transform: translateX(102%); }
.dx--vertice.dx-abrir .dx__viga:nth-child(odd) { transform: translateX(102%); }
.dx--vertice.dx-abrir .dx__viga:nth-child(even) { transform: translateX(-102%); }
.dx--vertice.dx-abrir .dx__plano, .dx--vertice.dx-abrir .dx__marca { opacity: 0; }

/* ======================= SOLARIA · el sol que sale ======================= */
.dx--solaria .dx__p { position: absolute; inset: 0; background: #0E3B2E; transition: opacity .35s; }
.dx--solaria .dx__sol { position: absolute; left: 50%; top: 46%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFE08A, #FFC93C 60%, #F5A623); box-shadow: 0 0 80px 20px rgba(255,201,60,.35); transition: transform .9s cubic-bezier(.7,0,.3,1); z-index: 2; }
.dx--solaria .dx__rayos { position: absolute; left: 50%; top: 46%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; z-index: 1; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(255,201,60,.55) 0 4deg, transparent 4deg 18deg);
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 30%, transparent 70%); mask-image: radial-gradient(circle, transparent 28%, #000 30%, transparent 70%); transition: opacity .3s; }
.dx--solaria .dx__marca { position: absolute; left: 50%; top: calc(46% + 140px); transform: translateX(-50%); z-index: 3; color: #fff; font: 800 clamp(1.8rem, 1rem + 3vw, 3.2rem) "Manrope", sans-serif; letter-spacing: -.03em; white-space: nowrap; transition: opacity .3s; }
.dx--solaria .dx__marca em { font-style: normal; font-weight: 500; opacity: .7; margin-left: .25em; }
.dx--solaria.dx-intro .dx__sol { animation: dx-so-salir 1s .1s cubic-bezier(.16,1,.3,1) both; }
.dx--solaria.dx-intro .dx__rayos { animation: dx-so-rayos 6s linear infinite, dx-aparecer .8s .6s both; }
.dx--solaria.dx-intro .dx__marca { animation: dx-subir .6s .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes dx-so-salir { from { transform: translateY(60vh) scale(.7); } }
@keyframes dx-so-rayos { to { transform: rotate(360deg); } }
.dx--solaria.dx-pre .dx__p { opacity: 0; }
.dx--solaria.dx-pre .dx__sol { transform: translateY(40vh) scale(.4); }
.dx--solaria.dx-cubrir .dx__marca, .dx--solaria.dx-cubrir .dx__rayos, .dx--solaria.dx-llegada .dx__marca, .dx--solaria.dx-llegada .dx__rayos { display: none; }
.dx--solaria.dx-cubrir .dx__sol { transition-duration: .55s; }
.dx--solaria.dx-abrir .dx__sol { transform: scale(18); }
.dx--solaria.dx-abrir .dx__marca, .dx--solaria.dx-abrir .dx__rayos { opacity: 0; }
.dx--solaria.dx-abrir { opacity: 0; transition: opacity .35s .55s; }
.dx--solaria.dx-rapido .dx__sol { transition-duration: .4s; }
.dx--solaria.dx-rapido { transition-delay: .25s; }

/* ======================= ÁMBAR · gota y ondas ======================= */
.dx--ambar-atelier .dx__p { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #2A241E, #0D0B09 70%); transition: opacity .35s; }
.dx--ambar-atelier .dx__gota { position: absolute; left: 50%; top: 48%; width: 26px; height: 36px; margin: -18px 0 0 -13px; z-index: 3; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 35% 30%, #F3D29C, #C98A3D 60%, #8C5A2B); transform: translateY(-60vh); box-shadow: 0 0 24px rgba(201,138,61,.6); }
.dx--ambar-atelier .dx__onda { position: absolute; left: 50%; top: 50%; width: 120px; height: 40px; margin: -20px 0 0 -60px; border-radius: 50%; border: 1px solid rgba(201,138,61,.7); opacity: 0; z-index: 2; }
.dx--ambar-atelier .dx__marca { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); z-index: 3; color: #F5EFE6; font: 400 clamp(2.6rem, 1.4rem + 5vw, 6rem) "Cormorant Garamond", Georgia, serif; text-align: center; line-height: 1; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.dx--ambar-atelier .dx__marca small { display: block; font: 400 11px "Jost", sans-serif; letter-spacing: .6em; text-transform: uppercase; color: #A79A8C; margin-top: 12px; }
.dx--ambar-atelier.dx-intro .dx__gota { animation: dx-am-gota .8s .15s cubic-bezier(.55,0,1,.45) forwards; }
.dx--ambar-atelier.dx-intro .dx__onda { animation: dx-am-onda 1.4s calc(.92s + var(--i) * .22s) cubic-bezier(.16,1,.3,1) forwards; }
.dx--ambar-atelier.dx-intro .dx__marca { animation: dx-am-marca 1s 1.1s ease forwards; }
@keyframes dx-am-gota { 0% { transform: translateY(-60vh) scaleY(1.2); } 85% { transform: translateY(0) scaleY(1.1); } 100% { transform: translateY(6px) scale(1.6, .3); opacity: 0; } }
@keyframes dx-am-onda { 0% { opacity: .9; transform: scale(.1); } 100% { opacity: 0; transform: scale(7); } }
@keyframes dx-am-marca { to { opacity: 1; } }
.dx--ambar-atelier.dx-pre { opacity: 0; }
.dx--ambar-atelier { transition: opacity .35s; }
.dx--ambar-atelier.dx-cubrir .dx__gota { animation: dx-am-gota .55s .05s cubic-bezier(.55,0,1,.45) forwards; }
.dx--ambar-atelier.dx-cubrir .dx__marca, .dx--ambar-atelier.dx-llegada .dx__marca, .dx--ambar-atelier.dx-llegada .dx__gota { display: none; }
.dx--ambar-atelier.dx-abrir { opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform .9s ease; }
.dx--ambar-atelier.dx-abrir .dx__onda { animation: dx-am-onda 1s cubic-bezier(.16,1,.3,1) forwards; }
.dx--ambar-atelier.dx-rapido { transition-duration: .45s; }

/* ======================= FONDOS ANIMADOS ======================= */
.dx-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; width: 100%; height: 100%; display: block; }

/* Barbería: franjas de poste que avanzan y siluetas de herramientas */
.dx-fondo--rayas { opacity: .4; }
.dx-fondo--rayas i { display: none; }
.dx-fondo--rayas::before { content: ""; position: absolute; inset: -20%; background: repeating-linear-gradient(135deg, rgba(184,50,42,.07) 0 26px, transparent 26px 52px, rgba(31,58,95,.07) 52px 78px, transparent 78px 104px); animation: dx-f-rayas 60s linear infinite; }
.dx-fondo--rayas i { position: absolute; left: calc(var(--i) * 17%); bottom: -60px; width: 40px; height: 40px; opacity: .22; animation: dx-f-flotar calc(14s + var(--i) * 2s) calc(var(--i) * -3s) linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -45 60 90'%3E%3Cg fill='none' stroke='%2317140F' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='-10' cy='28' r='9'/%3E%3Ccircle cx='10' cy='28' r='9'/%3E%3Cpath d='M-5 20 L14 -36 M5 20 L-14 -36'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.dx-fondo--rayas i:nth-child(even) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -20 100 40'%3E%3Cg fill='%2317140F'%3E%3Crect x='-46' y='-12' width='92' height='12' rx='5'/%3E%3Crect x='-42' y='0' width='3' height='16'/%3E%3Crect x='-30' y='0' width='3' height='16'/%3E%3Crect x='-18' y='0' width='3' height='16'/%3E%3Crect x='-6' y='0' width='3' height='16'/%3E%3Crect x='6' y='0' width='3' height='16'/%3E%3Crect x='18' y='0' width='3' height='16'/%3E%3Crect x='30' y='0' width='3' height='16'/%3E%3C/g%3E%3C/svg%3E"); }
.dx-fondo--rayas.dx-fondo--oscuro::before { background: repeating-linear-gradient(135deg, rgba(244,236,223,.06) 0 26px, transparent 26px 52px, rgba(184,50,42,.12) 52px 78px, transparent 78px 104px); }
.dx-fondo--rayas.dx-fondo--oscuro i { filter: invert(1); opacity: .18; }
@keyframes dx-f-rayas { to { transform: translateX(147px); } }
@keyframes dx-f-flotar { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-140vh) rotate(260deg); } }

/* Telar: rombos que se desplazan como tela en el telar */
.dx-fondo--rombos { opacity: .4; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.dx-fondo--rombos::before { content: ""; position: absolute; inset: -40px 0; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4 36 20 20 36 4 20Z' fill='none' stroke='%23B5532D' stroke-opacity='.22' stroke-width='2'/%3E%3Cpath d='M20 14 26 20 20 26 14 20Z' fill='%232E3A6B' fill-opacity='.14'/%3E%3C/svg%3E");
  background-size: 40px 40px; animation: dx-f-rombos 70s linear infinite; }
@keyframes dx-f-rombos { to { background-position: 80px 40px; } }

/* Valeria: manchas de color que se mueven despacio */
.dx-fondo--manchas i { position: absolute; border-radius: 50%; opacity: .22; animation: dx-f-mancha 40s ease-in-out infinite alternate; }
.dx-fondo--manchas i:nth-child(1) { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; right: -6vw; top: -8vw; background: #C9B8FF; }
.dx-fondo--manchas i:nth-child(2) { width: 18vw; height: 18vw; max-width: 240px; max-height: 240px; right: 22vw; bottom: 6%; background: #FF6B57; animation-duration: 34s; animation-delay: -10s; }
.dx-fondo--manchas i:nth-child(3) { width: 10vw; height: 10vw; max-width: 140px; max-height: 140px; left: 8vw; bottom: 14%; background: #2F4BFF; animation-duration: 38s; animation-delay: -20s; }
.dx-fondo--manchas.dx-fondo--oscuro i { opacity: .2; }
@keyframes dx-f-mancha { 0% { transform: translate(0, 0) scale(1); border-radius: 50%; } 50% { border-radius: 42% 58% 61% 39% / 47% 38% 62% 53%; } 100% { transform: translate(-6vw, 4vw) scale(1.12); border-radius: 58% 42% 37% 63% / 55% 61% 39% 45%; } }

/* Vértice: retícula técnica con línea de escaneo */
.dx-fondo--plano { z-index: 1; background-image: linear-gradient(to right, rgba(143,179,217,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(143,179,217,.08) 1px, transparent 1px); background-size: 50px 50px; }
.dx-fondo--plano:not(.dx-fondo--oscuro) { background-image: linear-gradient(to right, rgba(11,31,51,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(11,31,51,.06) 1px, transparent 1px); }
.dx-fondo--plano i { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(242,194,48,.7), transparent); top: 0; opacity: .5; animation: dx-f-escaneo 14s ease-in-out infinite; box-shadow: 0 0 12px rgba(242,194,48,.35); }
@keyframes dx-f-plano { to { background-position: 50px 50px; } }
@keyframes dx-f-escaneo { 0% { top: 0; opacity: 0; } 10% { opacity: .5; } 90% { opacity: .5; } 100% { top: 100%; opacity: 0; } }

/* Solaria: rayos de sol que giran */
.dx-fondo--rayos::before { content: ""; position: absolute; width: 160vmax; height: 160vmax; right: -80vmax; top: -80vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,201,60,.09) 0 5deg, transparent 5deg 15deg); animation: dx-so-rayos 220s linear infinite; }
.dx-fondo--rayos:not(.dx-fondo--oscuro)::before { background: repeating-conic-gradient(from 0deg, rgba(255,201,60,.18) 0 5deg, transparent 5deg 15deg); }

/* Ámbar y RAVEN usan lienzos (canvas) */
.dx-fondo--polvo { z-index: 1; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .dx-fondo, .dx-fondo *, .dx-fondo::before { animation: none !important; }
  .dx { display: none !important; }
}