/* Six material families, composed for their context instead of one repeated banner. */
.hero-section{background-image:url('/assets/home-reel/exyo1-poster.webp')}
.hero-section #webgl-container{background-image:url('/assets/home-reel/exyo1-poster.webp')}
@media(max-width:767px){.hero-section,.hero-section #webgl-container{background-image:url('/assets/home-reel/exyo1-poster.webp')}}
.hero-section .overlay-ui{background:linear-gradient(180deg,#08080846,transparent 40%,#08080852)}
.dark-wrapper>.art-motion-image{opacity:.22!important}
.gallery-header-video img{opacity:.48;object-position:67% 50%}
.art-method{grid-template-columns:1fr .9fr;gap:34px 7%;padding:85px 4%;background:#0d0d0e}
.art-method-image{position:relative;inset:auto;grid-column:2;grid-row:1/span 2;width:100%;height:100%;max-height:720px;aspect-ratio:4/5;object-fit:cover;object-position:65% center;opacity:1;border:1px solid #ffffff20;clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,0 100%)}
.art-method-copy{grid-column:1;grid-row:1;align-self:end}
.art-method-steps{grid-column:1;grid-row:2;align-self:start}
.art-method h2{max-width:700px}
.art-method-steps>div{padding:18px 0;font-size:clamp(18px,1.7vw,28px)}
.brand-studio-motion:before{background-image:radial-gradient(ellipse at 25% 25%,#74539835,transparent 60%);opacity:1;animation:none}
.reference-studio .awp-lens-1:before{background-image:none}
.cs-assistant-art{background:linear-gradient(90deg,#080808b0,#0808084d),url('/assets/creative/refracted-glass.webp') center/cover;min-height:390px;border:1px solid #ffffff18;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.cs-assistant-art>img{width:min(85%,370px)}
.services-spatial-page .svo-poster-ia{color:#edece7}
.services-spatial-page .svo-poster-ia>strong>span{color:#b79adf}
.services-spatial-page .svo-service-poster>strong{text-shadow:0 2px 30px #0009}
.services-spatial-page .svo-service-poster>small{padding:5px 9px;background:#08080888;color:#d8d0df}
/* Explore opens the service index with the same appearance and a visible keyboard focus. */
#ui-scroll{min-width:64px;min-height:44px;padding:6px;color:var(--brand-ivory,#edece7);text-decoration:none;cursor:pointer;touch-action:manipulation}
#ui-scroll:hover .si-label{color:var(--brand-ivory,#edece7);text-decoration:underline;text-underline-offset:4px}
#ui-scroll:focus-visible{outline:1px solid var(--brand-ivory,#edece7);outline-offset:5px}
/* Restore the vertical visual index. Each destination owns its artwork. */
.has-scene-menu .scene-menu-thumb img{object-fit:cover;aspect-ratio:auto;height:100%}
@media(max-width:767px){.has-scene-menu .scene-menu-thumb{padding:4px}}
/* Six original artworks on the cube, with typography instead of recycled icons. */
.reference-studio .cc-face[data-face=top]{background-image:url('/assets/creative/atelier-light.webp')}
.reference-studio .cc-face[data-face=front]{background-image:url('/assets/creative/cube-strategy.webp')}
.reference-studio .cc-face[data-face=right]{background-image:url('/assets/creative/refracted-glass.webp')}
.reference-studio .cc-face[data-face=back]{background-image:url('/assets/creative/metal-structure.webp')}
.reference-studio .cc-face[data-face=left]{background-image:url('/assets/creative/signal-field.webp')}
.reference-studio .cc-face[data-face=bottom]{background-image:none}
.reference-studio .cc-face[data-face=bottom]:before{content:'';position:absolute;inset:0;background:url('/assets/creative/cube-automation.webp') center/cover no-repeat;transform:rotate(90deg);pointer-events:none}
.reference-studio .cc-face-inner{justify-content:space-between;align-items:flex-start;padding:8%;background:linear-gradient(#0007,transparent 38%,transparent 60%,#000b)}
.reference-studio .cc-face-title{max-width:90%;font-size:clamp(16px,2.4vw,34px);line-height:1.08;text-align:left;letter-spacing:-.04em}
.reference-studio .cc-face-zh{text-align:left;font:10px/1.5 'DM Sans',sans-serif;color:#e1dde7;max-width:75%}
.cc-face-number{font:10px/1 'DM Sans',sans-serif;color:#c9b3df;letter-spacing:.1em}
.cc-icon-btn>span{font:12px/1 'DM Sans',sans-serif;color:#8c8694;padding:7px}
.cc-icon-btn.active>span,.cc-icon-btn:hover>span{color:#e4d4f3}
.cs-assistant-art{background:#090909;clip-path:none;overflow:hidden;position:relative}
.cs-contact-art{display:block;width:100%;height:100%;min-height:390px;object-fit:cover}
.cs-assistant-art:after{content:'01 — EL PRINCIPIO DE ALGO';position:absolute;bottom:22px;left:22px;font:8px/1.5 'DM Sans',sans-serif;letter-spacing:.13em;color:#e6dbea}

#core-capabilities .center-video-box{width:clamp(145px,15vw,240px);aspect-ratio:1;background:transparent;mix-blend-mode:normal;overflow:visible}
#core-capabilities .center-video-box .home-metal-symbol{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px #0008)}
@media(max-width:767px){#core-capabilities .center-video-box{width:clamp(108px,28vw,145px)}#core-capabilities .giant-title{font-size:clamp(24px,7.2vw,46px)!important}#core-capabilities .service-label{width:100%;max-width:calc(100vw - 36px);white-space:normal;text-align:center}#core-capabilities .service-label .reveal-inner{white-space:normal;font-size:12px;line-height:1.4}}
.svo-detail-type{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 10%,#7c559a30,transparent 75%),#101012;overflow:hidden}
.svo-detail-type>strong{font:400 clamp(56px,7vw,130px)/.9 'Bitcount Grid Single',monospace;letter-spacing:-.06em;color:#c4a3e6}
.cs-assistant-art>.cs-contact-art{width:100%;max-width:none;min-height:390px;object-fit:cover}

/* Raise the opening social links above the shared EXO launcher. */
.hero-section .bottom-footer .footer-links{position:relative;bottom:64px}

/* Service shortcuts remain native links inside the non-interactive hero overlay. */
.hero-section .services-list a,.hero-section .border-top-line a{display:inline-block;color:inherit;text-decoration:none;pointer-events:auto}
.hero-section :is(a,button,[role=button]),.hero-section :is(a,button,[role=button]) *{cursor:pointer!important}
.hero-section :is(a,button):focus-visible{outline:2px solid var(--brand-purple);outline-offset:4px}
.hero-section :is(.services-list a,.border-top-line a):hover{color:var(--brand-ivory);text-decoration:underline;text-underline-offset:4px}
.hero-section .counter-nav{appearance:none;background:transparent;color:inherit;border:0;padding:0;font:inherit;width:32px;min-height:32px}
.hero-section .slide-thumbs{width:100%}
.hero-section .slide-thumb{flex:1 1 0;min-width:0;width:auto;padding:0}
.hero-section .slide-thumb:focus-visible{outline-offset:-3px}
/* The material preview sits outside the hero's difference blend, aligned to its reserved slot. */
.hero-brand-slot{width:clamp(144px,11vw,190px);aspect-ratio:16/9;margin:0 0 14px auto;pointer-events:none}
.hero-brand-preview{position:absolute;z-index:600;display:block;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#151517;container-type:size;isolation:isolate;pointer-events:auto;touch-action:manipulation;--brand-transition:110ms}
.hero-brand-preview[hidden]{display:none}
.hero-brand-preview .studio-brand-frame{position:absolute;left:50%;top:50%;width:100cqw;height:100cqw;max-width:none;max-height:none;object-fit:cover;transform:translate(-50%,-50%) scale(var(--brand-scale-x,1),var(--brand-scale-y,1)) translate(var(--brand-offset-x,0%),var(--brand-offset-y,0%));opacity:0;transition:opacity var(--brand-transition) cubic-bezier(.2,.6,.3,1);pointer-events:none;user-select:none}
.hero-brand-preview .studio-brand-frame.is-current{opacity:1}
.hero-brand-hint{position:absolute;right:5px;bottom:5px;z-index:2;padding:3px 5px;background:#080808d9;color:#edece7;font:9px/1.4 'DM Sans',sans-serif;opacity:0;pointer-events:none}
.hero-brand-preview:is(:hover,:focus-visible) .hero-brand-hint{opacity:1}
body:has(.hero-brand-preview:hover) :is(#cursor-ring,#cursor-dot,.mouseTracker--01){visibility:hidden!important;opacity:0!important}
.hero-section:has(.hero-brand-preview) .grid-section{margin-bottom:max(14vh,calc(30vh - 120px))}
@media(max-width:767px), (max-width:1024px) and (hover:none) and (pointer:coarse){
 .hero-brand-slot{width:112px;margin-right:0;margin-bottom:12px}
 .hero-section:has(.hero-brand-preview) .bottom-footer{padding-right:0}
 .hero-section:has(.hero-brand-preview) .bottom-ui-container{bottom:225px}
}
@media(prefers-reduced-motion:reduce){.hero-brand-preview .studio-brand-frame{transition:none}}
@media(max-width:767px){
 .hero-section{height:90svh;min-height:640px}
 .hero-section .bottom-ui-container{bottom:148px;width:94%;pointer-events:none}
 .hero-section .bottom-ui-container :is(button,[role=button]){pointer-events:auto}
 .hero-section .slide-counter{margin-bottom:8px}
 .hero-section .slide-title-container{height:24px;margin-bottom:6px}
 .hero-section .slide-title{font-size:12px}
 .hero-section .drag-indicator{height:24px;margin-bottom:4px}
 .hero-section .slide-thumb{height:48px}
 .hero-section .bottom-footer{position:absolute;left:3vw;right:3vw;bottom:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding-right:var(--exo-clearance,82px)}
 .hero-section .bottom-footer .footer-col:nth-child(2){grid-column:1}
 .hero-section .bottom-footer .footer-links{grid-column:2;bottom:0}
 .hero-section .bottom-footer .footer-links a{display:flex;align-items:center;white-space:nowrap;min-height:24px;line-height:1.4;margin-bottom:3px}
}

.editorial-list-art{display:flex;align-items:center;justify-content:space-between;min-height:200px;padding:28px;background:#121015;border:1px solid #ffffff18;color:#c5a4e9;font:400 clamp(30px,4vw,66px)/1 'Bitcount Grid Single',monospace;letter-spacing:-.05em}
.editorial-list-art>span{align-self:flex-end;font:30px/1 'DM Sans',sans-serif}