/* Digital State — capa visual «cine». Todo bajo html.ds-fx-on (JS activo). Sin JS: no cambia nada. */
.ds-fx-on body{background:var(--ds-black)}
#ds-space{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
.ds-fx-on #ds-space{display:block}
.ds-fx-on .site-main,.ds-fx-on .elementor,.ds-fx-on .ds-footer,.ds-fx-on .ds-ia,.ds-fx-on .ds-ia-mini,.ds-fx-on .ds-marquee,.ds-fx-on #ds-mobile{position:relative;z-index:1}
.ds-fx-on .ds-header{z-index:900}
.ds-fx-on .elementor-top-section.ds-fx-clear,.ds-fx-on .e-con.ds-fx-clear{background-color:transparent!important;background-image:none!important}
.ds-fx-on .ds-fx-clear .elementor-widget-call-to-action{padding:6px}
.ds-fx-on .ds-cta{overflow:hidden}
.ds-fx-on .ds-ia,.ds-fx-on .ds-ia-mini{background:rgba(17,17,17,.55);backdrop-filter:blur(6px)}
.ds-fx-on .ds-footer{background:rgba(11,11,11,.8)}
.ds-fx-on .ds-header{background:rgba(11,11,11,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}

/* Hero: núcleo 3D detrás del titular (el vídeo de fondo se sustituye solo cuando la capa está activa) */
.ds-fx-hero{position:relative;overflow:hidden}
.ds-fx-hero .elementor-background-video-container{z-index:0}
.ds-fx-hero .elementor-background-overlay{z-index:0}
#ds-core{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.85}
.ds-fx-hero > .elementor-container{position:relative;z-index:1}
.ds-fx-on .ds-ia__title,.ds-fx-on .elementor-widget-heading h2.elementor-heading-title{background:linear-gradient(120deg,#efab24 0%,#ffd27a 55%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Marquesina de texto perfilado */
.ds-marquee{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:22px 0;background:rgba(0,0,0,.25)}
.ds-marquee__track{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:ds-marquee 48s linear infinite;font:700 clamp(28px,4.6vw,64px)/1 var(--ds-font);text-transform:uppercase;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45)}
.ds-marquee__track i{font-style:normal;color:var(--ds-gold);-webkit-text-stroke:0;font-size:.55em;align-self:center}
@keyframes ds-marquee{to{transform:translateX(-50%)}}
.ds-fx-still .ds-marquee__track{animation:none}

/* Servicios principales (Marketing digital y Automatización e IA): borde y fondo dorados */
.ds-card-main > .elementor-widget-container{border:1px solid rgba(239,171,36,.55)!important;background:linear-gradient(160deg,rgba(239,171,36,.12),rgba(255,255,255,.02))!important;box-shadow:0 0 0 1px rgba(239,171,36,.15),0 18px 50px rgba(0,0,0,.35)}
.ds-card-main .elementor-icon-box-title,.ds-card-main .elementor-icon-box-title a{color:#efab24!important}

/* Tarjetas «cristal» */
.ds-fx-on .elementor-widget-icon-box > .elementor-widget-container{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px 22px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.ds-fx-on .elementor-widget-icon-box > .elementor-widget-container:hover{transform:translateY(-6px);border-color:rgba(239,171,36,.55);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(239,171,36,.15)}
.ds-fx-on .ds-flow__step,.ds-fx-on .ds-page .site-main .ds-services > li,.ds-fx-on .ds-page .site-main .ds-cards .wp-block-column,.ds-fx-on .ds-page .site-main .ds-steps li{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09);border-radius:14px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.ds-fx-on .ds-flow__step:hover,.ds-fx-on .ds-page .site-main .ds-services > li:hover{transform:translateY(-5px);border-color:rgba(239,171,36,.6)}
.ds-fx-on .ds-cta{border-radius:16px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ds-fx-on .ds-cta:hover{transform:scale(1.02)}
.ds-fx-on .ds-yt{border-radius:14px}

/* Botones: brillo dorado y comportamiento magnético (transform lo pone el JS) */
.ds-fx-on .ds-btn,.ds-fx-on .elementor-button,.ds-fx-on .wp-block-button__link{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,color .2s,box-shadow .3s;will-change:transform}
.ds-fx-on .ds-btn--solid:hover,.ds-fx-on .elementor-button:hover{box-shadow:0 0 0 1px rgba(239,171,36,.6),0 12px 40px rgba(239,171,36,.35)}

/* Reveals (solo elementos que estaban fuera de pantalla al cargar) */
.ds-fx-on .ds-fx-rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.ds-fx-on .ds-fx-rv.is-in{opacity:1;transform:none}

/* Cursor propio (solo ratón real) */
#ds-cursor{display:none}
.ds-fx-cursor{cursor:none}
.ds-fx-cursor a,.ds-fx-cursor button,.ds-fx-cursor [role=button]{cursor:none}
.ds-fx-cursor #ds-cursor{display:block;position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s}
.ds-fx-cursor #ds-cursor.is-on{opacity:1}
.ds-cursor__dot,.ds-cursor__ring{position:absolute;left:0;top:0;border-radius:50%;margin:-4px 0 0 -4px}
.ds-cursor__dot{width:8px;height:8px;background:var(--ds-gold)}
.ds-cursor__ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(239,171,36,.8);transition:width .25s,height .25s,margin .25s,background .25s}
#ds-cursor.is-hover .ds-cursor__ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(239,171,36,.12)}
#ds-cursor.is-hover .ds-cursor__dot{background:#fff}

@media (max-width:781px){.ds-marquee{padding:14px 0}}

/* ===== Capa «tech» ===== */
/* Rejilla tecnológica muy sutil, se desvanece hacia los bordes */
.ds-fx-on body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(239,171,36,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(239,171,36,.05) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
/* Barra de progreso dorada */
#ds-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:1000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#c98d12,#efab24,#ffe3a3)}
/* Foco de luz que sigue al cursor */
#ds-spot{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s;background:radial-gradient(circle,rgba(239,171,36,.13) 0%,rgba(239,171,36,.05) 35%,transparent 70%);mix-blend-mode:screen}
#ds-spot.is-on{opacity:1}
#ds-trail{position:fixed;inset:0;pointer-events:none;z-index:9998}
/* Cursor más visible */
.ds-cursor__ring{width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important;border:1.5px solid rgba(239,171,36,.95)!important;box-shadow:0 0 18px rgba(239,171,36,.45),inset 0 0 10px rgba(239,171,36,.25)}
.ds-cursor__dot{box-shadow:0 0 12px 2px rgba(239,171,36,.9)}
#ds-cursor.is-hover .ds-cursor__ring{width:72px!important;height:72px!important;margin:-36px 0 0 -36px!important;background:rgba(239,171,36,.16)!important}
/* Brillo que sigue al ratón dentro de las tarjetas */
.ds-fx-on .ds-glow{position:relative;overflow:hidden;isolation:isolate}
.ds-fx-on .ds-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(239,171,36,.18),transparent 45%)}
.ds-fx-on .ds-glow:hover::after{opacity:1}
.ds-fx-on .ds-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,210,122,.9),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ds-fx-on .ds-glow:hover::before{opacity:1}
/* Iconos de las tarjetas con halo dorado */
.ds-fx-on .elementor-widget-icon-box .elementor-icon{filter:drop-shadow(0 0 10px rgba(239,171,36,.35));transition:transform .35s,filter .35s}
.ds-fx-on .elementor-widget-icon-box:hover .elementor-icon{transform:translateY(-3px) scale(1.06);filter:drop-shadow(0 0 16px rgba(239,171,36,.7))}
.ds-fx-on .elementor-widget-icon-box .elementor-icon svg,.ds-fx-on .elementor-widget-icon-box .elementor-icon i{color:#efab24;fill:#efab24}
@media (hover:none){#ds-spot,#ds-trail{display:none}}