/* ==========================================
REGISTRO DE PROPIEDAD PARA ANIMACIÓN DEL BORDE
========================================== */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ==========================================
ESTILOS GENERALES Y RESET
========================================== */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
    user-select: none; -webkit-touch-callout: none;
}
body {
    background-color: #000000; color: #ffffff;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400; overflow-x: hidden; overflow-y: hidden;
    height: 400vh; width: 100vw;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    cursor: default;
}
input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.hero-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;
    transform-origin: 49.25% 47%;
    transition: transform .32s cubic-bezier(.26, .72, .34, 1), filter .20s ease;
    will-change: transform, filter;
}
.hero-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity .38s ease;
    z-index: 9;
    pointer-events: none;
}
body.footer-scene-zooming .hero-container,
body.footer-scene-active .hero-container {
    transform: scale(2.76);
}
body.footer-scene-zooming .hero-container::after {
    opacity: .24;
}
body.footer-scene-active .hero-container::after {
    opacity: 1;
}
#hero-lightweight { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* The canvas stays in the same compositor layer while moving AND parked.
   Decoder elements are never swapped into view. No opacity crossfade between
   unrelated camera frames; no resizing of the backing store during movement. */
.hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; visibility: visible; pointer-events: none;
    z-index: 7; will-change: opacity;
    backface-visibility: hidden; transform: translateZ(0);
    filter: none !important; -webkit-filter: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Opacity is owned exclusively by camera.js. Keeping visibility permanently
   visible prevents a video texture/layer recreation on every wheel gesture. */
.hero-video.camera-motion-active { visibility: visible; }

.hero-service-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; background: #000; z-index: 6;
    pointer-events: none; contain: strict;
    filter: none !important; -webkit-filter: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.camera-notice {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 999; padding: 12px 18px; border-radius: 12px;
    background: #181818; color: #fff; font-size: 13px;
    max-width: calc(100vw - 32px); text-align: center;
}

/* Durante cualquier snap la GPU/CPU se reserva para la cámara.
   Se PAUSAN (no se eliminan) decoraciones infinitas; vuelven exactamente al terminar. */
body.service-transition-active .header-glow,
body.service-transition-active .mouse-wheel,
body.service-transition-active .scroll-ring-svg,
body.service-transition-active .nav-services.visible,
body.service-transition-active .nav-services.visible li,
html.sinvec-progress-active .header-glow,
html.sinvec-progress-active .mouse-wheel,
html.sinvec-progress-active .scroll-ring-svg,
html.sinvec-progress-active .nav-services.visible,
html.sinvec-progress-active .nav-services.visible li {
    animation-play-state: paused !important;
}

/* ==========================================
PERMITIR SELECCIÓN DE TEXTO EN CONTENIDO
========================================== */
.hero-content, .hero-content h1, .hero-content p, .hero-subtitle,
.ws-team-text, .ws-team-title, .ws-team-desc,
.ws-team-pillar-title, .ws-team-pillar-desc,
.ws-about-title, .ws-about-desc,
.ws-solution-title, .ws-solution-desc, .ws-solution-points, .ws-solution-points li,
.ws-proof-heading, .ws-proof-subheading, .ws-proof-text,
.ws-cta-title, .ws-cta-desc, .ws-cta-link,
.ws-work-title, .ws-work-desc, .ws-work-desc p,
.ws-project-title, .ws-project-cat,
.ws-logos-title,
.ws-hero-title, .ws-hero-side-title, .ws-hero-side-label,
.syx-title, .syx-overview-text, .syx-more-cap, .syx-card-title, .syx-card-tag,
.wap-title, .wap-card-title, .wap-card-cats,
.nav-services li, .nav-services .menu-title,
.scroll-indicator span,
.project-brief-form,
.project-brief-form input, .project-brief-form textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ==========================================
HEADER SUPERIOR — GLASS + DESTELLO PERMANENTE
========================================== */
.header-main {
    position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: space-between;
    background: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.4rem 3rem;
    width: 100%;
    max-width: 1400px;
    z-index: 10;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}
.header-main.visible { opacity: 1; visibility: visible; }

/* ✅ Destello blanco que recorre el borde — SIEMPRE activo */
.header-glow {
    position: absolute;
    inset: -2px;
    border-radius: 52px;
    background: conic-gradient(from var(--glow-angle),
        transparent 0deg,
        transparent 320deg,
        rgba(255, 255, 255, 0.9) 340deg,
        rgba(255, 255, 255, 1) 350deg,
        rgba(255, 255, 255, 0.9) 360deg,
        transparent 360deg);
    animation: rotateGlow 4s linear infinite;
    opacity: 1;
    z-index: -1;
    filter: blur(1px);
    pointer-events: none;
}
@keyframes rotateGlow {
    from { --glow-angle: 0deg; }
    to { --glow-angle: 360deg; }
}

/* Capa interior glass transparente */
.header-main::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: -1;
    pointer-events: none;
}

