/* DL Tech · Efectos 3D del sitio público (portados de OS DL Tech, packages/core/src/ui.ts)
   Archivo independiente. Todas las clases llevan el prefijo dlt3d- para no chocar con el CSS del sitio.
   Se activan por js/dlt-3d.js; sin JS o con prefers-reduced-motion el sitio queda plano. */

/* ---- Tokens con respaldo: cada valor toma el token del sitio si existe (--def, --line, --surface, ...)
   o el de otros diseños del sitio (--brand en cyber/*), y si no, un valor propio. Así el archivo funciona
   en páginas que no definen los tokens del diseño actual y sigue el modo claro/oscuro de la página. ---- */
.dlt3d-on,.dlt3d-ring-wrap{
  --d3-def:var(--def,var(--brand,var(--dlt3d-acento,#38bdf8)));
  --d3-def-soft:var(--def-soft,color-mix(in oklab,var(--d3-def) 14%,transparent));
  --d3-off:var(--c-gov,var(--off,#a78bfa));
  --d3-ok:var(--ok,var(--brand2,#22c55e));
  --d3-line:var(--line,rgba(148,163,184,.25));
  --d3-line-2:var(--line-2,rgba(148,163,184,.4));
  --d3-surface:var(--surface,var(--card,var(--bg-2,#0f172a)));
  --d3-faint:var(--faint,var(--muted,#94a3b8));
  --d3-ease:var(--ease,cubic-bezier(.2,.7,.1,1));
  --d3-r:var(--r,14px);
}

/* ---- Fondo con profundidad: piso en perspectiva y orbes en paralaje ---- */
.dlt3d-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:700px}
.dlt3d-bg .floor{position:absolute;left:-60%;right:-60%;bottom:-12%;height:62%;transform-origin:50% 100%;transform:rotateX(80deg);
  background-image:linear-gradient(color-mix(in oklab,var(--d3-def) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--d3-def) 22%,transparent) 1px,transparent 1px);
  background-size:90px 90px;-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 80%);mask-image:linear-gradient(to top,#000 0%,transparent 80%);opacity:.32;animation:dlt3d-floor 16s linear infinite}
@keyframes dlt3d-floor{to{background-position:0 90px,0 0}}
.dlt3d-bg .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.16;transform:translate3d(0,calc(var(--sy,0px) * var(--k,0)),0)}
.dlt3d-bg .o1{width:520px;height:520px;left:-140px;top:12%;background:var(--d3-def);--k:-.18}
.dlt3d-bg .o2{width:420px;height:420px;right:-120px;top:48%;background:var(--d3-off);--k:-.32;opacity:.11}
.dlt3d-bg .o3{width:360px;height:360px;left:38%;top:88%;background:var(--d3-ok);--k:-.46;opacity:.09}
/* Modo claro: el sitio lo activa por data-theme o por la preferencia del sistema */
:root[data-theme="light"] .dlt3d-bg .orb{opacity:.1}
:root[data-theme="light"] .dlt3d-bg .floor{opacity:.22}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .dlt3d-bg .orb{opacity:.1}
  :root:not([data-theme="dark"]) .dlt3d-bg .floor{opacity:.22}
}

/* Modo claro detectado por luminancia del fondo real (páginas sin data-theme ni tokens) */
.dlt3d-claro .dlt3d-bg .orb{opacity:.1}
.dlt3d-claro .dlt3d-bg .floor{opacity:.22}

/* ---- Perfiles: intensidad del fondo ---- */
:root.dlt3d-p-tailwind .dlt3d-bg .orb{opacity:.13}
:root.dlt3d-p-tailwind .dlt3d-bg .o2{opacity:.09}
:root.dlt3d-p-tailwind .dlt3d-bg .o3{opacity:.07}
:root.dlt3d-p-tailwind .dlt3d-bg .floor{opacity:.26}
:root.dlt3d-p-tailwind.dlt3d-claro .dlt3d-bg .orb{opacity:.08}
:root.dlt3d-p-tailwind.dlt3d-claro .dlt3d-bg .floor{opacity:.14}
/* legal y mínimo: fondo muy tenue y sin movimiento de piso, para no competir con la lectura */
:root.dlt3d-p-legal .dlt3d-bg .orb,:root.dlt3d-p-minimo .dlt3d-bg .orb{opacity:.06}
:root.dlt3d-p-legal .dlt3d-bg .o2,:root.dlt3d-p-minimo .dlt3d-bg .o2{opacity:.04}
:root.dlt3d-p-legal .dlt3d-bg .o3,:root.dlt3d-p-minimo .dlt3d-bg .o3{opacity:.03}
:root.dlt3d-p-legal .dlt3d-bg .floor,:root.dlt3d-p-minimo .dlt3d-bg .floor{opacity:.12;animation:none}
:root.dlt3d-p-legal.dlt3d-claro .dlt3d-bg .orb,:root.dlt3d-p-minimo.dlt3d-claro .dlt3d-bg .orb{opacity:.04}
:root.dlt3d-p-legal.dlt3d-claro .dlt3d-bg .floor,:root.dlt3d-p-minimo.dlt3d-claro .dlt3d-bg .floor{opacity:.08}

/* ---- Profundidad al navegar: cada sección emerge en perspectiva ----
   Solo se aplica a contenedores sin transform propio (nunca sobre .reveal ni ancestros de position:fixed/sticky).
   En reposo (.is-flat) el transform es none: no crea contexto de apilamiento ni bloque contenedor. */
.dlt3d-depth{transform-origin:50% 0%;
  transform:perspective(1400px) translate3d(0,calc(var(--dp,0) * 70px),calc(var(--da,0) * -170px)) rotateX(calc(var(--dp,0) * 10deg - var(--dn,0) * 6deg));
  opacity:calc(1 - var(--da,0) * .5)}
.dlt3d-depth.is-flat{transform:none;opacity:1}
/* La perspectiva de secciones muy altas puede rebasar unos px al costado: se recorta sin crear scroll ni afectar position:fixed/sticky */
.dlt3d-on main{overflow-x:clip}
.hero>.wrap.dlt3d-depth{transform-origin:50% 100%}

/* ---- Grillas-plano: se inclinan con el mouse. Usan la propiedad individual `rotate`,
   que se compone con el transform de .reveal sin pisarlo ---- */
.dlt3d-host{perspective:1600px}
.dlt3d-plane{transform-style:preserve-3d;transition:transform .9s var(--d3-ease),rotate .9s var(--d3-ease)}

/* ---- Tarjetas: se despegan del plano (translateZ) en hover/foco ---- */
.dlt3d-card{--c:var(--d3-def);position:relative;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--d3-ease),border-color .3s,box-shadow .5s var(--d3-ease)}
.dlt3d-card:hover,.dlt3d-card:focus-visible{transform:translate3d(0,-4px,22px);border-color:color-mix(in oklab,var(--d3-def) 45%,var(--d3-line));box-shadow:0 26px 50px -28px color-mix(in oklab,var(--d3-def) 40%,transparent)}

/* ---- Oleaje: tarjetas desfasadas con la propiedad translate (no pisa transform).
   Solo se aplica a las que no traen ya la flotación del sitio (#dlt-float) ---- */
.dlt3d-ola{animation:dlt3d-ola 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.55s)}
@keyframes dlt3d-ola{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* ---- Onda al tocar una tarjeta ---- */
.dlt3d-onda{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;z-index:-1;background:color-mix(in oklab,var(--d3-def) 30%,transparent);animation:dlt3d-onda .8s var(--d3-ease) forwards}
@keyframes dlt3d-onda{to{transform:scale(34);opacity:0}}

/* ---- Anillo 3D (opcional: [data-ring] con 3 o más tarjetas). Sin JS o con movimiento reducido queda como grilla ---- */
.dlt3d-ring-wrap.live{position:relative;height:calc(var(--ring-h,282px) + 218px);perspective:1300px;perspective-origin:50% 30%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;overflow:hidden;margin-inline:calc(-1 * clamp(16px,4vw,40px));padding-inline:clamp(16px,4vw,40px)}
.dlt3d-ring-wrap.live.dragging{cursor:grabbing}
.dlt3d-ring-wrap.live:focus-visible{box-shadow:inset 0 0 0 2px var(--d3-def-soft);border-radius:var(--d3-r)}
.dlt3d-ring-wrap.live .dlt3d-ring{display:block!important;position:absolute;left:50%;top:44px;width:0;height:0;margin:0!important;transform-style:preserve-3d;transition:none;rotate:none!important}
.dlt3d-slot{position:absolute;top:0;width:var(--w,280px);left:calc(var(--w,280px) / -2);transform-style:preserve-3d;will-change:transform,opacity}
.dlt3d-slot>*{backface-visibility:hidden;-webkit-backface-visibility:hidden;height:var(--card-h,282px);overflow:hidden;animation:none!important;transition:border-color .35s,background .35s,box-shadow .5s}
.dlt3d-slot.front>*{border-color:color-mix(in oklab,var(--d3-def) 55%,var(--d3-line));background:var(--d3-surface);box-shadow:0 30px 60px -30px color-mix(in oklab,var(--d3-def) 45%,transparent)}
.dlt3d-slot:not(.front)>*{cursor:pointer}
.ring-water{position:absolute;left:50%;top:calc(var(--ring-h,282px) + 48px);width:min(820px,96%);height:150px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,color-mix(in oklab,var(--d3-def) 16%,transparent),transparent 72%);border-radius:50%}
.ring-water i{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in oklab,var(--d3-def) 35%,transparent);transform:scale(.2);opacity:0;animation:dlt3d-ripple 7.5s ease-out infinite}
.ring-water i:nth-child(2){animation-delay:2.5s}.ring-water i:nth-child(3){animation-delay:5s}
@keyframes dlt3d-ripple{0%{transform:scale(.18);opacity:0}15%{opacity:.7}100%{transform:scale(1);opacity:0}}
.ring-ctl{display:flex;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);gap:14px;align-items:center;z-index:2}
.ring-ctl .dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:60vw}
.ring-ctl .dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--d3-line-2);cursor:pointer;transition:width .4s var(--d3-ease),background .3s}
.ring-ctl .dots button[aria-current="true"]{width:26px;background:var(--d3-def)}
.ring-hint{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;color:var(--d3-faint);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:640px){.dlt3d-ring-wrap.live{height:calc(var(--ring-h,282px) + 190px)}}

@media (max-width:700px){.dlt3d-bg .orb{filter:blur(50px)}.dlt3d-bg .floor{animation:none}}

/* ---- Celulares y punteros táctiles: sin inclinación ni despegue por hover ---- */
@media (hover:none){.dlt3d-plane{rotate:none!important}.dlt3d-card:hover{transform:none}}

/* ---- Movimiento reducido: todo plano ---- */
@media (prefers-reduced-motion:reduce){
  .dlt3d-depth,.dlt3d-plane,.dlt3d-card,.dlt3d-card:hover,.dlt3d-card:focus-visible{transform:none!important;rotate:none!important;opacity:1!important}
  .dlt3d-bg{display:none}
  .dlt3d-ola,.dlt3d-onda,.ring-water i{animation:none!important}
}