.logo { display: flex; align-items: center; text-decoration: none; cursor: pointer; }
.logo img { height: 40px; width: auto; display: block; }
.header-links { display: flex; gap: 3rem; }
.header-links a {
    position: relative; color: #ffffff; text-decoration: none;
    font-size: 1.4rem; font-weight: 500; padding-bottom: 2px;
    transition: opacity 0.2s ease; cursor: pointer;
}
.header-links a::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 1px; background-color: #ffffff; transition: width 0.3s ease;
}
.header-links a:hover::after { width: 100%; }
.header-links a:hover { opacity: 1; }
.btn-contact {
    position: relative; color: #ffffff; text-decoration: none;
    font-size: 1.4rem; font-weight: 500;
    border: none; background: transparent; padding: 0 0 2px 0; margin: 0;
    transition: opacity 0.2s ease; cursor: pointer;
}
.btn-contact::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 1px; background-color: #ffffff; transition: width 0.3s ease;
}
.btn-contact:hover::after { width: 100%; }
.btn-contact:hover { opacity: 1; background: transparent; }
.header-main.on-white {
    background: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================
HERO UI / SCROLL INDICATOR
========================================== */
.hero-ui {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6;
    pointer-events: none; padding: 1.2rem 3rem;
    display: flex; flex-direction: column; justify-content: space-between;
    opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;
}
.hero-ui:not(.hidden) { opacity: 1; visibility: visible; }
.hero-ui.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.hero-ui a { pointer-events: auto; }

.scroll-indicator {
    position: absolute; bottom: 1.55rem; left: 50%;
    transform: translateX(-50%);
    width: 172px; height: 172px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
}
.scroll-orbit {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.scroll-ring-svg {
    width: 100%; height: 100%;
    overflow: visible;
    animation: scrollRingSpin 14s linear infinite;
    opacity: 1;
}
.scroll-ring-text {
    fill: rgb(255, 255, 255);
    font-size: 7.2px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}
.scroll-core {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.38rem;
}
.mouse-icon-svg {
    width: 25px; height: 37px; display: block;
}
.mouse-icon-svg rect {
    stroke: #ffffff;
}
@keyframes scrollRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes mouseScroll {
    0% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.3; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.scroll-indicator span {
    font-size: 0.61rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

.hero-content { position: absolute; bottom: 3.5rem; left: 3.5rem; }
.hero-content h1 { font-size: 5rem; line-height: 0.95; font-weight: 700; letter-spacing: -1.5px; color: #ffffff; margin-bottom: 1rem; text-transform: uppercase; }
.hero-subtitle { font-size: 0.75rem; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; font-weight: 400; margin: 0; }

/* ==========================================
NAV SERVICIOS — PARPADEO + SE APAGA AL HOVER
========================================== */
.nav-services {
    position: fixed; right: 3.5rem; bottom: 2.5rem; top: auto; text-align: left;
    z-index: 10; pointer-events: auto;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.4s ease, bottom 0.4s ease;
}
.nav-services.visible { opacity: 1; visibility: visible; }
/* V6.47 — el brief debe quedar limpio y sin navegación flotante de servicios. */
body.project-brief-active .nav-services,
body.project-brief-active .nav-services.visible,
body.project-brief-active .nav-services.on-white {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}
.nav-services.moved-up { bottom: auto; top: 32%; }
/* V6.11: el menu de servicios debe desaparecer EN EL MISMO gesto que inicia
   el movimiento. Sin fade de salida: evita que permanezca flotando sobre la
   camara durante los primeros frames. Al quitar .scrolling recupera la
   transicion normal de .nav-services para reaparecer con suavidad al aterrizar. */
.nav-services.scrolling {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}
.nav-services .menu-title {
    font-size: 0.85rem; color: #ffffff; display: block; margin-bottom: 1rem;
    font-weight: 700; text-align: center; letter-spacing: 0.3px; opacity: 0.8;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(96, 138, 190, 0.3);
}
.nav-services ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.nav-services li {
    font-size: 1rem; color: #ffffff; font-weight: 700; letter-spacing: 0.8px;
    display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; white-space: nowrap;
    cursor: pointer; opacity: 0.45; transition: opacity 0.2s ease, text-shadow 0.2s ease;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(96, 138, 190, 0.25);
}
.nav-services li span {
    color: #ffffff; font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(96, 138, 190, 0.25);
}
.nav-services.on-white {
    top: auto; bottom: 2.5rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px; padding: 0.75rem 1rem;
}
.nav-services.on-white .menu-title { font-size: 0.65rem; margin-bottom: 0.5rem; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.nav-services.on-white ul { gap: 0.3rem; }
.nav-services.on-white li { font-size: 0.7rem; grid-template-columns: 1.6rem 1fr; letter-spacing: 0.4px; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.nav-services.on-white li span { color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }

/* V6.55 — stable service menu. Continuous opacity blinking caused avoidable
   compositor work and could be perceived as a frame flash next to the camera. */
.nav-services.visible li { animation: none; }

/* ✅ El servicio ACTIVO siempre iluminado, sin parpadeo */
.nav-services.visible li.active {
    animation: none !important;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(96, 138, 190, 0.5);
}

/* ✅ Al pasar el mouse sobre un servicio → se ilumina */
.nav-services.visible li:hover {
    opacity: 1;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(96, 138, 190, 0.6);
}


/* V6.55 — no global blink: keep the navigation visually stable. */
.nav-services.visible { animation: none; }


/* ✅ CUANDO EL MOUSE ESTÁ SOBRE EL MENÚ: se apaga TODO el efecto */
.nav-services.visible:hover li {
    animation: none !important;
    opacity: 0.45;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(96, 138, 190, 0.25);
}

.nav-services.visible:hover li.active {
    animation: none !important;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(96, 138, 190, 0.5);
}

.nav-services.visible:hover li:hover {
    opacity: 1;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(96, 138, 190, 0.6);
}

.nav-services.visible:hover {
    animation: none !important;
    opacity: 1;
}

/* ==========================================
TV HOVER CONTAINER — SERVICES 01/02/03/04
========================================== */
.tv-hover-container { position: absolute; top: 25%; left: 25%; width: 50%; height: 48%; z-index: 7; pointer-events: none; }
/* V6.60 — Servicio 02 tiene un televisor más alto: su hit-area se ajusta
   de forma independiente sin volver a agrandar 01/03. */
.tv-hover-container[data-service-index="1"] { top: 20.5%; height: 51.5%; }
.tv-hover-container.active-tv { pointer-events: auto; cursor: pointer; }
.tv-hover-container .service-video {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    object-fit: cover; z-index: 2;
    opacity: 0; visibility: hidden; pointer-events: none;
    backface-visibility: hidden; transform: translateZ(0);
}
/* La opacidad la controla el JS de forma continua segun la distancia al frame del
   servicio (fade gradual). Sin transition CSS para que no pelee con ese fade. */
.tv-hover-container .service-video.visible { visibility: visible; }
.tv-hover-container .service-video.fade-out { opacity: 0 !important; }
.tv-hover-container .hover-subvideo { z-index: 3; }
.tv-hover-container .hover-subvideo.active-hover { visibility: visible; }

/* ==========================================
TRANSICIÓN CIRCULAR
========================================== */
.circle-transition {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 8; pointer-events: none;
    opacity: 0; visibility: hidden;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.circle-transition.play { opacity: 1; visibility: visible; z-index: 100; }
.circle-transition::before { content: ''; position: absolute; inset: 0; background: #0a0a0a; opacity: 0; }
.circle-transition.play::before { animation: circle-backdrop 1.8s linear forwards; }
.circle-transition .circle {
    position: absolute; top: 50%; left: 50%;
    width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10,10,10,1) 0%, rgba(10,10,10,1) 48%, rgba(10,10,10,0.85) 60%, rgba(10,10,10,0) 74%);
    transform: scale(0); opacity: 1; will-change: transform, opacity;
}
.circle-transition.play .circle { animation: circle-wipe 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.circle-transition-text { position: relative; z-index: 1; font-size: 1.1rem; font-weight: 400; letter-spacing: 4px; color: #aaaaaa; text-transform: uppercase; opacity: 0; }
.circle-transition.play .circle-transition-text { animation: circle-text 1.8s ease forwards; }
@keyframes circle-backdrop { 0% { opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes circle-wipe { 0% { transform: scale(0); opacity: 1; } 45% { transform: scale(1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes circle-text { 0%, 25% { opacity: 0; } 45%, 65% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* ==========================================
PÁGINA INTERNA
========================================== */
.white-section {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0a0a0a; z-index: 7;
    opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none; overflow: hidden;
    content-visibility: hidden;
    contain-intrinsic-size: 100vw 100vh;
}
.white-section.visible { opacity: 1; visibility: visible; pointer-events: auto; content-visibility: visible; }
.white-scroll-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.white-content-overlay {
    position: relative; z-index: 2; width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden; pointer-events: auto;
    overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
}
.white-content-overlay::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ==========================================
HERO INTERNO
========================================== */
.ws-hero {
    display: grid; grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr); gap: 2.5rem;
    width: 80%; max-width: 2100px; margin: 0 auto;
    padding: 5.5rem 0 2rem; align-items: start;
}
.ws-hero-banner {
    position: relative; width: 100%; min-width: 0; aspect-ratio: 2 / 1; height: auto;
    border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end;
    background-color: #111111; background-position: center; background-size: cover; background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ws-hero-banner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}
.ws-hero-banner-content { position: relative; z-index: 2; padding: 2rem 2.2rem; color: #ffffff; }
.ws-hero-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 1.1rem; color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.45); }
.ws-hero-btn {
    position: relative; display: inline-block;
    background: #ffffff; color: #0a0a0a; border: 1px solid #ffffff;
    padding: 0.6rem 1.3rem; font-size: 0.72rem; font-weight: 600; border-radius: 30px;
    cursor: pointer; overflow: hidden; z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
}
.ws-hero-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #0a0a0a; transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: -1;
}
.ws-hero-btn:hover { color: #ffffff; border-color: #ffffff; }
.ws-hero-btn:hover::before { transform: translateX(0); }
.ws-hero-side {
    display: flex; flex-direction: column; cursor: pointer; min-width: 0; width: 100%;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 1.2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ws-hero-side:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); transform: translateY(-2px); }
.ws-hero-side-img {
    position: relative; width: 100%; aspect-ratio: 4 / 3; height: auto;
    border-radius: 16px; overflow: hidden;
    background-color: #1a1a1a; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.ws-hero-side-img::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55); opacity: 0;
    transition: opacity 0.45s ease; pointer-events: none; z-index: 1;
}
.ws-hero-side:hover .ws-hero-side-img::after { opacity: 1; }
.ws-hero-side-viewmore {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    padding: 0.65rem 1.6rem; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 30px;
    background: transparent; color: #ffffff;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    white-space: nowrap; opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease, color 0.4s ease;
    pointer-events: none; z-index: 2; overflow: hidden;
}
.ws-hero-side-viewmore::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: -1;
}
.ws-hero-side:hover .ws-hero-side-viewmore { opacity: 1; transform: translate(-50%, -50%) scale(1); color: #0a0a0a; }
.ws-hero-side:hover .ws-hero-side-viewmore::before { transform: translateX(0); }
.ws-hero-side-info {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 40px;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.4rem;
    min-height: 44px;
    width: 100%;
    min-width: 0;
}
.ws-hero-side-label { font-size: 0.62rem; letter-spacing: 1.6px; text-transform: uppercase; color: #888888; font-weight: 600; white-space: nowrap; }
.ws-hero-side-title {
    font-size: clamp(1rem, 1.2vw, 1.5rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: normal;
    min-width: 0;
}
.ws-hero-side-arrow {
    margin-left: 0; width: 40px; height: 40px; border-radius: 50%;
    background: #ffffff; color: #0a0a0a; display: flex; align-items: center; justify-content: center;
    line-height: 0; cursor: pointer; flex-shrink: 0; transition: transform 0.3s ease, background 0.3s ease;
}
.ws-hero-side-arrow svg { display: block; }
.ws-hero-side:hover .ws-hero-side-arrow { transform: translateX(5px); background: #cccccc; }

/* ==========================================
MARQUEE
========================================== */
.ws-logos-title {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #ffffff;
    margin: 4.5rem auto 3.5rem;
    max-width: 720px;
    padding: 0 1rem;
    font-weight: 400;
    position: relative;
    z-index: 2;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.ws-marquee {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    background: #101010;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 2.5rem 0;
    z-index: 1;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.ws-marquee-row { overflow: hidden; width: 100%; position: relative; z-index: 1; white-space: nowrap; }
.ws-marquee-row + .ws-marquee-row { margin-top: 1rem; }
.ws-marquee-track { display: inline-flex; width: max-content; will-change: transform; }
.ws-marquee-group { display: inline-flex; align-items: center; gap: 3rem; padding-right: 3rem; flex-shrink: 0; }
.ws-marquee-item {
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ffffff;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    flex-shrink: 0;
}

/* ==========================================
SECCIÓN TEÓRICA
========================================== */
.ws-team { width: 92%; max-width: 1400px; margin: 5rem auto 0; padding: 0 1rem; }
.ws-team-text { max-width: 900px; margin: 0 auto 3.5rem; text-align: center; }
.ws-team-title { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -1.5px; line-height: 1.1; color: #ffffff; margin-bottom: 1.5rem; }
.ws-team-desc { font-size: 1rem; line-height: 1.7; color: #888888; max-width: 720px; margin: 0 auto; }
.ws-team-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ws-team-pillar {
    padding: 1.6rem; border-radius: 24px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ws-team-pillar-title { font-size: 1rem; font-weight: 700; color: #ffffff; margin-bottom: 0.6rem; letter-spacing: -0.2px; }
.ws-team-pillar-desc { font-size: 0.8rem; line-height: 1.6; color: #777777; }

/* ==========================================
OUR WORK & PROJECTS
========================================== */
.ws-work {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; padding: 2rem 3rem;
    max-width: 1200px; margin: 3rem auto; align-items: center;
    background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ws-work-label { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: #666666; margin-bottom: 0.8rem; font-weight: 500; }
.ws-work-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -1px; line-height: 1.15; color: #ffffff; }
.ws-work-desc p { font-size: 0.85rem; line-height: 1.6; color: #888888; margin-bottom: 1.2rem; }
.ws-work-btn {
    position: relative; display: inline-block; background: transparent; color: #ffffff; border: 1px solid #ffffff;
    padding: 0.6rem 1.5rem; font-size: 0.8rem; font-weight: 600; border-radius: 50px;
    cursor: pointer; overflow: hidden; z-index: 1; transition: color 0.4s ease;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.5px;
}
.ws-work-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: -1;
}
.ws-work-btn:hover { color: #0a0a0a; }
.ws-work-btn:hover::before { transform: translateX(0); }

.ws-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 0 4rem 2rem 4rem; max-width: 1400px; margin: 3rem auto 0; }
.ws-project {
    display: flex; flex-direction: column; cursor: pointer; transition: opacity 0.4s ease, transform 0.4s ease;
    background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ws-project:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.ws-project-img {
    position: relative;
    border-radius: 12px;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.2rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0d0d0d;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ws-project-img::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; z-index: 1; }
.ws-project:hover .ws-project-img::after { opacity: 1; }
.ws-project-viewmore {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85);
    padding: 0.65rem 1.6rem; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 30px;
    background: transparent; color: #ffffff; font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease, color 0.4s ease; pointer-events: none; z-index: 2; overflow: hidden;
}
.ws-project-viewmore::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: -1;
}
.ws-project:hover .ws-project-viewmore { opacity: 1; transform: translate(-50%, -50%) scale(1); color: #0a0a0a; }
.ws-project:hover .ws-project-viewmore::before { transform: translateX(0); }
.ws-project-img--desktop { background-color: #0d0d0d; background-position: center; background-size: contain; background-repeat: no-repeat; }
.ws-project-img--laptop { background-color: #0d0d0d; background-position: center; background-size: contain; background-repeat: no-repeat; }
.ws-project-info { display: flex; flex-direction: column; gap: 0.3rem; }
.ws-project-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; }
.ws-project-cat { font-size: 0.85rem; color: #666666; }
.ws-project-arrow {
    align-self: flex-end; width: 40px; height: 40px; border-radius: 50%;
    background: #ffffff; color: #0a0a0a; display: flex; align-items: center; justify-content: center;
    line-height: 0; margin-top: 0.5rem; transition: transform 0.3s ease, background 0.3s ease;
}
.ws-project-arrow svg { display: block; }
.ws-project:hover .ws-project-arrow { transform: translateX(5px); background: #cccccc; }

/* ==========================================
WHO WE ARE
========================================== */
.ws-about { width: 92%; max-width: 1400px; margin: 7rem auto 0; padding: 0 1rem; }
.ws-about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
.ws-about-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -1.2px; line-height: 1.12; color: #ffffff; margin-bottom: 1.5rem; }
.ws-about-desc { font-size: 1rem; line-height: 1.7; color: #888888; margin-bottom: 2.5rem; max-width: 560px; }
.ws-about-media {
    position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
    background-color: #141414; background-position: center; background-size: cover; background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ws-about-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 55%); pointer-events: none; }
.ws-about-caption { position: absolute; left: 1.5rem; bottom: 1.3rem; z-index: 2; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

/* ==========================================
SOLUTIONS — ACORDEÓN
========================================== */
.ws-solutions { width: 92%; max-width: 1400px; margin: 7rem auto 0; padding: 0 1rem; }
.ws-solutions-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -1.2px; line-height: 1.12; color: #ffffff; max-width: 760px; margin-bottom: 3rem; }
.ws-solutions-list { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ws-solution { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ws-solution-head {
    display: grid; grid-template-columns: 4rem 1fr auto; gap: 2rem; align-items: center; width: 100%;
    padding: 2rem 1rem; background: none; border: none; cursor: pointer; text-align: left;
    transition: background 0.3s ease, padding-left 0.3s ease; font-family: inherit; color: inherit;
}
.ws-solution-head:hover { background: rgba(255, 255, 255, 0.03); padding-left: 1.8rem; }
.ws-solution-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: #555555; }
.ws-solution-title { font-size: 1.3rem; font-weight: 700; color: #ffffff; letter-spacing: -0.3px; }
.ws-solution-toggle {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center; color: #cccccc;
    flex-shrink: 0; background: transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ws-solution-toggle svg { display: block; width: 16px; height: 16px; }
.ws-solution-toggle .line-v { transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: center; }
.ws-solution-toggle .line-h { transition: transform 0.3s ease; transform-origin: center; }
.ws-solution.active .ws-solution-toggle { background: #ffffff; color: #0a0a0a; border-color: #ffffff; }
.ws-solution.active .ws-solution-toggle .line-v { opacity: 0; transform: scaleY(0); }
.ws-solution.active .ws-solution-toggle .line-h { transform: scaleX(1.1); }
.ws-solution-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.ws-solution.active .ws-solution-panel { grid-template-rows: 1fr; }
.ws-solution-panel-inner { overflow: hidden; }
.ws-solution-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 0 1rem 2.5rem 5rem; }
.ws-solution-desc { font-size: 0.95rem; line-height: 1.7; color: #888888; }
.ws-solution-points { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.ws-solution-points li { position: relative; padding-left: 1.4rem; color: #cccccc; font-size: 0.9rem; line-height: 1.5; }
.ws-solution-points li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: #608abe; }

/* ==========================================
SOCIAL PROOF
========================================== */
.ws-social-proof {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
    width: 92%; max-width: 1400px; margin: 7rem auto 0; padding: 0 1rem;
    background: none; border: none; box-shadow: none; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ws-proof-text-block { display: flex; flex-direction: column; gap: 0.8rem; }
.ws-proof-heading { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; color: #ffffff; }
.ws-proof-subheading { font-size: 0.95rem; line-height: 1.6; color: #888888; max-width: 480px; }
.ws-proof-visual { display: flex; align-items: center; justify-content: flex-end; gap: 1.8rem; }
.ws-avatars { display: flex; align-items: center; }
.ws-avatar {
    width: 52px; height: 52px; border-radius: 50%; border: 2px solid #ffffff;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: #2a2a2a;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: #ffffff;
    margin-left: -10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.ws-avatar:first-child { margin-left: 0; }
.ws-proof-info { display: flex; flex-direction: column; gap: 0.35rem; }
.ws-stars { color: #e8b64c; font-size: 1.05rem; letter-spacing: 4px; line-height: 1; }
.ws-proof-text { font-size: 0.85rem; color: #cccccc; letter-spacing: 0.3px; }

/* ==========================================
CTA FINAL
========================================== */
.ws-cta {
    width: 92%; max-width: 1400px; margin: 5rem auto 0; padding: 5rem 3rem 5.5rem; text-align: center;
    position: relative; overflow: hidden;
    background: radial-gradient(circle at 50% 0%, rgba(96, 138, 190, 0.08) 0%, rgba(96, 138, 190, 0) 62%), rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 32px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ws-cta-label { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: #666666; margin-bottom: 1.6rem; font-weight: 600; }
.ws-cta-title { font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -1.5px; line-height: 1.05; color: #ffffff; margin-bottom: 1.6rem; }
.ws-cta-desc { font-size: 1rem; line-height: 1.7; color: #8f8f8f; max-width: 560px; margin: 0 auto 3rem; }
.ws-cta-actions { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.ws-cta-btn {
    position: relative; display: inline-flex; align-items: center; gap: 0.7rem;
    background: #ffffff; color: #0a0a0a; border: 1px solid #ffffff; padding: 1rem 2.2rem; border-radius: 50px;
    font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer;
    overflow: hidden; z-index: 1; transition: color 0.4s ease, border-color 0.4s ease;
}
.ws-cta-btn::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #0a0a0a; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); z-index: -1;
}
.ws-cta-btn:hover { color: #ffffff; }
.ws-cta-btn:hover::before { transform: translateX(0); }
.ws-cta-btn-icon { display: inline-flex; line-height: 0; }
.ws-cta-btn-icon svg { display: block; transform: rotate(-45deg); transition: transform 0.3s ease; }
.ws-cta-btn:hover .ws-cta-btn-icon svg { transform: rotate(-45deg) translate(2px, -2px); }
.ws-cta-link { color: #8f8f8f; font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 3px; transition: color 0.3s ease, border-color 0.3s ease; }
.ws-cta-link:hover { color: #ffffff; border-color: #ffffff; }

/* ==========================================
BOTÓN BACK
========================================== */
.white-back {
    position: sticky; bottom: 2rem; left: 3.5rem; display: inline-flex; align-items: center; gap: 0.6rem;
    background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; padding: 0.8rem 1.5rem;
    color: #ffffff; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; z-index: 100; margin-top: 2.5rem; margin-left: 4rem; margin-bottom: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.white-back:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.white-back-arrow { display: inline-block; font-size: 1rem; line-height: 1; transition: transform 0.25s ease; }
.white-back:hover .white-back-arrow { transform: translateX(-4px); }

/* ==========================================
CASE STUDIES & ALL PROJECTS
========================================== */
.synex-page { background: #0a0a0a; }
.syx-hero { padding: 8rem 2rem 0; text-align: center; }
.syx-title { font-size: clamp(4rem, 11vw, 10.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; color: #ffffff; text-transform: uppercase; }
.syx-tags { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; }
.syx-tag { padding: 0.55rem 1.6rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 30px; color: #999999; font-size: 0.8rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.syx-showcase { width: 92%; max-width: 1600px; margin: 4rem auto 0; background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); padding: 1.2rem; }
.syx-hero-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background-color: #1a1a1a; background-position: center top; background-size: cover; background-repeat: no-repeat; border: 1px solid rgba(255, 255, 255, 0.08); }
.syx-overview { width: 92%; max-width: 1600px; margin: 5rem auto 0; padding: 0 1rem; }
.syx-overview-label { font-size: 0.85rem; color: #cccccc; letter-spacing: 0.5px; margin-bottom: 1.8rem; }
.syx-overview-text { font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.45; font-weight: 400; color: #8f8f8f; max-width: 1400px; }
.syx-overview-meta { display: flex; align-items: center; gap: 3rem; margin-top: 2.5rem; font-size: 0.9rem; color: #cccccc; }
.syx-overview-meta strong { color: #ffffff; font-weight: 700; }
.syx-meta-arrow { color: #8f8f8f; font-size: 1rem; }
.syx-divider { width: 1px; height: 80px; background: rgba(255, 255, 255, 0.25); margin: 4rem auto 2.5rem; }
.syx-process { width: 92%; max-width: 1600px; margin: 0 auto; padding: 0 1rem 4rem; text-align: center; }
.syx-process-title { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; background: linear-gradient(90deg, #4a4a4a 0%, #ffffff 45%, #ffffff 55%, #4a4a4a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 auto 3.5rem; }
.syx-process-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: left; justify-content: center; }
.syx-card { position: relative; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 42%, rgba(96, 138, 190, 0.07) 0%, rgba(96, 138, 190, 0) 62%), #141414; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 1.8rem; min-height: 340px; overflow: hidden; }
.syx-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.syx-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); color: #cccccc; }
.syx-card-hours { font-size: 0.9rem; color: #cccccc; }
.syx-card-title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; color: #ffffff; margin: 2.5rem 0 1.4rem; }
.syx-card-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.syx-card-tag { padding: 0.45rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; color: #999999; font-size: 0.75rem; letter-spacing: 0.3px; }
.syx-more { margin: 4rem 0 0; padding: 0 0 4rem; }
.syx-more-header { width: 92%; max-width: 1600px; margin: 0 auto 3rem; padding: 0 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.syx-more-title { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; color: #ffffff; }
.syx-more-desc { font-size: 0.95rem; line-height: 1.6; color: #8f8f8f; max-width: 420px; text-align: right; }
.syx-more-grid { width: 92%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.syx-more-item { display: flex; flex-direction: column; }
.syx-more-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background-color: #141414; background-size: cover; background-position: center top; background-repeat: no-repeat; }
.syx-more-cap { margin-top: 0.9rem; font-size: 0.8rem; letter-spacing: 1px; color: #8f8f8f; text-transform: uppercase; }

.wap-page { background: #0a0a0a; }
.wap-header { width: 92%; max-width: 1600px; margin: 6rem auto 0; padding: 0 1rem; }
.wap-title { font-size: clamp(3rem, 7vw, 6rem); font-weight: 600; letter-spacing: -2px; line-height: 1.02; color: #ffffff; margin-bottom: 3rem; }
.wap-filters { width: 92%; max-width: 1600px; margin: 0 auto 3.5rem; padding: 0 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.wap-pill { padding: 0.85rem 2.4rem; border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #cccccc; font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.wap-pill:hover { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
.wap-pill.active { background: #ffffff; border-color: #ffffff; color: #0a0a0a; }
.wap-grid { width: 92%; max-width: 1600px; margin: 0 auto; padding: 0 1rem 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 2rem; }
.wap-card { cursor: pointer; }
.wap-card.hidden { display: none; }
.wap-card-media { width: 100%; aspect-ratio: 1672 / 941; border-radius: 0; background-size: cover; background-position: center center; background-color: #141414; border: none; overflow: hidden; transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); }
.wap-card:hover .wap-card-media { transform: scale(1.02); }
.wap-card-meta { margin-top: 1.6rem; }
.wap-card-cats { font-size: 0.8rem; letter-spacing: 2px; color: #888888; text-transform: uppercase; margin-bottom: 0.8rem; }
.wap-card-title { display: flex; align-items: center; gap: 0.8rem; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; color: #cccccc; transition: color 0.3s ease; }
.wap-card:hover .wap-card-title { color: #ffffff; }
.wap-card-arrow { display: inline-flex; line-height: 0; color: #ffffff; flex-shrink: 0; }
.wap-card-arrow svg { display: block; transform: rotate(-45deg); transition: transform 0.3s ease; }
.wap-card:hover .wap-card-arrow svg { transform: rotate(-45deg) translate(3px, -3px); }

/* ==========================================
TRANSICIÓN INTERNA FADE & LOADER
========================================== */
.internal-fade-transition { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.internal-fade-transition.play { opacity: 1; visibility: visible; z-index: 200; }
.internal-fade-transition .internal-fade-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0a; opacity: 0; transform: scale(1.05); }
.internal-fade-transition.play .internal-fade-bg { animation: fade-bg 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.internal-fade-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.5rem; opacity: 0; transform: translateY(20px); }
.internal-fade-transition.play .internal-fade-content { animation: fade-content 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.internal-fade-line { width: 60px; height: 1px; background: rgba(255, 255, 255, 0.3); }
.internal-fade-text { font-size: 0.85rem; font-weight: 400; letter-spacing: 4px; color: #888888; text-transform: uppercase; white-space: nowrap; }
@keyframes fade-bg { 0% { opacity: 0; transform: scale(1.05); } 30% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.98); } }
@keyframes fade-content { 0%, 20% { opacity: 0; transform: translateY(20px); } 40%, 60% { opacity: 1; transform: translateY(0); } 80%, 100% { opacity: 0; transform: translateY(-20px); } }


/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: 1024px) {
    .ws-team-pillars { grid-template-columns: 1fr 1fr; }
    .ws-about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ws-about-media { aspect-ratio: 16 / 9; }
    .ws-solution-content { grid-template-columns: 1fr; gap: 1.5rem; padding-left: 1rem; }
}
@media (max-width: 900px) {
    .syx-process-cards { grid-template-columns: 1fr; }
    .syx-more-grid { grid-template-columns: 1fr; }
    .syx-more-desc { text-align: left; }
    .syx-overview-meta { flex-wrap: wrap; gap: 1.5rem; }
    .wap-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 768px) {
    .header-main { padding: 0.4rem 1.5rem; }
    .header-links { gap: 1.5rem; }
    .header-links a, .btn-contact { font-size: 1rem; }
    .logo img { height: 30px; }
    .ws-hero { grid-template-columns: 1fr; }
    .ws-projects { grid-template-columns: 1fr; padding: 0 2rem 2rem; }
    .syx-hero { padding-top: 6rem; }
    .ws-cta { padding: 3.5rem 1.5rem 4rem; }
    .ws-cta-actions { gap: 1.5rem; }
    .ws-avatar { width: 44px; height: 44px; font-size: 0.7rem; }
    .ws-about { margin-top: 5rem; }
    .ws-solutions { margin-top: 5rem; }
    .ws-solution-head { grid-template-columns: 2.5rem 1fr auto; gap: 1rem; padding: 1.5rem 0.5rem; }
    .ws-solution-title { font-size: 1.1rem; }
    .ws-solution-content { padding: 0 0.5rem 2rem 0.5rem; }
    .ws-social-proof { grid-template-columns: 1fr; gap: 2rem; }
    .ws-proof-visual { justify-content: flex-start; }
    .ws-marquee { padding: 2rem 0; }
    .ws-marquee-item { font-size: 1.4rem; }
}
@media (max-width: 600px) {
    .ws-team { margin-top: 3rem; }
    .ws-team-pillars { grid-template-columns: 1fr; }
    .ws-team-title { font-size: 2rem; }
    .ws-social-proof { margin-top: 5rem; }
    .ws-about-title { font-size: 1.7rem; }
    .ws-solutions-title { font-size: 1.7rem; }
}
/* ==========================================
V6.17 — INTERNAL PAGES FOR ALL SERVICES
========================================== */
.generic-service-page .ws-hero-side { cursor: pointer; }
.generic-service-page .ws-project { cursor: default; }
.generic-service-page .ws-project:hover { transform: translateY(-2px); }
.generic-service-page .ws-project-img { background-size: contain; background-position: center; background-repeat: no-repeat; }
.generic-service-page .ws-hero-banner,
.generic-service-page .ws-hero-side-img,
.generic-service-page .ws-about-media { background-color: #111; background-position: center; background-size: cover; }


/* ==========================================
V6.18 — GEOMETRÍA IDÉNTICA EN TODAS LAS PÁGINAS DE SERVICIO
Los textos y assets nunca pueden alterar el tamaño de las columnas/cards.
========================================== */
.generic-service-page .ws-hero {
    grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr);
}
.generic-service-page .ws-hero-banner,
.generic-service-page .ws-hero-side {
    min-width: 0;
    width: 100%;
}
.generic-service-page .ws-hero-banner { aspect-ratio: 2 / 1; }
.generic-service-page .ws-hero-side-img { aspect-ratio: 4 / 3; }
.generic-service-page .ws-hero-side-info { min-height: 44px; max-height: 44px; }
.generic-service-page .ws-hero-side-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.generic-service-page .ws-projects {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.generic-service-page .ws-project { min-width: 0; }
.generic-service-page .ws-project-img {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* V6.34 — scroll indicator consolidado (sin overrides históricos) */
.scroll-indicator.icon-ring-arrow {
    position: absolute;
    bottom: 1.95rem;
    left: 50%;
    transform: translateX(-50%);
    width: 136px;
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.scroll-indicator.icon-ring-arrow .scroll-orbit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-indicator.icon-ring-arrow .scroll-ring-svg {
    display: block !important;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: scrollRingSpin 14s linear infinite;
    opacity: 1;
}
.scroll-indicator.icon-ring-arrow .scroll-ring-text {
    display: block !important;
    fill: #ffffff;
    font-size: 8.8px;
    font-weight: 600;
    letter-spacing: 0.42px;
}
.scroll-indicator.icon-ring-arrow span,
.scroll-indicator.icon-ring-arrow .mouse-icon-svg { display: none !important; }
.scroll-indicator.icon-ring-arrow .scroll-core.arrow-only {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
}
.scroll-indicator.icon-ring-arrow .scroll-arrow-svg {
    width: 43px; height: 48px; display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.14));
}
.scroll-indicator.icon-ring-arrow .scroll-arrow-svg path { stroke: #ffffff; }
body.service-transition-active .scroll-indicator.icon-ring-arrow .scroll-ring-svg { animation-play-state: paused; }

/* V6.32 — service menu without text shadow/halo */
.nav-services,
.nav-services .menu-title,
.nav-services li,
.nav-services li span,
.nav-services.on-white .menu-title,
.nav-services.on-white li,
.nav-services.on-white li span,
.nav-services.visible li,
.nav-services.visible li.active,
.nav-services.visible li:hover,
.nav-services.visible:hover li,
.nav-services.visible:hover li.active,
.nav-services.visible:hover li:hover {
    text-shadow: none !important;
    filter: none !important;
}

/* V6.34 — responsive final: las reglas V6.18 no deben romper el móvil */
@media (max-width: 768px) {
    .generic-service-page .ws-hero { grid-template-columns: 1fr; }
    .generic-service-page .ws-projects { grid-template-columns: 1fr; }
    .generic-service-page .ws-hero-side-info { min-height: 44px; max-height: none; }
    .nav-services { right: 1rem; bottom: 1.25rem; transform: scale(.88); transform-origin: right bottom; }
    .hero-content { left: 1.5rem; bottom: 2rem; }
    .hero-content h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
}
@media (max-width: 560px) {
    .header-main { width: calc(100% - 1rem); top: .5rem; padding: .35rem .75rem; }
    .header-links { gap: .75rem; }
    .header-links a { font-size: .82rem; }
    .btn-contact { display: none; }
    .logo img { height: 27px; }
    .nav-services { transform: scale(.72); }
}

/* V6.51 — stable single-pass glass header; no blur toggles during scroll. */


.ws-hero-banner--webdev-reference {
    background-position: center 42%;
}
.ws-hero-banner-content.ws-hero-banner-content--reference {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 100%;
    padding: 1.6rem 1.8rem;
}
.ws-hero-banner-content--reference .ws-hero-title {
    max-width: 760px;
    margin-bottom: 1rem;
}
.ws-hero-banner-content--reference .ws-hero-btn {
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

/* ==========================================
PROJECT BRIEF — FULL PAGE SURVEY (V6.45)
========================================== */
.start-project-page { background: #090909; }
.project-brief-scroll { padding-top: 0; scroll-behavior: smooth; }
.project-brief-shell { width: min(1500px, 92%); margin: 0 auto; padding: 6.25rem 0 2rem; }
.project-brief-layout { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.9fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: start; }
.project-brief-summary { position: sticky; top: 7rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.09); border-radius: 24px; background: rgba(255,255,255,0.035); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brief-summary-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brief-summary-kicker, .brief-summary-step { font-size: 0.66rem; letter-spacing: 0.18em; font-weight: 700; color: #777; }
.brief-progress { height: 2px; margin: 1rem 0 2rem; overflow: hidden; background: rgba(255,255,255,0.08); border-radius: 999px; }
.brief-progress span { display: block; width: 100%; height: 100%; transform: scaleX(.3333); transform-origin: left center; background: #f3f3f3; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.brief-summary-list { margin: 0; }
.brief-summary-list > div { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.brief-summary-list dt { margin-bottom: .35rem; font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: #686868; }
.brief-summary-list dd { margin: 0; color: #e9e9e9; font-size: .92rem; line-height: 1.35; }
.brief-summary-note { margin: 1.5rem 0 0; font-size: .76rem; line-height: 1.6; color: #666; }
.project-brief-form { min-width: 0; padding-bottom: 2rem; }
.brief-step { animation: brief-step-in .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes brief-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.brief-step-heading { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; margin-bottom: 2rem; }
.brief-step-heading > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #9c9c9c; font-size: .66rem; letter-spacing: .1em; }
.brief-step-heading p { margin: .1rem 0 .55rem; font-size: .65rem; letter-spacing: .22em; font-weight: 700; color: #6e6e6e; }
.brief-step-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.045em; font-weight: 550; color: #f4f4f4; }
.brief-step-heading small { display: block; margin-top: .7rem; font-size: .86rem; line-height: 1.55; color: #777; }
.brief-options-grid { display: grid; gap: .9rem; }
.brief-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brief-budget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brief-option { position: relative; display: flex; align-items: center; min-height: 104px; gap: 1rem; padding: 1.15rem 1.2rem; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.025); cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.brief-option:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); }
.brief-option input { position: absolute; opacity: 0; pointer-events: none; }
.brief-option:has(input:checked) { border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); }
.brief-option-index { width: 32px; flex: 0 0 32px; color: #666; font-size: .68rem; letter-spacing: .08em; }
.brief-option-copy { min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.brief-option-copy strong { color: #ededed; font-size: .92rem; font-weight: 600; }
.brief-option-copy small { color: #747474; font-size: .72rem; line-height: 1.45; }
.brief-option-check { margin-left: auto; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); color: transparent; font-size: .7rem; transition: background .25s ease, color .25s ease; }
.brief-option:has(input:checked) .brief-option-check { background: #f5f5f5; color: #111; }
.brief-field-group + .brief-field-group { margin-top: 2.5rem; }
.brief-field-label { margin: 0 0 1rem; color: #969696; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.brief-chip-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.brief-chip { position: relative; cursor: pointer; }
.brief-chip input { position: absolute; opacity: 0; pointer-events: none; }
.brief-chip span { display: block; padding: .78rem 1.1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); color: #858585; font-size: .78rem; transition: color .25s ease, border-color .25s ease, background .25s ease; }
.brief-chip:hover span { color: #eaeaea; border-color: rgba(255,255,255,.22); }
.brief-chip input:checked + span { color: #111; border-color: #f4f4f4; background: #f4f4f4; }
.brief-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.brief-input { display: flex; flex-direction: column; gap: .55rem; }
.brief-input-wide { grid-column: 1 / -1; }
.brief-input > span { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: #777; }
.brief-input input, .brief-input textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.03); padding: .95rem 1rem; color: #eee; font: inherit; outline: none; resize: vertical; transition: border-color .2s ease, background .2s ease; }
.brief-input input::placeholder, .brief-input textarea::placeholder { color: #505050; }
.brief-input input:focus, .brief-input textarea:focus { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.05); }
.brief-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.brief-action-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.brief-validation { max-width: 240px; color: #999; font-size: .74rem; line-height: 1.35; text-align: right; }
.brief-back-step, .brief-next-step, .brief-submit { min-height: 48px; border-radius: 999px; padding: 0 1.35rem; font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.brief-back-step { border: 1px solid rgba(255,255,255,.12); background: transparent; color: #8a8a8a; }
.brief-back-step:not(:disabled):hover { border-color: rgba(255,255,255,.3); color: #fff; transform: translateX(-2px); }
.brief-back-step:disabled { opacity: .3; cursor: default; }
.brief-next-step, .brief-submit { display: inline-flex; align-items: center; gap: .7rem; border: 1px solid #f4f4f4; background: #f4f4f4; color: #111; }
.brief-next-step:hover, .brief-submit:hover { transform: translateY(-2px); background: #fff; }
.brief-next-step svg, .brief-submit svg { display: block; transform: rotate(-45deg); }
.brief-next-step[hidden], .brief-submit[hidden] { display: none !important; }
.brief-privacy { margin: 1rem 0 0; text-align: right; color: #5f5f5f; font-size: .7rem; }
.project-brief-page-back { margin-top: 3rem; }

@media (max-width: 980px) {
    .project-brief-shell { padding-top: 5.5rem; }
    .project-brief-layout { grid-template-columns: 1fr; }
    .project-brief-summary { position: static; }
    .brief-summary-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .brief-summary-list > div { border-bottom: 0; }
    .brief-summary-note { display: none; }
    .brief-budget-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .project-brief-shell { width: 90%; padding-top: 6.5rem; }
    .brief-services-grid, .brief-budget-grid, .brief-input-grid { grid-template-columns: 1fr; }
    .brief-input-wide { grid-column: auto; }
    .brief-option { min-height: 92px; }
    .brief-summary-list { grid-template-columns: 1fr; gap: 0; }
    .brief-summary-list > div { padding: .65rem 0; }
    .brief-form-actions { align-items: flex-end; }
    .brief-action-right { flex-direction: column; align-items: flex-end; }
    .brief-validation { text-align: right; }
    .project-brief-page-back { margin-left: 5%; }
}


/* ==========================================
WEB DEVELOPMENT — ENGINEERING CONTENT V6.60
========================================== */
.web-dev-page .ws-team { margin-top: 6rem; }
.web-dev-page .ws-team-text { max-width: 940px; }
.web-dev-page .ws-team-pillars { gap: 1.2rem; }
.web-dev-page .ws-team-pillar { min-height: 190px; }
.web-dev-page .ws-about-media { background-position: center; }
.web-delivery-standards {
    width: 92%; max-width: 1400px; margin: 7rem auto 0; padding: 0 1rem;
}
.web-delivery-kicker {
    margin: 0 0 .8rem; font-size: .7rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #666;
}
.web-delivery-title {
    max-width: 850px; margin: 0 0 2.5rem; color: #fff;
    font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -1.2px;
}
.web-delivery-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;
}
.web-delivery-card {
    padding: 1.45rem; min-height: 175px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,.085); background: rgba(255,255,255,.025);
}
.web-delivery-num { display: block; margin-bottom: 1.4rem; color: #666; font-size: .68rem; letter-spacing: .15em; }
.web-delivery-card h3 { margin: 0 0 .65rem; color: #fff; font-size: 1rem; letter-spacing: -.2px; }
.web-delivery-card p { margin: 0; color: #7d7d7d; font-size: .82rem; line-height: 1.65; }
@media (max-width: 900px) { .web-delivery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .web-delivery-grid { grid-template-columns: 1fr; } .web-delivery-standards { margin-top: 5rem; } }


/* V6.62 — WEB DEVELOPMENT content aligned to approved reference */
.web-dev-page .ws-team { margin-top: 4.75rem; }
.web-dev-page .ws-team-text { max-width: 980px; margin-bottom: 3rem; }
.web-dev-page .ws-team-title { max-width: 980px; margin-left: auto; margin-right: auto; }
.web-dev-page .ws-team-desc { max-width: 760px; }
.web-dev-page .ws-team-pillars { gap: 1.2rem; align-items: stretch; }
.web-dev-page .ws-team-pillar {
    min-height: 176px;
    padding: 1.45rem 1.45rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.web-dev-page .ws-team-pillar-title { margin-bottom: 0.7rem; }
.web-dev-page .ws-team-pillar-desc { margin: 0; line-height: 1.55; color: #7c7c7c; }
.web-dev-page .ws-work { margin-top: 2.7rem; }
@media (max-width: 900px) {
    .web-dev-page .ws-team-pillar { min-height: 0; }
}


/* V6.63 — Web development content refined */
.web-dev-page .ws-about--webdev { margin-top: 5.5rem; }
.web-dev-page .ws-about--webdev .ws-about-title { max-width: 650px; }
.web-dev-page .ws-about--webdev .ws-about-desc { max-width: 670px; }
.web-dev-page .ws-solutions--webdev { margin-top: 6rem; }
.web-dev-page .ws-solutions--webdev .ws-solutions-title {
    max-width: 980px;
    margin-bottom: 2.5rem;
}
.web-dev-page .ws-solutions--webdev .ws-solution-title {
    max-width: calc(100% - 120px);
}


/* V6.65 — Restore Web Development process + work without removing existing sections */
.web-dev-page .ws-team--webdev-process {
    margin-top: 6rem;
}
.web-dev-page .ws-team--webdev-process .ws-team-text {
    max-width: 980px;
    margin-bottom: 2.8rem;
}
.web-dev-page .ws-team--webdev-process .ws-team-pillars {
    gap: 1.2rem;
    align-items: stretch;
}
.web-dev-page .ws-team--webdev-process .ws-team-pillar {
    min-height: 0;
    padding: 1.25rem 1.35rem 1.05rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.web-dev-page .ws-team--webdev-process .ws-team-pillar-title {
    margin-bottom: 0.55rem;
}
.web-dev-page .ws-team--webdev-process .ws-team-pillar-desc {
    margin: 0;
    line-height: 1.5;
}
.web-dev-page .ws-work--webdev {
    margin-top: 3rem;
}
.web-dev-page .ws-projects--webdev {
    margin-top: 2.5rem;
}
@media (max-width: 900px) {
    .web-dev-page .ws-team--webdev-process .ws-team-pillar { min-height: 0; }
}


/* V6.67 — only Web Development process heading/subheading stay on one line */
@media (min-width: 901px) {
  .web-dev-page .web-process-title {
    max-width: none;
    width: max-content;
    white-space: nowrap;
    font-size: clamp(2rem, 3.5vw, 3rem);
  }
  .web-dev-page .web-process-desc {
    max-width: 1050px;
    white-space: nowrap;
  }
}


/* V6.72 — APP DEVELOPMENT mirrors Web Development page architecture */
.app-dev-page .ws-team { margin-top: 4.75rem; }
.app-dev-page .ws-team-text { max-width: 980px; margin-bottom: 3rem; }
.app-dev-page .ws-team-title { max-width: 980px; margin-left: auto; margin-right: auto; }
.app-dev-page .ws-team-desc { max-width: 800px; }
.app-dev-page .ws-team-pillars { gap: 1.2rem; align-items: stretch; }
.app-dev-page .ws-team-pillar {
    min-height: 0;
    padding: 1.25rem 1.35rem 1.05rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.app-dev-page .ws-team-pillar-title { margin-bottom: .55rem; }
.app-dev-page .ws-team-pillar-desc { margin: 0; line-height: 1.5; color: #7c7c7c; }
.app-dev-page .ws-work--webdev { margin-top: 3rem; }
.app-dev-page .ws-projects--webdev { margin-top: 2.5rem; }
.app-dev-page .ws-about--webdev { margin-top: 5.5rem; }
.app-dev-page .ws-about--webdev .ws-about-title { max-width: 650px; }
.app-dev-page .ws-about--webdev .ws-about-desc { max-width: 670px; }
.app-dev-page .ws-about-media { background-position: center; }
.app-dev-page .ws-solutions--webdev { margin-top: 6rem; }
.app-dev-page .ws-solutions--webdev .ws-solutions-title { max-width: 980px; margin-bottom: 2.5rem; }
.app-dev-page .ws-solutions--webdev .ws-solution-title { max-width: calc(100% - 120px); }
@media (min-width: 901px) {
    .app-dev-page .app-process-title {
        width: min(100%, 1180px);
        max-width: 1180px;
        white-space: normal;
        text-wrap: balance;
        font-size: clamp(2rem, 3.1vw, 2.9rem);
    }
    .app-dev-page .app-process-desc {
        width: min(100%, 1120px);
        max-width: 1120px;
        white-space: normal;
        text-wrap: pretty;
    }
}
@media (max-width: 900px) {
    .app-dev-page .ws-team-pillar { min-height: 0; }
}


/* V6.73 — App Development copy translation + translation-safe margins */
.app-dev-page .white-content-overlay { overflow-x: clip; }
.app-dev-page .ws-team,
.app-dev-page .ws-work,
.app-dev-page .ws-projects,
.app-dev-page .ws-about,
.app-dev-page .ws-solutions,
.app-dev-page .ws-social-proof { box-sizing: border-box; }
.app-dev-page .ws-team-text { padding-inline: clamp(.25rem, 1vw, 1rem); }
.app-dev-page .ws-team-title,
.app-dev-page .ws-team-desc,
.app-dev-page .ws-work-title,
.app-dev-page .ws-work-desc,
.app-dev-page .ws-about-title,
.app-dev-page .ws-about-desc,
.app-dev-page .ws-solutions-title { overflow-wrap: normal; word-break: normal; }


/* V6.74 — Web Development translation-safe margins, same strategy as App Development */
.web-dev-page .white-content-overlay { overflow-x: clip; }
.web-dev-page .ws-team,
.web-dev-page .ws-work,
.web-dev-page .ws-projects,
.web-dev-page .ws-about,
.web-dev-page .ws-solutions,
.web-dev-page .ws-social-proof { box-sizing: border-box; }
.web-dev-page .ws-team-text { padding-inline: clamp(.25rem, 1vw, 1rem); }
.web-dev-page .ws-team-title,
.web-dev-page .ws-team-desc,
.web-dev-page .ws-work-title,
.web-dev-page .ws-work-desc,
.web-dev-page .ws-about-title,
.web-dev-page .ws-about-desc,
.web-dev-page .ws-solutions-title { overflow-wrap: normal; word-break: normal; }
@media (min-width: 901px) {
    .web-dev-page .web-process-title {
        width: min(100%, 1180px);
        max-width: 1180px;
        white-space: normal;
        text-wrap: balance;
        font-size: clamp(2rem, 3.1vw, 2.9rem);
    }
    .web-dev-page .web-process-desc {
        width: min(100%, 1120px);
        max-width: 1120px;
        white-space: normal;
        text-wrap: pretty;
    }
}


/* V6.75 — VELORA portfolio project */
.app-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-projects-grid .ws-project-img {
    aspect-ratio: 4 / 3;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0d0d0d;
}
@media (max-width: 700px) { .app-projects-grid { grid-template-columns: 1fr; } }


/* V6.77 — VELORA uses its native square (1:1) presentation everywhere. */
.app-projects-grid .ws-project[data-project="velora"] .ws-project-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}
.wap-card[data-page="veloraPage"] .wap-card-media {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}
#veloraPage .syx-showcase {
    width: min(92%, 1120px);
    max-width: 1120px;
}
#veloraPage .syx-hero-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}
#veloraPage .syx-more-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center !important;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}


/* V6.79 — VEYRO portfolio project: native square 1:1 presentation. */
.app-projects-grid .ws-project[data-project="veyro"] .ws-project-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.wap-card[data-page="veyroPage"] .wap-card-media {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#veyroPage .syx-showcase {
    width: min(92%, 1180px);
}
#veyroPage .syx-hero-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#veyroPage .syx-more-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* V6.80 — VELORA preview crop refinement.
   Keep source asset untouched; zoom only preview cards so peripheral arm/ring
   leave the visible frame while the phone remains centered. */
.app-projects-grid .ws-project[data-project="velora"] .ws-project-img {
    aspect-ratio: 1 / 1;
    background-size: 132%;
    background-position: 50% 48%;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}
.wap-card[data-page="veloraPage"] .wap-card-media {
    aspect-ratio: 1 / 1;
    background-size: 132%;
    background-position: 50% 48%;
    background-repeat: no-repeat;
    background-color: #f7f7f7;
}

/* V6.82 — VELORA case-study hero restored to original large presentation.
   The visual remains a true square (1254×1254 / 1:1) without shrinking the section. */
#veloraPage .syx-showcase {
    width: min(92%, 1120px);
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}
#veloraPage .syx-hero-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat;
}
@media (max-width: 820px) {
    #veloraPage .syx-showcase { width: 92%; }
}

/* V6.83 — VELORA case-study hero: remove source-image top dead space only.
   Preserve the same large square container; crop only the internal white margin
   by a small uniform zoom, without touching the source asset. */
#veloraPage .syx-hero-img {
    aspect-ratio: 1 / 1;
    background-size: 110% !important;
    background-position: 50% 54% !important;
    background-repeat: no-repeat;
}


/* V6.84 — unified portfolio card action button */
/* Service portfolio cards: keep the action centered in the metadata/footer area. */
.ws-project {
    position: relative;
}
.ws-project-info {
    min-height: 64px;
    justify-content: center;
    padding-right: 4.4rem;
    box-sizing: border-box;
}
.ws-project-arrow {
    position: absolute;
    right: 1.2rem;
    bottom: 1.45rem;
    width: 48px;
    height: 48px;
    margin: 0;
    align-self: auto;
    background: #ffffff;
    color: #0a0a0a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws-project:hover .ws-project-arrow {
    transform: translateX(3px);
    background: #ffffff;
}

/* View All Projects cards: same white circular action, centered in metadata. */
.wap-card-meta {
    position: relative;
    min-height: 84px;
    padding-right: 4.6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wap-card-title {
    padding-right: 0;
}
.wap-card-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}
.wap-card-arrow svg {
    display: block;
    transform: none;
    transition: transform 0.3s ease;
}
.wap-card:hover .wap-card-arrow {
    background: #ffffff;
}
.wap-card:hover .wap-card-arrow svg {
    transform: translateX(3px);
}

@media (max-width: 700px) {
    .ws-project-info { padding-right: 4rem; }
    .ws-project-arrow { width: 44px; height: 44px; right: 1rem; bottom: 1.25rem; }
    .wap-card-meta { padding-right: 4rem; }
    .wap-card-arrow { width: 44px; height: 44px; }
}


/* ==========================================
V6.85 — HEADER / SERVICE MENU / CONTACT US
========================================== */

/* Contact is a focused full-page experience, same rule as Project Brief. */
body.contact-page-active .nav-services,
body.contact-page-active .nav-services.visible,
body.contact-page-active .nav-services.on-white {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

/* Service menu typography now follows the header navigation. */
.nav-services .menu-title,
.nav-services.on-white .menu-title {
    font-family: inherit;
    font-size: 1.82rem;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #fff;
    opacity: 1;
    text-align: left;
    margin: 0 0 1rem;
}
.nav-services li,
.nav-services.on-white li {
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: 0;
    grid-template-columns: 2.6rem 1fr;
    gap: .15rem;
    color: #fff;
}
.nav-services li span,
.nav-services.on-white li span {
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
}
.nav-services ul,
.nav-services.on-white ul { gap: .72rem; }
.nav-services.on-white {
    padding: 1.15rem 1.35rem 1.25rem;
    border-radius: 20px;
}

/* Restore the authored staggered service-menu pulse without fading the entire
   container. Active and hovered items remain fully stable. */
.nav-services.visible li:not(.active) {
    animation: serviceMenuPulse 2.4s ease-in-out infinite;
}
.nav-services.visible li:nth-child(1) { animation-delay: 0s; }
.nav-services.visible li:nth-child(2) { animation-delay: .15s; }
.nav-services.visible li:nth-child(3) { animation-delay: .30s; }
.nav-services.visible li:nth-child(4) { animation-delay: .45s; }
.nav-services.visible li:nth-child(5) { animation-delay: .60s; }
.nav-services.visible li:nth-child(6) { animation-delay: .75s; }
.nav-services.visible li:nth-child(7) { animation-delay: .90s; }
.nav-services.visible li:nth-child(8) { animation-delay: 1.05s; }
@keyframes serviceMenuPulse {
    0%, 100% { opacity: .46; }
    50% { opacity: 1; }
}
.nav-services.visible li.active,
.nav-services.visible li:hover,
.nav-services.visible:hover li {
    animation-play-state: paused;
}
.nav-services.visible:hover li:not(:hover):not(.active) { opacity: .46; }
.nav-services.visible:hover li:hover,
.nav-services.visible:hover li.active { opacity: 1; }

/* Contact page — dark split editorial/form structure. */
.contact-page {
    background: #07090d;
    color: #f5f7fb;
    position: relative;
    overflow: hidden;
}
.contact-scroll {
    background: #07090d;
    position: relative;
    isolation: isolate;
}
.contact-scroll::before {
    content: '';
    position: absolute;
    inset: auto;
    width: min(860px, 52vw);
    aspect-ratio: 1;
    left: 50%;
    top: 11%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,124,255,.34) 0%, rgba(47,124,255,.22) 28%, rgba(47,124,255,.12) 46%, rgba(47,124,255,0) 74%);
    filter: blur(95px);
    opacity: .95;
    pointer-events: none;
    z-index: 0;
}
.contact-shell {
    position: relative;
    z-index: 1;
    width: min(1780px, calc(100% - 2.5rem));
    min-height: calc(100vh - 3rem);
    margin: 1.5rem auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    background: #0b0e14;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 34px;
    box-shadow: 0 24px 70px rgba(0,0,0,.36);
}
.contact-intro,
.contact-form-panel {
    min-width: 0;
    padding: clamp(6rem, 9vw, 9rem) clamp(2.6rem, 5.5vw, 6.5rem) 3rem;
}
.contact-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5rem;
    background: linear-gradient(145deg, #0b0e14 0%, #0e121a 100%);
}
.contact-form-panel {
    background: #0a0d12;
    border-left: 1px solid rgba(255,255,255,.07);
}
.contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #2f7cff;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1.7rem;
}
.contact-kicker i { width: 9px; height: 9px; border-radius: 50%; background: #2f7cff; display: block; }
.contact-intro h1 {
    margin: 0;
    max-width: 650px;
    font-size: clamp(3.15rem, 4.75vw, 5rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 400;
    color: #f7f8fb;
}
.contact-rule { display: block; width: 64px; height: 1px; background: rgba(255,255,255,.28); margin: 2.8rem 0 1.45rem; }
.contact-intro p { margin: 0; max-width: 560px; color: #9299a5; font-size: 1.02rem; line-height: 1.6; }
.contact-intro-bottom { display: flex; flex-direction: column; gap: 2.8rem; align-items: flex-start; }
.contact-socials { display: flex; gap: .65rem; flex-wrap: wrap; }
.contact-socials a {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
    display: grid; place-items: center; color: #d7dbe2; font-size: .76rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.contact-socials a:hover, .contact-socials a:focus-visible { border-color: #2f7cff; color: #fff; }
.contact-email { color: #b6bdc8; text-decoration: underline; text-underline-offset: 4px; font-size: 1rem; }
.contact-form-panel h2 {
    margin: 0 0 3.8rem;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.035em;
    color: #f7f8fb;
}
.contact-form { display: flex; flex-direction: column; gap: 2.2rem; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 2.2rem; row-gap: 2.6rem; }
.contact-fields label,
.contact-message { display: flex; flex-direction: column; gap: .75rem; color: #7f8794; font-size: .88rem; }
.contact-fields input,
.contact-message textarea {
    width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); border-radius: 0;
    background: transparent; outline: 0; color: #f5f7fb; padding: .2rem 0 .75rem;
    font: inherit; resize: vertical;
}
.contact-fields input:focus,
.contact-message textarea:focus { border-bottom-color: #2f7cff; }
.contact-interest { border: 0; padding: 0; margin: 0; }
.contact-interest legend { color: #7f8794; font-size: .88rem; margin-bottom: 1rem; }
.contact-interest-options { display: flex; flex-wrap: wrap; gap: .65rem; }
.contact-interest-options label { position: relative; cursor: pointer; }
.contact-interest-options input { position: absolute; opacity: 0; pointer-events: none; }
.contact-interest-options span {
    display: block; padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
    color: #d8dde6; background: transparent; font-size: .9rem; transition: .2s ease;
}
.contact-interest-options label:hover span { border-color: rgba(47,124,255,.75); color: #fff; }
.contact-interest-options input:checked + span { background: #2f7cff; color: #fff; border-color: #2f7cff; }
.contact-message { margin-top: .2rem; }
.contact-message textarea { min-height: 90px; }
.contact-send {
    width: 100%; min-height: 64px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: #111720;
    color: #fff; display: flex; align-items: center; justify-content: center; gap: 1rem;
    font-family: inherit; font-size: 1rem; letter-spacing: .08em; cursor: pointer;
    box-shadow: 0 14px 32px rgba(0,0,0,.28); transition: transform .2s ease, background .2s ease;
}
.contact-send:hover { transform: translateY(-2px); background: #151e2b; }
.contact-send b { color: #2f7cff; font-size: 1.35rem; font-weight: 400; }
.contact-back {
    position: fixed; left: 3.5rem; bottom: 2.5rem; z-index: 12;
    border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .8rem 1.15rem;
    background: rgba(12,16,22,.9); color: #f5f7fb; font-family: inherit; font-size: .78rem;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.contact-back span { margin-right: .55rem; }

@media (max-width: 1000px) {
    .contact-scroll::before {
        width: min(640px, 90vw);
        top: 6%;
        filter: blur(75px);
    }
    .contact-shell { grid-template-columns: 1fr; width: min(94%, 980px); }
    .contact-intro, .contact-form-panel { padding: 6.5rem 2rem 3rem; }
    .contact-intro { gap: 3rem; }
    .contact-form-panel { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 620px) {
    .contact-scroll::before {
        width: 82vw;
        top: 4%;
        filter: blur(60px);
        opacity: .8;
    }
    .contact-shell { width: calc(100% - 1rem); margin: .5rem auto; border-radius: 22px; }
    .contact-fields { grid-template-columns: 1fr; row-gap: 1.8rem; }
    .contact-intro h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
    .contact-back { left: 1rem; bottom: 1rem; }
}


/* V6.86 — service menu typography aligned exactly with header */
.nav-services .menu-title,
.nav-services.on-white .menu-title {
    width: 100%;
    display: block;
    text-align: center;
    font-family: inherit;
    font-size: 1.82rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 1rem;
}
.nav-services li,
.nav-services.on-white li,
.nav-services li span,
.nav-services.on-white li span {
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
}


/* V6.89 — Project Brief restored for Contact Us; free-form budget */
.brief-field-optional {
    margin-left: .55rem;
    color: #555;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: none;
    font-weight: 500;
}
.brief-budget-input {
    max-width: 760px;
}
.brief-budget-input input {
    min-height: 58px;
    font-size: 1rem;
}


/* V6.91 — service menu scaled down + project brief spacing fix */
.nav-services.on-white {
    min-width: 320px;
    padding: 0.95rem 1.1rem 1rem;
    border-radius: 18px;
}
.nav-services .menu-title,
.nav-services.on-white .menu-title {
    font-size: 1.12rem;
    line-height: 1.1;
    margin: 0 0 0.72rem;
}
.nav-services ul,
.nav-services.on-white ul {
    gap: 0.45rem;
}
.nav-services li,
.nav-services.on-white li,
.nav-services li span,
.nav-services.on-white li span {
    font-size: 0.94rem;
    line-height: 1.15;
}
.nav-services li,
.nav-services.on-white li {
    grid-template-columns: 1.9rem 1fr;
    gap: 0.28rem;
}

.project-brief-shell {
    padding: 7rem 0 3.2rem;
}
.project-brief-page-back {
    margin-top: 3.75rem;
    margin-bottom: 2.25rem;
    bottom: 1rem;
}
@media (max-width: 980px) {
    .project-brief-shell {
        padding-top: 6.15rem;
        padding-bottom: 3rem;
    }
}
@media (max-width: 680px) {
    .project-brief-shell {
        padding-top: 6.9rem;
        padding-bottom: 2.8rem;
    }
}


/* V6.92 — service menu responsive by context
   Large on the main service/camera experience; compact inside internal pages. */
.nav-services:not(.on-white) .menu-title {
    font-size: 1.82rem;
    line-height: 1.05;
    font-weight: 600;
    margin: 0 0 1rem;
}
.nav-services:not(.on-white) ul {
    gap: .72rem;
}
.nav-services:not(.on-white) li,
.nav-services:not(.on-white) li span {
    font-size: 1.4rem;
    line-height: normal;
    font-weight: 500;
}
.nav-services:not(.on-white) li {
    grid-template-columns: 2.6rem 1fr;
    gap: .15rem;
}

.nav-services.on-white {
    min-width: 300px;
    padding: .8rem 1rem .9rem;
    border-radius: 17px;
}
.nav-services.on-white .menu-title {
    font-size: 1.02rem;
    line-height: 1.1;
    margin: 0 0 .62rem;
}
.nav-services.on-white ul {
    gap: .38rem;
}
.nav-services.on-white li,
.nav-services.on-white li span {
    font-size: .86rem;
    line-height: 1.15;
}
.nav-services.on-white li {
    grid-template-columns: 1.75rem 1fr;
    gap: .22rem;
}


/* V6.94 — translation semantics only; no visual styling. */
.notranslate[translate="no"] { }


/* V6.96 — translation-safe Web Development hero */
.web-dev-page .ws-hero-title {
    max-width: 22ch;
    text-wrap: balance;
}


/* V6.97 — protected service labels + tighter internal service menu */
.nav-services li {
    grid-template-columns: 2.6rem minmax(0, 1fr);
}
.nav-services li .service-label,
.nav-services.on-white li .service-label {
    display: inline-block;
    min-width: 0;
}
.nav-services li .service-label--nowrap,
.nav-services.on-white li .service-label--nowrap {
    white-space: nowrap;
}
.nav-services.on-white {
    min-width: 272px;
    max-width: 272px;
    width: 272px;
    padding: .78rem .9rem .82rem;
    border-radius: 17px;
    right: 1.6rem;
    bottom: 1.6rem;
}
.nav-services.on-white .menu-title {
    font-size: .98rem;
    line-height: 1.08;
    margin: 0 0 .56rem;
}
.nav-services.on-white ul {
    gap: .32rem;
}
.nav-services.on-white li,
.nav-services.on-white li span {
    font-size: .82rem;
    line-height: 1.1;
}
.nav-services.on-white li {
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: .18rem;
    white-space: nowrap;
}


/* V6.106 — LUME case study has no invented cover until a real cover is supplied. */
.syx-no-cover .syx-overview { margin-top: 3rem; }
#lumePage .syx-more-img { background-size: contain; background-position: center; background-repeat: no-repeat; }
#lumePage .syx-more-item { background: #111; border-radius: 16px; overflow: hidden; }


/* V6.110 — clickable SENDA project card inside Figma Prototyping */
.generic-service-page .ws-project[data-project] {
    cursor: pointer;
}
.generic-service-page .ws-project[data-project]:hover {
    transform: translateY(-4px);
}


/* V6.111 — show full SENDA case-study images without cropping */
#sendaPage .syx-more-img {
    aspect-ratio: 16 / 10;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;
}
#sendaPage .syx-more-item {
    background: #111;
    border-radius: 16px;
    overflow: hidden;
}


/* V6.113 — NOVARA case study preserves the full Figma screenshots */
#novaraPage .syx-more-img {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;
}
#novaraPage .syx-more-item {
    background: #111;
    border-radius: 16px;
    overflow: hidden;
}


/* V6.115 — NOVARA card framing + corrected cover */
#novaraPage .syx-more-item {
    padding: 1rem;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    overflow: hidden;
}
#novaraPage .syx-more-img {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
}
#novaraPage .syx-more-cap {
    margin: .9rem .15rem .1rem;
}


/* V6.116 — remove framing/borders from internal project image cards */
.syx-more-item {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.syx-more-img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#novaraPage .syx-more-item,
#sendaPage .syx-more-item,
#lumePage .syx-more-item {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
#novaraPage .syx-more-img,
#sendaPage .syx-more-img,
#lumePage .syx-more-img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#novaraPage .syx-more-cap {
    margin: .9rem 0 .1rem;
}


/* V6.117 — NOVARA: remove false border/letterbox by matching each screenshot's native ratio */
#novaraPage .syx-more-img {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
#novaraPage .syx-more-item:nth-child(1) .syx-more-img { aspect-ratio: 1920 / 1028 !important; }
#novaraPage .syx-more-item:nth-child(2) .syx-more-img { aspect-ratio: 1440 / 760 !important; }
#novaraPage .syx-more-item:nth-child(3) .syx-more-img { aspect-ratio: 1920 / 1025 !important; }
#novaraPage .syx-more-item:nth-child(4) .syx-more-img { aspect-ratio: 1920 / 1034 !important; }


/* V6.118 — SENDA: remove false border/letterbox by matching each screenshot's native ratio */
#sendaPage .syx-more-img {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
#sendaPage .syx-more-item:nth-child(1) .syx-more-img { aspect-ratio: 1920 / 1032 !important; }
#sendaPage .syx-more-item:nth-child(2) .syx-more-img { aspect-ratio: 1920 / 1029 !important; }
#sendaPage .syx-more-item:nth-child(3) .syx-more-img { aspect-ratio: 1920 / 1034 !important; }
#sendaPage .syx-more-item:nth-child(4) .syx-more-img { aspect-ratio: 1600 / 1000 !important; }


/* V6.119 — Figma Prototyping outer cards use real screenshot proportions */
#figmaPrototypingPage .ws-project[data-project="senda"] .ws-project-img {
    aspect-ratio: 1600 / 1000 !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}

/* V6.167 — SENDA portfolio listing: lift the crop so the top header is visible. */
#viewAllProjectsPage .wap-card[data-page="sendaPage"] .wap-card-media {
    background-position: center 12% !important;
}
#figmaPrototypingPage .ws-project[data-project="novara"] .ws-project-img {
    aspect-ratio: 1440 / 760 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}


/* V6.136 — VÉLOAP case study: preserve the real aspect ratio of every supplied image.
   The four internal screens are portrait 941×1672 and must never be cropped to 16:9. */
#veloapPage .syx-showcase {
    width: 92%;
    /* Real storefront capture is portrait (941x1672); limit its display width
       instead of stretching it to a desktop-size 16:9 area with side bands. */
    max-width: 760px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

#veloapPage .syx-hero-img {
    width: 100%;
    aspect-ratio: 941 / 1672;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 18px;
}

#veloapPage .syx-more-grid {
    align-items: start;
}

#veloapPage .syx-more-item {
    min-width: 0;
    align-self: start;
}

#veloapPage .syx-more-img {
    width: 100%;
    height: auto;
    aspect-ratio: 941 / 1672 !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #090909;
    border: 0;
    border-radius: 16px;
}

@media (max-width: 900px) {
    #veloapPage .syx-showcase,
    #veloapPage .syx-more-grid {
        width: 94%;
    }
}

/* V6.139 — NOVIS AI portfolio project: preserve every supplied image at its real ratio. */
#novisAiPage .syx-showcase {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
#novisAiPage .syx-hero-img {
    width: 100%;
    aspect-ratio: 1672 / 941;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0;
    border-radius: 18px;
}
#novisAiPage .syx-more-grid { align-items: start; }
#novisAiPage .syx-more-item { min-width: 0; align-self: start; }
#novisAiPage .syx-more-img {
    width: 100%;
    height: auto;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: transparent;
    border: 0 !important;
    border-radius: 16px;
}
#novisAiPage .syx-more-item:nth-child(1) .syx-more-img { aspect-ratio: 1672 / 941 !important; }
#novisAiPage .syx-more-item:nth-child(2) .syx-more-img { aspect-ratio: 1672 / 941 !important; }
#novisAiPage .syx-more-item:nth-child(3) .syx-more-img { aspect-ratio: 941 / 1672 !important; }
#novisAiPage .syx-more-item:nth-child(4) .syx-more-img { aspect-ratio: 941 / 1672 !important; }
#processesAgentificationPage .ws-project[data-project="novis-ai"] .ws-project-img {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f7f9ff;
}

/* V6.150 — NOVIS AI SUITE: use the real ratio of each source asset.
   The main cover is 1672x941; only the first detail shot is 1448x1086.
   This removes the dark letterbox bands / ugly fake border caused by a 4:3 box. */
#novisAiSuitePage .syx-hero-img {
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}
#novisAiSuitePage .syx-more-grid {
    align-items: start !important;
}
#novisAiSuitePage .syx-more-item {
    min-width: 0;
    align-self: start;
}
#novisAiSuitePage .syx-more-img {
    width: 100% !important;
    height: auto !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
}
#novisAiSuitePage .syx-more-item:nth-child(1) .syx-more-img { aspect-ratio: 1672 / 941 !important; }
#novisAiSuitePage .syx-more-item:nth-child(2) .syx-more-img { aspect-ratio: 1672 / 941 !important; }
#novisAiSuitePage .syx-more-item:nth-child(3) .syx-more-img { aspect-ratio: 1672 / 941 !important; }
#novisAiSuitePage .syx-more-item:nth-child(4) .syx-more-img { aspect-ratio: 1672 / 941 !important; }

/* Processes Agentification project card: the cover asset is 1672x941.
   Match that ratio to avoid top/bottom bands and visible container edges. */
#processesAgentificationPage .ws-project[data-project="novis-ai-suite"] .ws-project-img {
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f7f9ff !important;
}


/* V6.143 — Rivalyn AI: preserve exact source proportions; no crop/cover. */
#rivalynAiPage .syx-hero-img {
    /* Native wide (1672x941) dashboard screenshot, rather than 4:3 device mockup. */
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #101217 !important;
}
#rivalynAiPage .syx-more-grid {
    align-items: start !important;
}
#rivalynAiPage .syx-more-item {
    min-width: 0;
    align-self: start;
}
#rivalynAiPage .syx-more-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #101217 !important;
}
#processesAgentificationPage .ws-project[data-project="rivalyn-ai"] .ws-project-img {
    aspect-ratio: 1448 / 1086 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #101217 !important;
}

/* V6.149 — NOVIS AI SUITE: portada sin cover/capa oscura al hover.
   Mantiene la imagen completa y el CTA de la card sin alterar otros proyectos. */
#processesAgentificationPage .ws-project[data-project="novis-ai-suite"] .ws-project-img::after,
#processesAgentificationPage .ws-project[data-project="novis-ai-suite"]:hover .ws-project-img::after {
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
}
#processesAgentificationPage .ws-project[data-project="novis-ai-suite"] .ws-project-img {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* V6.152 — LUMORA: replace only the UI/UX 'Research' featured project.
   Exact supplied aspect ratios: no invented frames, no cropping or image overlays. */
#uiUxDesignPage .ws-hero-side-img {
    aspect-ratio: 1484 / 1060 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4e9e9 !important;
}
#lumoraPage .syx-showcase {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
#lumoraPage .syx-hero-img {
    width: 100%;
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#lumoraPage .syx-more-grid { align-items: start; }
#lumoraPage .syx-more-item { min-width: 0; align-self: start; }
#lumoraPage .syx-more-img {
    width: 100%;
    height: auto;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#lumoraPage .syx-more-item:nth-child(1) .syx-more-img,
#lumoraPage .syx-more-item:nth-child(2) .syx-more-img,
#lumoraPage .syx-more-item:nth-child(3) .syx-more-img { aspect-ratio: 1672 / 941 !important; }
#lumoraPage .syx-more-item:nth-child(4) .syx-more-img { aspect-ratio: 1672 / 941 !important; }

/* V6.155 — ASTRA FEATURED 3D CARD: Zoom the square source inside the 4:3
   frame and center the actual monitor (not the outer canvas). No side bars. */
#threeDDevelopmentPage .ws-hero-side-img {
    background-size: 112% auto !important;
    background-position: center 20% !important;
    background-repeat: no-repeat !important;
    background-color: #b7a18d;
}
#threeDDevelopmentPage .ws-project[data-project="astra"] .ws-project-img {
    background-size: contain !important;
    background-position: center center !important;
    background-color: #b7a18d;
}
/* V6.158 — ASTRA: restore the canonical case-study frame.
   Inherit the same width (92%, max 1600px), 24px rounded outer border,
   inner padding, subtle outline and shadow from .syx-showcase used by all
   other case studies. Preserve the image's original 1672:941 aspect ratio. */
#astraPage .syx-hero-img {
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    /* Image border and 16px rounding inherit from the shared .syx-hero-img. */
}
#astraPage .syx-more-grid { align-items: start; }
#astraPage .syx-more-img {
    aspect-ratio: 1672 / 941 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border: none !important;
}
/* General portfolio listings use the direct 16:9 ASTRA hero without a monitor.
   The monitor mockup is still retained on the 3D service's featured card. */


/* V6.160 — Full portfolio: buttons track the eight canonical service pages. */
#viewAllProjectsPage .wap-filters {
    gap: .6rem;
    row-gap: .7rem;
    margin-bottom: 3.1rem;
}
#viewAllProjectsPage .wap-pill {
    padding: .78rem 1.3rem;
    font-size: .7rem;
    letter-spacing: .95px;
    white-space: nowrap;
}
#viewAllProjectsPage .wap-latest-label { color: #dedede; font-weight: 700; }
#nexaEstatePage .syx-hero-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f5f1;
}
#nexaEstatePage .syx-more-img {
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f4f5f1;
}
#viewAllProjectsPage .wap-card[data-page="nexaEstatePage"] .wap-card-media {
    background-position: center 46%;
}
@media (max-width: 700px) {
    #viewAllProjectsPage .wap-filters { gap: .45rem; }
    #viewAllProjectsPage .wap-pill { padding: .65rem .9rem; font-size: .65rem; letter-spacing: .5px; }
}


/* V6.161 — APP-ONLY native media geometry in internal portfolio pages.
   Mobile app hero/gallery images are real <img> elements (intrinsic dimensions),
   not forced 1:1 backgrounds: no stretching, cropping or side letterboxing.
   Web/desktop portfolio pages and ALL project cards are intentionally unaffected. */
:is(#veloraPage, #veyroPage, #nexaEstatePage).syx-native-app .syx-showcase {
    width: fit-content !important;
    max-width: 92% !important;
    margin-inline: auto;
}
:is(#veloraPage, #veyroPage, #nexaEstatePage).syx-native-app .syx-hero-img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    background: none !important;
}
:is(#veloraPage, #veyroPage, #nexaEstatePage).syx-native-app .syx-more-img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    object-position: center;
    background: none !important;
}

/* Portfolio grid: website projects use direct screenshots (no device frames).
   VÉLOAP is an app, so its portfolio card keeps the full mobile mockup without cropping. */
#viewAllProjectsPage .wap-card[data-page="veloapPage"] .wap-card-media {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f8f8f8;
}

/* V6.165 — ALL groups related projects into balanced categories.
   The category filters retain the eight service selections. No duplicate cards. */
#viewAllProjectsPage .wap-group { grid-column: 1 / -1; min-width: 0; }
#viewAllProjectsPage .wap-group-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.19);
    padding-bottom: 1.2rem; margin-bottom: 2rem;
}
#viewAllProjectsPage .wap-group-title {
    font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 600;
    letter-spacing: .055em; color: #f4f4f4;
}
#viewAllProjectsPage .wap-group-count {
    flex-shrink: 0; font-size: .73rem; letter-spacing: .14em; color: #929292;
}
#viewAllProjectsPage .wap-group-grid,
#viewAllProjectsPage .wap-filter-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem 2rem; min-width: 0;
}
#viewAllProjectsPage .wap-filter-grid { grid-column: 1 / -1; }
#viewAllProjectsPage .wap-group[hidden],
#viewAllProjectsPage .wap-filter-grid[hidden] { display: none !important; }
#viewAllProjectsPage .wap-card { min-width: 0; }

/* App mockups in the ALL / category listings: show the complete source
   at its intrinsic proportion, never as a cropped 16:9 background. */
#viewAllProjectsPage .wap-card[data-page="nexaEstatePage"] .wap-card-media,
#viewAllProjectsPage .wap-card[data-page="veyroPage"] .wap-card-media {
    aspect-ratio: 1 / 1 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
#viewAllProjectsPage .wap-card[data-page="veloraPage"] .wap-card-media {
    aspect-ratio: 1313 / 1198 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
#viewAllProjectsPage .wap-card[data-page="veloapPage"] .wap-card-media {
    aspect-ratio: 1448 / 1086 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
@media (max-width: 900px) {
    #viewAllProjectsPage .wap-group-grid,
    #viewAllProjectsPage .wap-filter-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}

/* V6.165 — 3D: one balanced row of three instead of a half-empty last row.
   Other families have 2 or 4 projects, making full 2-column rows. */
@media (min-width: 1101px) {
    #viewAllProjectsPage .wap-group[data-group="three-d"] .wap-group-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
    #viewAllProjectsPage .wap-group[data-group="three-d"] .wap-card-title {
        font-size: clamp(1.45rem, 1.7vw, 2rem);
    }
}
@media (min-width: 901px) and (max-width: 1100px) {
    #viewAllProjectsPage .wap-group[data-group="three-d"] .wap-group-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1.2rem;
    }
    #viewAllProjectsPage .wap-group[data-group="three-d"] .wap-card-title {font-size: 1.35rem;}
}

/* V6.168 — FIGMA PROTOTYPING: safe text reflow across browser translations.
   Text can grow in ES without clipping or changing the dimensions of image assets.
   Only the Figma internal service page is affected. */
#figmaPrototypingPage .white-content-overlay {
    overflow-x: clip;
}
#figmaPrototypingPage .ws-hero,
#figmaPrototypingPage .ws-team,
#figmaPrototypingPage .ws-work,
#figmaPrototypingPage .ws-projects,
#figmaPrototypingPage .ws-about,
#figmaPrototypingPage .ws-solutions {
    box-sizing: border-box;
}
#figmaPrototypingPage .ws-hero-banner-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
#figmaPrototypingPage .ws-hero-title {
    max-width: 28ch;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.22;
    text-wrap: balance;
    overflow-wrap: break-word;
}
#figmaPrototypingPage .ws-hero-side-info {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "label arrow" "title arrow";
    max-height: none;
    height: auto;
    min-height: 44px;
    align-items: center;
    gap: .45rem .8rem;
}
#figmaPrototypingPage .ws-hero-side-label {
    grid-area: label;
    white-space: normal;
    overflow-wrap: break-word;
}
#figmaPrototypingPage .ws-hero-side-title {
    grid-area: title;
    min-width: 0;
    line-height: 1.24;
}
#figmaPrototypingPage .ws-hero-side-arrow { grid-area: arrow; }
#figmaPrototypingPage .ws-team-text,
#figmaPrototypingPage .ws-work-header,
#figmaPrototypingPage .ws-work-desc,
#figmaPrototypingPage .ws-about-text,
#figmaPrototypingPage .ws-solution-content,
#figmaPrototypingPage .ws-project-info {
    min-width: 0;
}
#figmaPrototypingPage .ws-team-title,
#figmaPrototypingPage .ws-work-title,
#figmaPrototypingPage .ws-about-title,
#figmaPrototypingPage .ws-solutions-title {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.2;
    overflow-wrap: break-word;
}
#figmaPrototypingPage .ws-team-desc,
#figmaPrototypingPage .ws-team-pillar-desc,
#figmaPrototypingPage .ws-work-desc p,
#figmaPrototypingPage .ws-about-desc,
#figmaPrototypingPage .ws-solution-desc,
#figmaPrototypingPage .ws-solution-points li {
    white-space: normal;
    height: auto;
    overflow-wrap: break-word;
}
#figmaPrototypingPage .ws-team-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
#figmaPrototypingPage .ws-team-pillar {
    min-width: 0;
    height: auto;
}
#figmaPrototypingPage .ws-work {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
#figmaPrototypingPage .ws-work-btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
}
#figmaPrototypingPage .ws-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#figmaPrototypingPage .ws-project-title,
#figmaPrototypingPage .ws-project-cat,
#figmaPrototypingPage .ws-solution-title {
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
}
#figmaPrototypingPage .ws-solution-head {
    grid-template-columns: 4rem minmax(0, 1fr) 40px;
}
#figmaPrototypingPage .ws-solution-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    #figmaPrototypingPage .ws-team-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #figmaPrototypingPage .ws-work {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 700px) {
    #figmaPrototypingPage .ws-hero-banner {
        min-height: 300px;
        aspect-ratio: auto;
    }
    #figmaPrototypingPage .ws-hero-banner-content {
        padding: 1.25rem;
    }
    #figmaPrototypingPage .ws-team-pillars,
    #figmaPrototypingPage .ws-projects,
    #figmaPrototypingPage .ws-solution-content {
        grid-template-columns: minmax(0, 1fr);
    }
    #figmaPrototypingPage .ws-work { padding: 1.7rem 1.4rem; border-radius: 28px; }
    #figmaPrototypingPage .ws-solution-head {
        grid-template-columns: 2.5rem minmax(0, 1fr) 40px;
        gap: .65rem;
    }
}


/* V6.168 — one consistent portfolio callout on every internal service page.
   Flexible lengths ensure browser translation (e.g., English -> Spanish)
   wraps without clipping, changing grid geometry or shrinking the button. */
.white-section .ws-work.ws-work--shared {
    width: min(1200px, calc(100% - 3rem));
    max-width: 1200px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.4rem, 4vw, 3rem);
    margin: 3rem auto;
    padding: clamp(1.7rem, 3.5vw, 3rem);
    border-radius: 50px;
}
.white-section .ws-work--shared .ws-work-header,
.white-section .ws-work--shared .ws-work-desc { min-width: 0; }
.white-section .ws-work--shared .ws-work-label {
    margin-bottom: .8rem;
}
.white-section .ws-work--shared .ws-work-title {
    max-width: 22ch;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.18;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: break-word;
}
.white-section .ws-work--shared .ws-work-desc p {
    margin: 0 0 1.2rem;
    height: auto;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: break-word;
}
.white-section .ws-work--shared .ws-work-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: break-word;
}
@media (max-width: 900px) {
    .white-section .ws-work.ws-work--shared {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 30px;
        width: min(1200px, calc(100% - 2rem));
    }
}
@media (max-width: 480px) {
    .white-section .ws-work.ws-work--shared {
        padding: 1.5rem 1.25rem;
        gap: 1.25rem;
        border-radius: 24px;
    }
}

/* Figma-specific legacy ID rules must not change the shared module's geometry. */
#figmaPrototypingPage .ws-work.ws-work--shared {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    padding: clamp(1.7rem, 3.5vw, 3rem);
    border-radius: 50px;
}
@media (max-width: 900px) {
    #figmaPrototypingPage .ws-work.ws-work--shared {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 30px;
    }
}
@media (max-width: 480px) {
    #figmaPrototypingPage .ws-work.ws-work--shared {
        padding: 1.5rem 1.25rem;
        border-radius: 24px;
    }
}

/* V6.170 — E-COMMERCE DEVELOPMENT: safe text reflow across browser translations.
   English source copy reflows under Spanish browser translation. Image sizes are unchanged.
   Only the E-Commerce internal service page is affected. */
#ecommerceDevelopmentPage .white-content-overlay {
    overflow-x: clip;
}
#ecommerceDevelopmentPage .ws-hero,
#ecommerceDevelopmentPage .ws-team,
#ecommerceDevelopmentPage .ws-work,
#ecommerceDevelopmentPage .ws-projects,
#ecommerceDevelopmentPage .ws-about,
#ecommerceDevelopmentPage .ws-solutions {
    box-sizing: border-box;
}
#ecommerceDevelopmentPage .ws-hero-banner-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
#ecommerceDevelopmentPage .ws-hero-title {
    max-width: 28ch;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.22;
    text-wrap: balance;
    overflow-wrap: break-word;
}
#ecommerceDevelopmentPage .ws-hero-side-info {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas: "label arrow" "title arrow";
    max-height: none;
    height: auto;
    min-height: 44px;
    align-items: center;
    gap: .45rem .8rem;
}
#ecommerceDevelopmentPage .ws-hero-side-label {
    grid-area: label;
    white-space: normal;
    overflow-wrap: break-word;
}
#ecommerceDevelopmentPage .ws-hero-side-title {
    grid-area: title;
    min-width: 0;
    line-height: 1.24;
}
#ecommerceDevelopmentPage .ws-hero-side-arrow { grid-area: arrow; }
#ecommerceDevelopmentPage .ws-team-text,
#ecommerceDevelopmentPage .ws-work-header,
#ecommerceDevelopmentPage .ws-work-desc,
#ecommerceDevelopmentPage .ws-about-text,
#ecommerceDevelopmentPage .ws-solution-content,
#ecommerceDevelopmentPage .ws-project-info {
    min-width: 0;
}
#ecommerceDevelopmentPage .ws-team-title,
#ecommerceDevelopmentPage .ws-work-title,
#ecommerceDevelopmentPage .ws-about-title,
#ecommerceDevelopmentPage .ws-solutions-title {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.2;
    overflow-wrap: break-word;
}
#ecommerceDevelopmentPage .ws-team-desc,
#ecommerceDevelopmentPage .ws-team-pillar-desc,
#ecommerceDevelopmentPage .ws-work-desc p,
#ecommerceDevelopmentPage .ws-about-desc,
#ecommerceDevelopmentPage .ws-solution-desc,
#ecommerceDevelopmentPage .ws-solution-points li {
    white-space: normal;
    height: auto;
    overflow-wrap: break-word;
}
#ecommerceDevelopmentPage .ws-team-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
#ecommerceDevelopmentPage .ws-team-pillar {
    min-width: 0;
    height: auto;
}
#ecommerceDevelopmentPage .ws-work {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
#ecommerceDevelopmentPage .ws-work-btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
}
#ecommerceDevelopmentPage .ws-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#ecommerceDevelopmentPage .ws-project-title,
#ecommerceDevelopmentPage .ws-project-cat,
#ecommerceDevelopmentPage .ws-solution-title {
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
}
#ecommerceDevelopmentPage .ws-solution-head {
    grid-template-columns: 4rem minmax(0, 1fr) 40px;
}
#ecommerceDevelopmentPage .ws-solution-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    #ecommerceDevelopmentPage .ws-team-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #ecommerceDevelopmentPage .ws-work {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 700px) {
    #ecommerceDevelopmentPage .ws-hero-banner {
        min-height: 300px;
        aspect-ratio: auto;
    }
    #ecommerceDevelopmentPage .ws-hero-banner-content {
        padding: 1.25rem;
    }
    #ecommerceDevelopmentPage .ws-team-pillars,
    #ecommerceDevelopmentPage .ws-projects,
    #ecommerceDevelopmentPage .ws-solution-content {
        grid-template-columns: minmax(0, 1fr);
    }
    #ecommerceDevelopmentPage .ws-work { padding: 1.7rem 1.4rem; border-radius: 28px; }
    #ecommerceDevelopmentPage .ws-solution-head {
        grid-template-columns: 2.5rem minmax(0, 1fr) 40px;
        gap: .65rem;
    }
}




/* V6.170 — Translation-resilient Processes Agentification intro.
   Spanish and other longer translations must wrap naturally without changing
   the layout or clipping the four process cards. */
#processesAgentificationPage .ws-team,
#processesAgentificationPage .ws-team-text,
#processesAgentificationPage .ws-team-pillars,
#processesAgentificationPage .ws-team-pillar { min-width: 0; box-sizing: border-box; }
#processesAgentificationPage .ws-team-title {
    max-width: 100%;
    line-height: 1.2;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: break-word;
}
#processesAgentificationPage .ws-team-desc,
#processesAgentificationPage .ws-team-pillar-title,
#processesAgentificationPage .ws-team-pillar-desc {
    white-space: normal;
    overflow-wrap: break-word;
    height: auto;
}
#processesAgentificationPage .ws-team-pillars {
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: stretch;
}
@media (max-width: 1100px) {
    #processesAgentificationPage .ws-team-pillars {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 700px) {
    #processesAgentificationPage .ws-team-pillars {
        grid-template-columns: minmax(0,1fr);
    }
}


/* V6.171 — Processes Agentification solutions: readable in English and
   Spanish browser translations without overflowing the accordion rows. */
#processesAgentificationPage .ws-solutions-title,
#processesAgentificationPage .ws-solution-title,
#processesAgentificationPage .ws-solution-desc,
#processesAgentificationPage .ws-solution-points li {
    white-space: normal;
    overflow-wrap: break-word;
    height: auto;
}
#processesAgentificationPage .ws-solutions-title {
    max-width: min(100%, 940px);
    text-wrap: balance;
    line-height: 1.2;
}
#processesAgentificationPage .ws-solution-head {
    grid-template-columns: 4rem minmax(0, 1fr) 40px;
}
#processesAgentificationPage .ws-solution-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#processesAgentificationPage .ws-solution-content,
#processesAgentificationPage .ws-solutions { min-width: 0; }
@media (max-width: 700px) {
    #processesAgentificationPage .ws-solution-head {
        grid-template-columns: 2.5rem minmax(0, 1fr) 40px;
        gap: 0.7rem;
    }
    #processesAgentificationPage .ws-solution-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}


/* V6.172 — UI/UX Design introduction: translation-safe labels and text.
   Text flows naturally in English and Spanish, without impacting other services. */
#uiUxDesignPage .ws-team,
#uiUxDesignPage .ws-team-text,
#uiUxDesignPage .ws-team-pillars,
#uiUxDesignPage .ws-team-pillar {
    min-width: 0;
    box-sizing: border-box;
}
#uiUxDesignPage .ws-team-title {
    max-width: 100%;
    line-height: 1.15;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: break-word;
}
#uiUxDesignPage .ws-team-desc,
#uiUxDesignPage .ws-team-pillar-title,
#uiUxDesignPage .ws-team-pillar-desc {
    max-width: 100%;
    white-space: normal;
    height: auto;
    overflow-wrap: break-word;
}
#uiUxDesignPage .ws-team-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
#uiUxDesignPage .ws-team-pillar { height: auto; }
@media (max-width: 1100px) {
    #uiUxDesignPage .ws-team-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    #uiUxDesignPage .ws-team-pillars {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* V6.173 — Clear, translation-friendly UI/UX and 3D service content.
   Keep titles, four process cards and accordion descriptions readable at any size. */
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team-text,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team-pillars,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team-pillar,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solutions,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-content {
    min-width: 0;
}
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team-title,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solutions-title {
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
    line-height: 1.18;
}
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team-pillar-title,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-team-pillar-desc,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-title,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-desc,
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-points li {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    height: auto;
}
:is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-head {
    grid-template-columns: 4rem minmax(0, 1fr) 40px;
}
#threeDDevelopmentPage .ws-team-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
#threeDDevelopmentPage .ws-team-pillar { height: auto; }
@media (max-width: 1100px) {
    #threeDDevelopmentPage .ws-team-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    #threeDDevelopmentPage .ws-team-pillars {
        grid-template-columns: minmax(0, 1fr);
    }
    :is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-head {
        grid-template-columns: 2.5rem minmax(0, 1fr) 40px;
        gap: .7rem;
    }
    :is(#uiUxDesignPage, #threeDDevelopmentPage) .ws-solution-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

/* v6.174 — First-party language switch; translations are consistent across browsers. */
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:clamp(.45rem, 1.3vw, 1.15rem); flex-shrink:0; }
.site-language-switch { display:flex; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.22); border-radius:100px; padding:3px; background:rgba(12,12,12,.28); flex-shrink:0; }
.site-language-switch button { appearance:none; border:0; border-radius:100px; background:transparent; color:rgba(255,255,255,.72); font:600 .7rem/1 Arial, sans-serif; letter-spacing:.04em; padding:9px 10px; min-width:36px; cursor:pointer; transition:background .15s ease,color .15s ease; }
.site-language-switch button.active, .site-language-switch button[aria-pressed="true"] { color:#111; background:#fff; }
.site-language-switch button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.header-main .header-links { gap:clamp(.65rem,2.6vw,3rem); }
html[lang="es"] :is(.ws-hero-title,.ws-intro-title,.ws-solutions-title,.ws-solution-title,.ws-team-pillar-title,.ws-work-title,.ws-project-title,.syx-title,.syx-card-title,.syx-more-title,.wap-card-title,.wap-group-title,.project-brief-form) { overflow-wrap:break-word; hyphens:auto; }
:is(.ws-team-pillar,.ws-solution,.ws-work-header,.ws-work-desc,.ws-project,.wap-card) { min-width:0; }
@media (max-width:1100px) { .header-main { padding-inline:clamp(.75rem,2.2vw,2rem); } .header-main .header-links { gap:clamp(.55rem,1.7vw,1.5rem); } .header-main .header-links a, .header-main .btn-contact { font-size:clamp(.8rem,1.5vw,1.2rem); } }
@media (max-width:680px) { .site-language-switch button { min-width:31px; padding:8px 7px; font-size:.65rem; } .header-main .header-links { gap:.48rem; } .header-main .header-links a { font-size:.72rem; } }
@media (max-width:440px) { .header-main .header-links a { font-size:.65rem; } .header-main .logo img { height:22px; } .site-language-switch button { min-width:26px; padding:7px 5px; } }

/* V6.176 — Position the EN/ES switch close to the right-hand rounded edge.
   Retain a safe breathing gap so neither language pill touches the outline. */
.header-main { padding-right: clamp(10px, 0.85vw, 16px); }


/* V6.177 — shared service process section. Four cards, consistent on all services.
   One content structure and safe wrapping in both English and Spanish. */
.white-section .ws-team.ws-team--service-process {
    width: min(92%, 1400px);
    max-width: 1400px;
    box-sizing: border-box;
    margin: clamp(4rem, 7vw, 6rem) auto 0;
    padding-inline: clamp(.25rem, 1vw, 1rem);
}
.white-section .ws-team--service-process .ws-team-text {
    width: 100%;
    max-width: 980px;
    margin: 0 auto clamp(2rem, 4.5vw, 3.5rem);
    padding: 0;
    text-align: center;
}
.white-section .ws-team--service-process .ws-team-title {
    width: 100%;
    max-width: 960px;
    margin: 0 auto clamp(1rem, 1.7vw, 1.5rem);
    font-size: clamp(2rem, 3.8vw, 3.35rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: break-word;
}
.white-section .ws-team--service-process .ws-team-desc {
    max-width: 780px;
    margin-inline: auto;
    line-height: 1.7;
    text-wrap: pretty;
    white-space: normal;
    overflow-wrap: break-word;
}
.white-section .ws-team--service-process .ws-team-pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.9rem, 1.5vw, 1.5rem);
    align-items: stretch;
}
.white-section .ws-team--service-process .ws-team-pillar {
    min-width: 0;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.white-section .ws-team--service-process .ws-team-pillar-title,
.white-section .ws-team--service-process .ws-team-pillar-desc {
    max-width: 100%;
    height: auto;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}
.white-section .ws-team--service-process .ws-team-pillar-title {
    font-size: clamp(.92rem, 1.25vw, 1rem);
    line-height: 1.35;
}
.white-section .ws-team--service-process .ws-team-pillar-desc {
    font-size: .82rem;
    line-height: 1.6;
}
@media (max-width: 1080px) {
    .white-section .ws-team--service-process .ws-team-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 650px) {
    .white-section .ws-team--service-process {
        width: calc(100% - 1.5rem);
        padding-inline: 0;
    }
    .white-section .ws-team--service-process .ws-team-pillars {
        grid-template-columns: minmax(0, 1fr);
        gap: .85rem;
    }
    .white-section .ws-team--service-process .ws-team-title { font-size: clamp(1.85rem, 7.2vw, 2.5rem); }
}

/* V6.178 — Unified solutions accordion: safe text wrapping in EN/ES,
   same geometry for all eight services without changing the original visual style. */
.ws-solutions[data-service-solutions] .ws-solution-head {
    grid-template-columns: 4rem minmax(0, 1fr) 40px;
}
.ws-solutions[data-service-solutions] .ws-solution-title {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}
.ws-solutions[data-service-solutions] .ws-solutions-title {
    max-width: min(100%, 840px);
    white-space: normal;
    overflow-wrap: break-word;
}
.ws-solutions[data-service-solutions] .ws-solution-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) {
    .ws-solutions[data-service-solutions] .ws-solution-head {
        grid-template-columns: 2.5rem minmax(0, 1fr) 40px;
        gap: .7rem;
        padding-inline: .25rem;
    }
    .ws-solutions[data-service-solutions] .ws-solution-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        padding-inline: .25rem;
    }
}


/* ==========================================
FOOTER SCENE — REVEAL AFTER 3D SERVICE
========================================== */
.footer-scene {
    position: fixed;
    inset: 0;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}
.footer-scene__scrim {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: none;
}
.footer-scene__panel {
    position: relative;
    z-index: 1;
    min-height: 100%;
    padding: clamp(22px, 2.6vw, 36px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 34px);
    opacity: 0;
    transform: translateY(0);
    transition: none;
}
body.footer-scene-zooming .footer-scene {
    visibility: hidden;
    pointer-events: none;
}
body.footer-scene-active .footer-scene {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body.footer-scene-active .footer-scene__scrim { opacity: 1; }
body.footer-scene-active .footer-scene__panel {
    opacity: 1;
    transform: translateY(0);
}
body.footer-scene-zooming .header-main,
body.footer-scene-zooming .nav-services,
body.footer-scene-zooming .hero-ui,
body.footer-scene-active .header-main,
body.footer-scene-active .nav-services,
body.footer-scene-active .hero-ui {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.footer-scene__columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 72px);
    padding-top: clamp(36px, 8vh, 78px);
}
.footer-scene__col { min-width: 0; }
.footer-scene__eyebrow {
    font-size: 12px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.72);
    margin-bottom: 14px;
}
.footer-scene__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-scene__list li {
    color: #f3f3f3;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.1;
    letter-spacing: -.03em;
}
.footer-scene__divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.16);
    margin-top: 2px;
}
.footer-scene__brand {
    margin-top: auto;
    font-size: clamp(92px, 18vw, 250px);
    line-height: .86;
    letter-spacing: -.08em;
    font-weight: 700;
    color: #f2f2f2;
    white-space: nowrap;
    overflow: hidden;
}
.footer-scene__bottom {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding-top: 6px;
}
.footer-scene__mini-social,
.footer-scene__legal,
.footer-scene__legal-links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.footer-scene__mini-social span,
.footer-scene__legal span,
.footer-scene__legal-links span {
    font-size: 12px;
    color: rgba(255,255,255,.88);
    letter-spacing: .01em;
}
.footer-scene__mini-social span {
    opacity: .72;
    text-transform: uppercase;
}
.footer-scene__top {
    appearance: none;
    border: none;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: .04em;
    cursor: pointer;
    padding: 0;
}
.footer-scene__top-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    line-height: 0;
    flex: 0 0 22px;
    padding: 0;
}
.footer-scene__top-icon svg {
    display: block;
    width: 14px;
    height: 14px;
    flex: none;
}

@media (max-width: 900px) {
    .hero-container { transform-origin: 50% 47%; }
    body.footer-scene-zooming .hero-container,
    body.footer-scene-active .hero-container {
        transform: scale(3.05);
    }
}

@media (max-width: 1100px) {
    .footer-scene__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-scene__bottom { grid-template-columns: 1fr; align-items: flex-start; }
    .footer-scene__brand { white-space: normal; }
}
@media (max-width: 680px) {
    .footer-scene__columns { grid-template-columns: 1fr; padding-top: 20px; }
    .footer-scene__list li { font-size: 18px; }
    .footer-scene__brand { font-size: clamp(64px, 20vw, 120px); }
}

/* LAUNCH READINESS — accessible error messages and privacy preferences */
.sinvec-field-error{display:block;color:#ff9e9e;font-size:.78rem;line-height:1.5;padding-top:6px;letter-spacing:0}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#e98080!important;outline:1px solid #e98080!important}
.form-feedback{color:#aab3c0;line-height:1.5;font-size:.84rem;min-height:1.2em}
.sinvec-cookie-banner{
  position:fixed;z-index:500;
  left:clamp(12px,3vw,40px);right:clamp(12px,3vw,40px);bottom:clamp(12px,2vw,30px);
  max-width:1100px;margin:auto;
  isolation:isolate;overflow:hidden;
  background:linear-gradient(125deg,rgba(87,88,95,.29) 0%,rgba(40,41,45,.27) 38%,rgba(62,63,69,.23) 100%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 22px 72px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(255,255,255,.06);
  border-radius:24px;padding:clamp(18px,2.5vw,26px);gap:24px;
  display:flex;align-items:center;justify-content:space-between;color:#fff;
  -webkit-backdrop-filter:blur(30px) saturate(150%);
  backdrop-filter:blur(30px) saturate(150%);
}
.sinvec-cookie-banner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,rgba(255,255,255,.11),transparent 45%,rgba(255,255,255,.045));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .sinvec-cookie-banner{background:rgba(23,24,28,.93)}
}
.sinvec-cookie-actions button[data-cookie-decline]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sinvec-cookie-actions button:hover{border-color:rgba(255,255,255,.85)}
.sinvec-cookie-banner[hidden]{display:none!important}
.sinvec-cookie-copy{flex:1;min-width:0}
.sinvec-cookie-copy strong{font-size:1rem}
.sinvec-cookie-copy p{margin-top:6px;color:#b6b6b6;font-size:.84rem;line-height:1.6;user-select:text}
.sinvec-cookie-copy a{text-decoration:underline;text-underline-offset:3px;color:#fff;pointer-events:auto}
.sinvec-cookie-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
.sinvec-cookie-actions button{border:1px solid #6a6a6a;border-radius:30px;min-height:43px;padding:10px 16px;background:transparent;color:white;cursor:pointer;font-weight:600}
.sinvec-cookie-actions button[data-cookie-accept]{background:white;color:#070707;border-color:white}
.footer-scene__legal a,.footer-scene__legal-links a{font-size:12px;color:#ddd;text-decoration:none;cursor:pointer}
.footer-scene__legal-links button{border:0;padding:0;background:none;color:#ddd;font:inherit;font-size:12px;cursor:pointer}
.footer-scene__legal a:hover,.footer-scene__legal-links a:hover{text-decoration:underline}
@media(max-width:680px){.sinvec-cookie-banner{flex-direction:column;align-items:stretch;gap:13px}.sinvec-cookie-actions button{flex:1}.sinvec-cookie-actions{width:100%}}
/* Keep the footer scrollable on small devices and when translated text grows. */
@media(max-height:850px), (max-width:760px){
 .footer-scene{overflow-y:auto;overscroll-behavior:contain;}
 .footer-scene__panel{min-height:100dvh;height:auto;}
 .footer-scene__brand{overflow:visible;max-width:100%;}
 .footer-scene__bottom{padding-bottom:max(16px,env(safe-area-inset-bottom));}
}


/* SINVEC / ABOUT — one dark editorial team section. */
.sinvec-about-page { background:#080808; }
.sinvec-about-page .white-content-overlay { overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
.sinvec-about-page .sinvec-about { width:100%; min-height:100%; color:#f5f5f5; }
.sinvec-about-team-section {
  min-height:100dvh; max-width:1820px; margin-inline:auto;
  padding:clamp(118px,12vh,148px) clamp(25px,3.2vw,64px) clamp(22px,3vh,38px);
  display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(ellipse 48% 33% at 50% 72%,rgba(255,255,255,.027),transparent 88%);
}
.sinvec-about-heading { text-align:center; width:100%; }
.sinvec-about-eyebrow {
  display:inline-flex; align-items:center; justify-content:center; min-height:29px;
  padding:5px 19px; border:1px solid rgba(255,255,255,.26); border-radius:99px;
  color:#bdbdbd; font-size:11px; line-height:1; letter-spacing:.045em;
}
.sinvec-about-heading h1 { margin:24px auto 0; font-weight:420; font-size:clamp(48px,5.3vw,96px); line-height:1.02; letter-spacing:-.068em; text-wrap:balance; }
.sinvec-about-heading h1 span { font-weight:680; }
.sinvec-about-subtitle { margin:13px auto 0; color:#969696; font-size:clamp(13px,1vw,16px); }
.sinvec-about-filters { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(10px,1.1vw,20px); margin:29px auto clamp(26px,3.8vh,48px); }
.sinvec-about-filter { border:0; color:#888; background:none; padding:8px 3px; cursor:pointer; font:500 12px/1.3 'Helvetica Neue',Arial,sans-serif; letter-spacing:.06em; transition:color .2s ease; }
.sinvec-about-filter:hover,.sinvec-about-filter.is-active {color:#fff;}
.sinvec-about-filter.is-active {font-weight:700;}
.sinvec-about-filter:focus-visible,.sinvec-about-back:focus-visible,.sinvec-about-contact:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:4px;}
.sinvec-about-filter-rule { display:block; width:24px; height:1px; background:#5c5c5c; }
.sinvec-about-gallery { display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.5vw,26px); width:100%; min-height:clamp(360px,48vh,570px); margin:auto 0 0; }
.sinvec-team-card {
  --pose:rotate(0deg); --dy:0px;
  position:relative; display:flex; flex-direction:column; min-width:0; flex:0 1 17.5%; max-width:270px;
  transform:translateY(var(--dy)) var(--pose); transform-origin:center 70%;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}
.sinvec-team-card[hidden] { display:none!important; }
.sinvec-team-card--outer-left { --pose:rotate(-5deg); --dy:22px; }
.sinvec-team-card--inner-left { --pose:rotate(-2.9deg); --dy:3px; }
.sinvec-team-card--lead { flex-basis:23%; max-width:356px; --dy:-13px; z-index:2; }
.sinvec-team-card--inner-right { --pose:rotate(2.9deg); --dy:3px; }
.sinvec-team-card--outer-right { --pose:rotate(5deg); --dy:22px; }
.sinvec-team-card:hover { transform:translateY(calc(var(--dy) - 11px)) rotate(0deg); z-index:3; }
.sinvec-team-card__photo {
  --base:#1c1d1f; --light:rgba(214,213,206,.23); --shape:#28282a;
  position:relative; height:clamp(288px,38vh,495px); border-radius:clamp(16px,1.45vw,24px);
  border:1px solid rgba(255,255,255,.14); overflow:hidden;
  background:radial-gradient(ellipse 85% 58% at 48% 27%,var(--light),transparent 78%),linear-gradient(148deg,var(--base),#0a0a0b 94%);
  box-shadow:0 17px 55px rgba(0,0,0,.45); isolation:isolate;
}
.sinvec-team-card--lead .sinvec-team-card__photo {height:clamp(350px,49vh,600px);}
.sinvec-team-card__photo--one {--base:#181b1f;--light:rgba(113,142,168,.33);--shape:#323d48;}
.sinvec-team-card__photo--two {--base:#231e22;--light:rgba(163,121,143,.30);--shape:#3e343c;}
.sinvec-team-card__photo--three {--base:#22231f;--light:rgba(191,181,159,.33);--shape:#44443e;}
.sinvec-team-card__photo--four {--base:#1b2020;--light:rgba(127,148,143,.28);--shape:#39413e;}
.sinvec-team-card__photo--five {--base:#241f1d;--light:rgba(168,137,120,.29);--shape:#413832;}
.sinvec-team-card__photo::before { content:"";position:absolute;inset:0;background:linear-gradient(98deg,transparent 0%,rgba(255,255,255,.055) 48%,transparent 62%); transform:translateX(-24%); }
/* Anonymous editorial silhouette. Not a fabricated employee photograph. */
.sinvec-team-card__portrait {position:absolute;inset:0; pointer-events:none; filter:drop-shadow(0 14px 22px #0008);}
.sinvec-team-card__portrait::before {
  content:"";position:absolute;top:24%;left:50%;width:43%;height:31%;border-radius:49% 49% 46% 46%;
  transform:translateX(-50%);background:linear-gradient(112deg,#141719 0%,var(--shape) 53%,#111214 100%);
  box-shadow:inset -16px 5px 26px #0006;
}
.sinvec-team-card__portrait::after {
  content:"";position:absolute;left:50%;bottom:-23%;width:115%;height:67%;border-radius:45% 45% 12% 12% / 41% 41% 10% 10%;
  transform:translateX(-50%);background:linear-gradient(118deg,#141519 7%,var(--shape) 50%,#0e0f11 95%);
  box-shadow:inset -34px 20px 52px #0006;
}
.sinvec-team-card__number {position:absolute;top:16px;left:18px;font-size:10px;letter-spacing:.11em;color:#aaa;z-index:2;}
.sinvec-team-card__pending {position:absolute;bottom:17px;left:17px;right:10px;z-index:3;font-size:9px;letter-spacing:.10em;color:#b5b5b5;}
.sinvec-team-card__spotlight {position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px;padding:60px 23px 24px;background:linear-gradient(transparent,rgba(0,0,0,.88));}
.sinvec-team-card__spotlight span{font-size:clamp(16px,1.4vw,24px);font-weight:650;color:#fff;}
.sinvec-team-card__spotlight strong {font-size:12px;font-weight:450;color:#b5b5b5;}
.sinvec-team-card--lead .sinvec-team-card__pending {display:none;}
.sinvec-team-card__info {padding:14px 2px 0;text-align:center;}
.sinvec-team-card__info h2 {margin:0;font-size:clamp(13px,1.08vw,19px);font-weight:600;line-height:1.25;letter-spacing:-.025em;}
.sinvec-team-card__info p {margin:5px 0 0;color:#777;font-size:11px;line-height:1.3;}
.sinvec-team-card--lead .sinvec-team-card__info {display:none;}
.sinvec-about-gallery:not([data-team-view="all"]) .sinvec-team-card {--pose:rotate(0deg);--dy:0px;max-width:300px;flex-basis:22%;}
.sinvec-about-gallery:not([data-team-view="all"]) .sinvec-team-card--lead {max-width:345px;flex-basis:26%;}
.sinvec-about-bottom {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:18px;margin-top:clamp(16px,3vh,39px);padding-top:19px;border-top:1px solid rgba(255,255,255,.12);}
.sinvec-about-back,.sinvec-about-contact {position:static;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:38px;width:max-content;padding:8px 16px;border:1px solid rgba(255,255,255,.23);border-radius:100px;background:#181818;color:#f3f3f3;font:600 12px/1.2 'Helvetica Neue',Arial,sans-serif;cursor:pointer;text-decoration:none;letter-spacing:.03em;box-shadow:none;transition:background .2s ease;}
.sinvec-about-back:hover,.sinvec-about-contact:hover{background:#282828;}
.sinvec-about-contact{justify-self:end;}
.sinvec-about-bottom-note{font-size:10px;letter-spacing:.17em;color:#717171;text-align:center;}
@media(max-width:1120px){
  .sinvec-about-team-section{padding-top:clamp(118px,12vh,145px);}
  .sinvec-about-heading h1{font-size:clamp(47px,5.7vw,78px);}
  .sinvec-about-gallery{gap:12px;min-height:380px;}
  .sinvec-team-card{flex-basis:18%;}
  .sinvec-team-card--lead{flex-basis:24%;}
  .sinvec-team-card__photo{height:clamp(280px,34vh,430px);}
  .sinvec-team-card--lead .sinvec-team-card__photo{height:clamp(340px,42vh,490px);}
}
@media(max-width:700px){
  .sinvec-about-team-section{padding:106px 0 28px;min-height:100dvh;}
  .sinvec-about-heading{padding:0 22px;}
  .sinvec-about-heading h1{font-size:clamp(43px,9vw,67px);line-height:1.05;max-width:580px;}
  .sinvec-about-subtitle{max-width:310px;}
  .sinvec-about-filters{padding:0 18px;gap:7px 11px;margin-bottom:22px;}
  .sinvec-about-filter{font-size:11px;}
  .sinvec-about-filter-rule{width:14px;}
  .sinvec-about-gallery{justify-content:flex-start;width:100%;min-height:0;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:20px;padding:14px 20px 25px;gap:14px;}
  .sinvec-about-gallery::-webkit-scrollbar{display:none;}
  .sinvec-team-card,.sinvec-about-gallery:not([data-team-view="all"]) .sinvec-team-card{order:0;--pose:rotate(0deg);--dy:0px;flex:0 0 min(70vw,300px);max-width:300px;scroll-snap-align:center;}
  .sinvec-team-card--lead,.sinvec-about-gallery:not([data-team-view="all"]) .sinvec-team-card--lead{order:-1;flex:0 0 min(78vw,335px);max-width:335px;}
  .sinvec-team-card__photo{height:clamp(340px,52vh,490px);}
  .sinvec-team-card--lead .sinvec-team-card__photo{height:clamp(370px,56vh,530px);}
  .sinvec-about-bottom{width:calc(100% - 40px);grid-template-columns:1fr auto;margin-top:auto;}
  .sinvec-about-bottom-note{display:none;}
}
@media(max-width:380px){
  .sinvec-about-heading h1{font-size:42px;}
  .sinvec-about-filter-rule{width:8px;}
}
@media(prefers-reduced-motion:reduce){
  .sinvec-team-card,.sinvec-about-filter,.sinvec-about-contact,.sinvec-about-back{transition:none;}
}


/* SINVEC V6.169 - persistent Back navigation on every internal viewport. */
.white-section > .sinvec-fixed-back {
    position:absolute !important;
    inset:auto auto max(20px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)) !important;
    z-index:130 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center;
    pointer-events:auto;
}
.white-section > .sinvec-fixed-back.white-back {
    border:1px solid rgba(255,255,255,.16);
    background:rgba(18,18,18,.76);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.white-section > .sinvec-fixed-back.sinvec-about-back {
    min-height:46px;
    padding:10px 22px;
    background:rgba(19,19,19,.78);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.sinvec-about-bottom { grid-template-columns:1fr auto !important; padding-left:0; }
.sinvec-about-bottom-note { text-align:left; }
@media(max-width:680px){
    .white-section > .sinvec-fixed-back {
        left:max(14px,env(safe-area-inset-left)) !important;
        bottom:max(14px,env(safe-area-inset-bottom)) !important;
        min-height:40px;
        padding:10px 15px;
    }
    .sinvec-about-bottom { grid-template-columns:1fr; padding-bottom:70px; }
    .sinvec-about-bottom-note { display:none; }
    .sinvec-about-contact { justify-self:end; }
}

/* Camera-driven footer: exactly one motion sequence, no second CSS zoom. */
.hero-container {
    --footer-camera-scale:1;
    --footer-camera-darkness:0;
    transform-origin:50% 42%;
    transform:scale(var(--footer-camera-scale)) !important;
    transition:none !important;
}
.hero-container::after {
    opacity:var(--footer-camera-darkness) !important;
    transition:none !important;
}
body.footer-scene-zooming .hero-container,
body.footer-scene-active .hero-container {
    transform:scale(var(--footer-camera-scale)) !important;
}
body.footer-scene-active .footer-scene,
body.footer-scene-active .footer-scene__panel,
body.footer-scene-active .footer-scene__scrim {
    transition:none !important;
}
body.footer-scene-active .footer-scene__panel { transform:none !important; }
@media(max-width:900px){
    .hero-container {transform-origin:50% 42%;}
    body.footer-scene-zooming .hero-container,
    body.footer-scene-active .hero-container {transform:scale(var(--footer-camera-scale)) !important;}
}

/* About Us: restrained technical palette instead of design-agency colors. */
.sinvec-team-card__photo--two {--base:#191d24;--light:rgba(104,143,181,.29);--shape:#303947;}
.sinvec-team-card__photo--three {--base:#1b1e20;--light:rgba(167,181,193,.26);--shape:#3c4249;}
.sinvec-team-card__photo--five {--base:#1a1e21;--light:rgba(117,146,158,.25);--shape:#333c40;}


/* SINVEC FOOTER V6.171 — four honest columns, extended full-width signature. */
.footer-scene { overflow-x:hidden; }
.footer-scene__panel {
    box-sizing:border-box;
    min-height:100dvh;
    height:auto;
    padding:clamp(20px,2.25vw,42px) clamp(16px,2.35vw,48px) max(18px,env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    gap:0;
}
.footer-scene__columns {
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr) minmax(0,1.35fr) minmax(0,.83fr);
    column-gap:clamp(16px,3.7vw,76px);
    align-items:start;
    padding:clamp(14px,3vh,34px) 0 0;
}
.footer-scene__eyebrow {
    margin:0 0 clamp(13px,1.7vh,18px);
    font:500 clamp(10px,.82vw,12px)/1.3 'Helvetica Neue',Arial,sans-serif;
    letter-spacing:.12em;
    color:rgba(255,255,255,.55);
}
.footer-scene__list {
    display:flex;
    flex-direction:column;
    gap:clamp(9px,1.15vh,14px);
    padding:0;
    margin:0;
    list-style:none;
}
.footer-scene__list li {
    margin:0;
    color:#ededed;
    font-size:clamp(15px,1.4vw,22px);
    line-height:1.27;
    letter-spacing:-.027em;
    overflow-wrap:normal;
}
.footer-scene__list a {color:inherit;text-decoration:none;transition:color .18s ease;}
.footer-scene__list a:hover,.footer-scene__list a:focus-visible {color:#a9a9a9;}
.footer-scene__divider {
    width:100%;
    flex-shrink:0;
    height:1px;
    margin:clamp(19px,3vh,30px) 0 0;
    background:rgba(255,255,255,.23);
}
.footer-scene__brand {
    display:block;
    flex-shrink:0;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:clamp(7px,1.4vh,13px) 0 0;
    padding:0;
    color:#f5f5f5;
    overflow:hidden;
    line-height:0;
}
.footer-scene__brand-art {
    display:block;
    width:100%;
    height:clamp(210px,34vh,370px);
    overflow:visible;
    fill:currentColor;
}
.footer-scene__brand-art text {
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:270px;
    font-weight:750;
    letter-spacing:0;
}
.footer-scene__bottom {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    column-gap:clamp(18px,3.5vw,60px);
    row-gap:13px;
    padding-top:clamp(8px,1.4vh,14px);
    margin-top:auto;
}
.footer-scene__copyright {margin:0;font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;}
.footer-scene__legal-links {gap:clamp(12px,1.5vw,24px);}
.footer-scene__legal-links a,.footer-scene__legal-links button {
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,.67);
    white-space:nowrap;
    transition:color .2s ease;
}
.footer-scene__legal-links a:hover,.footer-scene__legal-links button:hover {color:#fff;}
.footer-scene__top {gap:9px;font-size:12px;font-weight:600;white-space:nowrap;}
@media (max-width:1020px) {
    .footer-scene__columns {column-gap:clamp(12px,2.5vw,32px);}
    .footer-scene__list li {font-size:clamp(13px,1.75vw,18px);}
    .footer-scene__brand-art {height:clamp(165px,28vh,280px);}
    .footer-scene__bottom {grid-template-columns:1fr auto;}
    .footer-scene__legal-links {grid-column:1;grid-row:2;}
    .footer-scene__top {grid-column:2;grid-row:1 / span 2;justify-self:end;}
}
@media (max-width:760px) {
    .footer-scene {overflow-y:auto;overscroll-behavior:contain;}
    .footer-scene__panel {
        height:auto;min-height:100dvh;
        padding:23px 17px max(22px,env(safe-area-inset-bottom));
    }
    .footer-scene__columns {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        column-gap:clamp(15px,5vw,28px);
        row-gap:clamp(21px,3vh,33px);
        padding-top:7px;
    }
    .footer-scene__col--company {order:1;}
    .footer-scene__col--social {order:2;}
    .footer-scene__col--services {order:3;}
    .footer-scene__col--other {order:4;}
    .footer-scene__list {gap:10px;}
    .footer-scene__list li {font-size:clamp(14px,3.65vw,17px);line-height:1.31;}
    .footer-scene__eyebrow {font-size:10px;margin-bottom:12px;}
    .footer-scene__divider {margin-top:clamp(18px,3vh,28px);}
    .footer-scene__brand {margin-top:8px;}
    .footer-scene__brand-art {height:clamp(86px,20vw,138px);}
    .footer-scene__bottom {grid-template-columns:1fr auto;row-gap:14px;}
    .footer-scene__legal-links {grid-column:1/-1;grid-row:2;flex-wrap:wrap;gap:12px 18px;}
    .footer-scene__top {grid-column:2;grid-row:1;justify-self:end;}
}
@media (max-width:380px) {
    .footer-scene__panel {padding-inline:14px;}
    .footer-scene__columns {column-gap:14px;}
    .footer-scene__list li {font-size:13px;}
    .footer-scene__brand-art {height:82px;}
    .footer-scene__copyright,.footer-scene__legal-links a,.footer-scene__legal-links button,.footer-scene__top {font-size:11px;}
}


/* V6.173 — Full-height footer signature. The former fixed-height SVG left
   unused space between the SINVEC letters and the legal row on desktop. */
@media (min-width: 761px) and (min-height: 610px) {
  .footer-scene__brand {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    margin-top: 3px;
    overflow: hidden;
  }
  .footer-scene__brand-art {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .footer-scene__bottom {
    margin-top: 0;
    flex: 0 0 auto;
  }
}
/* Preserve readable proportions and an unclipped footer on small screens. */
@media (max-width: 760px), (max-height: 609px) {
  .footer-scene__brand { flex: 0 0 auto; margin-top: 6px; }
  .footer-scene__brand-art { height: clamp(108px, 29vw, 170px); }
}
/* Tablet portrait: keep letters wide/readable, instead of turning SINVEC into
   unnaturally tall glyphs in a narrow high-aspect-ratio viewport. */
@media (min-width: 761px) and (max-width: 1020px) and (orientation: portrait) {
  .footer-scene__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 25px;
  }
  .footer-scene__col--company { order: 1; }
  .footer-scene__col--social { order: 2; }
  .footer-scene__col--services { order: 3; }
  .footer-scene__col--other { order: 4; }
  .footer-scene__brand {
    flex: 0 0 auto;
    height: clamp(250px, 43vw, 410px);
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* V6.174 — Correct overstretched SINVEC signature. Keep the full-width
   letter spacing, but limit the glyph height so the wordmark keeps a
   balanced proportion on desktop. The footer structure remains unchanged. */
@media (min-width: 761px) and (min-height: 610px) {
  .footer-scene__brand-art {
    position: absolute;
    inset: auto 0 auto 0;
    top: clamp(8px, 1.6vh, 17px);
    width: 100%;
    height: clamp(185px, 34vh, 305px);
  }
}


/* Sinvec portrait native camera: 1080×1920 source, not a crop of the desktop scene. */
html.sinvec-portrait-scene .hero-video,
html.sinvec-portrait-scene .hero-service-canvas {
    object-fit: cover;
    object-position: center center;
}
html.sinvec-portrait-scene .hero-container { transform-origin: 50% 50%; }
/* Source service-screen videos are landscape. Keep their composition intact on
   mobile, instead of clipping 60% of the image when they are activated. */
html.sinvec-portrait-scene .tv-hover-container .service-video { object-fit: contain; background: #000; }


/* Consent entry + tactile interactions. No motion for reduced-motion users. */
@keyframes sinvec-cookie-enter {
    from { opacity: 0; transform: translate3d(0,24px,0) scale(.975); filter:blur(6px); }
    to { opacity:1; transform: translate3d(0,0,0) scale(1); filter:blur(0); }
}
.sinvec-cookie-banner:not([hidden]) {
    animation:sinvec-cookie-enter .57s cubic-bezier(.2,.85,.25,1) both;
}
.sinvec-cookie-actions button {
    transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s ease,
        box-shadow .22s ease,border-color .22s ease,color .22s ease;
    transform:translateZ(0);
}
@media (hover:hover) and (pointer:fine) {
    .sinvec-cookie-actions button:hover {
        transform:translateY(-3px);
        box-shadow:0 10px 25px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.14);
    }
    .sinvec-cookie-actions button[data-cookie-decline]:hover {
        background:rgba(255,255,255,.14);
    }
    .sinvec-cookie-actions button[data-cookie-accept]:hover {
        background:#e0e0e0;
        box-shadow:0 10px 30px rgba(255,255,255,.16);
    }
}
.sinvec-cookie-actions button:active { transform:translateY(0) scale(.97); }
.sinvec-cookie-actions button:focus-visible { outline:2px solid #fff; outline-offset:4px; }

/* Localized language offer: restrained glass card, anchored near EN / ES. */
@keyframes sinvec-language-offer-in {
    from { opacity:0; transform:translate3d(0,-18px,0) scale(.97); filter:blur(6px); }
    to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
}
.sinvec-language-offer {
    position:fixed; z-index:560;
    top:clamp(84px,8vw,116px); right:clamp(15px,5vw,82px);
    width:min(365px,calc(100vw - 30px)); padding:22px;
    border-radius:22px; border:1px solid rgba(255,255,255,.2);
    color:#fff; background:linear-gradient(130deg,rgba(60,63,70,.62),rgba(17,18,22,.82));
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    backdrop-filter:blur(26px) saturate(140%);
    box-shadow:0 16px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
    animation:sinvec-language-offer-in .54s cubic-bezier(.2,.88,.22,1) both;
}
.sinvec-language-offer[hidden]{display:none!important}
.sinvec-language-offer__top {display:flex;align-items:center;gap:10px;color:#d4d4d4;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.sinvec-language-offer__icon{width:30px;height:30px;flex:none;border:1px solid rgba(255,255,255,.23);border-radius:50%;display:grid;place-items:center;font:600 13px/1 Arial,sans-serif;letter-spacing:0}
.sinvec-language-offer h2{font-size:clamp(20px,2.1vw,25px);font-weight:650;line-height:1.18;letter-spacing:-.035em;margin:0 0 9px}
.sinvec-language-offer p{font-size:13px;color:#bfbfbf;line-height:1.58;margin:0 0 20px}
.sinvec-language-offer__actions{display:flex;gap:9px;flex-wrap:wrap}
.sinvec-language-offer__actions button{appearance:none;min-height:42px;border-radius:999px;padding:11px 16px;font-weight:650;font-size:12px;cursor:pointer;border:1px solid rgba(255,255,255,.33);background:rgba(255,255,255,.06);color:#fff;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.sinvec-language-offer__actions button[data-translation-accept]{background:#fff;border-color:#fff;color:#111}
.sinvec-language-offer__actions button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 .sinvec-language-offer__actions button:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
 .sinvec-language-offer__actions button[data-translation-accept]:hover{background:#e5e5e5;box-shadow:0 8px 20px rgba(255,255,255,.12)}
}
@media(max-width:650px){.sinvec-language-offer{top:clamp(89px,15vh,125px);right:14px;padding:19px;max-width:calc(100vw - 28px)}}
@media(prefers-reduced-motion:reduce){
 .sinvec-cookie-banner:not([hidden]),.sinvec-language-offer{animation:none!important}
 .sinvec-cookie-actions button,.sinvec-language-offer__actions button{transition:none!important}
}


/* V6.182 — Mobile hero layout. Only actual touch phones in portrait.
   No modifications to the original portrait video assets or camera layers. */
.sinvec-mobile-services-toggle {display:none;}
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  .hero-container {height:100dvh;}
  .hero-ui {height:100%;padding:0;z-index:8;}
  .header-main {
    top:max(10px,env(safe-area-inset-top));
    width:calc(100% - 20px);
    max-width:none;
    padding:8px 10px 8px 11px !important;
    min-height:49px;
    gap:7px;
    justify-content:space-between;
  }
  .header-main .logo {flex:0 1 93px;min-width:0;}
  .header-main .logo img {height:auto;width:100%;max-height:29px;object-fit:contain;object-position:left center;}
  .header-main .header-links {display:flex;flex:0 1 auto;gap:clamp(5px,1.6vw,11px);min-width:0;}
  .header-main .header-links a {font-size:clamp(9px,2.55vw,11px);white-space:nowrap;font-weight:500;}
  .header-main .header-actions {flex:none;gap:0;}
  .header-main .btn-contact {display:none;}
  .header-main .site-language-switch {flex-shrink:0;}
  .header-main .site-language-switch button {min-width:26px;padding:7px 5px;font-size:10px;}
  .hero-content {
    position:absolute;
    left:clamp(18px,6.2vw,28px);
    right:clamp(18px,6vw,26px);
    bottom:max(128px,calc(env(safe-area-inset-bottom) + 124px));
    width:auto;max-width:calc(100% - 38px);
    margin:0;z-index:2;
  }
  .hero-content h1 {
    max-width:100%;font-size:clamp(37px,11.8vw,58px);
    letter-spacing:-.045em;line-height:.96;
    margin:0 0 13px;overflow-wrap:normal;word-break:normal;
    text-wrap:balance;
    text-shadow:0 2px 14px rgba(0,0,0,.36);
  }
  .hero-content p {
    max-width:250px;
    font-size:clamp(10px,2.8vw,12px);
    line-height:1.45;letter-spacing:.02em;
    color:#fff;text-shadow:0 1px 9px rgba(0,0,0,.55);
  }
  .scroll-indicator.icon-ring-arrow {
    left:auto;right:clamp(13px,4vw,20px);
    bottom:max(12px,env(safe-area-inset-bottom));
    transform:none;width:91px;height:91px;
  }
  .scroll-indicator.icon-ring-arrow .scroll-core.arrow-only {width:46px;height:46px;}
  .scroll-indicator.icon-ring-arrow .scroll-arrow-svg {width:30px;height:35px;}
  .sinvec-mobile-services-toggle {
    position:fixed;display:none;left:clamp(18px,6vw,27px);
    bottom:max(32px,calc(env(safe-area-inset-bottom) + 30px));
    z-index:21;pointer-events:auto;align-items:center;gap:11px;
    border:1px solid rgba(255,255,255,.32);border-radius:24px;
    padding:11px 14px;min-height:42px;
    background:rgba(17,17,17,.70);color:white;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    font:600 12px/1 Helvetica,Arial,sans-serif;cursor:pointer;
  }
  .header-main.visible ~ .sinvec-mobile-services-toggle {display:inline-flex;}
  .sinvec-mobile-services-toggle span {font-size:20px;font-weight:400;line-height:10px;}
  .sinvec-mobile-services-toggle[aria-expanded="true"] span {transform:rotate(45deg);}
  .nav-services, .nav-services.visible, .nav-services.moved-up, .nav-services.on-white {
    position:fixed;top:auto;bottom:max(86px,calc(env(safe-area-inset-bottom) + 85px));
    left:clamp(15px,4vw,22px);right:clamp(15px,4vw,22px);
    width:auto;min-width:0;max-height:min(62dvh,480px);overflow-y:auto;
    display:none;opacity:0;visibility:hidden;pointer-events:none;
    background:rgba(12,13,15,.95);
    border:1px solid rgba(255,255,255,.22);border-radius:19px;
    padding:18px 18px 20px;z-index:20;
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    transform:none;transition:none;
  }
  .nav-services.sinvec-mobile-open:not(.scrolling) {
    display:block;opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-services .menu-title,.nav-services.on-white .menu-title {
    font-size:15px;line-height:1.25;text-align:left;margin-bottom:14px;opacity:1;
  }
  .nav-services ul,.nav-services.on-white ul {gap:11px;}
  .nav-services li,.nav-services.on-white li,
  .nav-services li span,.nav-services.on-white li span {font-size:12px;line-height:1.3;}
  .nav-services li,.nav-services.on-white li {
    display:grid;grid-template-columns:26px minmax(0,1fr);white-space:normal;
    gap:10px;opacity:.82;min-height:24px;
  }
  .nav-services .service-label--nowrap {white-space:normal;}
  body.project-brief-active .sinvec-mobile-services-toggle,
  body.footer-scene-active .sinvec-mobile-services-toggle {display:none!important;}
}
@media (max-width:360px) and (orientation:portrait) and (pointer:coarse), (max-width:360px) and (orientation:portrait) and (pointer:fine) and (hover:hover) {
  .header-main {gap:4px;padding-inline:8px!important;}
  .header-main .logo {flex-basis:78px;}
  .header-main .header-links {gap:5px;}
  .header-main .header-links a {font-size:9px;}
  .hero-content h1 {font-size:clamp(35px,11.6vw,43px);}
}
@media (max-height:630px) and (max-width:900px) and (pointer:coarse), (max-height:630px) and (max-width:900px) and (pointer:fine) and (hover:hover) {
  .hero-content {bottom:110px;}
  .hero-content h1 {font-size:clamp(31px,10vw,42px);}
  .hero-content p {font-size:10px;}
  .scroll-indicator.icon-ring-arrow {width:75px;height:75px;}
}


/* V6.183 — ANDROID FIRST VISIT / INTERACTION STABILITY
   Smaller, sequential, independently dismissible notices. Portrait video is
   NOT changed or replaced. Desktop styling remains unchanged. */
.sinvec-notice-close {
  appearance:none;position:absolute;z-index:2;right:12px;top:10px;
  width:32px;height:32px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:50%;font:400 23px/1 Arial,sans-serif;
  cursor:pointer;touch-action:manipulation;
}
.sinvec-notice-close:focus-visible {outline:2px solid white;outline-offset:2px}
.sinvec-cookie-banner,.sinvec-language-offer {touch-action:pan-y;overscroll-behavior:contain;}
.sinvec-cookie-actions button,.sinvec-language-offer__actions button {touch-action:manipulation;}
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html {overflow-x:hidden;overscroll-behavior-y:none;}
  body {width:100%;overscroll-behavior-y:none;}
  .hero-container {height:100svh;}
  .hero-service-canvas {image-rendering:auto;}
  .sinvec-cookie-banner {
    left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));top:auto;
    width:auto;max-width:none;margin:0;padding:17px 16px 15px;
    max-height:min(51dvh,330px);overflow-y:auto;
    border-radius:19px;gap:12px;
    background:rgba(26,27,31,.96);
    box-shadow:0 12px 40px rgba(0,0,0,.48);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  }
  .sinvec-cookie-copy {padding-right:26px;}
  .sinvec-cookie-copy strong {font-size:15px;line-height:1.25;}
  .sinvec-cookie-copy p {font-size:12px;line-height:1.4;margin-top:6px;}
  .sinvec-cookie-actions {display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
  .sinvec-cookie-actions button {min-width:0;min-height:43px;padding:8px 7px;font-size:11px;white-space:normal;}
  .sinvec-language-offer {
    top:max(72px,calc(env(safe-area-inset-top) + 68px));
    bottom:auto;left:12px;right:12px;width:auto;max-width:none;
    max-height:min(52dvh,365px);overflow-y:auto;
    margin:0;padding:18px 16px 15px;
    border-radius:19px;background:rgba(26,27,31,.96);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:0 12px 40px rgba(0,0,0,.48);
  }
  .sinvec-language-offer__top {margin-bottom:10px;padding-right:34px;font-size:10px;}
  .sinvec-language-offer h2 {font-size:20px;line-height:1.18;margin-bottom:6px;padding-right:22px;}
  .sinvec-language-offer p {font-size:12px;line-height:1.43;margin-bottom:13px;}
  .sinvec-language-offer__actions {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .sinvec-language-offer__actions button {padding:8px 7px;min-height:43px;font-size:11px;}
  .sinvec-mobile-services-toggle {touch-action:manipulation;}
  .nav-services.sinvec-mobile-open {overscroll-behavior:contain;touch-action:pan-y;}
  .header-main a,.header-main button,.nav-services li {touch-action:manipulation;}
}
@media (max-width:900px) and (max-height:620px) and (pointer:coarse), (max-width:900px) and (max-height:620px) and (pointer:fine) and (hover:hover) {
  .sinvec-language-offer {top:66px;max-height:54dvh;padding:12px;}
  .sinvec-language-offer__top {margin-bottom:6px;}
  .sinvec-cookie-banner {max-height:51dvh;}
}

/* V6.190 — SEPARATE MOBILE RUNTIME. This block has NO desktop styles. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-lite, html.sinvec-mobile-lite body {overflow:hidden!important;width:100%;height:100%;}
  html.sinvec-mobile-lite .hero-container {width:100%;height:100dvh;overflow:hidden;transform:none!important;}
  html.sinvec-mobile-lite .hero-video,
  html.sinvec-mobile-lite .hero-service-canvas,
  html.sinvec-mobile-lite #tvContainer {display:none!important;visibility:hidden!important;}
  html.sinvec-mobile-lite .sinvec-lite-surface {position:absolute;inset:0;overflow:hidden;z-index:7;background:#171717;touch-action:none;}
  html.sinvec-mobile-lite .sinvec-lite-frame,
  html.sinvec-mobile-lite .sinvec-lite-intro {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;}
  html.sinvec-mobile-lite .sinvec-lite-intro {z-index:1;}
  html.sinvec-mobile-lite .sinvec-lite-surface::after {content:"";position:absolute;inset:30% 0 0;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.17) 38%,rgba(0,0,0,.65));z-index:2;}
  html.sinvec-mobile-lite .hero-ui {z-index:9;}
  html.sinvec-mobile-lite .hero-content {bottom:max(122px,calc(env(safe-area-inset-bottom) + 119px));pointer-events:none;}
  html.sinvec-mobile-lite .hero-content h1 {font-size:clamp(36px,10.9vw,55px);max-width:100%;}
  html.sinvec-mobile-lite .scroll-indicator.icon-ring-arrow {display:none!important;}
  html.sinvec-mobile-lite .sinvec-lite-service-info {position:absolute;left:22px;right:22px;bottom:max(124px,calc(env(safe-area-inset-bottom) + 119px));z-index:3;color:#fff;}
  html.sinvec-mobile-lite .sinvec-lite-service-info[hidden] {display:none!important;}
  html.sinvec-mobile-lite .sinvec-lite-service-count {font-size:12px;letter-spacing:.18em;opacity:.85;margin-bottom:12px;}
  html.sinvec-mobile-lite .sinvec-lite-service-info h2 {font:700 clamp(33px,9vw,53px)/.99 Arial,Helvetica,sans-serif;max-width:100%;text-transform:uppercase;letter-spacing:-.035em;overflow-wrap:break-word;}
  html.sinvec-mobile-lite .sinvec-lite-service-info p {font-size:12px;line-height:1.4;color:#e0e0e0;margin:12px 0 16px;}
  html.sinvec-mobile-lite .sinvec-lite-cta-row {display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  html.sinvec-mobile-lite .sinvec-lite-cta-row button {appearance:none;background:#fff;color:#111;border:0;border-radius:999px;padding:11px 16px;min-height:44px;font:600 12px/1.1 Arial,Helvetica,sans-serif;touch-action:manipulation;cursor:pointer;}
  html.sinvec-mobile-lite .sinvec-lite-cta-row button:nth-child(n+2) {padding:11px 15px;background:rgba(255,255,255,.19);color:#fff;border:1px solid rgba(255,255,255,.5);font-size:17px;}
  html.sinvec-mobile-lite .sinvec-lite-cta-row button:disabled {opacity:.4;}
  html.sinvec-mobile-lite .header-main {z-index:35!important;}
  html.sinvec-mobile-lite .sinvec-mobile-services-toggle {display:flex!important;z-index:36!important;}
  html.sinvec-mobile-lite .nav-services {z-index:36!important;}
  html.sinvec-mobile-lite .nav-services.sinvec-mobile-open {display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;}
  html.sinvec-mobile-lite .white-section {height:100dvh;transition:none!important;content-visibility:hidden;z-index:24;}
  html.sinvec-mobile-lite .white-section.visible {content-visibility:visible;opacity:1;visibility:visible;}
  html.sinvec-mobile-lite .white-content-overlay {height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
  html.sinvec-mobile-lite .transition-overlay,html.sinvec-mobile-lite .internal-transition-overlay {display:none!important;}
  html.sinvec-mobile-lite .sinvec-cookie-banner {z-index:60!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  /* V6.219: welcome language prompt is allowed on Android after hero readiness. */
  /* Floating navigation keeps its own clipped, lightweight glass layer. */
  html.sinvec-mobile-lite .scroll-ring-svg {animation:none!important;}
}

@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  /* Header blur is provided by the scoped glass rules below. */
  html.sinvec-mobile-lite .white-section.visible * {scroll-behavior:auto;}
}

@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
 html.sinvec-mobile-lite body.footer-scene-active .hero-container {transform:none!important;}
 html.sinvec-mobile-lite body.footer-scene-active .footer-scene {z-index:40;overflow-y:auto;touch-action:pan-y;}
 html.sinvec-mobile-lite body.footer-scene-active .footer-scene__panel {min-height:100dvh;height:auto;overflow:visible;transform:none!important;opacity:1!important;}
 html.sinvec-mobile-lite body.footer-scene-active .footer-scene__columns {padding-top:35px;}
}

/* V6.252 — removed dead V6.191–V6.193 sinvec-mobile-scroll CSS.
   No current runtime or markup assigns sinvec-mobile-scroll; native touch uses
   sinvec-mobile-magnet and fine-pointer adaptive keeps sinvec-mobile-lite. */

/* V6.194 — ONLY portrait/coarse mobile. Magnetic navigation via hardware video.
   Desktop selector tree, camera, video assets and original glass untouched. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet,
  html.sinvec-mobile-magnet body {height:100%!important;overflow:hidden!important;scroll-snap-type:none!important;}
  html.sinvec-mobile-magnet .hero-container {position:fixed!important;inset:0;width:100%!important;height:100dvh!important;transform:none!important;pointer-events:none;}
  html.sinvec-mobile-magnet .sinvec-magnet-surface {touch-action:none!important;pointer-events:none;}
  html.sinvec-mobile-magnet .sinvec-lite-frame {display:block!important;opacity:1!important;z-index:0!important;transform:none!important;transition:none!important;}
  html.sinvec-mobile-magnet .sinvec-magnet-motion {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;pointer-events:none;opacity:0;visibility:hidden;transition:none!important;}
  html.sinvec-mobile-magnet .sinvec-magnet-motion.is-playing {opacity:1;visibility:visible;}
  html.sinvec-mobile-magnet .sinvec-lite-intro {z-index:2;}
  html.sinvec-mobile-magnet .sinvec-magnet-surface::after {z-index:3;}
  html.sinvec-mobile-magnet .sinvec-lite-touch-zone {position:absolute;inset:0;z-index:4;background:transparent;touch-action:none;pointer-events:auto;}
  html.sinvec-mobile-magnet .sinvec-lite-service-info {z-index:5;pointer-events:none;}
  html.sinvec-mobile-magnet .sinvec-lite-cta-row {pointer-events:auto;}
  html.sinvec-mobile-magnet .sinvec-mobile-services-toggle,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row button {background:rgba(25,25,28,.34)!important;border:1px solid rgba(255,255,255,.35)!important;color:#fff!important;-webkit-backdrop-filter:blur(12px) saturate(1.3)!important;backdrop-filter:blur(12px) saturate(1.3)!important;}
  html.sinvec-mobile-magnet .sinvec-lite-cta-row button:first-child {background:rgba(255,255,255,.17)!important;}
  html.sinvec-mobile-magnet .header-main,
  html.sinvec-mobile-magnet .header-main.on-white {background:rgba(22,22,24,.26)!important;border:1px solid rgba(255,255,255,.26)!important;-webkit-backdrop-filter:blur(13px) saturate(1.25)!important;backdrop-filter:blur(13px) saturate(1.25)!important;}
  html.sinvec-mobile-magnet .nav-services,
  html.sinvec-mobile-magnet .nav-services.on-white {background:rgba(24,24,27,.76)!important;-webkit-backdrop-filter:blur(15px) saturate(1.25)!important;backdrop-filter:blur(15px) saturate(1.25)!important;}
  html.sinvec-mobile-magnet.sinvec-mobile-internal .sinvec-lite-touch-zone,
  html.sinvec-mobile-magnet body.footer-scene-active .sinvec-lite-touch-zone {pointer-events:none;}
  html.sinvec-mobile-magnet.sinvec-mobile-internal .sinvec-mobile-services-toggle,
  html.sinvec-mobile-magnet.sinvec-mobile-internal .nav-services {display:none!important;}
}

/* V6.194 landing blend: only ~100ms and only at a magnetic stop. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .sinvec-magnet-motion.is-playing.is-exiting {opacity:0;visibility:visible;transition:opacity 105ms linear!important;}
}

/* V6.195 — scoped mobile FPS & quality consistency.
   The video surface remains 1080x1920 when moving AND at rest. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .sinvec-magnet-motion {will-change:auto;contain:layout paint;}
  html.sinvec-mobile-magnet .sinvec-magnet-motion.is-playing {opacity:1;visibility:visible;}
  html.sinvec-mobile-magnet .sinvec-magnet-motion.is-exiting {transition:none!important;}
  /* V6.208: don't disable the glass on small controls during video motion.
     Keep the expensive full-screen visual effects disabled elsewhere. */
  html.sinvec-mobile-magnet .sinvec-lite-frame {pointer-events:none;}
}

/* V6.196 — MOBILE ONLY: isolate animation pixels from the overlay text.
   No selectors used by desktop have been modified. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet.sinvec-mobile-services-gone .sinvec-mobile-services-toggle,
  html.sinvec-mobile-magnet .sinvec-mobile-services-toggle[hidden],
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning .sinvec-mobile-services-toggle {
    display:none!important;pointer-events:none!important;
  }
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning .hero-content,
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning .sinvec-lite-service-info {
    visibility:hidden!important;pointer-events:none!important;
  }
  /* Keep the header's glass unchanged through transitional states. */
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning .sinvec-magnet-surface::after {
    display:none!important;
  }
  html.sinvec-mobile-magnet .sinvec-magnet-motion {filter:none!important;}
}

/* V6.197 — mobile-only compositor / gesture text invariants.
   The desktop selector tree is intentionally untouched. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  /* Never animate visibility of text over a moving scene. */
  html.sinvec-mobile-magnet .hero-ui,
  html.sinvec-mobile-magnet .hero-content,
  html.sinvec-mobile-magnet .sinvec-lite-service-info,
  html.sinvec-mobile-magnet .sinvec-lite-service-info * {
    transition:none!important;
    animation:none!important;
  }
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .hero-ui,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .hero-content,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .sinvec-lite-service-info {
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  /* One H.264 texture in motion and at a magnetic stop, never a second
     full-screen media texture competing for the mobile decoder. */
  html.sinvec-mobile-magnet .sinvec-magnet-motion {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
    filter:none!important;
    -webkit-filter:none!important;
  }
  html.sinvec-mobile-magnet .sinvec-magnet-motion.is-playing {
    opacity:1!important;
    visibility:visible!important;
  }
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .header-main::after,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .header-glow,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .scroll-ring-svg,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .sinvec-magnet-surface::after {
    display:none!important;
    animation:none!important;
    filter:none!important;
  }
  /* No forced removal of the header's backdrop or shadow mid-gesture. */
}

/* V6.198 — ONLY Android mobile stage. Video gets compositor's native hardware overlay,
   while glass is drawn with inexpensive translucent borders during motion. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .sinvec-magnet-motion {
    transform:none!important;-webkit-transform:none!important;
    -webkit-backface-visibility:visible!important;backface-visibility:visible!important;
    contain:none!important;will-change:auto!important;
    image-rendering:auto!important;
  }
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .header-main,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .nav-services,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .sinvec-lite-service-info,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .sinvec-magnet-surface {
    -webkit-filter:none!important;filter:none!important;
  }
}

/* =====================================================================
   V6.199 | RESPONSIVE DE PÁGINAS INTERNAS EN TELÉFONOS
   Exclusivamente pantallas táctiles <=600px. No altera el hero / cámara,
   video, animaciones de servicios, escritorio ni videos hover.
   ===================================================================== */
@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (pointer:fine) and (hover:hover) {
  /* Desplazamiento legible, sin contenido oculto tras la navegación. */
  .white-section .white-content-overlay {
    box-sizing: border-box;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: max(88px, calc(env(safe-area-inset-bottom) + 72px));
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .white-section .white-content-overlay :is(h1,h2,h3,h4,p) {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Mantener el header encima y reservarle su propio plano de lectura. */
  .white-section.visible::before {
    content: '';
    position: absolute;
    top: 47px;left: 0;right: 0;
    height: 84px;
    background: linear-gradient(to bottom, #0a0a0a 0%, rgba(10,10,10,.95) 28%, rgba(10,10,10,0) 100%);
    pointer-events: none;
    z-index: 5;
  }
  /* El botón de regreso pasa al área de navegación, no sobre los párrafos. */
  .white-section > .sinvec-fixed-back,
  .white-section > .sinvec-fixed-back.white-back,
  .white-section > .sinvec-fixed-back.sinvec-about-back {
    position: absolute !important;
    top: max(79px, calc(env(safe-area-inset-top) + 69px)) !important;
    right: max(16px,env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: auto;
    min-width: 85px;
    min-height: 38px;
    height: 38px;
    padding: 0 13px !important;
    margin: 0 !important;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .09em;
    gap: 7px;
    background: rgba(29,30,33,.86);
    border: 1px solid rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 26px rgba(0,0,0,.32);
    z-index: 135 !important;
    touch-action: manipulation;
  }
  .white-section > .sinvec-fixed-back .white-back-arrow {font-size: 16px;}

  /* Hero y tarjeta de proyecto: columna única, con márgenes reales de móvil. */
  .white-section .ws-hero {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: calc(100% - 34px) !important;
    max-width: 480px !important;
    gap: 17px !important;
    margin: 0 auto !important;
    padding: 138px 0 0 !important;
    align-items: stretch;
  }
  .white-section .ws-hero-banner {
    box-sizing: border-box;
    width: 100% !important;
    aspect-ratio: 1.28 / 1 !important;
    min-height: 245px !important;
    height: auto !important;
    border-radius: 21px !important;
  }
  .white-section .ws-hero-banner-content,
  .white-section .ws-hero-banner-content.ws-hero-banner-content--reference {
    box-sizing: border-box;
    width: 100%;
    padding: 21px !important;
  }
  .white-section .ws-hero-title {
    max-width: 100%;
    font-size: clamp(23px,6.25vw,30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    margin: 0 0 17px !important;
    text-wrap: balance;
  }
  .white-section .ws-hero-title br {display: none;}
  .white-section .ws-hero-btn {padding: 12px 19px;min-height: 41px;font-size: 12px;}
  .white-section .ws-hero-side {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    padding: 13px !important;
    border-radius: 21px !important;
    gap: 0;
    background: rgba(255,255,255,.045);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .white-section .ws-hero-side-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1.55 / 1 !important;
    border-radius: 13px !important;
  }
  .white-section .ws-hero-side-info {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px !important;
    grid-template-rows: auto auto;
    grid-template-areas: 'label arrow' 'title arrow';
    align-items: center;
    gap: 4px 12px !important;
    margin-top: 14px !important;
    min-height: 46px;
    padding: 0 2px;
  }
  .white-section .ws-hero-side-label {grid-area:label;align-self:end;font-size: 10px !important;letter-spacing:1.6px;white-space:normal;}
  .white-section .ws-hero-side-title {grid-area:title;align-self:start;font-size: clamp(18px,5vw,24px) !important;line-height: 1.12;overflow-wrap: anywhere;}
  .white-section .ws-hero-side-arrow {grid-area:arrow;justify-self:end;width:42px;height:42px;}

  /* Conservar ritmo editorial sin los vacíos enormes heredados del escritorio. */
  .white-section .ws-logos-title {
    box-sizing: border-box;
    width: calc(100% - 44px);
    max-width: 470px;
    margin: 35px auto 22px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: left;
  }
  .white-section .ws-marquee {margin: 0;padding: 17px 0;}
  .white-section .ws-marquee-item {font-size: 16px;}
  .white-section .ws-team,
  .white-section .ws-about,
  .white-section .ws-solutions,
  .white-section .ws-social-proof {
    box-sizing: border-box;
    width: calc(100% - 34px) !important;
    max-width: 480px !important;
    padding: 0 !important;
    margin: 47px auto 0 !important;
  }
  .white-section .ws-team-text {text-align: left;margin: 0 0 20px !important;}
  .white-section .ws-team-title,
  .white-section .ws-about-title,
  .white-section .ws-solutions-title {
    font-size: clamp(25px,7.3vw,32px) !important;
    line-height: 1.09 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 15px !important;
  }
  .white-section .ws-team-desc,
  .white-section .ws-about-desc,
  .white-section .ws-solution-desc {font-size: 14px !important;line-height: 1.62 !important;}
  .white-section .ws-team-pillars {grid-template-columns: minmax(0,1fr) !important;gap: 12px !important;}
  .white-section .ws-team-pillar {
    min-width: 0;
    padding: 20px !important;
    border-radius: 19px !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }
  .white-section .ws-work {
    box-sizing: border-box;
    width: calc(100% - 34px) !important;
    max-width: 480px !important;
    margin: 46px auto 0 !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 19px !important;
    padding: 22px 19px !important;
    border-radius: 24px !important;
  }
  .white-section .ws-work-title {font-size: clamp(24px,6.5vw,31px) !important;line-height:1.12;}
  .white-section .ws-projects {
    box-sizing: border-box;
    width: calc(100% - 34px) !important;
    max-width: 480px !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 34px auto 0 !important;
  }
  .white-section .ws-project {padding: 12px !important;border-radius: 18px;}
  .white-section .ws-project-img {margin-bottom: 13px;}
  .white-section .ws-project-info {gap: 6px;}
  .white-section .ws-project-title {font-size: 16px;line-height:1.3;}
  .white-section .ws-project-cat {font-size: 12px;line-height:1.4;}
  .white-section .ws-about-grid {grid-template-columns:minmax(0,1fr) !important;gap:20px !important;}
  .white-section .ws-about-media {border-radius:18px;}
  .white-section .ws-solutions-title {max-width:100%;}
  .white-section .ws-solution-head {
    grid-template-columns: 24px minmax(0,1fr) 36px !important;
    gap: 10px !important;
    min-height: 64px;
    padding: 14px 0 !important;
  }
  .white-section .ws-solution-title {font-size: 15px !important;line-height:1.3;}
  .white-section .ws-solution-toggle {width:34px;height:34px;}
  .white-section .ws-solution-content {grid-template-columns:1fr !important;padding: 0 4px 18px !important;gap: 12px;}
  .white-section .ws-social-proof {grid-template-columns:1fr!important;gap:19px!important;}
  .white-section .ws-cta {
    box-sizing: border-box;
    width: calc(100% - 34px) !important;
    max-width: 480px !important;
    margin: 47px auto 0 !important;
    padding: 35px 20px !important;
    border-radius: 24px !important;
  }
  .white-section .ws-cta-title {font-size:clamp(27px,7.8vw,35px) !important;}
  .white-section .ws-cta-desc {font-size:14px;line-height:1.6;margin-bottom:22px;}
  .white-section .ws-cta-actions {gap:15px;}
  /* Secciones internas con cabecera propia: respetar el Back superior. */
  #aboutCompanyPage .sinvec-about-team-section {padding-top: 146px !important;}
  #contactPage .contact-intro {padding-top: 145px !important;}
  #startProjectPage .project-brief-shell {padding-top: 146px !important;}
  /* Otras subpáginas de portafolio, sin afectar el diseño global. */
  .white-section .syx-hero {padding: 145px 17px 0 !important;}
  .white-section .syx-title {font-size: clamp(41px,11vw,64px) !important;overflow-wrap: anywhere;}
  .white-section .syx-showcase {width:calc(100% - 34px);margin-top:26px;padding:8px;border-radius:20px;}
  .white-section .syx-hero-img {border-radius:12px;}
  .white-section .syx-overview {margin-top:39px;}
  .white-section .syx-process {padding-bottom:20px;}
  .white-section .syx-process-title {font-size:clamp(27px,8vw,38px);margin-bottom:20px;}
  .white-section .syx-more {margin-top:34px;}
  .white-section .wap-header {margin-top:138px;}
  .white-section .wap-title {font-size:clamp(37px,10vw,52px);margin-bottom:24px;}
  .white-section .wap-filters {gap:7px;margin-bottom:25px;}
  .white-section .wap-pill {padding:10px 13px;font-size:10px;letter-spacing:.08em;}
  .white-section .wap-grid {grid-template-columns:minmax(0,1fr);gap:29px;padding-bottom:24px;}
  .white-section .wap-card-title {font-size:clamp(23px,6.3vw,31px);}
  .white-section .wap-card-meta {margin-top:12px;}
  .white-section .wap-card-cats {font-size:11px;letter-spacing:.1em;}
  .white-section .white-content-overlay > :last-child:not(.white-back) {margin-bottom:18px;}
}
@media (max-width: 360px) and (pointer: coarse), (max-width: 360px) and (pointer:fine) and (hover:hover) {
  .white-section .ws-hero {width:calc(100% - 28px)!important;padding-top:130px!important;}
  .white-section .ws-hero-banner {min-height:230px!important;}
  .white-section .ws-hero-banner-content {padding:16px!important;}
  .white-section .ws-hero-title {font-size:23px!important;}
}


/* =====================================================================
   V6.200 — SOLO RESPONSIVE TÁCTIL: navegación interior y flechas.
   El motor, las escenas y la navegación de escritorio no se modifican.
   ===================================================================== */
@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (pointer:fine) and (hover:hover) {
  /* Header de geometría y acabado invariantes al recorrer páginas internas.
     Los mismos estilos se aplican incluso si se alterna .on-white. */
  html.sinvec-mobile-internal .header-main,
  html.sinvec-mobile-internal .header-main.on-white,
  html.sinvec-mobile-magnet.sinvec-mobile-internal .header-main,
  html.sinvec-mobile-magnet.sinvec-mobile-internal .header-main.on-white {
    box-sizing: border-box !important;
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    height: 53px !important;
    min-height: 53px !important;
    max-height: 53px !important;
    padding: 8px 10px 8px 11px !important;
    background: rgba(22,22,24,.36) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.25) !important;
    backdrop-filter: blur(13px) saturate(1.25) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.11) !important;
    transition: none !important;
  }
  /* Una única capa interior: las variaciones del fondo no alteran el marco. */
  html.sinvec-mobile-internal .header-main::before {
    background: rgba(255,255,255,.035) !important;
  }

  /* Recuperar la ubicación original del Back flotante: inferior izquierda.
     Se mantiene detrás su desenfoque glass; no es un bloque opaco. */
  .white-section > .sinvec-fixed-back,
  .white-section > .sinvec-fixed-back.white-back,
  .white-section > .sinvec-fixed-back.sinvec-about-back {
    position: absolute !important;
    inset: auto auto max(20px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left)) !important;
    top: auto !important;
    right: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    left: max(20px, env(safe-area-inset-left)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 119px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 19px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 999px !important;
    background: rgba(25,25,27,.36) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.3) !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .15em !important;
    transform: none !important;
    z-index: 135 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  .white-section > .sinvec-fixed-back .white-back-arrow {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transform: none !important;
  }
  /* No reutilizar el movimiento hover al tocar una píldora en Android. */
  .white-section > .sinvec-fixed-back:hover {
    transform: none !important;
  }

  /* La circunferencia controla el centro: los SVG no dependen de la
     línea base del texto ni del espacio de la cuadrícula. */
  .white-section :is(.ws-hero-side-arrow,.ws-project-arrow,.wap-card-arrow) {
    box-sizing: border-box !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    line-height: 0 !important;
  }
  .white-section :is(.ws-hero-side-arrow,.ws-project-arrow,.wap-card-arrow) svg {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    max-width: none !important;
    transform: translateX(-1px) !important; /* centrado óptico de la punta */
  }
  .white-section .ws-hero-side:hover .ws-hero-side-arrow,
  .white-section .ws-project:hover .ws-project-arrow {
    transform: none !important;
  }
  .white-section .wap-card:hover .wap-card-arrow {
    transform: translateY(-50%) !important;
  }
  .white-section .wap-card:hover .wap-card-arrow svg {
    transform: translateX(-1px) !important;
  }
}


/* V6.206 — mobile hero polish only: keep header glass, center arrow icons,
   hide the 08/08 counter and lower the service copy slightly. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .header-main,
  html.sinvec-mobile-magnet .header-main.on-white,
  html.sinvec-mobile-scroll .header-main,
  html.sinvec-mobile-scroll .header-main.on-white {
    background: rgba(20,20,23,.28) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.28) !important;
    backdrop-filter: blur(18px) saturate(1.28) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.16) !important;
  }
  html.sinvec-mobile-magnet .header-main::before,
  html.sinvec-mobile-scroll .header-main::before {
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-service-count,
  html.sinvec-mobile-scroll .sinvec-lite-service-count,
  html.sinvec-mobile-magnet .sinvec-lite-service-count {
    display: none !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-service-info,
  html.sinvec-mobile-scroll .sinvec-lite-service-info,
  html.sinvec-mobile-magnet .sinvec-lite-service-info {
    bottom: max(94px, calc(env(safe-area-inset-bottom) + 84px)) !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-service-info p,
  html.sinvec-mobile-scroll .sinvec-lite-service-info p,
  html.sinvec-mobile-magnet .sinvec-lite-service-info p {
    margin: 14px 0 18px !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-cta-row,
  html.sinvec-mobile-scroll .sinvec-lite-cta-row,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row {
    gap: 10px !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-cta-row .sinvec-lite-icon-btn,
  html.sinvec-mobile-scroll .sinvec-lite-cta-row .sinvec-lite-icon-btn,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row .sinvec-lite-icon-btn {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 0 !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-cta-row .sinvec-lite-icon-btn svg,
  html.sinvec-mobile-scroll .sinvec-lite-cta-row .sinvec-lite-icon-btn svg,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row .sinvec-lite-icon-btn svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    overflow: visible;
    flex: none;
  }
  html.sinvec-mobile-lite .sinvec-lite-cta-row .sinvec-lite-icon-btn path,
  html.sinvec-mobile-scroll .sinvec-lite-cta-row .sinvec-lite-icon-btn path,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row .sinvec-lite-icon-btn path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}


/* SINVEC V6.207 — MOBILE-ONLY finishing corrections (18 October 2026).
   Do not change the desktop layout, video sources, magnetic scene runtime or glass.
   Specificity overrides the accumulated legacy responsive rules above. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (pointer:fine) and (hover:hover) {
  /* Process sequence: number the four cards, with no numbers on desktop. */
  html.sinvec-mobile-lite .white-section .ws-team--service-process .ws-team-pillars {
    counter-reset: sinvec-process-step;
  }
  html.sinvec-mobile-lite .white-section .ws-team--service-process .ws-team-pillar {
    position: relative;
    counter-increment: sinvec-process-step;
    padding: 24px 56px 24px 20px !important;
  }
  html.sinvec-mobile-lite .white-section .ws-team--service-process .ws-team-pillar::before {
    content: counter(sinvec-process-step, decimal-leading-zero);
    position: absolute;
    top: 23px;
    right: 19px;
    font: 500 12px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: .12em;
    color: rgba(255,255,255,.47);
    pointer-events: none;
  }
  html.sinvec-mobile-lite .white-section .ws-team--service-process .ws-team-pillar-title {
    padding: 0;
    margin-top: 0;
  }

  /* Stable alignment at the bottom of the mobile stage, including tall phones. */
  html.sinvec-mobile-lite .sinvec-lite-service-info,
  html.sinvec-mobile-scroll .sinvec-lite-service-info,
  html.sinvec-mobile-magnet .sinvec-lite-service-info {
    bottom: max(45px, calc(env(safe-area-inset-bottom) + 43px)) !important;
    left: clamp(18px, 5.4vw, 26px) !important;
    right: clamp(18px, 5.4vw, 26px) !important;
    min-width: 0 !important;
  }
  html.sinvec-mobile-magnet .sinvec-lite-service-info h2 {
    font-size: clamp(28px, 7.9vw, 43px) !important;
    line-height: 1.03 !important;
    margin: 0 !important;
    letter-spacing: -.035em;
    max-width: 100%;
  }
  html.sinvec-mobile-magnet .sinvec-lite-service-info p {
    font-size: clamp(11px, 2.9vw, 12px) !important;
    margin: 12px 0 17px !important;
  }

  /* Buttons must size to their content, not expand to occupy the row. */
  html.sinvec-mobile-lite .sinvec-lite-cta-row,
  html.sinvec-mobile-scroll .sinvec-lite-cta-row,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(8px, 2.1vw, 11px) !important;
    width: max-content !important;
    max-width: 100% !important;
  }
  html.sinvec-mobile-lite .sinvec-lite-cta-row button,
  html.sinvec-mobile-scroll .sinvec-lite-cta-row button,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row button {
    box-sizing: border-box !important;
    min-height: 45px !important;
    height: 45px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  html.sinvec-mobile-magnet .sinvec-lite-cta-row #sinvecLiteDetails {
    width: auto !important;
    max-width: calc(100vw - 152px) !important;
    flex-basis: auto !important;
    padding: 0 clamp(12px, 3.4vw, 16px) !important;
    font-size: clamp(11px, 3.1vw, 12px) !important;
    font-weight: 600;
  }
  html.sinvec-mobile-magnet .sinvec-lite-cta-row .sinvec-lite-icon-btn,
  html.sinvec-mobile-lite .sinvec-lite-cta-row .sinvec-lite-icon-btn {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    height: 45px !important;
    min-height: 45px !important;
    flex: 0 0 45px !important;
    padding: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 0 !important;
  }
  html.sinvec-mobile-magnet .sinvec-lite-cta-row .sinvec-lite-icon-btn svg {
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
  }

  /* Remove the Android tap flash (not the accessible keyboard focus ring). */
  html.sinvec-mobile-lite,
  html.sinvec-mobile-lite *,
  html.sinvec-mobile-lite *::before,
  html.sinvec-mobile-lite *::after {
    -webkit-tap-highlight-color: transparent !important;
  }
  html.sinvec-mobile-lite :is(button, a, [role="button"], input, select, textarea):focus:not(:focus-visible) {
    outline: none !important;
  }
  html.sinvec-mobile-lite :is(button, a, [role="button"]):focus-visible {
    outline: 2px solid rgba(255,255,255,.85) !important;
    outline-offset: 3px !important;
  }
}

/* At very narrow widths, leave the CTA and both circular controls on one line. */
@media (max-width: 350px) and (pointer: coarse), (max-width: 350px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .sinvec-lite-cta-row #sinvecLiteDetails {
    padding-inline: 10px !important;
    font-size: 10.5px !important;
  }
  html.sinvec-mobile-magnet .sinvec-lite-cta-row .sinvec-lite-icon-btn {
    width: 41px !important;
    min-width: 41px !important;
    max-width: 41px !important;
    height: 43px !important;
    min-height: 43px !important;
    flex-basis: 41px !important;
  }
}


/* ===================================================================
   V6.208 | GLASS PERSISTENTE — SOLO PANTALLAS TÁCTILES
   Mantiene la misma apariencia en reposo y durante scroll magnético.
   No afecta CSS/animación de escritorio ni los videos originales.
   =================================================================== */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  /* El header siempre tiene fondo translúcido + desenfoque, incluso .in-motion. */
  html.sinvec-mobile-lite .header-main,
  html.sinvec-mobile-lite .header-main.on-white,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion .header-main,
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning .header-main {
    background:rgba(24,25,29,.26)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.24)!important;
    backdrop-filter:blur(12px) saturate(1.24)!important;
    box-shadow:0 9px 25px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.11)!important;
  }
  html.sinvec-mobile-lite .header-main::before {
    opacity:1!important;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.017))!important;
  }
  /* Controles del hero: misma fórmula glass sin tamaños ni posiciones nuevas. */
  html.sinvec-mobile-lite .sinvec-mobile-services-toggle,
  html.sinvec-mobile-lite .sinvec-lite-cta-row button,
  html.sinvec-mobile-magnet .sinvec-mobile-services-toggle,
  html.sinvec-mobile-magnet .sinvec-lite-cta-row button {
    background:rgba(29,30,34,.20)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.40)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.18)!important;
    backdrop-filter:blur(10px) saturate(1.18)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.11)!important;
  }
  /* El menú desplegado y el Back mantienen también su material translúcido. */
  html.sinvec-mobile-lite .nav-services,
  html.sinvec-mobile-lite .nav-services.on-white,
  html.sinvec-mobile-magnet .nav-services,
  html.sinvec-mobile-magnet .nav-services.on-white {
    background:rgba(22,23,27,.68)!important;
    -webkit-backdrop-filter:blur(13px) saturate(1.2)!important;
    backdrop-filter:blur(13px) saturate(1.2)!important;
    border:1px solid rgba(255,255,255,.23)!important;
  }
  html.sinvec-mobile-lite .white-section > .sinvec-fixed-back,
  html.sinvec-mobile-lite .white-section > .sinvec-fixed-back.white-back,
  html.sinvec-mobile-lite .white-section > .sinvec-fixed-back.sinvec-about-back {
    background:rgba(26,27,31,.26)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.2)!important;
    backdrop-filter:blur(12px) saturate(1.2)!important;
    border-color:rgba(255,255,255,.32)!important;
    box-shadow:0 7px 23px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.1)!important;
  }
}

/* V6.209 — MOBILE-ONLY: orderly portfolio filters and compact ASTRA badges.
   Filter event handlers and desktop portfolio/case-study styles are untouched. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (pointer:fine) and (hover:hover) {
  /* Nine filters: three equal columns, deliberately three aligned rows.
     No irregular orphaned final pill or variable-width wrapping. */
  html.sinvec-mobile-lite #viewAllProjectsPage .wap-filters {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: calc(100% - 36px) !important;
    max-width: 480px !important;
    padding: 0 !important;
    margin: 0 auto 30px !important;
  }
  html.sinvec-mobile-lite #viewAllProjectsPage .wap-filters .wap-pill {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    font: 500 clamp(9px, 2.45vw, 11px)/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
    text-align: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.025);
    -webkit-tap-highlight-color: transparent;
  }
  html.sinvec-mobile-lite #viewAllProjectsPage .wap-filters .wap-pill.active {
    background: #fff !important;
    border-color: #fff !important;
    color: #090909 !important;
  }
  /* Mirror the restrained, single-row desktop treatment for ASTRA tags. */
  html.sinvec-mobile-lite .white-section.synex-page .syx-tags {
    box-sizing: border-box !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 19px auto 0 !important;
    padding: 0 2px !important;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-tag {
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px clamp(5px, 1.4vw, 8px) !important;
    border-radius: 999px !important;
    font-size: clamp(7px, 1.95vw, 9px) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: .045em !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}
@media (max-width: 350px) and (pointer: coarse), (max-width: 350px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-lite .white-section.synex-page .syx-tags { gap: 4px !important; }
  html.sinvec-mobile-lite .white-section.synex-page .syx-tag {
    padding-inline: 4px !important;
    font-size: 7px !important;
    letter-spacing: .012em !important;
  }
}


/* V6.210 — All portfolio case-study pages share the compact responsive tags.
   Four-tag projects use two balanced rows rather than overflowing a narrow phone. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-lite .white-section.synex-page .syx-tags:has(> .syx-tag:nth-child(4)) {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:min(100%,480px)!important;
    gap:6px!important;
    justify-items:stretch!important;
    padding:0 2px!important;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-tags:has(> .syx-tag:nth-child(4)) .syx-tag {
    width:100%!important;
    max-width:none!important;
    white-space:normal!important;
    line-height:1.25!important;
    overflow-wrap:break-word!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
}


/* SINVEC V6.211 — ONE MOBILE ROW for project process cards.
   Applies to every case-study in the portfolio, only on touch screens.
   Native horizontal scrolling avoids a JS carousel and preserves vertical
   page scrolling, the glass appearance and the desktop 3-column grid. */
@media (max-width:900px) and (pointer:coarse), (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-lite .white-section.synex-page .syx-process {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 0 34px !important;
    overflow:hidden;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-process-title {
    padding:0 clamp(18px,5vw,28px) !important;
    margin-bottom:20px !important;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-process-cards {
    box-sizing:border-box !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:clamp(10px,3vw,16px) !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:2px clamp(18px,5vw,28px) 18px !important;
    margin:0 !important;
    scroll-padding-inline:clamp(18px,5vw,28px);
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.26) transparent;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-process-cards > .syx-card {
    box-sizing:border-box !important;
    flex:0 0 min(78vw,340px) !important;
    width:min(78vw,340px) !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:310px !important;
    height:auto !important;
    margin:0 !important;
    padding:clamp(19px,5vw,25px) !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    border-radius:22px !important;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-card-title {
    font-size:clamp(25px,6.4vw,32px) !important;
    margin:31px 0 20px !important;
    line-height:1.12 !important;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-card-tags {
    gap:7px !important;
  }
  html.sinvec-mobile-lite .white-section.synex-page .syx-card-tag {
    padding:8px 12px !important;
    font-size:clamp(10px,2.8vw,12px) !important;
    line-height:1.25 !important;
    overflow-wrap:anywhere;
  }
}


/* V6.214 — desktop-window responsive renderer: the same styles as touch devices.
   Wide desktop and phone media remain untouched. Hide the dormant mobile overlay
   when returning to the expanded PC view (no page navigation or reload). */
@media (min-width:901px) and (pointer:fine) {
  html .sinvec-lite-surface, html .sinvec-mobile-services-toggle {display:none!important;}
}
@media (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-desktop-narrow .sinvec-lite-service-info {pointer-events:none;}
  html.sinvec-desktop-narrow .sinvec-lite-cta-row {pointer-events:auto;}
  html.sinvec-desktop-narrow .sinvec-lite-touch-zone {pointer-events:none!important;}
  html.sinvec-desktop-narrow .sinvec-mobile-services-toggle {cursor:pointer;}
}

/* V6.215 — fine-pointer compact view uses the SAME control geometry as Android.
   Retain accessible keyboard focus on mouse/keyboard, not a fake touch mode. */
@media (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-desktop-narrow .sinvec-lite-cta-row .sinvec-lite-icon-btn {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:45px!important;min-width:45px!important;max-width:45px!important;
    height:45px!important;min-height:45px!important;flex:0 0 45px!important;
    padding:0!important;line-height:0!important;box-sizing:border-box!important;
  }
  html.sinvec-desktop-narrow .sinvec-lite-cta-row .sinvec-lite-icon-btn svg {
    display:block!important;width:17px!important;height:17px!important;
    flex:none!important;overflow:visible!important;visibility:visible!important;
  }
  html.sinvec-desktop-narrow .sinvec-lite-cta-row .sinvec-lite-icon-btn svg path {
    fill:none!important;stroke:currentColor!important;stroke-width:2.1!important;
    stroke-linecap:round;stroke-linejoin:round;
  }
  html.sinvec-desktop-narrow .sinvec-lite-cta-row {
    display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
    justify-content:flex-start!important;gap:8px!important;width:max-content!important;max-width:100%!important;
  }
  html.sinvec-desktop-narrow .sinvec-lite-service-info {
    bottom:max(76px,calc(env(safe-area-inset-bottom) + 72px))!important;
    left:clamp(16px,5.4vw,26px)!important;right:clamp(16px,5.4vw,26px)!important;
  }
  html.sinvec-desktop-narrow .sinvec-lite-service-info h2 {
    font-size:clamp(26px,8vw,44px)!important;line-height:1.02!important;
    overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;
  }
  html.sinvec-desktop-narrow .sinvec-lite-service-info p {margin:13px 0 17px!important;}
  html.sinvec-desktop-narrow .sinvec-lite-cta-row #sinvecLiteDetails {
    width:auto!important;min-width:0!important;max-width:calc(100vw - 145px)!important;
    flex:0 1 auto!important;white-space:nowrap!important;
  }
  html.sinvec-desktop-narrow .sinvec-mobile-services-toggle,
  html.sinvec-desktop-narrow .sinvec-lite-cta-row button {cursor:pointer;}
}
@media (max-width:350px) and (pointer:fine) and (hover:hover) {
  html.sinvec-desktop-narrow .sinvec-lite-cta-row {gap:5px!important;}
  html.sinvec-desktop-narrow .sinvec-lite-cta-row .sinvec-lite-icon-btn {
    width:40px!important;min-width:40px!important;max-width:40px!important;
    height:42px!important;min-height:42px!important;flex-basis:40px!important;
  }
}

/* V6.219 — prevent selection while mouse-dragging the camera only. */
html.sinvec-dragging .hero-container,
html.sinvec-dragging .hero-container * {user-select:none!important;-webkit-user-select:none!important;}

/* V6.220 — phone-only: horizontal swipe is handled by the same magnetic stage.
   Avoid accidental horizontal browser overscroll without touching desktop. */
@media (max-width:900px) and (pointer:coarse) {
  html.sinvec-mobile-magnet,
  html.sinvec-mobile-magnet body { overscroll-behavior-x: contain; }
  html.sinvec-mobile-magnet .sinvec-lite-touch-zone {touch-action:none;}
  /* Keep translation options above the hero and reachable on Android. */
  html.sinvec-mobile-magnet .sinvec-language-offer:not([hidden]) {
    display:block!important; z-index:570!important; pointer-events:auto!important;
  }
}

/* V6.222: user-supplied vertical service videos for responsive camera stops.
   Media loads only when a service is reached; it is removed during travel.
   No desktop camera or main video styles are modified. */
@media (max-width:900px) and (pointer:coarse),
       (max-width:900px) and (pointer:fine) and (hover:hover) {
  html.sinvec-mobile-magnet .sinvec-mobile-service-preview {
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    pointer-events:none;
    display:block;
    opacity:0;
    visibility:hidden;
    transition:opacity 140ms ease;
  }
  html.sinvec-mobile-magnet .sinvec-mobile-service-preview.is-playing {
    opacity:1;
    visibility:visible;
  }
  /* The camera foreground is behind the preview, and the overlays remain
     above both. Preserve the existing buttons, glass and touch gestures. */
  html.sinvec-mobile-magnet .sinvec-lite-intro { z-index:3; }
  html.sinvec-mobile-magnet .sinvec-magnet-surface::after { z-index:4; }
  html.sinvec-mobile-magnet .sinvec-lite-touch-zone { z-index:5; }
  html.sinvec-mobile-magnet .sinvec-lite-service-info { z-index:6; }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce) {
  html.sinvec-mobile-magnet .sinvec-mobile-service-preview {transition:none;}
}

/* V6.224 — desktop mouse only: use the OS-native grabbing cursor while
   holding the button on a service scene. Hero remains a normal pointer.
   No touch/responsive styling is changed. */
@media (pointer:fine) {
  html.sinvec-drag-pressed,
  html.sinvec-drag-pressed body,
  html.sinvec-drag-pressed body * {
    cursor: grabbing !important;
  }
  html.sinvec-drag-pressed,
  html.sinvec-drag-pressed body,
  html.sinvec-drag-pressed .hero-container,
  html.sinvec-drag-pressed .hero-container * {
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}

/* V6.224 — one fullscreen video layer at a time on phone/narrow-PC. */
@media (max-width:900px) {
  html.sinvec-mobile-magnet .sinvec-magnet-surface:has(.sinvec-mobile-service-preview.is-playing) .sinvec-magnet-motion {
    visibility:hidden !important;
  }
}
/* Navigation swaps happen only under a fully opaque veil, even on slow GPUs. */
@media (min-width:901px), (pointer:fine) {
  .internal-fade-transition.sinvec-switch-cover::after {
    content:''; position:absolute; inset:0; background:#080808;
    z-index:2; pointer-events:none; opacity:1;
    animation:sinvec-switch-cover-out .28s ease-out .04s both;
  }
}
@keyframes sinvec-switch-cover-out {
  from {opacity:1} to {opacity:0}
}

/* V6.234: drag uses the HQ still compositor only; no second video surface. */
html.sinvec-progress-pressed, html.sinvec-progress-pressed .hero-container {cursor:grabbing;}
html.sinvec-progress-active .hero-ui {opacity:0!important;visibility:hidden!important;}


/* V6.228 — native Windows/browser closed-hand cursor while mouse button is held
   on a service scene. This class is never applied for the hero or controls. */
@media (pointer:fine) {
  html.sinvec-progress-pressed,
  html.sinvec-progress-pressed body,
  html.sinvec-progress-pressed body * { cursor:grabbing !important; }
  html.sinvec-progress-pressed,
  html.sinvec-progress-pressed body {
    user-select:none !important;
    -webkit-user-select:none !important;
  }
}


/* V6.230 high-quality scrub compositor. Noninteractive layer above the camera;
   no additional live video decoder, no full-screen blur during movement. */
.sinvec-hq-preview { position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none!important; overflow:hidden; opacity:0; visibility:hidden;
  contain:paint; transition:none!important; }
.sinvec-hq-preview.sinvec-hq-visible {opacity:1; visibility:visible;}
.sinvec-hq-preview .sinvec-hq-canvas {position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;user-select:none;transform:translateZ(0);
  backface-visibility:hidden;contain:strict;}
.sinvec-hq-preview.sinvec-hq-desktop {z-index:8;}
.sinvec-hq-preview.sinvec-hq-mobile {z-index:3;}
@media (max-width:900px){
  .sinvec-hq-preview.sinvec-hq-desktop {display:none!important;}
}
html.sinvec-mobile-internal .sinvec-hq-preview,
body.footer-scene-active .sinvec-hq-preview {pointer-events:none!important;}

/* V6.232: prevent any cross-fade of complete camera frames. Each decoded
   frame replaces the previous one atomically; screenshots never overlap. */
.sinvec-hq-preview .sinvec-hq-canvas {transition:none!important;mix-blend-mode:normal!important;}

/* V6.232 — no floating service menu over the active camera scrub. The menu
   returns at magnetic rest; links and touch controls are otherwise unchanged. */
@media (pointer:fine) {
  html.sinvec-progress-active .nav-services,
  html.sinvec-progress-active .nav-services.visible {
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:none!important;
  }
}

/* V6.233: no new hover/click interactions while the camera is under scrub control.
   The image sequence, canvas and monitor videos must never compete for input. */
html.sinvec-progress-active .tv-hover-container,
html.sinvec-progress-active .tv-hover-container * {pointer-events:none!important;}
\n\n/* V6.244 — RESPONSIVE DESKTOP ONLY.\n   The expanded (>900px) desktop remains byte-for-byte governed by the earlier\n   selectors. In compact fine-pointer mode UI controls sit above the camera and\n   always own their pointer/click. */\n@media (max-width:900px) and (pointer:fine) and (hover:hover) {\n  html.sinvec-desktop-narrow #headerMain {z-index:1200!important;pointer-events:auto!important;}\n  html.sinvec-desktop-narrow #headerMain a,\n  html.sinvec-desktop-narrow #headerMain button,\n  html.sinvec-desktop-narrow #headerMain .site-language-switch {pointer-events:auto!important;}\n  html.sinvec-desktop-narrow #sinvecMobileServicesToggle {z-index:1201!important;pointer-events:auto!important;}\n  html.sinvec-desktop-narrow #navServices {z-index:1200!important;}\n  html.sinvec-desktop-narrow #navServices.sinvec-mobile-open,\n  html.sinvec-desktop-narrow #navServices.sinvec-mobile-open li {pointer-events:auto!important;}\n  html.sinvec-desktop-narrow .sinvec-lite-service-info {z-index:30!important;pointer-events:none!important;}\n  html.sinvec-desktop-narrow .sinvec-lite-cta-row,\n  html.sinvec-desktop-narrow .sinvec-lite-cta-row button {pointer-events:auto!important;position:relative;}\n  html.sinvec-desktop-narrow .sinvec-lite-cta-row {z-index:31!important;}\n  html.sinvec-desktop-narrow .sinvec-cookie-banner,\n  html.sinvec-desktop-narrow .sinvec-language-offer {z-index:2200!important;pointer-events:auto!important;}\n  html.sinvec-desktop-narrow .sinvec-cookie-banner *,\n  html.sinvec-desktop-narrow .sinvec-language-offer * {pointer-events:auto;}\n}\n
/* V6.254 — consent/language controls must remain explicit on native Android. */
.sinvec-cookie-actions .sinvec-notice-link-button{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #6a6a6a;border-radius:30px;min-height:43px;padding:10px 16px;
  background:transparent;color:#fff;text-decoration:none!important;cursor:pointer;font-weight:600;
}
.sinvec-cookie-actions .sinvec-notice-link-button:hover{border-color:rgba(255,255,255,.85)}
@media(max-width:680px){.sinvec-cookie-actions .sinvec-notice-link-button{flex:1}}
@media (max-width:900px) and (pointer:coarse) {
  html.sinvec-mobile-magnet .header-main .header-actions,
  html.sinvec-mobile-lite .header-main .header-actions {display:flex!important;visibility:visible!important;opacity:1!important;}
  html.sinvec-mobile-magnet .site-language-switch,
  html.sinvec-mobile-lite .site-language-switch {display:flex!important;visibility:visible!important;opacity:1!important;position:relative;z-index:2;}
  html.sinvec-mobile-magnet .sinvec-cookie-banner,
  html.sinvec-mobile-lite .sinvec-cookie-banner {z-index:2200!important;pointer-events:auto!important;}
  html.sinvec-mobile-magnet .sinvec-cookie-banner *,
  html.sinvec-mobile-lite .sinvec-cookie-banner * {pointer-events:auto;}
  html.sinvec-mobile-magnet .sinvec-language-offer:not([hidden]),
  html.sinvec-mobile-lite .sinvec-language-offer:not([hidden]) {z-index:2210!important;pointer-events:auto!important;}
}


/* V6.256 — unified consent layout; desktop, narrow desktop, and native phone. */
.sinvec-cookie-banner {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(18px,3vw,42px);
  row-gap:16px;
  padding:clamp(22px,2.4vw,30px);
}
.sinvec-cookie-copy {min-width:0;padding-right:16px;}
.sinvec-cookie-copy strong {display:block;line-height:1.3;letter-spacing:-.018em;}
.sinvec-cookie-copy p {margin:8px 0 0;overflow-wrap:break-word;}
.sinvec-cookie-actions {
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  min-width:0;max-width:100%;flex-wrap:wrap;
}
.sinvec-cookie-actions > button,
.sinvec-cookie-actions > .sinvec-notice-link-button {
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  min-width:148px;max-width:100%;min-height:46px;
  padding:11px 18px;border-radius:13px;
  font-weight:600;
  font-family:inherit;font-size:13px;line-height:1.35;
  text-align:center;white-space:normal;overflow-wrap:anywhere;
  text-decoration:none;
}
.sinvec-terms-banner .sinvec-cookie-actions [data-terms-accept] {
  background:#f5f5f5;color:#111;border-color:#f5f5f5;
}
.sinvec-cookie-banner .sinvec-notice-close {right:12px;top:12px;}
@media (max-width:960px) {
  .sinvec-cookie-banner {grid-template-columns:minmax(0,1fr);gap:16px;}
  .sinvec-cookie-copy {padding-right:30px;}
  .sinvec-cookie-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px;}
  .sinvec-cookie-actions > button,.sinvec-cookie-actions > .sinvec-notice-link-button {width:100%;min-width:0;}
}
@media (max-width:480px) {
  .sinvec-cookie-banner {padding:19px 16px 16px;gap:14px;max-height:min(68dvh,460px);}
  .sinvec-cookie-actions {gap:8px;}
  .sinvec-cookie-actions > button,.sinvec-cookie-actions > .sinvec-notice-link-button {padding:10px 8px;min-height:44px;font-size:12px;}
}
@media (max-width:340px) {
  .sinvec-cookie-actions {grid-template-columns:minmax(0,1fr);}
}
/* ============================================================================
   SINVEC V6.260 — canonical legal-consent glass (cookies + Review Terms)
   The former V6.257 solid white and V6.258/V6.259 overrides were removed.
   This is a deliberately TRANSLUCENT neutral glass, never an opaque gray panel.
   Backdrop blur is restricted to the card, not the hero or full viewport.
   ============================================================================ */
.sinvec-cookie-banner,
.sinvec-cookie-banner.sinvec-terms-banner {
  /* One non-opaque, neutral graphite surface. The scene is visible behind it. */
  background:linear-gradient(124deg,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.035) 43%,
    rgba(255,255,255,.09) 100%)!important;
  background-color:rgba(15,18,23,.38)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:22px!important;
  color:#fff!important;
  box-shadow:0 18px 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
  isolation:isolate;
  /* A filter/opacity animation on the parent spoiled the clarity of the glass. */
  animation:none!important;
  filter:none!important;
  transform:none!important;
  overflow:hidden;
}
.sinvec-cookie-banner::before,
.sinvec-cookie-banner.sinvec-terms-banner::before {
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(110deg,rgba(255,255,255,.12),transparent 42%,rgba(255,255,255,.035))!important;
}
.sinvec-cookie-banner .sinvec-cookie-copy strong {color:#fff!important;font-weight:650;}
.sinvec-cookie-banner .sinvec-cookie-copy p {color:rgba(255,255,255,.86)!important;line-height:1.52;}
.sinvec-cookie-banner .sinvec-cookie-copy a {
  color:#fff!important;
  text-decoration-color:rgba(255,255,255,.65)!important;
}
.sinvec-cookie-banner .sinvec-notice-close {
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:none!important;
  transform:none!important;
}
.sinvec-cookie-banner .sinvec-notice-close:hover {
  background:rgba(255,255,255,.27)!important;
  color:#fff!important;
  box-shadow:none!important;
  transform:none!important;
}
/* Actions: hover changes ONLY color. No shadow, scale, translation or blur. */
.sinvec-cookie-banner .sinvec-cookie-actions > button,
.sinvec-cookie-banner .sinvec-cookie-actions > .sinvec-notice-link-button {
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:13px!important;
  box-shadow:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
  transition:background-color .17s ease,color .17s ease,border-color .17s ease!important;
}
.sinvec-cookie-banner .sinvec-cookie-actions > button[data-cookie-accept],
.sinvec-cookie-banner .sinvec-cookie-actions > button[data-terms-accept] {
  background:rgba(255,255,255,.96)!important;
  color:#15181d!important;
  border-color:rgba(255,255,255,.96)!important;
}
.sinvec-cookie-banner .sinvec-cookie-actions > button:hover,
.sinvec-cookie-banner .sinvec-cookie-actions > .sinvec-notice-link-button:hover {
  background:rgba(255,255,255,.90)!important;
  color:#13161b!important;
  border-color:rgba(255,255,255,.90)!important;
  box-shadow:none!important;
  transform:none!important;
}
.sinvec-cookie-banner .sinvec-cookie-actions > button[data-cookie-accept]:hover,
.sinvec-cookie-banner .sinvec-cookie-actions > button[data-terms-accept]:hover {
  background:#292e35!important;
  color:#fff!important;
  border-color:#292e35!important;
  box-shadow:none!important;
  transform:none!important;
}
.sinvec-cookie-banner .sinvec-cookie-actions > button:active,
.sinvec-cookie-banner .sinvec-cookie-actions > .sinvec-notice-link-button:active {
  transform:none!important;
  box-shadow:none!important;
}
.sinvec-cookie-banner .sinvec-cookie-actions > button:focus-visible,
.sinvec-cookie-banner .sinvec-notice-close:focus-visible,
.sinvec-cookie-banner .sinvec-notice-link-button:focus-visible {
  outline:2px solid #fff!important;outline-offset:3px;
}
/* Keep the same glass in native phone + compact desktop with mouse. */
html.sinvec-mobile-lite .sinvec-cookie-banner,
html.sinvec-mobile-magnet .sinvec-cookie-banner,
html.sinvec-desktop-narrow .sinvec-cookie-banner {
  background:linear-gradient(124deg,
    rgba(255,255,255,.15),rgba(255,255,255,.035) 43%,rgba(255,255,255,.09))!important;
  background-color:rgba(15,18,23,.38)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  border-color:rgba(255,255,255,.36)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .sinvec-cookie-banner,
  .sinvec-cookie-banner.sinvec-terms-banner,
  html.sinvec-mobile-lite .sinvec-cookie-banner,
  html.sinvec-desktop-narrow .sinvec-cookie-banner {
    background:rgba(21,24,29,.95)!important;
  }
}
@media(max-width:960px){
  .sinvec-cookie-banner {max-width:calc(100vw - 24px);}
}


/* V6.261 — reserve a distinct close-button gutter on wide screens.
   The X floats in the top-right of each glass notice; action buttons must
   never sit immediately underneath or alongside its hit target. The mobile
   single-column arrangement is already vertically separated and stays intact. */
@media (min-width:961px) {
  .sinvec-cookie-banner,
  .sinvec-cookie-banner.sinvec-terms-banner {
    padding-right:clamp(72px,7vw,88px);
  }
  .sinvec-cookie-banner .sinvec-cookie-actions {
    column-gap:12px;
  }
}

/* V6.267 — keyboard-only focus, same surfaces and visual identity. */
.wap-card:focus-visible,.ws-project:focus-visible,
#synexWebCard:focus-visible,#webHeroCard:focus-visible,
[data-service-feature]:focus-visible {
  outline:2px solid rgba(255,255,255,.92);
  outline-offset:4px;
}


/* V6.268 — native Android: stable chrome in EVERY camera and internal state.
   Neither the scroll nor the glass compositor can switch header centering. */
@media (max-width:900px) and (pointer:coarse) {
  html.sinvec-mobile-magnet #headerMain,
  html.sinvec-mobile-magnet.sinvec-mobile-internal #headerMain,
  html.sinvec-mobile-magnet.sinvec-mobile-in-motion #headerMain,
  html.sinvec-mobile-magnet.sinvec-mobile-transitioning #headerMain,
  html.sinvec-mobile-lite #headerMain {
    position:fixed!important;
    top:max(10px,env(safe-area-inset-top))!important;
    left:50%!important;
    right:auto!important;
    width:calc(100% - 20px)!important;
    max-width:none!important;
    min-height:53px!important;
    height:53px!important;
    max-height:53px!important;
    padding:8px 10px 8px 11px!important;
    margin:0!important;
    -webkit-transform:translate3d(-50%,0,0)!important;
    transform:translate3d(-50%,0,0)!important;
    transition:opacity .25s ease,visibility .25s ease!important;
    z-index:1250!important;
    pointer-events:auto!important;
  }
  html.sinvec-mobile-magnet #headerMain .header-actions,
  html.sinvec-mobile-lite #headerMain .header-actions,
  html.sinvec-mobile-magnet #headerMain .site-language-switch,
  html.sinvec-mobile-lite #headerMain .site-language-switch {
    display:flex!important;visibility:visible!important;opacity:1!important;
    flex:0 0 auto!important;pointer-events:auto!important;
  }
  html.sinvec-mobile-magnet #headerMain .site-language-switch button,
  html.sinvec-mobile-lite #headerMain .site-language-switch button {
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:28px!important;min-height:29px!important;
  }
  html.sinvec-mobile-magnet .sinvec-cookie-banner,
  html.sinvec-mobile-magnet .sinvec-language-offer,
  html.sinvec-mobile-lite .sinvec-cookie-banner,
  html.sinvec-mobile-lite .sinvec-language-offer {z-index:2400!important;}
}
/* On narrow native phones, prioritize a visible language switch and stable logo.
   Home/Work/About remain available through the services drawer. */
@media (max-width:420px) and (pointer:coarse) {
  html.sinvec-mobile-magnet #headerMain .header-links,
  html.sinvec-mobile-lite #headerMain .header-links {gap:5px;flex:1;min-width:0;justify-content:center;}
  html.sinvec-mobile-magnet #headerMain .header-links a,
  html.sinvec-mobile-lite #headerMain .header-links a {font-size:clamp(8px,2.3vw,10px);}
  html.sinvec-mobile-magnet #headerMain .logo,
  html.sinvec-mobile-lite #headerMain .logo {flex:0 1 84px;min-width:65px;}
}
.sinvec-mobile-privacy-button,.sinvec-mobile-privacy-menu{display:none!important;}
/* Media fallback for services 03-08 and case studies in every environment.
   These are real <img> sources, not solely lazy CSS background images. */
.sinvec-media-container {position:relative;}
.sinvec-media-container > img.sinvec-media-image {
  position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;max-height:none;object-fit:cover;object-position:center;
  z-index:0;pointer-events:none;opacity:1;
}
.sinvec-media-container.sinvec-media-contain > img.sinvec-media-image {
  object-fit:contain;
}
.sinvec-media-container > :not(img.sinvec-media-image) {
  position:relative;z-index:2;
}
.sinvec-media-container.ws-hero-banner::after {z-index:1;}
.sinvec-media-container > img.sinvec-media-image[hidden] {display:none!important;}


/* SINVEC V6.274 — parity with the native 1440x768 desktop reference.
   Android's "Desktop site" uses a 1440 CSS px viewport. All camera overlay
   typography, spacing and positions use the SAME values as native desktop.
   Only the fixed stage is centered in the extra portrait space. */
html.sinvec-desktop-requested {
  --sinvec-stage-top:0px;
  --sinvec-stage-height:768px;
  --sinvec-stage-right:56px;
  --sinvec-menu-service-top:245.76px;
  background:#000;
  touch-action:auto;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
html.sinvec-desktop-requested body {
  width:100%;overflow-x:hidden;overflow-y:hidden;
  touch-action:auto;background:#000;
}
html.sinvec-desktop-requested .hero-container,
html.sinvec-desktop-requested .white-section,
html.sinvec-desktop-requested .footer-scene {
  position:fixed;left:0!important;
  top:var(--sinvec-stage-top)!important;
  height:var(--sinvec-stage-height)!important;
  width:100vw!important;max-width:none;
}
html.sinvec-desktop-requested .hero-video,
html.sinvec-desktop-requested .hero-service-canvas,
html.sinvec-desktop-requested .service-video {object-fit:cover!important;}
html.sinvec-desktop-requested #headerMain {
  top:calc(var(--sinvec-stage-top) + 1.5rem)!important;
  width:calc(100vw - 40px)!important;max-width:1400px!important;
}
/* These must match desktop defaults (80 px main title, 22.4 px service rows). */
html.sinvec-desktop-requested .hero-content {left:3.5rem;bottom:3.5rem;z-index:8;}
html.sinvec-desktop-requested .hero-content h1 {
  font-size:5rem!important;line-height:.95!important;
}
html.sinvec-desktop-requested .hero-content p {max-width:none;}
html.sinvec-desktop-requested .scroll-indicator {bottom:1.55rem;}
html.sinvec-desktop-requested #navServices {
  position:fixed!important;left:auto!important;
  right:var(--sinvec-stage-right)!important;
  width:max-content!important;max-width:none!important;
  transition:opacity .3s ease,visibility .3s ease!important;
  transform:none!important;z-index:75!important;
  touch-action:manipulation;
}
html.sinvec-desktop-requested #navServices:not(.moved-up):not(.on-white) {
  top:auto!important;
  bottom:calc(var(--sinvec-stage-top) + 2.5rem)!important;
}
html.sinvec-desktop-requested #navServices.moved-up:not(.on-white) {
  top:var(--sinvec-menu-service-top)!important;bottom:auto!important;
}
html.sinvec-desktop-requested #navServices.on-white {
  top:auto!important;
  bottom:calc(var(--sinvec-stage-top) + 1.6rem)!important;
  width:272px!important;max-width:272px!important;
  right:calc(var(--sinvec-stage-right) * .5)!important;
}
/* Original native-PC service typography, not reduced Android-specific fonts. */
html.sinvec-desktop-requested #navServices:not(.on-white) .menu-title {
  font-size:1.82rem!important;line-height:1.05!important;
  font-weight:600!important;margin:0 0 1rem!important;text-align:center;
}
html.sinvec-desktop-requested #navServices:not(.on-white) ul {gap:.72rem!important;}
html.sinvec-desktop-requested #navServices:not(.on-white) li {
  min-height:0!important;padding:0!important;
  display:grid;grid-template-columns:2.6rem 1fr!important;
  align-items:center;gap:.15rem!important;
  white-space:nowrap!important;cursor:pointer;
}
html.sinvec-desktop-requested #navServices:not(.on-white) li,
html.sinvec-desktop-requested #navServices:not(.on-white) li span {
  font-size:1.4rem!important;line-height:normal!important;
  font-weight:500!important;
}
html.sinvec-desktop-requested #navServices:not(.visible),
html.sinvec-desktop-requested #navServices.scrolling {pointer-events:none!important;}
html.sinvec-desktop-requested #navServices.visible:not(.scrolling),
html.sinvec-desktop-requested #navServices.visible:not(.scrolling) li {pointer-events:auto!important;}
/* Pinch and pan are native browser gestures. Never synthesize a wheel from
   a pinch; keep the layout viewport fixed during visualViewport zoom. */
html.sinvec-desktop-requested.sinvec-desktop-zoomed,
html.sinvec-desktop-requested.sinvec-desktop-zoomed body {
  overflow:auto!important;overscroll-behavior:auto!important;
  touch-action:pan-x pan-y pinch-zoom!important;
}
html.sinvec-desktop-requested.sinvec-desktop-zoomed body {
  height:100%!important;min-height:100%!important;
}
html.sinvec-desktop-requested .white-content-overlay {
  -webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom!important;
}
html.sinvec-desktop-requested .white-section,
html.sinvec-desktop-requested .hero-container,
html.sinvec-desktop-requested .hero-ui,
html.sinvec-desktop-requested .footer-scene {
  touch-action:pan-x pan-y pinch-zoom!important;
}
html.sinvec-desktop-requested body:not(.footer-scene-zooming):not(.footer-scene-active) .hero-container {
  transform:scale(1)!important;
}
/* Notices belong to the scene, not the empty black portrait margins. */
html.sinvec-desktop-requested .sinvec-language-offer {
  top:calc(var(--sinvec-stage-top) + 92px);
  right:64px;
}
html.sinvec-desktop-requested .sinvec-cookie-banner,
html.sinvec-desktop-requested .sinvec-terms-banner {
  bottom:calc(var(--sinvec-stage-top) + 24px)!important;
}


/* SINVEC V6.275 — Android Chrome "Desktop site": shared stage boundary.
   Camera descendants formerly used 100vh, which is the whole portrait
   *layout* viewport, not the 1440x768 letterboxed stage. That caused the
   service video to escape underneath the stage and obscure internal pages.
   Scope strictly to desktop-requested mode: real desktop and native mobile
   keep their original camera, typography and touch handling. */
html.sinvec-desktop-requested .hero-container {
  z-index:1!important;
  overflow:hidden!important;
  isolation:isolate;
  contain:layout paint;
}
html.sinvec-desktop-requested .tv-hover-container .service-video,
html.sinvec-desktop-requested .tv-hover-container .hover-subvideo {
  position:fixed!important;
  inset:0 auto auto 0!important;
  width:100vw!important;
  height:var(--sinvec-stage-height)!important;
  max-width:none!important;
  object-fit:cover!important;
}
/* All internal routes use the exact same centered 1440px desktop stage.
   Their own overlay, never the document body, owns vertical scrolling. */
html.sinvec-desktop-requested .white-section {
  z-index:20!important;
  overflow:hidden!important;
  isolation:isolate;
  max-width:none!important;
}
html.sinvec-desktop-requested .white-section.visible {
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  content-visibility:visible!important;
}
html.sinvec-desktop-requested .white-section .white-content-overlay {
  position:relative;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  width:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom!important;
}
html.sinvec-desktop-requested.sinvec-desktop-internal-active .hero-container {
  visibility:hidden!important;
  pointer-events:none!important;
}
html.sinvec-desktop-requested .header-main {z-index:105!important;}
html.sinvec-desktop-requested #navServices {z-index:106!important;}
html.sinvec-desktop-requested .internal-fade-transition.play,
html.sinvec-desktop-requested .circle-transition.play {z-index:180!important;}

/* V6.276 — Android requested desktop: reduce oversized rem-based UI only.
   Native PC + native mobile retain their own unchanged typography. */
html.sinvec-desktop-requested { font-size:14px!important; }
html.sinvec-desktop-requested #tvContainer {
  touch-action:pan-x pan-y pinch-zoom;
}


/* SINVEC V6.278 — Android Chrome "Sitio para computadoras" only.
   Maintain the authored 1440px stage; reduce overlay type, not the camera.
   Desktop PC and native-mobile responsive are intentionally unaffected. */
html.sinvec-desktop-requested .hero-content h1 {
  font-size:4.1rem!important;
  line-height:.96!important;
  margin-bottom:.78rem!important;
}
html.sinvec-desktop-requested .hero-content .hero-subtitle,
html.sinvec-desktop-requested .hero-content p {
  font-size:.68rem!important;
  letter-spacing:.035em!important;
}
html.sinvec-desktop-requested #navServices:not(.on-white) .menu-title {
  font-size:1.28rem!important;
  line-height:1.12!important;
  margin-bottom:.64rem!important;
}
html.sinvec-desktop-requested #navServices:not(.on-white) ul {
  gap:.45rem!important;
}
html.sinvec-desktop-requested #navServices:not(.on-white) li {
  grid-template-columns:1.95rem 1fr!important;
  gap:.1rem!important;
  letter-spacing:.01em!important;
}
html.sinvec-desktop-requested #navServices:not(.on-white) li,
html.sinvec-desktop-requested #navServices:not(.on-white) li span {
  font-size:1.05rem!important;
  line-height:1.15!important;
}
/* Suppress the UA's blue touch-press rectangle but preserve keyboard focus. */
html.sinvec-desktop-requested,
html.sinvec-desktop-requested * {
  -webkit-tap-highlight-color:transparent!important;
}
html.sinvec-desktop-requested :is(a,button,[role="button"],#navServices li):focus:not(:focus-visible) {
  outline:none!important;
}


/* SINVEC V6.279 — Android desktop footer camera remains inside the same
   letterboxed stage as the native PC composition. Merely setting overflow:
   hidden on a scaled container does not clip its transformed outer border. */
html.sinvec-desktop-requested .hero-container {
  --sinvec-footer-stage-clip:inset(0% 0% 0% 0%);
  clip-path:var(--sinvec-footer-stage-clip)!important;
  -webkit-clip-path:var(--sinvec-footer-stage-clip)!important;
}
/* The footer itself scrolls normally on touch in the 1440px desktop viewport;
   ordinary stage swipes continue to be handled by desktop-request.js. */
html.sinvec-desktop-requested .footer-scene {
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom!important;
}


/* SINVEC V6.280 — Android Desktop site: render the *whole footer* in the
   same letterboxed desktop stage. Previous versions clipped the camera but
   left the footer panel at 100dvh (portrait browser height), which pushed
   the wordmark and legal row below the visible stage. This is deliberately
   scoped to Android's desktop-requested mode; PC and native mobile unchanged.
   Use stage-height rather than vh, dvh, orientation or full-screen height. */
html.sinvec-desktop-requested .footer-scene {
  box-sizing:border-box!important;
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--sinvec-stage-top)!important;
  width:100vw!important;
  height:var(--sinvec-stage-height)!important;
  min-height:0!important;
  max-height:var(--sinvec-stage-height)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom!important;
}
html.sinvec-desktop-requested .footer-scene__panel,
html.sinvec-desktop-requested body.footer-scene-active .footer-scene__panel {
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--sinvec-stage-height)!important;
  min-height:var(--sinvec-stage-height)!important;
  max-height:none!important;
  padding:clamp(20px,2.25vw,42px) clamp(16px,2.35vw,48px) 18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:visible!important;
  transform:none!important;
}
/* Keep the original four-column PC grid regardless of device orientation or
   Chromium's variable desktop-site CSS viewport width. */
html.sinvec-desktop-requested .footer-scene__columns {
  display:grid!important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.4fr) minmax(0,1.35fr) minmax(0,.83fr)!important;
  column-gap:clamp(16px,3.7vw,76px)!important;
  row-gap:0!important;
  padding:clamp(14px,calc(var(--sinvec-stage-height) * .03),34px) 0 0!important;
  flex:0 0 auto!important;
}
html.sinvec-desktop-requested .footer-scene__columns > .footer-scene__col {
  order:0!important;
  min-width:0!important;
}
html.sinvec-desktop-requested .footer-scene__eyebrow {
  margin-bottom:clamp(13px,calc(var(--sinvec-stage-height) * .017),18px)!important;
}
html.sinvec-desktop-requested .footer-scene__list {
  gap:clamp(9px,calc(var(--sinvec-stage-height) * .0115),14px)!important;
}
html.sinvec-desktop-requested .footer-scene__list li {
  font-size:clamp(15px,1.4vw,22px)!important;
  line-height:1.27!important;
}
html.sinvec-desktop-requested .footer-scene__divider {
  margin-top:clamp(19px,calc(var(--sinvec-stage-height) * .03),30px)!important;
}
/* The SINVEC signature occupies the remaining part of the stage and does
   not reserve the thousands of pixels in Android's portrait viewport. */
html.sinvec-desktop-requested .footer-scene__brand {
  display:block!important;
  position:relative!important;
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  margin:clamp(7px,calc(var(--sinvec-stage-height) * .014),13px) 0 0!important;
  overflow:hidden!important;
}
html.sinvec-desktop-requested .footer-scene__brand-art {
  display:block!important;
  position:absolute!important;
  inset:auto 0 auto 0!important;
  top:clamp(8px,calc(var(--sinvec-stage-height) * .016),17px)!important;
  width:100%!important;
  height:clamp(120px,calc(var(--sinvec-stage-height) * .34),305px)!important;
  max-height:100%!important;
  aspect-ratio:auto!important;
  transform:none!important;
}
html.sinvec-desktop-requested .footer-scene__bottom {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  grid-auto-rows:auto!important;
  align-items:center!important;
  column-gap:clamp(12px,3.5vw,60px)!important;
  row-gap:10px!important;
  margin-top:0!important;
  padding-top:clamp(8px,calc(var(--sinvec-stage-height) * .014),14px)!important;
  flex:0 0 auto!important;
  min-height:clamp(30px,calc(var(--sinvec-stage-height) * .064),49px)!important;
}
html.sinvec-desktop-requested .footer-scene__bottom > *,
html.sinvec-desktop-requested .footer-scene__legal-links,
html.sinvec-desktop-requested .footer-scene__top {
  grid-column:auto!important;
  grid-row:auto!important;
  justify-self:auto!important;
}
html.sinvec-desktop-requested .footer-scene__legal-links {
  gap:clamp(8px,1.5vw,24px)!important;
}


/* V6.283 — Inquiry UX / visible progression and multi-service selection. */
.start-project-page .brief-step-heading {grid-template-columns:auto minmax(0,1fr) auto;align-items:start;}
.start-project-page .brief-step-heading > div {min-width:0;}
.start-project-page .brief-top-next {appearance:none;align-self:start;min-height:44px;padding:0 17px;border-radius:999px;border:1px solid #fff;background:#f4f4f4;color:#111;font:700 .72rem/1.1 Arial,sans-serif;letter-spacing:.05em;cursor:pointer;white-space:nowrap;}
.start-project-page .brief-top-next:hover {background:#dcdcdc;}
.start-project-page .brief-option:focus-within {outline:2px solid #dadada;outline-offset:3px;}
.start-project-page .brief-option:has(input[type=checkbox]:checked) {border-color:#eee;background:rgba(255,255,255,.09);}
.start-project-page .brief-phone-group {display:grid;grid-template-columns:minmax(130px,.75fr) minmax(0,1.25fr);gap:10px;min-width:0;}
.start-project-page .brief-input select,.contact-form select {width:100%;min-height:51px;padding:.75rem .85rem;border:1px solid rgba(255,255,255,.15);background:#171717;color:#f4f4f4;border-radius:14px;font:inherit;}
.start-project-page .brief-input small {color:#929292;font-size:.72rem;line-height:1.4;}
.start-project-page .brief-phone-group .brief-input {min-width:0;}
.contact-form select {border-radius:8px;}
@media(max-width:680px) {
 .start-project-page .brief-step-heading {grid-template-columns:auto minmax(0,1fr);gap:.9rem;}
 .start-project-page .brief-top-next {grid-column:2;justify-self:start;}
 .start-project-page .brief-phone-group {grid-template-columns:120px minmax(0,1fr);}
}

.start-project-page .brief-select-all{display:flex;align-items:center;gap:.6rem;width:max-content;max-width:100%;margin:-.7rem 0 1.05rem;color:#c7c7c7;font-size:.79rem;cursor:pointer;}
.start-project-page .brief-select-all input{width:17px;height:17px;accent-color:#eee;cursor:pointer;}