@font-face {
    font-family: ArdelaEdgeX02Bold;
    src: url(fonts/ardela-edge-x02-bold.ttf) format("truetype");
}
@font-face {
    font-family: PoppinsBold;
    src: url(fonts/Poppins-Bold.ttf) format("truetype");
}
@font-face {
    font-family: PoppinsRegular;
    src: url(fonts/Poppins-Regular.ttf) format("truetype");
}

html,
body {
    height: 100%;
    width: 100%;
    position: relative;
    overflow-x: clip;
    max-width: 100%;
}

body {
    margin: 0px;
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    background-color: #00120c;
}

button:focus, input:focus, div:focus { outline: none; }

/* Ocultar barra de scroll (mantiene el scroll funcional) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

.preloader {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #000;
    background-image: url('../img/preloader-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.preloader img {
    /* antes 100%: servia para un PNG de pantalla completa. Con el logo real
       hay que acotarlo o queda deformadamente grande. */
    width: min(38vw, 320px);
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.whatsapp-btn {
    position: fixed;
    z-index: 12;
    width: 4vw;
    right: 2.8%;
    bottom: 5%;
    cursor: pointer;
    transition: all .5s ease;
}
.whatsapp-btn:hover {
    transform: scale(1.1);
}

/* El tema de Choices.js y flatpickr vive en css/form-pickers.css, que se carga
   despues de esta hoja. Antes habia aca un bloque duplicado que, por cargar
   ultimo y con la misma especificidad, le ganaba al tema real. */

/* --- el bloque de fecha/hora se alinea a la grilla de 2 columnas --- */
.contact-form-date { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4vw; }
.contact-form-date-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* Boton flotante "Hablemos": reemplaza a CONTACTO en la botonera.
   Semitransparente con desenfoque, por encima del menu. */
.talk-btn {
    position: fixed;
    top: 20px;
    right: 60px;
    z-index: 31;
    display: inline-block;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.02vw;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 1.25vh 2.3vw 1.7vh;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.13);
    border: solid 1px rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 6px 20px rgba(2, 14, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.talk-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(143, 240, 255, 0.85);
    box-shadow: 0 10px 26px rgba(2, 14, 48, 0.34), 0 0 22px rgba(143, 240, 255, 0.4);
}
.talk-btn:focus-visible { outline: 3px solid #8ff0ff; outline-offset: 3px; }
.header-menu {
    position: fixed;
    right: 60px;
    z-index: 30;
    transform: translateY(50px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
/* auto-hide al scrollear (desktop): fade + leve slide-up */
.header-menu.nav-hidden {
    opacity: 0;
    transform: translateY(50px) translateY(-40px);
    pointer-events: none;
}
.header-menu ul {
    list-style-type: none;
    padding: 0px;
    margin: 5% 0px;
}
/* Barra semitransparente azul oscuro detras de la botonera (legibilidad) */
.header-menu ul.m-desk {
    background-color: rgba(16, 12, 62, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 0.35vw 1vw;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.header-menu ul li {
    display: inline-block;
    line-height: 1.548vw;
    vertical-align: middle;
}
.header-menu ul li a {
    color: #fff;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.0322vw;
    text-decoration: none;
    line-height: 1.548vw;
    display: inline-block;
    padding: 0 2vw 0.5vw 2vw;
    min-width: 5vw;
    text-align: center;
}
.header-menu ul li:last-child ~ .header-menu ul li a {
    margin-right: 0px;
}

.header-menu #lang {
    font-family: 'ArdelaEdgeX02Bold';
    font-size: 0.65vw;
    color: #fff;
    background-color: rgba(10, 24, 54, 0.45);
    border: solid 1px rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    padding: 0% 4% 10% 4%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(130, 220, 255, 0.25), inset 0 0 8px rgba(130, 220, 255, 0.1);
    transition: box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.header-menu #lang:hover,
.header-menu #lang:focus {
    border-color: rgba(160, 235, 255, 0.9);
    background-color: rgba(14, 34, 74, 0.6);
    box-shadow: 0 0 18px rgba(130, 220, 255, 0.5), 0 0 5px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(130, 220, 255, 0.18);
    outline: none;
}

/* Brillo sutil en el boton del menu de la seccion activa (scroll-spy) */
.header-menu .menu-item.nav-active {
    color: #fff;
    text-shadow: 0 0 10px rgba(130, 220, 255, 0.95), 0 0 4px rgba(255, 255, 255, 0.7);
    transition: text-shadow 0.3s ease, color 0.3s ease;
}
.menu-active {
    height: 0.21vw;
    width: 2.1vw;
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    top: 64%;
    left: 3.9vw;
    transition: left 0.2s ease;
}

.section {
    position: relative;
    width: 100%;
}

.policy {
    height: auto;
}
.policy-content {
    padding: 20vh max(8vw, calc((100% - 940px) / 2)) 12vh;
    background: radial-gradient(ellipse at 50% -8%, #14205f 0%, #070e30 52%, #04081c 100%);
}
.policy-title {
    position: static;
    display: block;
    transform: none;
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 2.8vw;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    margin: 0 auto 6vh;
    max-width: 940px;
}
.policy-txt {
    position: static;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 0;
    transform: none;
    color: #c9d6e8;
    font-family: PoppinsRegular;
    font-size: 1.05vw;
    line-height: 2;
    overflow: visible;
    box-sizing: border-box;
}
.policy-txt h2 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 1.5vw;
    margin: 4.5vh 0 1.6vh;
}
.policy-txt h3 {
    font-family: PoppinsBold;
    color: #9fd0ff;
    font-size: 1.05vw;
    margin: 2.6vh 0 1vh;
}
.policy-txt p { margin: 0 0 1.6vh; }
.policy-txt ul { margin: 0 0 2vh; padding-left: 1.4vw; }
.policy-txt li { margin: 0 0 0.9vh; }
.policy-txt strong { color: #fff; font-family: PoppinsBold; font-weight: 400; }
.policy-txt a { color: #46d6ff; text-decoration: none; }
.policy-txt a:hover { text-decoration: underline; }
.policy-txt .policy-index { border-bottom: 1px solid rgba(70, 214, 255, 0.2); padding-bottom: 2.5vh; margin-bottom: 3vh; }
.policy-txt .policy-index h2 { margin-top: 0; }
.policy-txt .policy-index ul { list-style: none; padding-left: 0; columns: 2; column-gap: 3vw; }
.policy-txt .policy-index li { margin: 0 0 1.1vh; break-inside: avoid; }
.policy-txt .policy-main section:first-child h2 { margin-top: 0; }

.home {
    height: 100%;
}
.logo {
    position: absolute;
    z-index: 10;
    top: 2%;
    left: 10%;
    width: 28vw;
}
.home-slider {
    width: 100%;
    overflow: hidden;
    height: 100%;
}
.home-slider-items {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}
.home-slide {
    width: 100%;
}
.home-slide-1 {
    position: absolute;
    top: 0vw;
    left: 0vw;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.home-slide-d {
    position: absolute;
    top: 0vw;
    left: 0vw;
    margin-left: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
/* La foto llena el slide entero. Antes iba a ancho completo y alto automatico,
   asi que en ventanas mas altas que 16:9 quedaba un corte y se veia el fondo. */
.home-slide-d img, .home-slide-1 img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    object-fit: cover;
    object-position: 50% 40%;
}
/* Velo superior: la foto puede tener cualquier cosa arriba, y el logo y la
   botonera tienen que leerse igual. */
.home-slide::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 34%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(4, 8, 28, 0.72) 0%, rgba(4, 8, 28, 0.34) 45%, rgba(4, 8, 28, 0) 100%);
}
/* Copy sobre el slider del home. El texto va en HTML y no quemado en la foto,
   para poder traducirlo y editarlo. Vive siempre en la franja de abajo: arriba
   manda el logo y la botonera, y nada se le cruza. */
.home-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(4, 8, 28, 0.92) 0%, rgba(4, 8, 28, 0.62) 22%, rgba(4, 8, 28, 0.12) 48%, rgba(4, 8, 28, 0) 62%);
}
.home-cap {
    position: absolute;
    z-index: 2;
    bottom: 15%;
    max-width: 36ch;
    display: flex;
    flex-direction: column;
    gap: 0.9vh;
}
.home-cap.cap-l { left: 6vw; align-items: flex-start; text-align: left; }
.home-cap.cap-r { right: 6vw; align-items: flex-end; text-align: right; }
/* Volanta: nombra el territorio antes del titular */
.home-cap .cap-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: PoppinsRegular;
    font-size: 0.72vw;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8ff0ff;
}
.home-cap .cap-kicker::before {
    content: '';
    width: 2.2vw;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c9ffa1, #8ff0ff);
}
.home-cap.cap-r .cap-kicker { flex-direction: row-reverse; }
.home-cap h2 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 3vw;
    line-height: 0.98;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0;
    text-wrap: balance;
    text-shadow: 0 6px 34px rgba(2, 10, 40, 0.65);
}
.home-cap h2 b {
    font-weight: inherit;
    background: linear-gradient(96deg, #c9ffa1 0%, #8ff0ff 52%, #46d6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.home-cap p {
    font-family: PoppinsRegular;
    color: #bcd4f2;
    font-size: 1.02vw;
    line-height: 1.6;
    margin: 0;
    max-width: 34ch;
}
/* El eje horizontal de los heros lo maneja el swipe, el vertical sigue siendo
   scroll de la pagina. Sin esto iOS trata el gesto como scroll y lo cancela. */
.home-slider, .hero-banner-slider { touch-action: pan-y; }
/* Y esto es lo que hacia que en iPhone no hubiera swipe de ninguna manera: los
   slides son <img>, y en iOS arrastrar el dedo sobre una imagen dispara el
   gesto nativo de "arrastrar imagen" de Safari, que se queda con la secuencia
   tactil y no la deja llegar al JS. En Chrome no pasa, por eso no se veia
   probando en escritorio. Con pointer-events:none la imagen deja de ser el
   blanco del toque -lo recibe el contenedor- y el gesto nativo no arranca.
   Los textos y botones de los slides son hermanos de la imagen, no hijos, asi
   que siguen respondiendo. */
.home-slide img,
.home-slide picture,
.hb-slide img,
.hb-slide picture {
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}
@media screen and (max-width: 800px) {
    .home-cap { bottom: 20%; left: 7vw; right: 7vw; max-width: none; align-items: center; text-align: center; }
    .home-cap.cap-l, .home-cap.cap-r { left: 7vw; right: 7vw; align-items: center; text-align: center; }
    .home-cap .cap-kicker { font-size: 2.9vw; letter-spacing: 0.18em; }
    .home-cap .cap-kicker::before { width: 7vw; }
    .home-cap h2 { font-size: 8.4vw; }
    .home-cap p { font-size: 3.5vw; max-width: none; }
}
.home-slide iframe {
    width: 100%;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    pointer-events: none;
}

.menu-btn {    
    color: #100c3e;
    font-family: 'ArdelaEdgeX02Bold';
    font-size: 20.8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1vw;
}
.menu-btn span {
    display: flex;
    border-radius: 7px;
    flex-wrap: nowrap;
    background-color: #fff;
    flex-direction: row;
    padding: 7px 20px;
    align-items: center;
}
.menu-popup {
    display: none;
}
/* ocultar el texto de los enlaces del menu (dejar solo los botones-grafico) */
.menu-popup a { font-size: 0; line-height: 0; color: transparent; text-decoration: none; }
.menu-popup a img { font-size: 0; }

.home-slider-bullets {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    top: 92%;
    position: absolute;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
}

.home-slider-bullet {
    height: 0.5vw;
    width: 3.36vw;
    background-color: #ffffff5e;
    margin: 0 0.8vw;
    cursor: pointer;
}
.home-slider-bullet-active {
    background-color: #fff;
}
/* Boton "SABER MAS" del hero (link por slide) */
.hero-cta {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 15%;
    transform: translateX(-50%);
    padding: 4px 2.35vw 14px;   /* -10% del tamano anterior */
    background: rgba(16, 12, 62, 0.45);   /* azul oscuro semitransparente */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.35vw;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-decoration: none;
    border-radius: 40px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.3);   /* glow blanco suave */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Texto blanco con glow sutil (estilo botonera principal) */
.hero-cta span {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
.hero-cta:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 0 18px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3); }
.hero-cta.hidden { display: none; }
@media screen and (max-width: 800px) {

    /* en mobile el acceso vive dentro del popup, no flotando sobre el hamburguesa */
    .talk-btn { display: none; }
    .menu-talk {
        border: solid 1px rgba(255, 255, 255, 0.4);
        border-radius: 100px;
        padding: 1.4vh 6vw !important;
        margin-top: 3vh;
        background: rgba(255, 255, 255, 0.12);
    }

    .hero-cta { font-size: 4.5vw; padding: 5px 7.2vw 13px; bottom: 13%; }
}

/* Botonera de secciones de Servicio en el hero (slide "nav") */
.hero-services-nav {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* con techo: arriba de 1920 las pastillas seguian creciendo con el vw, en la
       botonera de 900px entraban solo 4 y el corte de fila dejaba a Roblox solo
       en una fila intermedia. Desde 1920 se quedan del tamano que ya tenian. */
    gap: min(1vw, 19px);
    width: min(72vw, 900px);
}
.hero-services-nav a {
    padding: 3px min(1.6vw, 31px) 11px;
    background: rgba(16, 12, 62, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: ArdelaEdgeX02Bold;
    font-size: min(1.05vw, 20px);
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 40px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.hero-services-nav a:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(255, 255, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.3); }
.hero-services-nav.hidden { display: none; }
/* Corte de fila. Sin esto la primera fila se llenaba con 7 u 8 pastillas y su
   punta derecha llegaba hasta la leyenda. Con el corte quedan siempre 5 + 4,
   que es el reparto que ya salia solo en 1920 y el que mejor respira. En mobile
   se apaga: ahi la botonera corta sola en 3 + 3 + 3. */
.hero-services-nav .hsn-corte { width: 100%; height: 0; }
/* De 1440 para abajo el corte solo no alcanza: la botonera va centrada en la
   pantalla y su punta derecha se metia igual debajo de la leyenda, que en este
   slide va a la derecha (cap-r) y arranca siempre cerca del 66vw -medido de 820
   a 1920, la proporcion no se mueve-. Subir el texto no sirve: la cara del
   hombre de la derecha empieza en el 50% del alto de img/home/home-5.jpg y
   quedaria pisada. La salida es horizontal: la botonera se centra en la mitad
   libre en vez de en la pantalla. Arriba de 1440 no hace falta, ahi la fila de
   5 ya termina antes que el texto. */
@media screen and (min-width: 801px) and (max-width: 1440px) {
    .hero-services-nav {
        left: 0;
        right: 36vw;
        width: auto;
        transform: none;
    }
}
@media screen and (max-width: 800px) {
    /* 80vw y no 92: con las pastillas mas chicas entraban cuatro por fila y
       PARTNERS quedaba solo en la ultima. Asi vuelve a cortar 3+3+3. */
    .hero-services-nav { width: 80vw; gap: 2.8vw; bottom: 12%; }
    /* pastillas un poco mas chicas: las tres filas ocupaban tanto que la bajada
       del slide de la botonera no tenia donde apoyarse */
    .hero-services-nav a { font-size: 3.05vw; padding: 3px 3.6vw 8px; letter-spacing: 0.5px; position: relative; }
    /* La pastilla mide unos 24 px de alto, muy poco para el dedo. Este pseudo
       estira el area tocable arriba y abajo sin cambiar como se ve; el gap
       subio a 2.8vw para que las areas de filas vecinas no se pisen. */
    /* el corte de fila es solo de escritorio: aca la botonera parte sola 3+3+3 */
    .hero-services-nav .hsn-corte { display: none; }
    .hero-services-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -5px;
        bottom: -5px;
    }
}

.works-content {
    padding: 0;
    background-image: url('../img/work-bg.jpg');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
.works-title { padding: 12% 0 5% 0; }
/* Grilla fija de 4 columnas. Antes era un flex con wrap y space-between: el
   navegador metia todos los casos que entraran por fila segun el ancho natural
   de cada PNG, y en 1920 quedaban seis arriba y dos sueltos abajo, pegados a
   los bordes. Con grid siempre son 4 x 2, entren como entren. */
.works-items {
    width: 90vw;
    max-width: 1560px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2vw;
    margin: 0 auto;
    padding-bottom: 8%;
}
.works-items a { display: block; line-height: 0; }
.works-items img {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    margin: 0;
    transition: transform .3s ease;
}
.works-items img:hover {
    transform: scale(1.01) !important;
}

.interna-bg {
    width: 100%;
}
.interna-content {
    position: absolute;
    top: 0.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.interna-content img {
    width: 100%;
    position: relative;
}

.clients-content {
    padding: 0;
    background-image: url('../img/clientes-bg.jpg');
    background-position: top center;
    /* mismo caso que Industrias: con auto 100% el fondo se escalaba al alto del
       contenido y dejaba bandas negras a los lados */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #022164;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.clients-title { padding: 5% 0; }
.clients-carousel {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: auto;
    overflow: hidden;
}
.clients-items {
    /* tira continua: la mueve GSAP, sin transicion CSS que le pelee */
    display: flex;
    width: max-content;
    will-change: transform;
}
.clients-item-mob {
    position: absolute;
    width: 15.432vw;
    margin: 0vw;
    font-size: 1.238vw;
    font-family: 'PoppinsRegular';
    text-align: center;
    vertical-align: top;
    transition: all .5s ease;
}
.clients-item-mob img {
    display: block;
    margin: 0 auto;
    width: 23.5vw;
}
.clients-item {
    flex: 0 0 auto;
    width: 15.432vw;
    margin: 0 1.5vw;
    font-size: 1.238vw;
    font-family: 'PoppinsRegular';
    text-align: center;
    vertical-align: top;
    transition: all .5s ease;
}

/* El item se levanta apenas al pasar el mouse: da vida sin distraer. */
.clients-item, .industries-item { transition: transform 0.35s cubic-bezier(.22,.61,.36,1), filter 0.35s ease; }
.clients-item:hover, .industries-item:hover { transform: translateY(-6px) scale(1.05); filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
    .clients-item, .industries-item { transition: none; }
}

.clients-item-0 {
    left: -13vw;
    opacity: 0;
}
.clients-item-1 {
    left: 2vw;
    opacity: 1;
}
.clients-item-2 {
    left: 17vw;
    opacity: 1;
}
.clients-item-3 {
    left: 32vw;
    opacity: 1;
}
.clients-item-4 {
    left: 47vw;
    opacity: 1;
}
.clients-item-5 {
    left: 62vw;
    opacity: 1;
}
.clients-item-6 {
    left: 77vw;
    opacity: 0;
}

.clients-item-mob-0 {
    left: -18vw;
    opacity: 0;
}
.clients-item-mob-1 {
    left: 10vw;
    opacity: 1;
}
.clients-item-mob-2 {
    left: 38vw;
    opacity: 1;
}
.clients-item-mob-3 {
    left: 66vw;
    opacity: 1;
}
.clients-item-mob-4 {
    left: 94vw;
    opacity: 1;
}

.clients-item img, .clients-item span {
    display: block;
    margin: 0 auto;
    width: 8.46vw;
}
.clients-carousel-left {
    position: absolute;
    top: 52%;
    left: 3%;
    cursor: pointer;
    width: 3.2vw;
    transition: all 0.3s ease;
}
.clients-carousel-left:hover {
    transform: scale(1.1);
}
.clients-carousel-right {
    position: absolute;
    top: 52%;
    right: 3%;
    cursor: pointer;
    width: 3.2vw;
    transition: all 0.3s ease;
}
.clients-carousel-right:hover {
    transform: scale(1.1);
}


/* ---------------------------------------------------------------------------
   Fila del carrusel: el JS envuelve aca la tira y sus dos flechas, de modo que
   las flechas se centran contra la fila y no contra toda la seccion.
   --------------------------------------------------------------------------- */
.marquee-row { position: relative; width: 100%; }
.marquee-row .clients-carousel-left,
.marquee-row .clients-carousel-right,
.marquee-row .industries-carousel-left,
.marquee-row .industries-carousel-right { top: 50%; transform: translateY(-50%); }
.marquee-row .clients-carousel-left:hover,
.marquee-row .clients-carousel-right:hover,
.marquee-row .industries-carousel-left:hover,
.marquee-row .industries-carousel-right:hover { transform: translateY(-50%) scale(1.1); }
/* mientras se arrastra no se seleccionan textos ni se arrastran las imagenes */
.clients-carousel, .industries-carousel { user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.clients-item img, .industries-item img { -webkit-user-drag: none; user-drag: none; }

.benefits-content {
    padding: 0;
    position: relative;
    overflow: hidden;
    /* columna centrada: el titulo arriba y el acordeon ocupando el resto, asi
       las cinco filas entran siempre en pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 8vh 0 4vh;
    box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 34%, #1d6f97 0%, #14506f 38%, #0d3550 72%, #071f33 100%);
}
/* campo de particulas detras de las imagenes de beneficios */
#benefits-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
#benefits-fx canvas { display: block; }
.benefits-content > .benefits-title,
.benefits-content > .benefits-items { position: relative; z-index: 1; }
/* ---------------------------------------------------------------------------
   Beneficios: acordeon en onda. El alto lo maneja el JS via flex-grow y todo
   lo demas cuelga de --o (0 cerrada, 1 abierta del todo), que tambien viene
   del JS. Como el valor ya llega suavizado cuadro a cuadro, aca no hay
   transiciones: si las hubiera, se sumarian dos suavizados y quedaria pastoso.
   --------------------------------------------------------------------------- */
.benefits-items {
    width: 62vw;
    max-width: 1180px;
    height: 54vh;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-bottom: 3.4%;
    border-top: 1px solid rgba(143, 240, 255, 0.22);
}
.b-row {
    --o: 0;
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.6vw;
    padding: 0 calc(2vw + 3.4vw * var(--o)) 0 calc(2vw + 3.4vw * var(--o) + 104px * var(--o));
    margin: 0 calc(-3.4vw * var(--o));
    border-bottom: 1px solid rgba(143, 240, 255, calc(0.22 * (1 - var(--o))));
    border-radius: calc(64px * var(--o));
    background-color: rgba(3, 9, 30, calc(0.66 * var(--o)));
    box-shadow: 0 calc(18px * var(--o)) calc(50px * var(--o)) rgba(2, 10, 38, calc(0.34 * var(--o)));
    overflow: hidden;
    cursor: default;
}
/* Tope de color a la izquierda. Es un rectangulo pegado al borde: como la fila
   tiene overflow hidden, el propio border-radius lo recorta y el tope se come
   toda la curva. Al abrirse engorda y se mete en el rectangulo, y el contenido
   se corre para dejarle lugar. */
.b-row::before {
    content: '';
    position: absolute;
    /* se despega del borde y de los vertices: asi es un bloque recto propio y
       nunca se mete dentro de la curva de la fila */
    left: calc(10px + 20px * var(--o));
    top: calc(7px + 16px * var(--o));
    bottom: calc(7px + 16px * var(--o));
    width: calc(9px + 120px * var(--o));
    border-radius: calc(5px + 16px * var(--o));
    background: linear-gradient(152deg, #c9ffa1 0%, #8fe63f 26%, #35e6d8 68%, #46d6ff 100%);
    box-shadow: 0 0 calc(34px * var(--o)) rgba(143, 240, 255, calc(0.45 * var(--o)));
}
.b-num {
    font-family: ArdelaEdgeX02Bold;
    font-size: calc(5.2vw + 0.5vw * var(--o));
    line-height: 0.86;
    letter-spacing: -2px;
    color: rgba(143, 240, 255, var(--o));
    -webkit-text-stroke: 2px rgba(160, 220, 255, calc(0.5 * (1 - var(--o))));
    text-shadow: 0 0 calc(34px * var(--o)) rgba(143, 240, 255, calc(0.5 * var(--o)));
    flex: 0 0 auto;
    min-width: 2.1em;
    transform: translateX(calc(0.3vw * var(--o)));
}
.b-text { display: flex; flex-direction: column; gap: 0.9vh; min-width: 0; }
.b-title {
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.5vw;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, calc(0.72 + 0.28 * var(--o)));
    text-shadow: 0 0 calc(24px * var(--o)) rgba(143, 240, 255, calc(0.42 * var(--o))),
                 0 2px calc(12px * var(--o)) rgba(0, 0, 0, calc(0.6 * var(--o)));
    text-wrap: balance;
}
.b-desc {
    font-family: PoppinsRegular;
    font-size: 1vw;
    line-height: 1.55;
    color: #cfe4ff;
    text-shadow: 0 1px calc(10px * var(--o)) rgba(0, 0, 0, calc(0.65 * var(--o)));
    max-width: 46ch;
    /* aparece recien cuando la fila ya abrio mas de la mitad */
    max-height: calc(9em * var(--o));
    opacity: calc((var(--o) - 0.32) / 0.45);
    transform: translateY(calc(8px * (1 - var(--o))));
}
/* Icono adentro del tope verde, uno por beneficio. Va en ::after sobre el mismo
   rectangulo que dibuja ::before, con mask para que la silueta tome el navy y se
   recorte sola; asi no hay que meter SVG en los tres index.html ni sumar pedidos
   al servidor. Aparece con la fila: la opacidad sigue a --o igual que el resto. */
.b-row::after {
    content: '';
    position: absolute;
    left: calc(10px + 20px * var(--o));
    top: calc(7px + 16px * var(--o));
    bottom: calc(7px + 16px * var(--o));
    width: calc(9px + 120px * var(--o));
    pointer-events: none;
    background-color: #fff;
    opacity: calc((var(--o) - 0.45) / 0.4);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: calc(10px + 38px * var(--o));
            mask-size: calc(10px + 38px * var(--o));
}
.b-row:nth-child(1)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V13%22%2F%3E%3Cpath%20d%3D%22M12%2020V8%22%2F%3E%3Cpath%20d%3D%22M20%2020V4%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V13%22%2F%3E%3Cpath%20d%3D%22M12%2020V8%22%2F%3E%3Cpath%20d%3D%22M20%2020V4%22%2F%3E%3C%2Fsvg%3E");
}
.b-row:nth-child(2)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226%22%20rx%3D%227%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%206v12c0%201.66%203.13%203%207%203s7-1.34%207-3V6%22%2F%3E%3Cpath%20d%3D%22M5%2012c0%201.66%203.13%203%207%203s7-1.34%207-3%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226%22%20rx%3D%227%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%206v12c0%201.66%203.13%203%207%203s7-1.34%207-3V6%22%2F%3E%3Cpath%20d%3D%22M5%2012c0%201.66%203.13%203%207%203s7-1.34%207-3%22%2F%3E%3C%2Fsvg%3E");
}
.b-row:nth-child(3)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M8.3%2010.8%2015.7%207.2%22%2F%3E%3Cpath%20d%3D%22M8.3%2013.2%2015.7%2016.8%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M8.3%2010.8%2015.7%207.2%22%2F%3E%3Cpath%20d%3D%22M8.3%2013.2%2015.7%2016.8%22%2F%3E%3C%2Fsvg%3E");
}
.b-row:nth-child(4)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2012a8.5%208.5%200%201%201-2.5-6%22%2F%3E%3Cpath%20d%3D%22M20.5%203.5V6H18%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.5%2012a8.5%208.5%200%201%201-2.5-6%22%2F%3E%3Cpath%20d%3D%22M20.5%203.5V6H18%22%2F%3E%3C%2Fsvg%3E");
}
.b-row:nth-child(5)::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225.5%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M7.5%2010v5%22%2F%3E%3Cpath%20d%3D%22M5%2012.5h5%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2211%22%20r%3D%221.35%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2214%22%20r%3D%221.35%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225.5%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M7.5%2010v5%22%2F%3E%3Cpath%20d%3D%22M5%2012.5h5%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2211%22%20r%3D%221.35%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2214%22%20r%3D%221.35%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}
.b-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(201, 255, 161, 0.6); }
@media (prefers-reduced-motion: reduce) {
    .b-row { --o: 0; }
}
/* Titulos de seccion en tipografia, ya no como PNG */
.benefits-title, .works-title, .clients-title, .industries-title {
    display: block;
    width: auto;
    margin: 0 auto;
    font-family: ArdelaEdgeX02Bold;
    font-size: 4vw;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 32px rgba(70, 214, 255, 0.45), 0 6px 26px rgba(0, 20, 60, 0.4);
}
.benefits-title { padding: 0 0 2.6vh; flex: 0 0 auto; }
.services {
    height: 100%;
    position: relative;
    /* degradado suave de azules; el anillo animado va por encima de este fondo
       y por debajo de los slides, que ahora son transparentes */
    background: radial-gradient(ellipse at 50% 40%, #123a6e 0%, #0b2350 45%, #060f36 100%);
}
/* Anillo fracturado de fondo en Servicios. Va detras de los slides, que ya
   traen su propio fondo, asi que el canvas queda por debajo y solo asoma
   donde el slide no tapa. */
/* Campo de particulas en onda, el mismo de Beneficios, como capa de fondo
   por detras del torus. Va en z-index 0; el torus sube a 1 y los slides a 2. */
#services-wave {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.55;
}
#services-wave canvas { display: block; }
#services-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
#services-fx { opacity: 0; }
#services-fx canvas { display: block; width: 100%; height: 100%; }
.services-slider { position: relative; z-index: 2; }
.services-slider-bullets { position: relative; z-index: 3; }

.services-content {
    padding: 0;
}
.servicios-items {
    width: 80vw;
    margin: 0 auto;
    display: block;
    padding: 5.5% 0;
}
.services-slider {
    width: 100%;
    overflow: hidden;
    height: 100%;
}
.services-slider-items {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}
.services-slide {
    width: 100%;
}
.services-slide-1 {
    position: absolute;
    top: 0vw;
    left: 0vw;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.services-slide-d {
    position: absolute;
    top: 0vw;
    left: 0vw;
    margin-left: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
.services-slide-d img, .services-slide-1 img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    bottom: 0px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ===== El ecosistema del home, armado en HTML ===============================
   Reemplaza a servicios-items.gif (3,3 MB en escritorio, 5,95 MB en mobile).
   Los circulos, las pastillas, las lineas y el marco del video son HTML+CSS:
   asi los textos se traducen, la lamina queda nitida a cualquier tamaño y pesa
   casi nada. De imagen quedan solo las dos fotos -envases y premios-.

   El neon se arma con tres capas sobre el mismo cian: el borde, un resplandor
   hacia afuera (box-shadow) y otro hacia adentro (inset), mas un relleno azul
   muy oscuro. Es lo que tenia el arte original.
   --------------------------------------------------------------------------- */
.eco {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    max-width: 100%;
    container-type: inline-size;
    font-family: 'Poppins', sans-serif;
}
.eco-lineas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.eco-lineas line {
    stroke: rgba(70, 198, 255, 0.5);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 3px rgba(70, 198, 255, 0.5));
}
/* El slider tiene una regla global para sus <img> -position:absolute, centrado
   con translateX(-50%)- pensada para las laminas sueltas. Aca hay que anularla
   o desplaza cada icono y cada foto media imagen hacia la izquierda. */
.services-slide-1 .eco img, .services-slide-d .eco img {
    position: static;
    transform: none;
    margin: 0;
    max-width: none;
    max-height: none;
    bottom: auto;
    left: auto;
}
.services-slide-1 .eco img.eco-foto, .services-slide-d .eco img.eco-foto {
    position: absolute;
    object-fit: contain;
    display: block;
}
/* el hueco del juego: filete fino de esquinas redondeadas, sin marco de celular */
.eco-video {
    position: absolute;
    overflow: hidden;
    border-radius: 9% / 4.3%;
    box-sizing: border-box;
    border: 2px solid #3ac6ff;
    background: #050c22;
    box-shadow: 0 0 16px rgba(58, 198, 255, 0.4), inset 0 0 20px rgba(58, 198, 255, 0.12);
    pointer-events: none;
}
.eco-video .eco-pantalla-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.eco-video iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
}
/* --- nodos ---------------------------------------------------------------- */
.eco-circulo, .eco-pastilla {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #eaf6ff;
    text-align: center;
    line-height: 1.15;
    letter-spacing: 0.02em;
    border: 2px solid #46c6ff;
    background: radial-gradient(circle at 50% 30%, rgba(13, 48, 104, 0.92), rgba(5, 13, 38, 0.95));
    /* glow suave: tres halos cada vez mas abiertos y mas tenues, en lugar de uno
       solo marcado. Es lo que hace que el neon se vea difuso y no como un borde
       con sombra. */
    box-shadow: 0 0 6px rgba(70, 198, 255, 0.55),
                0 0 18px rgba(70, 198, 255, 0.35),
                0 0 42px rgba(70, 198, 255, 0.18),
                inset 0 0 16px rgba(70, 198, 255, 0.14);
}
/* El circulo es SIEMPRE redondo: su alto lo fija aspect-ratio sobre el ancho y
   el contenido no puede estirarlo, porque vive en una capa aparte centrada
   encima. Si un rotulo largo no entra, se desborda un poco hacia afuera -como
   en el arte original- en vez de deformar el circulo. */
.eco-circulo {
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0;
    font-size: 1.02cqw;
    font-weight: 600;
    overflow: visible;
}
.eco-in {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 108%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
}
.eco-pastilla {
    transform: translateY(-50%);
    border-radius: 999px;
    /* el ancho sale del arte y no se mueve; el rotulo no se parte nunca y, si
       en otro idioma no entra, lo achica ecoAjustar() */
    white-space: nowrap;
    gap: 0.45em;
    padding: 0.55em 0.95em;
    font-size: 1.05cqw;
    font-weight: 600;
    background: linear-gradient(180deg, rgba(13, 48, 104, 0.92), rgba(5, 13, 38, 0.95));
}
/* las dos pastillas grandes van centradas en el lienzo, y el ancho lo pone el
   texto: asi quedan centradas igual en los tres idiomas */
.eco-grande { font-size: 1.62cqw; letter-spacing: 0.04em; transform: translate(-50%, -50%); }
.eco-chico  { font-size: 0.84cqw; }
.eco-mas { font-style: normal; color: #46c6ff; font-weight: 700; font-size: 1.25em; line-height: 1; }
/* Los iconos NO son cuadrados: trece de los dieciocho no lo son y los de FIRST
   DATA rondan 1.7:1. Por eso manda el alto y el ancho sale solo; el `max-width`
   es un tope, y el `object-fit` evita que al tocar ese tope el dibujo se
   estire. */
.eco-ico {
    width: auto;
    height: 2.4em;
    max-width: 55%;
    flex: none;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(70, 198, 255, 0.5));
}
.eco-pastilla .eco-ico { height: 1.5em; max-width: 28%; }
.eco-circulo span, .eco-pastilla span { display: block; }

/* En mobile el lienzo es mucho mas angosto -340 px contra 1395- y cqw escala
   con el ancho del contenedor: con los mismos valores la tipografia quedaba a
   5 px. Se suben los tamaños y se afinan los bordes y resplandores, que a ese
   tamaño se comen la letra. */
@media (max-width: 800px) {
    /* sin padding: los % de padding se resuelven contra el ANCHO DEL LIENZO, no
       del circulo, asi que 8% eran 27px fijos para todos y con box-sizing los
       circulos chicos no podian bajar de 54px: SIN INSTALAR NADA salia un 23%
       mas grande que en el arte. El texto ya va en una capa centrada aparte. */
    .eco-circulo { font-size: 3.25cqw; }
    .eco-in { width: 90%; gap: 0.42em; }
    .eco-pastilla { font-size: 3.4cqw; padding: 0.55em 1.05em; gap: 0.4em; }
    .eco-grande { font-size: 4.1cqw; }
    .eco-chico { font-size: 2.85cqw; }
    .eco-circulo, .eco-pastilla { border-width: 1.5px; box-shadow: 0 0 10px rgba(70,198,255,.4), inset 0 0 10px rgba(70,198,255,.14); }
    .eco-ico { width: auto; height: 2.1em; max-width: 62%; }
    .eco-pastilla .eco-ico { width: auto; height: 1.5em; max-width: 32%; }
    .eco-lineas line { stroke-width: 1; }
}

/* ===== Arte de servicios: PNG quieto + video en la pantalla del celular =====
   Reemplaza al GIF de servicios-items, que pesaba 3,3 MB en escritorio y 6 MB
   en mobile. Midiendo cuadro contra cuadro, solo el 8,5% del lienzo se movia
   -la pantalla del celular- y ahi estaba el 96% del peso: el GIF no comprime
   movimiento y ademas lo achataba a 256 colores. Ahora el arte es un PNG de
   0,28 MB y el juego lo sirve Vimeo, que ya se usa en el hero.

   .si-arte toma el lugar que antes ocupaba la <img> del slide. Lleva el
   aspect-ratio por estilo en linea porque el lienzo cambia entre escritorio y
   mobile, y asi el recuadro del video -que va en porcentaje- cae siempre sobre
   la pantalla sin importar a que tamaño se dibuje la lamina.
   --------------------------------------------------------------------------- */
.si-arte {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    max-width: 100%;
    line-height: 0;
}
.services-slide-1 .si-arte > img, .services-slide-d .si-arte > img {
    position: static;
    transform: none;
    margin: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.si-pantalla {
    position: absolute;
    overflow: hidden;
    border-radius: 9% / 4.3%;
    pointer-events: none;
    box-sizing: border-box;
}
/* El arte de escritorio viene sin el celular: el video queda suelto en el hueco
   y lo unico que lo encuadra es un filete, del mismo cian que los contornos del
   resto de la lamina. Va en pixeles y no en porcentaje para que la linea quede
   fina y pareja a cualquier tamaño. En mobile el celular sigue dibujado en el
   PNG, asi que ahi no lleva filete. */
.si-filete {
    border: 2px solid #3ac6ff;
    box-shadow: 0 0 14px rgba(58, 198, 255, 0.35);
}
/* El video es 9:16 y los huecos son mas angostos: el ancho exacto que hace
   falta para cubrir cada uno se calcula en main.js y viaja por estilo en linea. */
.si-pantalla iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    border: 0;
    pointer-events: none;
    display: block;
}

/* ---------------------------------------------------------------------------
   Servicios quedo partido en dos secciones:
     .services-menu      -> solo la botonera, fija, sin carrusel
     .services-showcase  -> el carrusel de laminas, con el anillo animado detras
   La botonera se pinta dentro de .services-nav-static, que solo aporta el
   contexto de posicionamiento que antes le daba el slide.
   --------------------------------------------------------------------------- */
.services-nav-static {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.services-menu { overflow: hidden; }
.services-showcase { overflow: hidden; }

/* 1er slide del slider de servicios: titulo + botones a todo lo que ofrecemos */
.services-nav {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    padding: 10vh 8vw;
    box-sizing: border-box;
    z-index: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(circle at 12% 18%, rgba(70, 214, 255, 0.15) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(70, 214, 255, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 50% -8%, #14205f 0%, #070e30 52%, #04081c 100%);
}
/* Lineas diagonales sutiles solo en dos zonas (esquinas) */
.services-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(135deg,
        rgba(70, 214, 255, 0.15) 0, rgba(70, 214, 255, 0.15) 9px, transparent 9px, transparent 120px,
        rgba(70, 214, 255, 0.06) 120px, rgba(70, 214, 255, 0.06) 129px, transparent 129px, transparent 240px,
        rgba(70, 214, 255, 0.19) 240px, rgba(70, 214, 255, 0.19) 249px, transparent 249px, transparent 360px,
        rgba(70, 214, 255, 0.09) 360px, rgba(70, 214, 255, 0.09) 369px, transparent 369px, transparent 480px,
        rgba(70, 214, 255, 0.13) 480px, rgba(70, 214, 255, 0.13) 489px, transparent 489px, transparent 600px);
    -webkit-mask-image: radial-gradient(ellipse 62% 55% at 8% 12%, #000 0%, transparent 62%), radial-gradient(ellipse 62% 55% at 92% 88%, #000 0%, transparent 62%);
    mask-image: radial-gradient(ellipse 62% 55% at 8% 12%, #000 0%, transparent 62%), radial-gradient(ellipse 62% 55% at 92% 88%, #000 0%, transparent 62%);
}
.services-nav-title {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 2.6vw;
    letter-spacing: 3px;
    margin: 0;
    text-align: center;
}
/* ---------------------------------------------------------------------------
   Accesos a las secciones: grilla de fotos a sangre con rollover.
   Reemplaza la botonera de circulos. Cada celda es la foto que encabeza esa
   seccion; al pasar el mouse la imagen se acerca, se aclara y aparece la
   bajada. En touch la bajada se muestra siempre, porque no hay hover.
   --------------------------------------------------------------------------- */
/* La grilla ya no se come todo el alto: se le pone un techo y el bloque
   entero se centra, de modo que al titulo le quede aire arriba y abajo. */
.services-nav { padding: 0; gap: 0; justify-content: center; }
.services-nav-title { padding: 0 0 3.4vh; font-size: 2vw; }
.services-grid {
    flex: 0 1 auto;
    height: 74%;
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
}
.sg-cell {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    background: #050b2e;
    isolation: isolate;
}
.sg-ph { position: absolute; inset: 0; display: block; }
.sg-ph img {
    /* Anula el posicionado de .services-slide-1 img, que centra y limita las
       imagenes del slider y aca desplazaba la foto medio cuadro a la derecha. */
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    margin: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: 22% center;   /* las fotos llevan al sujeto a la izquierda */
    transform: scale(1.02);
    filter: saturate(0.88) brightness(0.74);
    transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.45s ease;
}
.sg-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(4, 8, 28, 0.9) 0%, rgba(4, 8, 28, 0.42) 42%, rgba(4, 8, 28, 0) 80%);
    transition: opacity 0.45s ease;
}
.sg-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.82;
    background: linear-gradient(to left, rgba(4, 8, 28, 0.94) 0%, rgba(4, 8, 28, 0.84) 30%, rgba(4, 8, 28, 0.3) 60%, rgba(4, 8, 28, 0) 80%);
    transition: opacity 0.45s ease;
}
.sg-body {
    position: relative;
    z-index: 2;
    width: 100%;
    /* el 15% de abajo deja libre la franja donde viven los bullets del
       carrusel: si no, el rollover de la fila inferior se les encima */
    padding: 0 9% 15%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
}
.sg-kicker {
    font-family: PoppinsRegular;
    font-size: 0.72vw;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8ff0ff;
}
.sg-name {
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.9vw;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* Regla que crece en rollover, debajo del nombre */
.sg-name::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    margin-top: 0.9vh;
    border-radius: 2px;
    background: linear-gradient(90deg, #c9ffa1, #8ff0ff);
    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sg-tip {
    font-family: PoppinsRegular;
    font-size: 0.86vw;
    line-height: 1.55;
    color: #bcd4f2;
    max-width: 28ch;
    max-height: 0;
    opacity: 0;
    transform: translateY(8px);
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.45s ease;
}
.sg-cell:hover .sg-ph img,
.sg-cell:focus-visible .sg-ph img { transform: scale(1.1); filter: saturate(1.02) brightness(0.8); }
/* El velo NO se afloja en rollover: es cuando aparece el texto y mas falta hace. */
.sg-cell:hover::after,
.sg-cell:focus-visible::after { opacity: 1; }
.sg-cell:hover::before,
.sg-cell:focus-visible::before { opacity: 1; }
.sg-cell:hover .sg-name,
.sg-cell:focus-visible .sg-name { transform: translateY(-0.4vh); }
.sg-cell:hover .sg-name::after,
.sg-cell:focus-visible .sg-name::after { width: 3.4vw; }
.sg-cell:hover .sg-tip,
.sg-cell:focus-visible .sg-tip { max-height: 9em; opacity: 1; transform: none; }
.sg-cell:focus-visible { outline: 3px solid #c9ffa1; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
    .sg-ph img, .sg-name, .sg-name::after, .sg-tip, .sg-cell::after { transition: none; }
}
@media screen and (max-width: 800px) {
    .services-nav-title { font-size: 6.4vw; padding: 2.6vh 0 1.6vh; }
    /* filas con alto propio y mas aire: el texto de cada tarjeta se apoyaba
       encima de la cara de la foto. Con la celda mas alta el copy baja y la
       imagen queda despejada arriba. La seccion deja de estar clavada a 100vh
       para que entren las cinco filas en lugar de recortarse a la mitad. */
    .section.services-menu { height: auto; min-height: 100vh; overflow: visible; }
    .services-nav-static { height: auto; }
    /* de absolute a relative: si queda fuera de flujo la seccion no puede
       crecer con la grilla y las ultimas filas se recortan */
    .services-nav { position: relative; inset: auto; height: auto; padding: 0 0 6vh; }
    /* Una tarjeta por fila, a ancho completo de pantalla. Las fotos de titulo
       son 2.84:1; en dos columnas la celda quedaba casi cuadrada y el recorte
       de object-fit se comia a la persona. A 5:2 y full bleed casi no recorta. */
    .services-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; height: auto; flex: none; gap: 3px; }
    .services-grid .sg-cell { aspect-ratio: 5 / 2; }
    .sg-body { padding: 0 6% 6%; }
    .sg-kicker { font-size: 2.5vw; }
    .sg-name { font-size: 5vw; }
    .sg-name::after { width: 7vw; margin-top: 0.7vh; }
    .sg-tip { font-size: 2.7vw; max-height: 9em; opacity: 1; transform: none; }
    .sg-ph img { filter: saturate(0.9) brightness(0.62); }
}
.services-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    width: 100%;
    max-width: 1000px;
    justify-items: center;
}
.services-nav-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1vh;
    width: 16vw;
    max-width: 230px;
    aspect-ratio: 1;   /* botones redondos */
    position: relative;
    padding: 1vh;
    text-align: center;
    background: rgba(5, 11, 46, 0.66);
    border: 2px solid rgba(70, 214, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 12px rgba(70, 214, 255, 0.1);
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.services-nav-grid a .services-nav-ico {
    position: static;        /* anula el position:absolute de .services-slide-1 img */
    transform: perspective(600px) rotateY(0deg);
    left: auto;
    bottom: auto;
    order: -1;               /* ícono arriba */
    width: 3.2vw;
    max-width: 50px;
    max-height: none;
    height: auto;
    margin: 0 0 0.4vh;
    display: block;
    transition: transform 0.6s ease;
}
.services-nav-grid a span {
    font-family: PoppinsRegular;
    color: #fff;                 /* GAME en blanco */
    font-size: 1.2vw;            /* mas grande */
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.services-nav-grid a span i {   /* ON con el gradiente del logo (cyan -> verde) */
    font-style: normal;
    background: linear-gradient(160deg, #35e6d8 0%, #46d6ff 35%, #8fe63f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.services-nav-grid a strong {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 1.25vw;          /* que el label no supere el ancho de GAME ON */
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.services-nav-grid a:hover {
    background: rgba(12, 22, 66, 0.72);
    border-color: #46d6ff;
    transform: translateY(-5.2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(70, 214, 255, 0.3);
    z-index: 10;   /* el boton (y su tooltip) por encima de los demas */
}
.services-nav-grid a:hover span { letter-spacing: 4px; transform: translateY(-2.6px); }
.services-nav-grid a:hover strong { transform: scale(1.104) translateY(-7.8px); }   /* pequeño salto + freno suave (overshoot) */
.services-nav-grid a:hover .services-nav-ico { transform: perspective(600px) rotateY(360deg); }   /* gira el logo sobre eje vertical */
/* Tooltip explicativo en rollover (animado) */
.services-nav-tip {
    position: absolute;
    left: 60%;
    bottom: 76%;
    transform-origin: bottom left;
    transform: translateY(10px) scale(0.94);
    width: max-content;
    max-width: 19vw;
    padding: 1.6vh 1.5vw;
    background: rgba(5, 11, 46, 0.96);
    border: 2px solid rgba(70, 214, 255, 0.4);
    border-radius: 16px;
    color: #dff1ff;
    font-family: PoppinsRegular;
    font-style: normal;
    font-size: 0.95vw;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 6;
}
.services-nav-tip::after {   /* cola del globo apuntando al boton */
    content: '';
    position: absolute;
    left: 22px;
    bottom: -12px;
    width: 18px;
    height: 18px;
    background: rgba(5, 11, 46, 0.96);
    border-right: 2px solid rgba(70, 214, 255, 0.4);
    border-bottom: 2px solid rgba(70, 214, 255, 0.4);
    transform: rotate(45deg);
}
.services-nav-grid a:hover .services-nav-tip { opacity: 1; transform: translateY(0) scale(1); }
@media screen and (max-width: 800px) {
    .services-nav-tip { max-width: 62vw; font-size: 3.2vw; padding: 1.8vh 4.5vw; left: 42%; bottom: 78%; }
}
@media screen and (max-width: 800px) {
    /* sin padding lateral: la grilla de secciones va a ancho completo */
    .services-nav { gap: 3vh; padding: 0 0 6vh; }
    .services-nav-title { font-size: 7vw; }
    .services-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 5vw; }
    .services-nav-grid a { width: 40vw; max-width: 220px; aspect-ratio: 1; }
    .services-nav-grid a .services-nav-ico { width: 10vw; max-width: 54px; margin: 0 0 0.3vh; }
    .services-nav-grid a span { font-size: 3.2vw; }
    .services-nav-grid a strong { font-size: 4vw; }
}
.services-slider-bullets {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    top: 95%;
    position: absolute;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
}
.services-slider-bullet {
    height: 0.5vw;
    width: 3.36vw;
    background-color: #ffffff5e;
    margin: 0 0.8vw;
    cursor: pointer;
}
.services-slider-bullet-active {
    background-color: #fff;
}


.products-content {
    padding: 0;
    background-image: url('../img/productos-bg.jpg');
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.products-carousel {
    /* Marco de referencia de las tarjetas. Antes el ancestro posicionado era
       la seccion entera y la posicion vertical dependia del padding, que
       ancla por ARRIBA: en una pantalla alta la tarjeta se iba contra el
       borde de abajo. Con esto se centran en el alto de esta caja y ya no
       importa cuanto mida. Las flechas y las bolitas estan AFUERA de este
       div, asi que siguen refiriendose a la seccion como antes. */
    position: relative;
    width: 100%;
    height: 50vw;
    overflow: hidden;
    padding: 4% 0;
}
.products-items {
    
}
/* El marco. Es mas angosto que el video (9:17.5 contra los 240:426 que trae
   Vimeo), asi que el iframe de adentro sobresale a los costados y se recorta:
   por eso overflow hidden. Sin ese recorte, achicar el ancho dejaria bandas
   negras en vez de una tarjeta llena. */
.products-item {
    position: absolute;
    /* centrada en el alto: top al 50% y el translateY(-50%) va en cada .pos-N,
       antes del scale, para que se aplique sin escalar */
    top: 50%;
    height: 53vw;
    aspect-ratio: 9 / 17.5;
    width: auto;
    box-sizing: border-box;
    border: 5px solid #fff;
    border-radius: 2vw;
    overflow: hidden;
    /* el video no debe comerse el arrastre ni los clicks del carrusel */
    pointer-events: none;
}
/* Esqueleto de carga. Un iframe de Vimeo tarda en pintar el primer cuadro y
   mientras tanto se ve el hueco del marco: esto lo tapa con un barrido en los
   azules de la marca. Se apaga cuando el reproductor avisa que esta listo
   (clase video-listo desde main.js), no con un temporizador a ojo. */
/* El alto va en vw, que crece con el ANCHO de la pantalla y no con el alto:
   de 1700px para arriba la tarjeta se desbordaba -en 1920x1080 llegaba a
   1018px, el 94% del alto util-. El techo en vh solo se aplica ahi; abajo de
   ese ancho queda el tamano de siempre, que ya estaba aprobado. */
@media screen and (min-width: 1700px) {
    .products-item { height: min(53vw, 76vh); }
}
.products-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Dos capas: el logo quieto en el centro y, detras, el barrido de azules.
       Antes el marco quedaba transparente y al entrar a la seccion se veian
       cinco fileteados vacios hasta que pintaba el primer cuadro. */
    background-image: url(../img/logo.png),
                      linear-gradient(110deg, #070e30 30%, #1a2a6e 50%, #070e30 70%);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, 100% 0;
    background-size: 46% auto, 220% 100%;
    background-color: #070e30;
    animation: prodCargando 1.4s linear infinite;
    transition: opacity 0.45s ease;
}
.products-item.video-listo::after { opacity: 0; }
/* solo se mueve la capa del degrade; el logo se queda donde esta */
@keyframes prodCargando {
    to { background-position: center center, -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .products-item::after { animation: none; }
}
.products-item iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    aspect-ratio: 240 / 426;   /* proporcion real del video, sin deformar */
    border: 0;
    display: block;
}
/* Abanico de cuatro. Antes eran nueve gifs y el centro era pos-5; ahora son
   cuatro videos y el centro es pos-1. Los de los costados van atenuados y mas
   chicos, igual que antes.

   Las cinco se centran en el 50% y de ahi se corren a izquierda y derecha con
   el MISMO numero. Antes cada una se colocaba con un porcentaje de su borde
   izquierdo (46 / 59 / 28 / 15) y el abanico no era simetrico: en 1920x1080
   los centros caian a +123 y +373 de un lado y a -222 y -472 del otro, o sea
   352px de margen izquierdo contra 451 del derecho, y el carrusel entero se
   veia corrido hacia la izquierda. Con nueve gifs pasaba desapercibido.

   El corrimiento va en % del ancho de la propia tarjeta -que es el mismo para
   las cinco antes de escalar, porque comparten alto y aspect-ratio-, asi
   acompana el tamano en cualquier ancho de pantalla, incluido el techo en vh
   de 1700 para arriba. Y va DESPUES del translateX(-50%) en la lista: las
   traslaciones se aplican sin escalar, que es lo que se quiere. */
.pos-1 {
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(1);
    z-index: 10;
    transition: all 0.3s ease;
}
.pos-2 {
    left: 50%;
    transform: translateX(-50%) translateX(31%) translateY(-50%) scale(0.85);
    z-index: 9;
    filter: brightness(30%);
    transition: all 0.3s ease;
}
.pos-3 {
    left: 50%;
    transform: translateX(-50%) translateX(93%) translateY(-50%) scale(0.68);
    z-index: 8;
    filter: brightness(30%);
    transition: all 0.3s ease;
}
.pos-4 {
    left: 50%;
    transform: translateX(-50%) translateX(-31%) translateY(-50%) scale(0.85);
    z-index: 9;
    filter: brightness(30%);
    transition: all 0.3s ease;
}
.pos-5 {
    left: 50%;
    transform: translateX(-50%) translateX(-93%) translateY(-50%) scale(0.68);
    z-index: 8;
    filter: brightness(30%);
    transition: all 0.3s ease;
}
/* De 1700 para arriba el abanico se abre y ocupa el ancho de la pantalla.

   ESTE BLOQUE TIENE QUE IR DESPUES de las reglas .pos-N, no arriba junto al
   resto de lo de 1700: los selectores tienen la misma especificidad y gana el
   ultimo. Puesto antes, no se aplica y no avisa.

   Los corrimientos son % del ancho de la tarjeta, asi que no se adaptan al
   monitor: en 1920 la tarjeta ocupa el 22% del ancho y sobra lugar, pero en
   1440 ocupa el 27% y con estos numeros la ultima se iria de pantalla -borde
   derecho en 1447 sobre 1440-. Por eso el abanico ancho vive aca.

   Los dos pares se mueven juntos. Corriendo solo las de afuera se abria un
   hueco de 61px contra las de adentro y se veian cinco tarjetas sueltas en vez
   de un abanico; con 83% y 151% se superponen ~38px cada una. */
@media screen and (min-width: 1700px) {
    /* En vw, no en % del ancho de la tarjeta. De 1700 para arriba el alto de
       la tarjeta lo pone `76vh`, asi que en una pantalla alta crece -508px de
       ancho en 1920x1300 contra 422 en 1920x1080- y con el corrimiento atado
       a ella el abanico se abria hasta dejar 20px de margen. En vw el ancho
       del abanico depende solo del ancho de la pantalla, que es lo correcto.
       18.2vw y 33.2vw son los mismos 350 y 637 px que ya estaban aprobados en
       1920x1080. */
    .pos-2 { transform: translateX(-50%) translateX(18.2vw) translateY(-50%) scale(0.85); }
    .pos-4 { transform: translateX(-50%) translateX(-18.2vw) translateY(-50%) scale(0.85); }
    .pos-3 { transform: translateX(-50%) translateX(33.2vw) translateY(-50%) scale(0.68); }
    .pos-5 { transform: translateX(-50%) translateX(-33.2vw) translateY(-50%) scale(0.68); }
}
/* Ojo si alguna vez se decide sacarlas: la logica de rotacion vive en los
   handlers de click de estas dos flechas, y tanto el swipe como el giro
   automatico la reusan con .trigger('click'). Se pueden ocultar por CSS -asi
   estan en mobile-, pero si se borran del HTML el carrusel se queda quieto. */
.products-carousel-left {
    position: absolute;
    top: 48%;
    left: 5%;
    cursor: pointer;
    width: 3.2vw;
    transition: all 0.3s ease;
}
.products-carousel-left:hover {
    transform: scale(1.1);
}
.products-carousel-right {
    position: absolute;
    top: 48%;
    right: 5%;
    cursor: pointer;
    width: 3.2vw;
    transition: all 0.3s ease;
}
.products-carousel-right:hover {
    transform: scale(1.1);
}

.industries-content {
    padding: 0;
    background-image: url('../img/industrias-bg.jpg');
    background-position: top center;
    /* Antes era auto 100%: el fondo se escalaba al alto del contenido y, al
       pasar el titulo de PNG a texto, el bloque se acorto y la imagen dejaba
       de cubrir el ancho -> bandas negras a los lados y abajo. Con cover
       siempre cubre, y el color de respaldo es el azul del propio archivo. */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0283eb;
    /* La seccion media 761px contra los 900 de sus vecinas, y debajo asomaba
       el fondo negro de la pagina: al pasar el titulo a texto el bloque
       quedo mas bajo que cuando el PNG aportaba su alto propio. */
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.industries-title { padding: 0 0 1.6%; }
/* Bajada de Industrias: es el texto que antes venia quemado en el PNG del
   titulo, con la misma forma - versalita blanca, espaciada, centrada bajo el
   titulo - solo que ahora en HTML, asi se traduce en los tres idiomas. */
.industries-sub {
    font-family: PoppinsRegular;
    font-size: 1vw;
    line-height: 1.5;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    max-width: 80vw;
    margin: 0 auto;
    padding: 0 0 3.4%;
}
.industries-carousel {
    display: block;
    margin: 0 auto;
    width: 80%;
    /* antes reservaba 32.36vw y los items miden 13.2: sobraban 19vw muertos
       que empujaban todo el bloque hacia arriba */
    height: auto;
    overflow: hidden;
}
.industries-items {
    display: flex;
    width: max-content;
    will-change: transform;   /* la mueve GSAP: sin transicion CSS que le pelee */
}
.industries-item {
    flex: 0 0 auto;
    width: 15.432vw;
    margin: 2vw 0.3vw 0vw 0.3vw;
    font-size: 1.238vw;
    font-family: 'PoppinsRegular';
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.industries-item img, .industries-item span {
    display: block;
    margin: 0 auto;
    width: 7.432vw;
}
.industries-carousel-left {
    position: absolute;
    top: 52%;
    left: 3%;
    cursor: pointer;
    width: 3.2vw;
    transition: all 0.3s ease;
}
.industries-carousel-left:hover {
    transform: scale(1.1);
}
.industries-carousel-right {
    position: absolute;
    top: 52%;
    right: 3%;
    cursor: pointer;
    width: 3.2vw;
    transition: all 0.3s ease;
}
.industries-carousel-right:hover {
    transform: scale(1.1);
}

.contact {
    overflow: hidden;
}
.contact-content {
    background-image: url(../img/contacto-bg.jpg);
    background-position: top center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    min-height: 45vw;
    padding-top: 8%;
    padding-bottom: 6%;
}
/* Claim de contacto en tipografia, ya no dentro del PNG del logo.
   Va debajo del logo y a la izquierda, sin invadir la columna del formulario. */
.contact-claim {
    position: absolute;
    left: 9%;
    top: 52%;
    /* No es 24% como el logo: logo.png trae 5,69% de transparencia a la derecha
       (medido, 31 px de 545), asi que su borde visible cae antes que el de su
       caja. 24% - 24%*0,0569 = 22,63% hace que el texto termine donde termina la
       N del logo, que es lo que se ve. */
    width: 22.63%;
    text-align: right;
    margin: 0;
    z-index: 2;
    font-family: ArdelaEdgeX02Bold;
    font-size: 2.5vw;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 26px rgba(0, 20, 60, 0.45);
}
.contact-claim span {
    display: block;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.contact-logo {
    position: absolute;
    width: 24%;
    left: 9%;
    top: 38%;
    text-align: center;
    z-index: 2;
}
.contact-form {
    position: relative;
    width: 33%;
    left: 53%;
    top: 21%;   /* deja libre la franja del menu fijo */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.4vw;
    align-items: start;
    text-align: center;
    z-index: 2;
    padding: 2.6% 2.4%;
    border: solid 1px rgba(255, 255, 255, 0.16);
    border-radius: 1.5vw;
    background: rgba(8, 26, 74, 0.30);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1vw 2.4vw rgba(2, 14, 48, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* sin esto, las opciones largas del select estiran su columna */
.contact-form > * { min-width: 0; }
/* ningun campo puede exceder su columna */
.contact-form input,
.contact-form select,
.contact-form .wheel-input {
    max-width: 100%;
    box-sizing: border-box;
}
.contact-form-input { min-width: 0; overflow: hidden; }
/* el campo de Industria despliega una rueda por fuera de su caja: ese unico
   contenedor no puede recortar, o el panel queda invisible */
.contact-form-input.has-wheel { overflow: visible; position: relative; z-index: 5; }
.contact-form > .contact-form-check,
.contact-form > .contact-form-date,
.contact-form > .gr-content,
.contact-form > button,
.contact-form > .contact-label-message { grid-column: 1 / -1; }
.contact-form-input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.contact-form-check {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 4%;
}
.contact-form-check input {
    min-width: 1.1vw;
    height: 1.1vw;
    accent-color: #35e6d8;
    border-radius: 6px;
    cursor: pointer;
}
.contact-form-check input:focus-visible { outline: 3px solid #8ff0ff; outline-offset: 3px; }
.contact-form-check label { cursor: pointer; }
.contact-form-check label {
    text-align: left;
    margin-left: 2%;
    font-family: PoppinsBold;
    font-size: 1.03vw;
}
.contact-form-check .min-label {
    font-size: 0.67vw;
}
.contact-form-check a {
    color: #fff;
}
.contact-form-input label {
    display: block;
    font-size: 0.82vw;
    margin-bottom: 1.4%;
    margin-top: 3%;
    font-family: PoppinsBold;
    opacity: 0.88;
}
.contact-form-input input, .contact-form-input select {
    font-family: 'PoppinsRegular';
    font-size: 0.86vw;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
    border: solid 1px rgba(255, 255, 255, 0.15);
    width: -webkit-fill-available;
    padding: 1.1% 4.2%;
    border-radius: 100px;
    min-height: 38px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-form-input input::placeholder { color: rgba(255, 255, 255, 0.55); }
.contact-form-input input:hover, .contact-form-input select:hover {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.3);
}
/* foco visible: requisito de accesibilidad, no solo estetica */
.contact-form-input input:focus, .contact-form-input select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgba(143, 240, 255, 0.75);
    box-shadow: 0 0 0 2px rgba(143, 240, 255, 0.22);
}
.contact-form-input select option { color: #0a2050; }
select option:not(first-child) {
    color: #000;
}
.contact-form-date {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-top: 2%;
}
.contact-form-date label {
    display: block;
    font-size: 0.78vw;
    margin-bottom: 2%;
    font-family: PoppinsBold;
    text-align: left;
    margin-left: 2vw;
}
.contact-form-date input {
    font-family: 'PoppinsRegular';
    font-size: 1.03vw;
    color: #fff;
    background-color: transparent;
    border: solid 0.21vw #fff;
    width: -webkit-fill-available;
    padding: 2% 4%;
    border-radius: 6px;
    color-scheme: dark;
    margin-left: 2vw;
}
#time {
    height: 1.9vw;
}
.contact-form-input-required {
    border: solid 0.21vw red !important;
}
.contact-form button {
    display: block;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.05vw;
    letter-spacing: 0.08em;
    padding: 1.4% 6% 3% 6%;
    border: none;
    border-radius: 100px;
    margin-top: 7%;
    min-height: 44px;
    color: #0a2050;
    cursor: pointer;
    box-shadow: 0 0.5vw 1.4vw rgba(2, 14, 48, 0.28), 0 0 1.4vw rgba(143, 240, 255, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.2vw 2.6vw rgba(2, 14, 48, 0.4), 0 0 2.8vw rgba(201, 255, 161, 0.55);
}
.contact-form button:active { transform: translateY(-1px) scale(0.985); }
.contact-form button:focus-visible { outline: 3px solid #c9ffa1; outline-offset: 4px; }
.contact-form button:hover {
    transform: scale(1.05);
}
.contact-label-message {
    display: none;
    font-family: ArdelaEdgeX02Bold;
    font-size: 25px;
    color: #fff;
    margin: 5% 0 0 0;
}
.gr-content {
    margin-top: 5%;
}


.footer {
    background-color: #00120c;
    min-height: 40vh;
    margin-top: -3px;
    position: relative;
}
.footer-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.footer-menu-col-lg {
    width: 36%;
    padding: 12% 0 0 0;
}
.footer-menu-col {
    width: 12%;
    padding: 10% 0 10% 0;
}
.footer-menu-col-redes {
    width: 20%;
}
.footer-menu-col h4 {
    font-family: ArdelaEdgeX02Bold;
    font-size: 2.735vw;
    margin: 0 0 20% 0;
}
.footer-menu-col h5 {
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.81vw;
    margin: 4% 0 7% 0;
    text-align: center;
}
.footer-menu-col ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.footer-menu-col ul li {
    margin-bottom: 10%;
}
.footer-menu-col ul a {
    color: #fff;
    text-decoration: none;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.5vw;
}
.footer-menu-col .social {
    text-align: center;
}
.footer-menu-col .social img {
    margin-right: 1.5%;
    margin-left: 1.5%;
    height: 2.8vw;
    transition: all 0.3s ease;
}
.footer-menu-col .social img:hover {
    transform: scale(1.05);
}
.footer-logo {
    width: 78.82%;
}
.copy {
    font-family: 'PoppinsRegular';
    font-size: 0.6vw;
    color: #fff;
    text-align: center;
    padding: 0 0 3vw 0;
    display: block;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.m-desk {
    display: block;
}
.m-mob, .m-mob-flex {
    display: none !important;
}

@media screen and (max-width: 800px) {
    .whatsapp-btn {
        width: 12vw;
        right: 2%;
    }
    .m-desk {
        display: none !important;        
    }
    .m-mob {
        display: inline-block !important;
    }
    .m-mob-flex {
        display: flex !important;
    }
    .policy-content {
        /* 16vh dejaba el titulo debajo del logo fijo -que en policy no tiene un
           hero abajo que lo sostenga- y se pisaban 26 px. 22vh lo despeja. */
        padding: 22vh 6vw 10vh;
        background: radial-gradient(ellipse at 50% -4%, #14205f 0%, #070e30 55%, #04081c 100%);
        height: auto;
    }
    .policy-title {
        font-size: 7.5vw;
        letter-spacing: 1px;
        margin: 0 auto 4vh;
    }
    .policy-txt {
        width: 100%;
        height: auto;
        padding: 0;
        font-size: 3.6vw;
        line-height: 1.8;
    }
    .policy-txt h2 { font-size: 5.2vw; margin: 3.5vh 0 1.4vh; }
    .policy-txt h3 { font-size: 4vw; margin: 2.4vh 0 1vh; }
    .policy-txt ul { padding-left: 4.5vw; }
    .policy-txt .policy-index ul { columns: 1; }
    .home {
        height: 100%;
    }
    .logo {
        top: 2%;
        left: 1%;
        width: 86vw;
    }
    .home-slider {
        height: 100%;
        background-color: #0100a6;     
    }
    .home-slide-1 {
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .home-slide-d {
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /* En vertical la foto se ve entera. Antes iba a `height: 100%` con
       `object-fit: cover`, y como los verticales son 2:3 y la pantalla del
       telefono ronda 9:19.5, el recorte se comia el 31% del ancho: en casi
       todos los slides cortaba al medio la tarjeta del juego. Ahora el alto lo
       manda el ancho, la foto ocupa la franja de arriba y abajo sigue el fondo
       de particulas del slide, con el borde disuelto para que no se vea el
       canto. */
    .home-slide-d img, .home-slide-1 img {
        width: 100%;
        height: auto;
        aspect-ratio: 848 / 1264;
        display: block;
        top: 0;
        left: 0;
        bottom: auto;
        margin: 0;
        position: absolute;
        object-fit: cover;
        object-position: 50% 50%;
        -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
    }
    .header-menu {
        right: unset;
        width: 80%;
        left: 10%;
        top: 6%;
    }
    .logo-img {
        margin: 10% 0 19% 0;
    }
    /* El bloque se despega 2.5vw del canto. Pegado en `right: 0` la pastilla de
       idioma -que es un pill redondeado- perdia contra el borde de la pantalla
       su borde derecho y el glow, y se leia como cortada. La hamburguesa
       acompana el corrimiento y no pasa nada: su fondo sobresale del viewport
       igual, que es como tiene que verse (border-radius 26% 0 0 26%, cortado a
       la derecha, es una lengueta pegada al canto). El offset va en px y no en
       vw a proposito: con 2.5vw, de 600 para arriba el corrimiento crecia tanto
       que la lengueta se despegaba del canto y quedaba una caja con el lado
       derecho recto flotando. */
    .menu-opts {
        position: fixed;
        right: 10px;
        z-index: 30;
        top: 4.6%;
        width: 10.262vw;
        transform: translateY(50px);
    }
    #lang, #mob-lang {
        font-family: 'ArdelaEdgeX02Bold';
        color: #fff;
        background-color: rgba(10, 24, 54, 0.45);
        border: solid 1px rgba(255, 255, 255, 0.6);
        border-radius: 100px;
        padding: 0% 4% 10% 4%;
        font-size: 2.8vw;
        width: 100%;
        box-shadow: 0 0 8px rgba(130, 220, 255, 0.22), inset 0 0 6px rgba(130, 220, 255, 0.1);
        transition: box-shadow 0.35s ease, border-color 0.35s ease;
    }
    #lang:focus, #mob-lang:focus {
        border-color: rgba(160, 235, 255, 0.9);
        box-shadow: 0 0 14px rgba(130, 220, 255, 0.45), inset 0 0 8px rgba(130, 220, 255, 0.16);
        outline: none;
    }
    .menu-btn {
        font-size: 25px;
        width: 8vw;
        margin: 0;
    }
    .menu-btn-bg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 30%;
        padding: 2.8vw 4vw 2.8vw 4vw;
        box-sizing: border-box;
        /* fondo cortado a la derecha, redondeado a la izquierda; el icono NO se recorta (overflow visible) */
        background-color: rgba(16, 12, 62, 0.6);
        border-radius: 26% 0 0 26%;
    }
    .menu-btn span {
        padding: 3% 2% 3% 3%;
        width: 100%;
    }
    .menu-btn span img {
        width: 13%;
    }
    .menu-popup {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 70% 18%, rgba(23, 40, 122, 0.78) 0%, rgba(6, 11, 46, 0.82) 55%, rgba(0, 18, 12, 0.86) 100%);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        z-index: 40;
        display: none;
        overflow-y: auto;
    }
    /* Entrada suave del menu al abrir */
    .menu-popup { animation: menuPopupIn 0.5s cubic-bezier(.22, .61, .36, 1) both; }
    @keyframes menuPopupIn {
        from { opacity: 0; transform: translateY(-14px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    /* Los items entran escalonados desde la derecha */
    .menu-popup .menu-nav > a,
    .menu-popup .menu-sub a { animation: menuItemIn 0.55s cubic-bezier(.22, .61, .36, 1) both; }
    .menu-popup .menu-nav > a:nth-child(1) { animation-delay: 0.10s; }
    .menu-popup .menu-nav > a:nth-child(2) { animation-delay: 0.16s; }
    .menu-popup .menu-nav > a:nth-child(3) { animation-delay: 0.22s; }
    .menu-popup .menu-sub a:nth-child(1) { animation-delay: 0.26s; }
    .menu-popup .menu-sub a:nth-child(2) { animation-delay: 0.30s; }
    .menu-popup .menu-sub a:nth-child(3) { animation-delay: 0.34s; }
    .menu-popup .menu-sub a:nth-child(4) { animation-delay: 0.38s; }
    .menu-popup .menu-nav > a:nth-child(5) { animation-delay: 0.42s; }
    .menu-popup .menu-nav > a:nth-child(6) { animation-delay: 0.48s; }
    @keyframes menuItemIn {
        from { opacity: 0; transform: translateX(26px); }
        to { opacity: 1; transform: translateX(0); }
    }
    /* Salida suave del menu al cerrar (outro, espejo de la entrada) */
    .menu-popup.closing { animation: menuPopupOut 0.42s ease both; }
    @keyframes menuPopupOut {
        from { opacity: 1; transform: translateY(0) scale(1); }
        to { opacity: 0; transform: translateY(-26px) scale(0.95); }
    }
    .menu-popup.closing .menu-nav > a,
    .menu-popup.closing .menu-sub a { animation: menuItemOut 0.34s ease both; }
    .menu-popup.closing .menu-nav > a:nth-child(6) { animation-delay: 0.02s; }
    .menu-popup.closing .menu-nav > a:nth-child(5) { animation-delay: 0.05s; }
    .menu-popup.closing .menu-nav > a:nth-child(3) { animation-delay: 0.08s; }
    .menu-popup.closing .menu-nav > a:nth-child(2) { animation-delay: 0.11s; }
    .menu-popup.closing .menu-nav > a:nth-child(1) { animation-delay: 0.14s; }
    @keyframes menuItemOut {
        from { opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(44px); }
    }
    .menu-close {
        position: absolute;
        top: 4.5%;
        right: 9%;
        cursor: pointer;
        width: 6.93vw;
        z-index: 2;
    }
    .menu-logo {
        position: absolute;
        top: 4.5%;
        left: 8%;
        width: 21.59vw;
        z-index: 2;
    }
    /* Menu mobile en texto (estilo desktop, vertical, justificado derecha, pills con blur + glow animado) */
    .menu-nav {
        position: relative;
        top: 15vh;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1.9vh;
        padding: 0 7vw 12vh;
    }
    .menu-popup .menu-nav a {
        font-family: ArdelaEdgeX02Bold;
        color: #fff;
        font-size: 6.4vw;
        line-height: 1;
        letter-spacing: 1px;
        text-decoration: none;
        text-align: right;
    }
    .menu-popup .menu-nav > a {
        padding: 1.5vh 5.5vw;
        border-radius: 40px;
        background: rgba(16, 12, 62, 0.45);
        -webkit-backdrop-filter: blur(9px);
        backdrop-filter: blur(9px);
        border: 1px solid rgba(120, 200, 255, 0.16);
        transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
    }
    .menu-popup .menu-nav > a:hover,
    .menu-popup .menu-nav > a:active,
    .menu-popup .menu-nav > a.on {
        color: #7fe0ff;
        background: rgba(70, 214, 255, 0.14);
        text-shadow: 0 0 14px rgba(70, 214, 255, 0.8);
        box-shadow: 0 0 0 1px rgba(70, 214, 255, 0.6), 0 0 26px rgba(70, 214, 255, 0.55);
    }
    .menu-popup .menu-sub {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1.2vh;
        margin: 0.4vh 0;
        padding: 1.4vh 0;
        width: auto;
    }
    .menu-popup .menu-sub a {
        font-family: PoppinsBold;
        color: #9fd0ff;
        font-size: 4.2vw;
        text-align: right;
        padding: 1vh 4.5vw;
        border-radius: 30px;
        background: rgba(16, 12, 62, 0.34);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        border: 1px solid rgba(120, 200, 255, 0.13);
        transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, text-shadow 0.2s ease;
    }
    .menu-popup .menu-sub a:hover,
    .menu-popup .menu-sub a:active {
        color: #7fe0ff;
        background: rgba(70, 214, 255, 0.14);
        text-shadow: 0 0 12px rgba(70, 214, 255, 0.7);
        box-shadow: 0 0 0 1px rgba(70, 214, 255, 0.55), 0 0 20px rgba(70, 214, 255, 0.5);
    }


    .home-slider-bullets {
        top: 92%;
    }
    .home-slider-bullet {
        height: 1vw;
        width: 10vw;
        margin: 0 2vw;
    }

    .works-content {
        background-image: url(../img/mob/work-bg.jpg);
    }
    .works-title {
        width: 44%;
        padding: 25% 0 8% 0;
    }
    .works-items {
        width: 96vw;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw;
        padding-bottom: 22%;
    }
    .works-items img {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    /* Sin esto la seccion arrastra el `min-height: 100vh` de escritorio: en
       vertical el contenido mide la mitad y abajo quedaba media pantalla de
       azul vacio. */
    .clients-content {
        background-image: url(../img/mob/clientes-bg.jpg);
        min-height: 0;
        padding-bottom: 6%;
    }

    .clients-title {
        padding: 20% 0 6% 0;
        width: 60%;
    } 
    .clients-carousel-mob {
        overflow: hidden;
        display: block !important;
        margin: 0 auto;
        height: 40vw;
        padding-bottom: 0;
        padding-top: 10%;
        width: 100%;
    }
    .clients-mob-items {
        width: 150%;
        position: relative;
        transition: all 1s ease;
    }
    .clients-item {
        width: 30vw;
        height: 30vw;
        min-width: 30vw;
        margin: 2vw 0vw;
        font-size: 2vw;
        vertical-align: top;
        text-align: center;
    }
    .clients-item img {
        display: block;
        margin: 0% auto;
        width: 80%;
    }
    .clients-item span {
        display: block;
        margin: 15% auto;
        width: 100%;
    }
    .clients-slider-bullets {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        top: 90%;
        position: absolute;
        left: 50%;
        z-index: 2;
        transform: translateX(-50%);
    }
    .clients-slider-bullet {
        height: 1.2vw;
        width: 8vw;
        background-color: #ffffff5e;
        margin: 0 1.5vw;
    }
    .clients-slider-bullet-active {
        background-color: #fff;
    }

    .benefits-content {
        background: radial-gradient(ellipse at 50% 34%, #1d6f97 0%, #14506f 38%, #0d3550 72%, #071f33 100%);
    }
    .benefits-title {
        width: 75%;
        padding: 10% 0 8% 0;
    }
    /* En touch no hay hover: las filas van todas abiertas y el acordeon se apaga */
    .benefits-items {
        width: 92vw;
        height: auto;
        min-height: 0;
        padding-bottom: 10%;
    }
    .b-row {
        flex: 0 0 auto;
        gap: 4vw;
        padding: 4.4vh 2vw 4.4vh 4vw;
        align-items: flex-start;
    }
    .b-row::before { left: 0; top: 0; bottom: 0; width: 10px; border-radius: 0; }
    .b-num { font-size: 14vw; min-width: 2.2em; color: #8ff0ff; -webkit-text-stroke-color: transparent; }
    .b-title { font-size: 4.6vw; color: #fff; }
    .b-desc { font-size: 3.4vw; max-height: none; opacity: 1; transform: none; }
    /* en mobile el tope es una barra de 10px: no hay lugar para el icono */
    .b-row::after { display: none; }

    .b-row:hover, .b-row:focus-visible {
        flex-grow: 0;
        margin: 0;
        padding: 4.4vh 2vw 4.4vh 4vw;
        border-radius: 0;
        box-shadow: none;
        background-color: transparent;
    }
    .services {
        height: 100vh;
        overflow: hidden;
    }
    .services-content {
        background-image: url(../img/mob/servicios-bg.jpg);
        background-size: cover;
        height: 100vh;
    }
    .servicios-items {
        width: auto;
        height: 100vh;
        padding: 0px;
    }

    .products, .contact {
        width: 100%;
        overflow: hidden;
    }
    .products-content {
        background-image: url(../img/mob/productos-bg.jpg);
    }
    /* En mobile la tarjeta ocupaba 174vw de alto, o sea casi todo el ancho de
       pantalla, y los cuatro vecinos estaban apagados: se veia una sola
       tarjeta y no se entendia que fuera un carrusel. Ahora la central baja a
       150vw y asoman las dos de al lado.
       Las cuatro se centran igual que la del medio y despues se corren: las
       posiciones de escritorio son porcentajes de borde izquierdo y en esta
       medida quedaban asimetricas.
       pos-3 y pos-5 se van fuera de cuadro en vez de apagarse con opacity: el
       JS escribe opacity inline al revelar la seccion y le gana a la hoja de
       estilos. Sacarlas por posicion ademas las hace entrar deslizando cuando
       el carrusel rota. */
    .pos-2 {
        left: 50%;
        transform: translateX(-50%) translateX(34vw) translateY(-50%) scale(0.8);
    }
    .pos-4 {
        left: 50%;
        transform: translateX(-50%) translateX(-34vw) translateY(-50%) scale(0.8);
    }
    .pos-3 {
        left: 50%;
        transform: translateX(-50%) translateX(62vw) translateY(-50%) scale(0.68);
    }
    .pos-5 {
        left: 50%;
        transform: translateX(-50%) translateX(-62vw) translateY(-50%) scale(0.68);
    }
    .products-carousel {
        height: 180vw;
        padding: 16% 0 0 0;
    }
    .products-item {
        height: 150vw;
        /* 2vw en un telefono son 7px: las esquinas se veian casi rectas */
        border-radius: 5vw;
    }
    .products-carousel-left {
        top: 193vw;
        width: 10vw;
        display: none;
    }
    .products-carousel-right {
        top: 193vw;
        width: 10vw;
        display: none;
    }
    .products-slider-bullets {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        top: 93%;
        position: absolute;
        left: 50%;
        z-index: 2;
        transform: translateX(-50%);
    }
    .products-slider-bullet {
        height: 1.2vw;
        width: 6vw;
        background-color: #ffffff5e;
        margin: 0 1.5vw;
    }
    .products-slider-bullet-active {
        background-color: #fff;
    }

    .industries-content {
        background-image: url(../img/mob/industrias-bg.jpg);
        min-height: 0;
    }

    .industries-title {
        padding: 22% 0 3% 0;
        width: auto;
        font-size: 8.4vw;
    }
    .industries-sub { font-size: 3.1vw; letter-spacing: 0.8px; max-width: 88%; padding: 0 0 6%; }    
    .industries-carousel-mob {
        overflow: hidden;
        display: block !important;
        margin: 0 auto;
        height: 120vw;
        padding-bottom: 14%;
        width: 78%;
    }
    .industries-mob-items {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 120vw;
        align-items: flex-start;
        align-content: flex-start;
    }
    .industries-item {
        width: 26vw;
        height: 28vw;
        margin: 2vw 0vw 6vw 0vw;
        font-size: 2vw;
        vertical-align: top;
        text-align: center;
    }
    .industries-item img {
        display: block;
        margin: 15% auto;
        width: 80%;
    }
    .industries-item span {
        display: block;
        margin: 15% auto;
        width: 100%;
    }
    .industries-slider-bullets {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        top: 90%;
        position: absolute;
        left: 50vw;
        z-index: 2;
        transform: translateX(-50%);
    }

    .industries-slider-bullet {
        height: 1.2vw;
        width: 8vw;
        background-color: #ffffff5e;
        margin: 0 1.5vw;
    }
    .industries-slider-bullet-active {
        background-color: #fff;
    }


    /* El titulo de contacto en mobile. Estaba marcado .m-desk, o sea oculto en
       todos los telefonos -no solo en iPhone-, y la seccion arrancaba directo
       con el formulario, sin decir que es. El fondo de mobile es un degradado
       liso: el texto no estaba quemado ahi, faltaba y punto.
       En escritorio el claim va absoluto al lado del logo; aca vuelve al flujo
       normal, centrado y arriba del formulario. */
    .contact-claim {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        text-align: center;
        font-size: 9vw;
        line-height: 1.02;
        padding: 0 6vw;
        margin: 0 0 7vw;
        text-shadow: 0 2px 14px rgba(0, 20, 60, 0.5);
    }
    .contact-claim span {
        font-size: 5.2vw;
        line-height: 1.2;
        margin-top: 2.5vw;
        letter-spacing: 0;
    }
    .contact-content {
        background-image: url(../img/mob/contacto-bg.jpg);
        background-position: top center;
        /* cover en vez de auto 100%: el fondo se adapta al alto que pide el
           contenido en lugar de forzar la seccion a la altura de la foto */
        background-size: cover;
        background-repeat: no-repeat;
        /* antes 314vw: dejaba ~480px muertos debajo del formulario */
        min-height: 0;
        /* En px y no en %: el 8% daba 30px y el titulo quedaba debajo del
           header fijo al entrar directo por #contacto. Un % crece con el
           ancho del telefono, pero el header mide siempre lo mismo. */
        padding-top: 72px;
        padding-bottom: 12%;
    }
    .contact-form {
        position: relative;
        width: 80%;
        left: 5%;
        top: 15%;
        text-align: center;
        z-index: 2;
        border: solid 0.5vw #fff;
        padding: 5%;
        /* Antes 70%: ese hueco existia porque en mobile la seccion arrancaba
           sin titulo -estaba oculto- y habia que bajar el formulario para que
           no quedara pegado al menu. Ahora el titulo esta en el flujo y ocupa
           ese lugar, asi que 70% dejaba 263px muertos entre uno y otro. */
        margin-top: 12%;
    }
    .contact-form-input label {
        font-size: 3vw;
    }
    .contact-form-input input, .contact-form-input select {
        font-size: 4vw;
        border: solid 0.5vw #fff;
        padding: 2% 4%;
        border-radius: 1.1vw;
    }
    .contact-form button {
        font-size: 4vw;
    }
    .contact-form-check input {
        min-width: 4vw;
        height: 4vw;
    }
    .contact-form-check label {
        font-size: 3vw;
    }
    .contact-form-date label {
        font-size: 3vw;
        margin-left: 7vw;
    }
    .contact-form-date input {
        font-size: 3vw;
        margin-left: 7vw;
        border: solid 0.5vw #fff;
    }
    #time {
        height: 5.6vw;
    }
    .contact-form-check .min-label {
        font-size: 2.1vw;
    }
    .footer-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footer-menu-col-lg {
        width: 100%;
        padding: 35% 0 0 0;
    }
    .footer-logo {
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    .footer-menu-col {
        width: 80%;
        padding: 0 0 8% 0;
        text-align: center;
    }
    .footer-menu-col h4 {
        font-size: 7vw;
        margin: 0 0 10% 0;
    }
    .footer-menu-col ul li {
        margin-bottom: 6%;
    }
    .footer-menu-col ul a {
        font-size: 5vw;
    }
    .footer-menu-col-redes {
        width: 80%;
        padding-bottom: 30vw;
    }
    .footer-menu-col h5 {
        font-size: 5vw;
    }
    .footer-menu-col .social img {
        height: 7vw;
    }
    .copy {
        font-size: 2.2vw;
        padding: 0 5% 5% 5%;
    }

}
/* ===== Controles del video del home (Vimeo API) ===== */
.video-controls {
    position: absolute;
    z-index: 11;
    bottom: 8%;
    left: 10%;
    display: flex;
    gap: 0.8vw;
}
.vc-btn {
    width: 3vw;
    height: 3vw;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: clamp(14px, 1.2vw, 22px);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}
.vc-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    transform: scale(1.08);
}
@media screen and (max-width: 800px) {
    .video-controls { bottom: 12%; left: 6%; gap: 3vw; }
    .vc-btn { width: 12vw; height: 12vw; font-size: 5vw; }
}

/* ===== Dropdown en el menu (SERVICIO) ===== */
.header-menu ul li.has-dropdown { position: relative; }
.header-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: rgba(16, 12, 62, 0.68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 40;
}
.header-menu ul li.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.header-menu .dropdown a {
    display: block;
    padding: 9px 18px;
    color: #fff;
    font-family: ArdelaEdgeX02Bold;
    font-size: 0.86vw;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.header-menu .dropdown a:hover { color: #46d6ff; }

/* ===== Subpaginas (hero + contenido) ===== */
/* ===== Hero banner slider (intercala slides de texto e imagen; placeholder) ===== */
.subpage-hero-banner { width: 100%; margin: 0; padding: 0; }
.hero-banner-slider {
    position: relative;
    width: 100%;
    height: 66vh;
    min-height: 380px;
    overflow: hidden;
    border-bottom: 2px dashed rgba(120, 200, 255, 0.4);
    background: radial-gradient(circle at 50% 28%, #17287a 0%, #050b2e 62%, #00120c 100%);
}
.hb-track { display: flex; height: 100%; transition: transform 1.15s cubic-bezier(.22, .61, .36, 1); }
.hb-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12vh 8vw 0;
    box-sizing: border-box;
}
/* Slide de titulo: imagen de marca de fondo, con un velo oscuro encima para
   que el titulo blanco se lea siempre. El texto sigue siendo HTML, asi que se
   traduce solo en los tres idiomas. */
.hb-slide.hb-text {
    position: relative;
    overflow: hidden;
    background: #050b2e center/cover no-repeat;   /* la imagen la pone el generador, por seccion */
}
/* Foto de fondo del slide de titulo. Va como <picture> y no como background
   para poder servir una version vertical distinta en mobile (art direction). */
.hb-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hb-bg img, .hb-bg picture { width: 100%; height: 100%; display: block; }
.hb-bg img { object-fit: cover; object-position: center; }
.hb-slide.hb-text::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Velo del slide de titulo. Antes era un 66% parejo, que apagaba las fotos
       claras. Ahora es un degradado: fuerte donde cae el texto y casi limpio
       sobre la imagen, asi el titular se lee sin matar la foto. */
    background: linear-gradient(to top, rgba(5, 11, 46, 0.78) 0%, rgba(5, 11, 46, 0.5) 30%, rgba(5, 11, 46, 0.26) 62%, rgba(5, 11, 46, 0.18) 100%);
    pointer-events: none;
}
.hb-slide.hb-text > *:not(.hb-bg) { position: relative; z-index: 2; }
.hb-slide.hb-text h1 { text-shadow: 0 3px 24px rgba(2, 8, 26, 0.7); }
.hb-slide.hb-text p { text-shadow: 0 2px 16px rgba(2, 8, 26, 0.65); }
/* Variantes de ubicacion del texto en el slide de titulo. Las fotos llevan al
   sujeto a la izquierda y el tercio derecho despejado, asi que .hb-right es el
   que respeta la composicion; .hb-left sirve cuando la foto es al reves. */
.hb-slide.hb-text.hb-right { align-items: flex-end; text-align: right; padding-right: 5vw; }
.hb-slide.hb-text.hb-right p { margin-left: auto; max-width: 30ch; }
.hb-slide.hb-text.hb-left { align-items: flex-start; text-align: left; justify-content: flex-end; padding: 0 8vw 12vh; }
.hb-slide.hb-text.hb-left p { margin-right: auto; max-width: 34ch; }
@media (max-width: 767px) {
    /* En mobile el titulo baja al mismo lugar donde caen los epigrafes de las
       fotos, para que no quede flotando arriba encima de la cara del personaje. */
    .hb-slide.hb-text { justify-content: flex-end; padding: 0 7vw 13vh; }
    .hb-slide.hb-text.hb-right { align-items: center; text-align: center; justify-content: flex-end; padding: 0 7vw 13vh; }
    .hb-slide.hb-text.hb-right p { margin: 0 auto; max-width: none; }
    .hb-slide.hb-text.hb-left { align-items: center; text-align: center; justify-content: flex-end; padding: 0 7vw 13vh; }
    .hb-slide.hb-text.hb-left p { margin: 0 auto; max-width: none; }
}
.hb-slide.hb-text h1, .hb-slide.hb-text h2 { font-family: ArdelaEdgeX02Bold; color: #fff; font-size: 3.2vw; margin: 0 0 1.8vh; line-height: 1.05; letter-spacing: 1px; }
.hb-slide.hb-text h1 span, .hb-slide.hb-text h2 span { color: #46d6ff; }
.hb-slide.hb-text p { font-family: PoppinsRegular; color: #a9d4ff; font-size: 1.25vw; max-width: 720px; margin: 0; line-height: 1.6; }
.hb-slide.hb-image {
    background: rgba(70, 214, 255, 0.06);
    color: rgba(159, 208, 255, 0.8);
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.4vw;
    letter-spacing: 2px;
    padding: 0;   /* full-bleed cuando hay imagen */
}
/* Cuando el placeholder contiene una imagen, la imagen llena la caja y se oculta el marco */
.placeholder-img:has(img), .sp-slide:has(img) { padding: 0; border-color: transparent; }
.hb-slide.hb-image picture { display: block; width: 100%; height: 100%; }
.hb-slide.hb-image img, .placeholder-img img, .sp-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.hb-slide.hb-image img { object-position: top center; } /* hero: anclado arriba, recorta abajo */
/* Texto sobre cada slide de imagen del hero. Va en HTML, no quemado en la
   foto, para que se traduzca y se pueda editar. Alterna izquierda y derecha. */
.hb-slide.hb-image { position: relative; }
.hb-slide.hb-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(4, 8, 28, 0.88) 0%, rgba(4, 8, 28, 0.55) 24%, rgba(4, 8, 28, 0) 54%);
}
.hb-cap {
    position: absolute;
    z-index: 2;
    bottom: 9%;
    max-width: 40ch;
    text-align: left;
}
.hb-cap.cap-l { left: 5vw; }
.hb-cap.cap-r { right: 5vw; text-align: right; }
.hb-cap h2 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 2vw;
    line-height: 1.08;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 0.6em;
    text-wrap: balance;
}
.hb-cap p {
    font-family: PoppinsRegular;
    color: #c4dcff;
    font-size: 1.05vw;
    line-height: 1.6;
    margin: 0;
}
.hb-cap.cap-r p { margin-left: auto; }
.hero-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(16, 12, 62, 0.45);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.hero-banner-arrow:hover { background: rgba(16, 12, 62, 0.85); }
.hero-banner-arrow.hb-prev { left: 2vw; }
.hero-banner-arrow.hb-next { right: 2vw; }
.hero-banner-dots {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 11px;
    z-index: 3;
}
.hero-banner-dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(159, 208, 255, 0.4); cursor: pointer; transition: background 0.2s ease; }
.hero-banner-dots span.on { background: #46d6ff; }
@media screen and (max-width: 800px) {
    .hero-banner-slider { height: 100vh; min-height: 300px; }   /* mismo alto que el hero del home en mobile */
    .hb-slide { padding: 16vh 7vw 0; }
    .hb-slide.hb-text h1, .hb-slide.hb-text h2 { font-size: 8vw; }
    .hb-slide.hb-text p { font-size: 3.9vw; }
    .hb-slide.hb-image { font-size: 4.4vw; }
    .hb-cap { bottom: 7%; left: 7vw; right: 7vw; max-width: none; text-align: center; }
    .hb-cap.cap-l, .hb-cap.cap-r { left: 7vw; right: 7vw; text-align: center; }
    .hb-cap h2 { font-size: 6vw; }
    .hb-cap p { font-size: 3.5vw; }
    .hero-banner-arrow { width: 38px; height: 38px; font-size: 20px; }
}

.subpage-hero {
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16vh 8vw 8vh;
    background: radial-gradient(circle at 50% 28%, #17287a 0%, #050b2e 62%, #00120c 100%);
    position: relative;
    overflow: hidden;
}
.subpage-hero h1 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 5.4vw;
    margin: 0;
    line-height: 1.05;
    letter-spacing: 1px;
    text-shadow: 0 6px 30px rgba(0,0,0,0.35);
}
.subpage-hero h1 span { color: #46d6ff; }
.subpage-hero p {
    font-family: PoppinsRegular;
    color: #a9d4ff;
    font-size: 1.35vw;
    max-width: 720px;
    margin: 2.4vh auto 0;
    line-height: 1.6;
}
.subpage-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 7vh max(8vw, calc((100% - 940px) / 2)) 10vh;
    background: radial-gradient(ellipse at 50% -8%, #14205f 0%, #070e30 52%, #04081c 100%);
}
.subpage-content h2 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 2.1vw;
    margin: 4vh 0 1.6vh;
}
.subpage-content p {
    font-family: PoppinsRegular;
    color: #c9d6e8;
    font-size: 1.05vw;
    line-height: 2;
    margin: 0 0 2vh;
}
.subpage-content p .hl { color: #46d6ff; font-weight: 700; }   /* frase clave destacada */
@media screen and (max-width: 800px) {
    .subpage-hero { min-height: 70vh; padding: 22vh 7vw 8vh; }
    .subpage-hero h1 { font-size: 12vw; }
    .subpage-hero p { font-size: 4vw; }
    .subpage-content { padding: 8vh 7vw; }
    .subpage-content h2 { font-size: 6.5vw; }
    .subpage-content p { font-size: 3.9vw; line-height: 1.9; }
}

/* ===== Texto destacado + features numeradas en subpaginas ===== */
.subpage-content .subpage-lead {
    font-family: PoppinsBold;
    color: #fff;
    font-size: 1.5vw;
    line-height: 1.6;
    margin: 0 0 3.4vh;
}
.subpage-content .subpage-closing {
    color: #a9d4ff;
    font-style: italic;
    font-size: 1.2vw;
    line-height: 1.7;
    border-left: 3px solid #46d6ff;
    padding-left: 1.4vw;
    margin: 4.5vh 0 0;
}
.subpage-content .feature-list {
    display: flex;
    flex-direction: column;
    gap: 2.2vh;
    margin: 1vh 0 2vh;
}
.subpage-content .feature {
    display: flex;
    gap: 1.4vw;
    align-items: flex-start;
    background: rgba(70, 214, 255, 0.05);
    border: 1px solid rgba(120, 200, 255, 0.18);
    border-radius: 16px;
    padding: 2.6vh 2vw;
}
.subpage-content .feature-num {
    flex: 0 0 auto;
    width: 2.6vw;
    height: 2.6vw;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #46d6ff;
    color: #050b1f;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.subpage-content .feature-body { flex: 1; }
.subpage-content .feature-body h3 {
    font-family: ArdelaEdgeX02Bold;
    color: #46d6ff;
    font-size: 1.3vw;
    margin: 0.4vh 0 0.9vh;
    line-height: 1.2;
}
.subpage-content .feature-body p { margin: 0; }
@media screen and (max-width: 800px) {
    .subpage-content .subpage-lead { font-size: 4.6vw; line-height: 1.5; }
    .subpage-content .subpage-closing { font-size: 3.9vw; padding-left: 3vw; }
    .subpage-content .feature { gap: 3.5vw; padding: 2.2vh 4vw; }
    .subpage-content .feature-num { width: 10vw; height: 10vw; min-width: 40px; min-height: 40px; font-size: 5vw; }
    .subpage-content .feature-body h3 { font-size: 4.6vw; }
    .subpage-content .feature-body p { font-size: 3.9vw; line-height: 1.9; }
}

/* ===== Componentes landing B2C ===== */
.subpage-content .subpage-cta {
    display: inline-block;
    margin: 1vh 0 3vh;
    padding: 1.5vh 2.4vw;
    background: #46d6ff;
    color: #050b1f;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1vw;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 40px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.subpage-content .subpage-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(70, 214, 255, 0.35); }
.subpage-content .go-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8vw;
    margin: 6vh 0 7vh;   /* mas aire arriba y abajo */
}
.subpage-content .go-flow-step {
    font-family: PoppinsBold;
    font-size: 0.95vw;
    color: #cfe9ff;
    background: rgba(70, 214, 255, 0.08);
    border: 1px solid rgba(120, 200, 255, 0.3);
    border-radius: 30px;
    padding: 1vh 1.3vw;
}
.subpage-content .go-flow-arrow { color: #46d6ff; font-size: 1.3vw; font-weight: bold; }
.subpage-content .go-benefits,
.subpage-content .go-previews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4vw;
    margin: 2vh 0 3vh;
}
/* Diez categorias en tres columnas dejan una sola en la ultima fila: va al
   medio en vez de quedar colgada a la izquierda. */
.subpage-content .go-previews > :last-child:nth-child(3n + 1) { grid-column: 2; }
/* El cierre de la seccion: lo que no entra en la grilla. */
.subpage-content .go-nota {
    margin: 0 0 2vh;
    max-width: 52em;
    color: #bcd4f0;
    font-style: italic;
}
.subpage-content .go-benefit,
.subpage-content .go-preview {
    background: rgba(70, 214, 255, 0.05);
    border: 1px solid rgba(120, 200, 255, 0.18);
    border-radius: 16px;
    padding: 3vh 1.8vw;
}
.subpage-content .go-benefit h3,
.subpage-content .go-preview h3 {
    font-family: ArdelaEdgeX02Bold;
    color: #46d6ff;
    font-size: 1.2vw;
    margin: 0 0 1vh;
    line-height: 1.15;
}
.subpage-content .go-benefit p,
.subpage-content .go-preview p { margin: 0; }
.subpage-content .go-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
    margin: 1vh 0 4vh;
}
.subpage-content .go-pill {
    font-family: ArdelaEdgeX02Bold;
    font-size: 0.95vw;
    letter-spacing: 1px;
    color: #46d6ff;
    border: 1px solid #46d6ff;
    border-radius: 30px;
    padding: 1vh 1.7vw;
}
@media screen and (max-width: 800px) {
    .subpage-content .subpage-cta { font-size: 3.8vw; padding: 1.6vh 7vw; }
    .subpage-content .go-flow { gap: 2vw; }
    .subpage-content .go-flow-step { font-size: 3.2vw; padding: 1.1vh 3.4vw; }
    .subpage-content .go-flow-arrow { font-size: 4.4vw; }
    .subpage-content .go-benefits,
    .subpage-content .go-previews { grid-template-columns: 1fr; gap: 3.5vw; }
    .subpage-content .go-previews > :last-child:nth-child(3n + 1) { grid-column: auto; }
    .subpage-content .go-benefit,
    .subpage-content .go-preview { padding: 2.4vh 5vw; }
    .subpage-content .go-benefit h3,
    .subpage-content .go-preview h3 { font-size: 4.6vw; }
    .subpage-content .go-pill { font-size: 3.6vw; padding: 1.1vh 4.5vw; }
}

/* ===== Submenu links en el popup mobile (visibles) + placeholders subpaginas ===== */
.menu-popup a.submenu-link {
    font-size: 4vw;
    line-height: 1.4;
    color: #9fd0ff;
    text-decoration: none;
    display: block;
    text-align: right;
    width: 74%;
    margin: 0 6% 0 auto;
    font-family: ArdelaEdgeX02Bold;
}
/* Carrusel de placeholders: 3 por vista en desktop, 1 por vista en mobile */
.placeholder-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;   /* mas suave que mandatory en el carrusel de placeholders (desktop) */
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 3%;
    justify-content: flex-start;
    margin: 3vh 0 1vh;
    scroll-behavior: smooth;
}
.placeholder-grid::-webkit-scrollbar { display: none; }
.ph-slide {
    display: flex;
    flex: 0 0 31.333%;
    justify-content: center;
    scroll-snap-align: start;
}
/* Capturas de pantalla de celular (interna WhatsApp): vienen en 2:3, no en la
   proporcion 9:19.5 de las tarjetas verticales. Sin esto el recorte se comia
   los bordes de la interfaz del juego. */
.placeholder-grid.ph-phone .placeholder-img { aspect-ratio: 2 / 3; height: 52vh; border-radius: 16px; }
@media screen and (max-width: 800px) {
    .placeholder-grid.ph-phone .placeholder-img { height: auto; width: 74vw; }
}
.placeholder-img {
    height: 46vh;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    aspect-ratio: 9 / 19.5;
    border: 2px dashed rgba(120, 200, 255, 0.5);
    border-radius: 22px;
    background: rgba(70, 214, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(159, 208, 255, 0.75);
    font-family: PoppinsRegular;
    font-size: 0.78vw;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ph-wrap { position: relative; }
.ph-wrap /* ---------------------------------------------------------------------------
   Carrusel de juegos brandeados (interna B2C). Reusa el markup de la galeria
   pero con proporcion de pantalla de celular real 9:16, que es como salen las
   capturas, y sin el fondo propio: ya vive dentro de la seccion de contenido.
   --------------------------------------------------------------------------- */
.sp-games {
    background: none;
    padding: 1vh 0 2vh;
    margin: 0 0 4vh;
}
.sp-games .subpage-carousel { padding: 1vh 2vw; }
.sp-games .sp-slide {
    aspect-ratio: 9 / 16;
    width: 22%;
    max-width: 230px;
    min-width: 140px;
    border: 2px solid rgba(120, 200, 255, 0.45);
    box-shadow: 0 14px 34px rgba(2, 10, 34, 0.45);
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.sp-games .sp-slide:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(143, 240, 255, 0.9);
    box-shadow: 0 20px 44px rgba(2, 10, 34, 0.6);
}
@media screen and (max-width: 800px) {
    .sp-games .sp-slide { width: 58%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-games .sp-slide { transition: none; }
}

/* ---------------------------------------------------------------------------
   Panel de datos (interna Roblox). Esquema simple: barras que son divs con un
   ancho en porcentaje puesto inline. Sin libreria de graficos y sin canvas, asi
   escala con la tipografia y funciona igual con el JS apagado.
   Cada barra lleva su etiqueta y su valor al lado: el color nunca es el unico
   que informa.
   --------------------------------------------------------------------------- */
.go-stats {
    padding: 6vh 5vw 7vh;
    background: radial-gradient(ellipse at 50% -20%, #14205f 0%, #070e30 55%, #04081c 100%);
}
.go-stats h2 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 2.1vw;
    text-align: center;
    margin: 0 0 4vh;
}
.go-stats-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 1.6vw;
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
}
.stat {
    border: solid 1px rgba(143, 240, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.028);
    padding: 3vh 2vw;
    display: flex;
    flex-direction: column;
}
.stat-main { background: rgba(53, 230, 216, 0.05); border-color: rgba(53, 230, 216, 0.3); }
.stat-kicker {
    font-family: 'PoppinsRegular';
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(159, 208, 255, 0.7);
    margin: 0 0 0.6vh;
}
.stat-big {
    font-family: ArdelaEdgeX02Bold;
    font-size: 4.2vw;
    line-height: 1;
    margin: 0;
    background: linear-gradient(120deg, #c9ffa1 0%, #35e6d8 45%, #46d6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.stat-big span { font-size: 0.45em; margin-left: 0.08em; }
.stat-main .stat-big { font-size: 6vw; }
.stat-sub {
    font-family: 'PoppinsRegular';
    font-size: 0.82vw;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    margin: 1vh 0 2vh;
}
.stat-sub:last-child { margin-bottom: 0; margin-top: 1.6vh; }
.sbar {
    display: grid;
    grid-template-columns: 4.6em 1fr 3.4em;
    align-items: center;
    gap: 0.7em;
    margin: 0 0 0.9vh;
    font-family: 'PoppinsRegular';
    font-size: 0.72vw;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}
.sbar-lbl { color: rgba(159, 208, 255, 0.72); }
.sbar-track {
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.sbar-fill {
    display: block;
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #35e6d8 0%, #8fe63f 100%);
}
.sbar:first-of-type .sbar-fill { background: rgba(143, 240, 255, 0.3); }   /* el punto de partida, apagado */
.sbar-val { text-align: right; color: #fff; }
.stat-delta {
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.05vw;
    color: #8fe63f;
    margin: 1.4vh 0 0;
}
.go-stats-note {
    max-width: 900px;
    margin: 4vh auto 0;
    text-align: center;
    font-family: 'PoppinsRegular';
    font-size: 0.92vw;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}
@media screen and (max-width: 800px) {
    .go-stats { padding: 5vh 5vw 6vh; }
    .go-stats h2 { font-size: 6.4vw; margin-bottom: 3vh; }
    .go-stats-grid { grid-template-columns: 1fr; gap: 3vw; }
    .stat { padding: 3vh 5vw; }
    .stat-big { font-size: 13vw; }
    .stat-main .stat-big { font-size: 17vw; }
    .stat-kicker { font-size: 2.9vw; }
    .stat-sub { font-size: 3.4vw; }
    .sbar { font-size: 3vw; grid-template-columns: 5em 1fr 3.6em; }
    .stat-delta { font-size: 4.4vw; }
    .go-stats-note { font-size: 3.5vw; margin-top: 3vh; }
}

/* ---------------------------------------------------------------------------
   Carrusel apaisado grande (interna Roblox). Los mundos y los formatos de
   pantalla no entran en la tarjeta vertical de celular: piden 16:9 y bastante
   mas tamano que la galeria comun, que esta pensada para capturas de mobile.
   --------------------------------------------------------------------------- */
.sp-wide { padding: 4vh 0 10vh; }
.sp-wide .subpage-carousel { gap: 2.4vw; padding: 1vh 6vw; }
.sp-wide .sp-slide {
    /* Una sola pieza por vista. El alto manda: 78vh deja la tarjeta mas alta
       que la banda del hero (~66vh) y el 16:9 le saca el ancho. Son juegos y
       se leen a pantalla grande, no en la tarjeta chica de la galeria. */
    height: 78vh;
    width: auto;
    max-width: 92vw;
    min-width: 280px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    border: 2px solid rgba(120, 200, 255, 0.35);
    box-shadow: 0 18px 44px rgba(2, 10, 34, 0.5);
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.sp-wide .sp-slide:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(143, 240, 255, 0.85);
    box-shadow: 0 26px 60px rgba(2, 10, 34, 0.65);
}
.sp-wide .sp-slide img, .sp-wide .sp-slide picture { width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 800px) {
    .sp-wide { padding: 3vh 0 8vh; }
    .sp-wide .subpage-carousel { gap: 6vw; padding: 1vh 5vw; }
    .sp-wide .sp-slide {
        width: 90vw;
        max-width: none;
        min-width: 0;
        height: auto;   /* en mobile manda el ancho: 78vh seria una tira */
        aspect-ratio: 16 / 9;
        border-radius: 4vw;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sp-wide .sp-slide { transition: none; }
}

.sp-arrow { top: 50%; }
.ph-prev { left: -0.5vw; }
.ph-next { right: -0.5vw; }
.ph-dots { display: flex; justify-content: center; gap: 0.7vw; margin: 2.4vh 0 0; }
.ph-dots span { width: 0.7vw; height: 0.7vw; min-width: 9px; min-height: 9px; border-radius: 50%; background: rgba(159, 208, 255, 0.35); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.ph-dots span.on { background: #46d6ff; transform: scale(1.3); }
/* Carrusel LANDSCAPE (celular horizontal 19.5:9): card central grande + laterales apenas asomando con fade */
.ph-landscape {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 24%, #000 76%, transparent 100%);
    padding-inline: 0;   /* infinito: los clones dan vecinos a ambos lados */
}
.ph-landscape .ph-slide { flex: 0 0 86%; scroll-snap-align: center; }
.ph-landscape .placeholder-img { width: 100%; height: auto; aspect-ratio: 19.5 / 9; }
.placeholder-grid.ph-landscape { margin: 4vh 0 6vh; }   /* mas aire arriba y abajo */
/* Carrusel PORTRAIT (desktop): 5 en vista (3 nitidas + 2 difuminadas a los lados), sin gap, cards mas grandes (full-bleed) */
@media screen and (min-width: 801px) {
    .placeholder-grid:not(.ph-landscape) {
        width: 100vw;
        margin-left: calc(50% - 50vw);   /* full-bleed: ocupa todo el ancho -> cards ~30% mas grandes */
        gap: 15px;   /* un poco de aire entre cards */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 27%, #000 73%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 27%, #000 73%, transparent 100%);
    }
    .placeholder-grid:not(.ph-landscape) .ph-slide { flex: 0 0 calc(20% - 12px); scroll-snap-align: center; }   /* 5 en vista (compensa los 4 gaps de 15px) */
    .placeholder-grid:not(.ph-landscape) .placeholder-img { width: 100%; height: auto; aspect-ratio: 9 / 19.5; }
}
/* En pantallas muy anchas (>1900px) achicar ~20% las cards portrait: track a 80vw centrado (siguen 5 en vista) */
@media screen and (min-width: 1900px) {
    .placeholder-grid:not(.ph-landscape) {
        width: 80vw;
        margin-left: calc(50% - 40vw);
    }
}
/* Secciones extra (Services: Game On Learning / Partners): separador sutil */
.subpage-content.go-extra { border-top: 1px solid rgba(120, 200, 255, 0.15); }
/* Badge +18 (promos): fijo, abajo a la izquierda */
.age-badge {
    position: fixed;
    left: 1.6vw;
    bottom: 2.4vh;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2vw;
    height: 3.2vw;
    min-width: 46px;
    min-height: 46px;
    box-sizing: border-box;
    padding-bottom: 6px;     /* sube el texto para centrarlo (ArdelaEdge se sienta bajo) */
    line-height: 1;
    border-radius: 50%;
    background: rgba(16, 12, 62, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 2px solid #46d6ff;
    color: #fff;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.15vw;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(70, 214, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.age-badge:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(70, 214, 255, 0.5), 0 6px 14px rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 800px) {
    .age-badge { width: 13vw; height: 13vw; font-size: 4.6vw; left: 4vw; bottom: 2vh; }
}
/* Partners: capacidades como grid de chips con acento cyan */
.go-caps-title { text-align: center; font-family: ArdelaEdgeX02Bold; color: #fff; font-size: 1.5vw; margin: 5vh 0 2vh; }
.go-caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8vw; margin: 0 auto 2vh; max-width: 62vw; }
.go-cap {
    font-family: ArdelaEdgeX02Bold;
    font-size: 0.95vw;
    letter-spacing: 0.5px;
    color: #9fd0ff;
    background: rgba(70, 214, 255, 0.08);
    border: 1px solid rgba(70, 214, 255, 0.35);
    border-radius: 40px;
    padding: 0.9vh 1.5vw;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.go-cap:hover { background: rgba(70, 214, 255, 0.18); border-color: #46d6ff; color: #fff; transform: translateY(-2px); }
@media screen and (max-width: 800px) {
    .go-caps-title { font-size: 5.5vw; margin: 4vh 0 2vh; }
    .go-caps { gap: 2vw; max-width: 92vw; }
    .go-cap { font-size: 3.2vw; padding: 1vh 4vw; }
}
/* Recuadros (ej. Services: resultados) */
.go-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vw; margin: 3.5vh 0 1vh; }
.go-box {
    flex: 1 1 22%;
    min-width: 200px;
    max-width: 30%;
    background: rgba(70, 214, 255, 0.06);
    border: 1px solid rgba(70, 214, 255, 0.3);
    border-radius: 18px;
    padding: 3.2vh 2vw;
    text-align: center;
    font-family: ArdelaEdgeX02Bold;
    color: #dff1ff;
    font-size: 1.05vw;
    line-height: 1.45;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.go-box:hover { background: rgba(70, 214, 255, 0.12); border-color: #46d6ff; transform: translateY(-3px); }
@media screen and (max-width: 800px) {
    .go-boxes { gap: 3vw; }
    .go-box { flex: 1 1 100%; max-width: 100%; font-size: 4vw; padding: 3vh 6vw; }
}
/* Desktop: cursor de arrastre para correr los carruseles con el mouse */
.placeholder-grid, .subpage-carousel { cursor: grab; }
.drag-scrolling { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.drag-scrolling img { pointer-events: none; }
.ph-sub {
    text-align: center;
    font-family: ArdelaEdgeX02Bold;
    color: rgba(159, 208, 255, 0.6);
    font-size: 0.95vw;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 1vh 0 1.4vh;
}
/* Acordeon de dinamicas (Kids): la dinamica es la cabecera; los carruseles el panel */
.kids-acc { margin: 0 0 2vh; }
.kids-acc-head { cursor: pointer; align-items: center; }
.kids-acc-arrow { margin-left: 1vw; color: #46d6ff; font-size: 1.3vw; line-height: 1; transition: transform 0.3s ease; flex: 0 0 auto; }
.kids-acc.open .kids-acc-arrow { transform: rotate(180deg); }
.kids-acc-panel { height: 0; overflow: hidden; transition: height 0.45s ease; }
/* Las dinamicas arrancan desplegadas. El JS del acordeon sigue andando:
   al primer clic escribe height inline y de ahi en mas manda el inline. */
.kids-acc.open .kids-acc-panel { height: auto; overflow: visible; }
@media screen and (max-width: 800px) {
    /* Grupos de placeholders -> carrusel de a 1 en mobile (swipe con snap) */
    .placeholder-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        gap: 0;
        scroll-behavior: smooth;
    }
    .placeholder-grid::-webkit-scrollbar { display: none; }
    .ph-slide {
        display: flex;
        flex: 0 0 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        scroll-snap-align: center;
    }
    .placeholder-img {
        flex: 0 0 auto;
        width: auto;
        max-width: 86vw;
        box-sizing: border-box;
        aspect-ratio: 9 / 19.5;   /* proporcion celular mantenida, achicada para entrar con los dots */
        height: 62vh;
        font-size: 2.6vw;
        border-radius: 6vw;
    }
    .ph-wrap .sp-arrow { display: none; } /* en mobile: swipe + dots */
    /* Dots indicadores del carrusel mobile */
    .ph-dots {
        display: flex;
        justify-content: center;
        gap: 2.6vw;
        margin: 2.4vh 0 0.5vh;
    }
    .ph-dots span {
        width: 2.6vw;
        height: 2.6vw;
        border-radius: 50%;
        background: rgba(159, 208, 255, 0.35);
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .ph-dots span.on { background: #46d6ff; transform: scale(1.3); }
    /* Landscape en mobile: 1 card centrada grande + laterales asomando con fade */
    .placeholder-grid.ph-landscape { padding-inline: 0; margin: 3vh 0 5vh; }
    .ph-landscape .ph-slide { flex: 0 0 90%; }
    .ph-sub { font-size: 3.2vw; }
    .ph-landscape .placeholder-img { width: 100%; height: auto; aspect-ratio: 19.5 / 9; }
}

/* ===== Carrusel de subpaginas ===== */
.subpage-carousel-wrap {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 3vh 5vw 9vh;
    background: radial-gradient(ellipse at 50% 112%, #14205f 0%, #070e30 52%, #04081c 100%);
}
.subpage-carousel-wrap h2 {
    font-family: ArdelaEdgeX02Bold;
    color: #fff;
    font-size: 2.1vw;
    text-align: center;
    margin: 0 0 3vh;
}
.subpage-carousel {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x proximity;   /* proximity: sin el tiron de mandatory */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1vh 4vw;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.subpage-carousel::-webkit-scrollbar { display: none; }
.sp-slide {
    flex: 0 0 auto;
    width: 26%;
    max-width: 250px;
    min-width: 150px;
    aspect-ratio: 9 / 19.5;
    scroll-snap-align: center;
    border: 2px dashed rgba(120, 200, 255, 0.5);
    border-radius: 22px;
    background: rgba(70, 214, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(159, 208, 255, 0.75);
    font-family: PoppinsRegular;
    font-size: 0.78vw;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sp-arrow {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(16, 12, 62, 0.55);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.sp-arrow:hover { background: rgba(16, 12, 62, 0.9); }
.sp-prev { left: 1vw; }
.sp-next { right: 1vw; }
@media screen and (max-width: 800px) {
    .subpage-carousel-wrap { padding: 3vh 3vw 9vh; }
    .subpage-carousel-wrap h2 { font-size: 6vw; }
    .subpage-carousel { gap: 20vw; }   /* separa para que solo se vea 1 centrada */
    .sp-slide {
        flex: 0 0 auto;
        width: auto;
        max-width: 82vw;
        height: 54vh;
        aspect-ratio: 9 / 19.5;   /* card de celular, igual que los placeholders */
        font-size: 2.6vw;
        border-radius: 6vw;
    }
    .sp-arrow { width: 38px; height: 38px; font-size: 20px; }
}


/* ---------------------------------------------------------------------------
   Capturas de celular (interna WhatsApp). Va al final del archivo a proposito:
   la grilla portrait fija 9/19.5 en varias reglas por breakpoint y, con la
   misma especificidad, gana la ultima. Aca se impone la proporcion 2:3 real de
   la captura para que no se recorten los bordes de la interfaz del juego.
   --------------------------------------------------------------------------- */
/* Se comportan igual que el resto de los carruseles del sitio: las tarjetas
   llenan el ancho y sangran a los costados. Lo unico propio es la proporcion
   2:3 de la captura de celular. */
.placeholder-grid.ph-phone:not(.ph-landscape) .placeholder-img {
    aspect-ratio: 2 / 3;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
@media screen and (max-width: 800px) {
    .placeholder-grid.ph-phone:not(.ph-landscape) .placeholder-img {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 3;
    }
}
/* En pantallas muy anchas la grilla portrait se lleva a 80vw con un margen
   negativo calculado. Con las capturas de celular no hace falta: se centran
   solas y ese margen las corria a la izquierda. */


/* ---------------------------------------------------------------------------
   Carrusel de juegos de WhatsApp (interna Game On WhatsApp). Igual que
   .sp-games pero con la proporcion real del webview: 9:19.5. Las capturas ya
   vienen a esa medida, asi que entran enteras y no hay recorte ni franjas.
   --------------------------------------------------------------------------- */
.sp-apps {
    background: none;
    padding: 1vh 0 2vh;
    margin: 0 0 4vh;
}
.sp-apps .subpage-carousel { padding: 1vh 2vw; align-items: flex-start; }
.sp-apps .sp-slide {
    align-self: flex-start;   /* sin esto el stretch del flex le come el alto */
    aspect-ratio: 9 / 19.5;
    width: 22%;
    max-width: 250px;
    min-width: 140px;
    height: auto;
    border: 2px solid rgba(120, 200, 255, 0.45);
    box-shadow: 0 14px 34px rgba(2, 10, 34, 0.45);
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.sp-apps .sp-slide:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(143, 240, 255, 0.9);
    box-shadow: 0 20px 44px rgba(2, 10, 34, 0.6);
}
@media screen and (max-width: 800px) {
    .sp-apps .sp-slide { width: 62%; max-width: none; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-apps .sp-slide { transition: none; }
}

/* Bajada de cada demo de marca (interna WhatsApp), arriba de su carrusel. */
.subpage-content .go-demo-t {
    margin: 3.4vh 0 0.6vh;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.15vw;
    line-height: 1.25;
    color: #8ff0ff;
    letter-spacing: 0.02em;
}
.subpage-content .go-demo-t + p { margin-top: 0; }
@media screen and (max-width: 800px) {
    .subpage-content .go-demo-t { font-size: 4.2vw; margin-top: 4vh; }
}

/* Slide de la botonera del home. Es la unica foto del hero con gente en toda la
   mitad inferior: las otras cuatro dejan el piso oscuro libre, que es donde
   apoya el texto. Medido por tono de piel sobre img/mob/home/home-5.jpg, las
   caras caen entre el 45% y el 60% contando desde abajo.

   La franja util queda entre la botonera (termina en 25%) y las caras (empiezan
   en 45%). Ahi entra el bloque completo -volanta, titular y bajada- si se lo
   achica: arranca en 27% y cierra cerca del 42%, sin pisar ninguna cara.

   Ojo: esta regla gana por especificidad sobre cualquier `.home-cap-nav` suelta
   de mas arriba en el archivo. Tocar el alto aca, no alla. */
@media screen and (max-width: 800px) {
    .home-cap.home-cap-nav {
        top: auto;
        bottom: 25.5%;
        gap: 0.5vh;
    }
    .home-cap.home-cap-nav h2 { font-size: 7vw; }
    /* la bajada se despega del titular y baja hacia la botonera; el titular
       queda donde estaba porque el bloque se ancla por abajo */
    .home-cap.home-cap-nav p { font-size: 3.1vw; line-height: 1.45; margin-top: 1vh; }
    /* la botonera cede 2 puntos: justo lo necesario para que la bajada no la roce */
    .hero-services-nav { bottom: 10%; }
}

/* ---------------------------------------------------------------------------
   Grilla de servicios: el copy iba abajo a la izquierda, justo donde estan los
   personajes en casi todas las fotos, y al desplegarse en rollover se les subia
   encima. Se corre a la derecha y se alinea a la derecha, que es la mitad
   despejada de las tomas. La regla del nombre acompana la justificacion.
   --------------------------------------------------------------------------- */
.sg-body {
    align-items: flex-end;
    text-align: right;
}
.sg-name::after { margin-left: auto; }
@media screen and (max-width: 800px) {
    /* en mobile la tarjeta es 5:2 y el sujeto tambien queda a la izquierda */
    .sg-body { align-items: flex-end; text-align: right; }
    .sg-tip { max-width: 34ch; }
}


/* ---------------------------------------------------------------------------
   Chat animado de WhatsApp (interna Game On WhatsApp). Es un slide mas del
   carrusel, pero en HTML en vez de una captura: pesa nada, se traduce con el
   resto del sitio y las burbujas van apareciendo como una conversacion real.
   Todo en em para que escale con el ancho del slide.
   --------------------------------------------------------------------------- */
.sp-slide.wa-slide {
    padding: 0;
    border: 2px solid rgba(120, 200, 255, 0.45);
    background: #0b141a;
    overflow: hidden;
}
.wa-phone {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    font-family: PoppinsRegular;
    font-size: clamp(6.5px, 0.62vw, 9.5px);
    line-height: 1.35;
    color: #e9edef;
    background: #0b141a;
    /* el patron de garabatos del fondo, aproximado con dos radiales suaves */
    background-image:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.035) 0 1.2em, transparent 1.3em),
        radial-gradient(circle at 74% 62%, rgba(255, 255, 255, 0.03) 0 1em, transparent 1.1em);
}
.wa-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 1.1em 0.9em 0.8em;
    background: #202c33;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wa-av {
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.1em;
    color: #fff;
    flex: 0 0 auto;
}
.wa-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wa-id b { font-family: PoppinsRegular; font-weight: 600; font-size: 1.15em; color: #e9edef; }
.wa-id i { font-style: normal; font-size: 0.92em; color: #8696a0; }
.wa-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5em;
    padding: 0.9em 0.7em 1.2em;
    overflow: hidden;
}
.wa-row { display: flex; flex-direction: column; max-width: 82%; }
.wa-row[hidden] { display: none; }
.wa-in { align-self: flex-start; align-items: flex-start; }
.wa-out { align-self: flex-end; align-items: flex-end; }
.wa-msg {
    position: relative;
    padding: 0.55em 0.7em 0.9em;
    border-radius: 0.7em;
    background: #202c33;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.wa-out .wa-msg { background: #005c4b; }
.wa-t { display: block; }
.wa-h {
    position: absolute;
    right: 0.6em;
    bottom: 0.25em;
    font-size: 0.8em;
    color: rgba(233, 237, 239, 0.45);
}
.wa-card {
    display: block;
    margin: -0.1em 0 0.5em;
    padding: 1.5em 0.8em;
    border-radius: 0.5em;
    background: linear-gradient(135deg, var(--wa-c, #7b3ff2), rgba(0, 0, 0, 0.55));
    text-align: center;
}
.wa-card b { display: block; font-family: ArdelaEdgeX02Bold; font-size: 1.15em; letter-spacing: 0.02em; color: #fff; }
.wa-card i { display: block; font-style: normal; font-size: 0.9em; color: rgba(255, 255, 255, 0.8); margin-top: 0.25em; }
.wa-btns { display: flex; flex-direction: column; gap: 1px; width: 100%; margin-top: 1px; }
.wa-btns span {
    padding: 0.5em;
    text-align: center;
    background: #202c33;
    color: #53bdeb;
    border-radius: 0.45em;
    font-size: 0.95em;
}
/* indicador de "escribiendo": tres puntos que rebotan */
.wa-typing .wa-msg { display: flex; gap: 0.28em; padding: 0.8em 0.7em; }
.wa-typing i {
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: #8696a0;
    animation: waDot 1s infinite ease-in-out;
}
.wa-typing i:nth-child(2) { animation-delay: 0.16s; }
.wa-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes waDot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.2em); } }
/* entrada de cada burbuja */
.wa-row.wa-show { animation: waIn 0.32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes waIn { from { opacity: 0; transform: translateY(0.6em) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .wa-row.wa-show { animation: none; }
    .wa-typing i { animation: none; }
}

/* ---------------------------------------------------------------------------
   Nota de tono (interna Advergames). El tono del juego lo define la audiencia
   del medio donde se pauta, no la mecánica: va entre la lista de mecánicas y
   los mockups para que se lea antes de mirar las piezas.
   ------------------------------------------------------------------------- */
.go-tone-note {
    max-width: 62em;
    margin: 3.4vh 0 1vh;
    padding: 2.2vh 2vw;
    border-left: 3px solid #35e6d8;
    background: rgba(53, 230, 216, 0.06);
    font-family: 'PoppinsRegular';
    font-size: 0.92vw;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 800px) {
    .go-tone-note { font-size: 3.5vw; padding: 2.4vh 4vw; margin: 3vh 0 2vh; }
}

/* ---------------------------------------------------------------------------
   Frase destacada por seccion y bloque de contraste del home. Son las ideas de
   mercado repartidas por el sitio: cada una en la seccion que mejor encuadra.
   ------------------------------------------------------------------------- */
.go-quote {
    position: relative;
    margin: 5vh 0 4vh;
    padding: 0 0 0 2.6vw;
    border-left: 3px solid #8fe63f;
    max-width: 40em;
}
.go-quote p {
    margin: 0;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.9vw;
    line-height: 1.24;
    letter-spacing: 0.5px;
    color: #fff;
    text-wrap: balance;
}
/* Bloque de contraste. Las dos opciones no pueden verse igual: la de la
   izquierda es el statu quo y tiene que leerse apagada, la de la derecha es la
   propuesta y se lleva el color de marca. Antes eran dos tarjetas casi
   gemelas sobre el azul y el contraste no se leia.
 */
.go-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;      /* las dos cajas a la misma altura */
    gap: 1.6vw;
    /* misma caja que el acordeon de Beneficios (.benefits-items): si no, el
       bloque arranca mucho mas ancho que la lista de arriba y no alinea con nada */
    width: 62vw;
    max-width: 1180px;
    margin: 5vh auto 4vh;
}
.go-vs-side {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.6vh 2.4vw 3.6vh 2.8vw;
    border-radius: 16px;
    font-family: 'PoppinsRegular';
    font-size: 1.02vw;
    line-height: 1.62;
    overflow: hidden;
}
/* el riel de la izquierda: el mismo recurso que ya usan los items de
   Beneficios, para que el bloque no parezca importado de otro sitio */
.go-vs-side::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
}

/* --- el statu quo: apagado --- */
.go-vs-a {
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(159, 178, 216, 0.16);
    color: #8093b8;
}
.go-vs-a::before { background: rgba(159, 178, 216, 0.28); }

/* --- la propuesta: el color de marca --- */
.go-vs-b {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(53, 230, 216, 0.16) 0%, rgba(53, 230, 216, 0) 62%),
        rgba(8, 26, 74, 0.5);
    border: 1px solid rgba(53, 230, 216, 0.34);
    box-shadow: 0 0.8vw 2.4vw rgba(2, 14, 48, 0.32), 0 0 2.6vw rgba(53, 230, 216, 0.12);
    color: rgba(255, 255, 255, 0.86);
}
.go-vs-b::before {
    background: linear-gradient(152deg, #c9ffa1 0%, #8fe63f 26%, #35e6d8 68%, #46d6ff 100%);
}
/* El titular en display y el argumento en texto corrido. Cuatro renglones de
   Ardela en mayusculas eran un muro: nadie los leia. */
.go-vs-lead {
    display: block;
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.62vw;
    line-height: 1.16;
    letter-spacing: 0.5px;
    color: #fff;
    text-wrap: balance;
    margin-bottom: 1.1vh;
}
.go-vs-sub { display: block; }

/* --- el pivote --- */
.go-vs-mark {
    position: relative;
    align-self: center;
    display: grid;
    place-items: center;
    width: 4.2vw;
    height: 4.2vw;
    border-radius: 50%;
    /* semitransparente: el fondo de la seccion se ve a traves del disco */
    background: rgba(70, 214, 255, 0.08);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(143, 230, 63, 0.7);   /* respaldo sin mask-composite */
    box-shadow: 0 0 1.8vw rgba(143, 230, 63, 0.2), inset 0 0 1.2vw rgba(53, 230, 216, 0.12);
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.16vw;
    line-height: 1;
    color: #8fe63f;
    letter-spacing: 1px;
}
/* Anillo degradado con el centro realmente transparente. El truco del borde con
   background-clip no sirve aca: la capa de padding-box tiene que ser opaca para
   tapar el degradado de atras, y eso obliga a un disco solido. Con mask-composite
   se recorta el centro y el fondo pasa. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .go-vs-mark { border: none; }
    .go-vs-mark::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        padding: 2px;
        background: linear-gradient(152deg, #c9ffa1 0%, #8fe63f 26%, #35e6d8 68%, #46d6ff 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }
}
@media screen and (max-width: 800px) {
    .go-quote { margin: 4vh 0 3vh; padding-left: 5vw; }
    .go-quote p { font-size: 5.6vw; }
    /* el mismo margen lateral que los items de Beneficios: sin esto el bloque
       corria de borde a borde y se desalineaba con todo lo de arriba */
    .go-vs { grid-template-columns: 1fr; gap: 2.6vh; width: auto; margin: 4vh 4.1vw 3vh; }
    .go-vs-side { font-size: 3.7vw; padding: 3vh 5vw 3vh 6vw; border-radius: 14px; }
    .go-vs-side::before { width: 5px; border-radius: 14px 0 0 14px; }
    .go-vs-lead { font-size: 5.6vw; margin-bottom: 1.4vh; }
    /* apilado el pivote tiene que pesar: es lo unico que separa una opcion de la
       otra, y a 12vw se perdia entre las dos cajas */
    .go-vs-mark { width: 19vw; height: 19vw; font-size: 5.6vw; justify-self: center; margin: 0.4vh 0; z-index: 2; }
}

/* ===== WORK WITH US =====================================================
   Seccion propia debajo de Contacto. No reusa .contact-* a proposito: ese
   bloque esta posicionado en absoluto sobre una foto de fondo y no admite
   una segunda instancia. Este es autocontenido y fluye con el documento. */
.workwithus {
    position: relative;
    overflow: hidden;
    background: linear-gradient(168deg, #04081c 0%, #070e30 46%, #14205f 100%);
}
/* halo diagonal: el mismo gesto de rayos de la grafica de marca, muy suave */
.workwithus::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -30%;
    height: 120%;
    background:
        radial-gradient(52% 60% at 18% 22%, rgba(70, 214, 255, 0.16) 0%, rgba(70, 214, 255, 0) 62%),
        radial-gradient(44% 52% at 82% 88%, rgba(143, 230, 63, 0.11) 0%, rgba(143, 230, 63, 0) 66%);
    pointer-events: none;
}
.workwithus-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44% 1fr;
    align-items: center;
    gap: 0 5vw;
    max-width: 78vw;
    margin: 0 auto;
    padding: 7vw 0 7.5vw 0;
}
.workwithus-kicker {
    display: block;
    font-family: PoppinsBold;
    font-size: 0.82vw;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8ff0ff;
    margin-bottom: 1.1vw;
}
.workwithus-claim {
    margin: 0;
    font-family: ArdelaEdgeX02Bold;
    font-size: 3.1vw;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 26px rgba(0, 20, 60, 0.45);
}
/* El degradado se pinta con background-clip:text, o sea que el fondo se recorta
   al cuadro de la caja, no a los glifos: con el interlineado justo, las panzas y
   las colas de las letras quedaban cortadas. Ese aire de mas es lo que las salva. */
.workwithus-claim span {
    display: block;
    line-height: 1.24;
    padding-bottom: 0.12em;
    text-transform: none;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.workwithus-lead {
    font-family: PoppinsRegular;
    font-size: 1vw;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.82);
    max-width: 30vw;
    margin: 1.6vw 0 0 0;
}
.workwithus-form {
    display: block;
    text-align: left;
    padding: 2.6vw 2.6vw 2.9vw 2.6vw;
    border: solid 1px rgba(255, 255, 255, 0.16);
    border-radius: 1.5vw;
    background: rgba(8, 26, 74, 0.34);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1vw 2.4vw rgba(2, 14, 48, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.workwithus-form-input { min-width: 0; }
.workwithus-form-input label {
    display: block;
    font-family: PoppinsBold;
    font-size: 0.82vw;
    margin: 0 0 0.6vw 0.2vw;
    opacity: 0.88;
}
.workwithus-form-input + .workwithus-form-input { margin-top: 1.3vw; }
.workwithus-form-input input,
.workwithus-form-input textarea {
    font-family: PoppinsRegular;
    font-size: 0.86vw;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
    border: solid 1px rgba(255, 255, 255, 0.15);
    width: 100%;
    box-sizing: border-box;
    padding: 0.9vw 1.6vw;
    border-radius: 100px;
    min-height: 44px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.workwithus-form-input textarea {
    border-radius: 1.1vw;
    resize: vertical;
    min-height: 7vw;
    line-height: 1.55;
}
.workwithus-form-input input::placeholder,
.workwithus-form-input textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.workwithus-form-input input:hover,
.workwithus-form-input textarea:hover {
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.3);
}
.workwithus-form-input input:focus,
.workwithus-form-input textarea:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgba(143, 240, 255, 0.75);
    box-shadow: 0 0 0 2px rgba(143, 240, 255, 0.22);
}
/* marca de campo obligatorio que deja el JS */
.workwithus-form-input-required,
.workwithus-form-input input.inputerror,
.workwithus-form-input textarea.inputerror {
    border-color: #ff6a6a !important;
    box-shadow: 0 0 0 2px rgba(255, 106, 106, 0.22);
}
/* trampa para bots: invisible para la persona, no para el robot que completa todo */
.workwithus-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.workwithus-form button {
    display: block;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.05vw;
    letter-spacing: 0.08em;
    padding: 0 2.6vw;
    border: none;
    border-radius: 100px;
    margin-top: 1.9vw;
    min-height: 48px;
    color: #0a2050;
    cursor: pointer;
    box-shadow: 0 0.5vw 1.4vw rgba(2, 14, 48, 0.28), 0 0 1.4vw rgba(143, 240, 255, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.workwithus-form button:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.2vw 2.6vw rgba(2, 14, 48, 0.4), 0 0 2.8vw rgba(201, 255, 161, 0.55);
}
.workwithus-form button:active { transform: translateY(-1px) scale(0.985); }
.workwithus-form button:focus-visible { outline: 3px solid #c9ffa1; outline-offset: 4px; }
.workwithus-label-message {
    display: none;
    font-family: PoppinsBold;
    font-size: 0.95vw;
    color: #c9ffa1;
    margin: 1.2vw 0 0 0.2vw;
}
@media screen and (max-width: 800px) {
    .workwithus-content {
        grid-template-columns: 1fr;
        gap: 6vw 0;
        max-width: 86vw;
        padding: 14vw 0 15vw 0;
    }
    .workwithus-kicker { font-size: 3.2vw; margin-bottom: 3vw; }
    .workwithus-claim { font-size: 8.6vw; }
    .workwithus-lead { font-size: 3.9vw; max-width: none; margin-top: 4.5vw; }
    .workwithus-form { padding: 7vw 6vw 8vw 6vw; border-radius: 6vw; }
    .workwithus-form-input label { font-size: 3.4vw; margin: 0 0 2vw 1vw; }
    .workwithus-form-input + .workwithus-form-input { margin-top: 5vw; }
    .workwithus-form-input input,
    .workwithus-form-input textarea { font-size: 3.9vw; padding: 3.4vw 5.5vw; min-height: 12vw; }
    .workwithus-form-input textarea { border-radius: 4.5vw; min-height: 30vw; }
    .workwithus-form button { font-size: 4.4vw; padding: 0 9vw; margin-top: 7vw; min-height: 13vw; }
    .workwithus-label-message { font-size: 3.6vw; margin-top: 4.5vw; }
}



/* Chapa sobre una captura: hoy el +18 del caso Batman. Va arriba a la
   izquierda, que es donde estas capturas tienen el header de la app y no se
   pisa con nada importante. El contenedor necesita position relative. */
.placeholder-img { position: relative; }
.ph-chapa {
    position: absolute;
    top: 0.6vw;
    left: 0.6vw;
    z-index: 3;
    font-family: ArdelaEdgeX02Bold;
    font-size: 0.72vw;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.42vw 0.62vw 0.5vw;
    border-radius: 100px;
    color: #0a2050;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    box-shadow: 0 0.2vw 0.6vw rgba(2, 14, 48, 0.45);
}
@media screen and (max-width: 800px) {
    .ph-chapa { top: 2.4vw; left: 2.4vw; font-size: 2.9vw; padding: 1.7vw 2.5vw 2vw; }
}

/* La galeria de juegos de B2C no lleva reglas propias: usa las mismas que
   Kids, y por eso la clase ph-9x16 ya no tiene estilos asociados.

   DECISION DEL CLIENTE, TOMADA CON LA MEDICION A LA VISTA: las verticales van
   ESTIRADAS, 720x1560. No es un error de proceso, es como se quiere ver.

   Lo que se midio el 30/09/2026, para que nadie lo "corrija" por su cuenta:
   Gemini entrega 768x1376 (relacion 1.79) y los archivos de 720x1560 (2.17)
   son ese mismo dibujo estirado un 21% a lo alto. Tres pruebas: seis capturas
   de B2C son pixel por pixel el mismo dibujo que seis de Kids, con un error
   de 2 sobre 255 entre una y el reescalado de la otra; la grilla del match-3,
   cuadrada por diseno, da celda 1.048 en 768x1376 y 1.278 en 720x1560; y las
   burbujas del bubble shooter, que son circulos, dan 0.937 contra 1.135.
   Con todo eso sobre la mesa, el cliente eligio el estirado porque le gusta
   como se ve la tarjeta alta y angosta.

   Las versiones sin estirar quedaron en `_backup/b2c-originales-correctas-*`
   por si alguna vez se vuelve atras.
   LAS CAPTURAS NUEVAS HAY QUE ESTIRARLAS A 720x1560 ANTES DE MONTARLAS. */

/* Nota al pie de una dinamica de Kids. Aclaraciones legales o de alcance que
   van debajo de las capturas: se leen si se buscan, no compiten con el copy. */
.ph-nota {
    font-family: PoppinsRegular;
    font-size: 0.72vw;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
    margin: 1vw 0 0 0;
    padding-left: 0.9vw;
    border-left: solid 2px rgba(143, 240, 255, 0.35);
}
@media screen and (max-width: 800px) {
    .ph-nota { font-size: 3vw; margin-top: 4vw; padding-left: 3vw; }
}

/* ===== Banda de newsletter ==============================================
   Va entre "Work with us" y el pie. Es una banda, no una seccion: la mitad
   de alto que las de arriba y sin el halo diagonal, para que el ojo la lea
   como un cierre y no como un bloque mas de contenido.

   El campo y el boton comparten una sola pastilla (.newsletter-row): un
   correo es un dato solo y partirlo en label + input + boton apilados lo
   hacia parecer un formulario largo, que es lo contrario de lo que pide.
   ======================================================================== */
.newsletter {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, #070e30 0%, #0b1442 52%, #14205f 100%);
    border-top: solid 1px rgba(143, 240, 255, 0.14);
}
.newsletter-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 46% 1fr;
    align-items: center;
    gap: 0 5vw;
    max-width: 78vw;
    margin: 0 auto;
    padding: 4.4vw 0 4.6vw 0;
}
.newsletter-kicker {
    display: block;
    font-family: PoppinsBold;
    font-size: 0.82vw;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8ff0ff;
    margin-bottom: 1.1vw;
}
.newsletter-claim {
    margin: 0;
    font-family: ArdelaEdgeX02Bold;
    font-size: 2.5vw;
    line-height: 1.12;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 26px rgba(0, 20, 60, 0.45);
}
/* mismo cuidado que en .workwithus-claim: background-clip recorta al cuadro
   de la caja, no a los glifos, y sin este aire de mas se comen las colas */
.newsletter-claim span {
    display: block;
    line-height: 1.24;
    padding-bottom: 0.12em;
    text-transform: none;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.newsletter-lead {
    font-family: PoppinsRegular;
    font-size: 0.95vw;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 28vw;
    margin: 1.2vw 0 0 0;
}
.newsletter-form { min-width: 0; }
/* la etiqueta existe para el lector de pantalla; el placeholder solo no alcanza */
.newsletter-sr {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.newsletter-row {
    display: flex;
    align-items: stretch;
    gap: 0.9vw;
}
.newsletter-row input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: PoppinsRegular;
    font-size: 1vw;
    color: #fff;
    padding: 0 1.8vw;
    min-height: 3.4vw;
    border: solid 1px rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    background: rgba(4, 12, 40, 0.5);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.newsletter-row input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-row input:hover { border-color: rgba(143, 240, 255, 0.45); }
.newsletter-row input:focus {
    outline: none;
    border-color: rgba(143, 240, 255, 0.85);
    box-shadow: 0 0 1.2vw rgba(130, 220, 255, 0.35);
}
.newsletter-row input.inputerror { border-color: #ff8fa3; }
.newsletter-btn {
    flex: 0 0 auto;
    background: linear-gradient(104deg, #c9ffa1 0%, #8ff0ff 55%, #e6feff 100%);
    font-family: ArdelaEdgeX02Bold;
    font-size: 1.05vw;
    letter-spacing: 0.08em;
    padding: 0 2.6vw;
    border: none;
    border-radius: 100px;
    min-height: 3.4vw;
    color: #0a2050;
    cursor: pointer;
    box-shadow: 0 0.5vw 1.4vw rgba(2, 14, 48, 0.28), 0 0 1.4vw rgba(143, 240, 255, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.newsletter-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.2vw 2.6vw rgba(2, 14, 48, 0.4), 0 0 2.8vw rgba(201, 255, 161, 0.55);
}
.newsletter-btn:active { transform: translateY(-1px) scale(0.985); }
.newsletter-btn:focus-visible { outline: 3px solid #c9ffa1; outline-offset: 4px; }
.newsletter-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.newsletter-legal {
    font-family: PoppinsRegular;
    font-size: 0.68vw;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
    margin: 1vw 0 0 1.4vw;
    max-width: 34vw;
}
.newsletter-legal a { color: rgba(143, 240, 255, 0.8); text-decoration: underline; }
.newsletter-label-message {
    display: none;
    font-family: PoppinsBold;
    font-size: 0.95vw;
    color: #c9ffa1;
    margin: 0.9vw 0 0 1.4vw;
}
.newsletter-label-message.es-error { color: #ff8fa3; }
@media screen and (max-width: 800px) {
    .newsletter-content {
        grid-template-columns: 1fr;
        gap: 5vw 0;
        max-width: 86vw;
        padding: 12vw 0 13vw 0;
    }
    .newsletter-kicker { font-size: 3.2vw; margin-bottom: 3vw; }
    .newsletter-claim { font-size: 7.6vw; }
    .newsletter-lead { font-size: 3.8vw; max-width: none; margin-top: 4vw; }
    /* en el telefono la pastilla unica no entra: el correo necesita el ancho
       completo y el boton abajo, a todo lo ancho, que es el area tocable */
    .newsletter-row { flex-direction: column; gap: 4vw; }
    .newsletter-row input { font-size: 3.9vw; padding: 3.4vw 5.5vw; min-height: 13vw; }
    .newsletter-btn { font-size: 4.4vw; padding: 0 9vw; min-height: 13vw; }
    .newsletter-legal { font-size: 2.9vw; margin: 4vw 0 0 1.5vw; max-width: none; }
    .newsletter-label-message { font-size: 3.6vw; margin: 4vw 0 0 1.5vw; }
}

/* ===== reCAPTCHA Enterprise =============================================
   No hay checkbox: la insignia flotante de Google cae abajo a la derecha,
   justo encima del boton de WhatsApp. Se oculta, y a cambio va el aviso
   legal en el formulario — Google exige una de las dos cosas, no ninguna. */
.grecaptcha-badge { visibility: hidden; }
.gr-aviso {
    margin: 0;
    font-family: PoppinsRegular;
    font-size: 0.72vw;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}
.gr-aviso a {
    color: rgba(143, 240, 255, 0.85);
    text-decoration: underline;
}
.gr-aviso a:hover { color: #8ff0ff; }
@media screen and (max-width: 800px) {
    .gr-aviso { font-size: 2.9vw; line-height: 1.45; }
}

/* ===== Logo de las internas en mobile =================================
   Las subpaginas y policy no tenian ninguna marca arriba: en el telefono el
   header es solo el boton de menu, asi que la pagina no decia de quien es ni
   ofrecia vuelta al home. El logo va arriba a la izquierda, espejando el boton
   de menu, y linkea al index. En escritorio no aparece (.m-mob): ahi la
   botonera de texto ya ocupa esa franja. */
@media screen and (max-width: 800px) {
    .sp-logo {
        position: fixed;
        left: 4.5%;
        top: 4.6%;
        z-index: 30;
        /* El PNG trae ~5% de transparencia a cada lado y ~21% arriba y abajo, asi
           que el arte visible es bastante menor que la caja: por eso el ancho
           parece exagerado escrito y no lo es en pantalla. */
        width: 60vw;
        /* el mismo corrimiento que .header-menu y .menu-opts, para que quede a
           la misma altura que el boton de menu */
        transform: translateY(50px);
        margin-top: 0;
        line-height: 0;
        transition: width 0.3s ease, top 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, opacity 0.3s ease;
    }
    .sp-logo img {
        width: 100%;
        display: block;
    }

    /* --- Barra compacta al bajar -------------------------------------
       Arriba de todo el logo va grande y suelto sobre el hero. Apenas se
       scrollea, el header se repliega: aparece una banda azul semitransparente
       y el logo se achica y sube adentro, para dejar de taparle contenido a la
       pagina. Al volver arriba, la banda se va y el logo recupera su tamano.
       La clase la ponen subpage.js y policy.js; en el home nunca se aplica, asi
       que ahi la banda queda en altura 0 y opacidad 0, inerte. */
    body::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 0;
        z-index: 29;
        background: rgba(6, 12, 40, 0.5);
        /* Desaturado y oscurecido, no solo desenfocado: el riel lima de las
           citas y otros verdes saturados atravesaban el azul y se leian como
           una esquina de color asomando. Asi sigue translucida -se ve el
           movimiento de la pagina- pero sin manchas. */
        -webkit-backdrop-filter: blur(16px) saturate(0.35) brightness(0.5);
        backdrop-filter: blur(16px) saturate(0.35) brightness(0.5);
        border-bottom: 1px solid rgba(143, 240, 255, 0);
        opacity: 0;
        pointer-events: none;
        transition: height 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
    }
    body.header-compacto::before {
        height: 12vw;
        opacity: 1;
        border-bottom-color: rgba(143, 240, 255, 0.14);
    }
    body.header-compacto .sp-logo {
        width: 28vw;
        top: 0;
        transform: translateY(0);
        margin-top: 1.7vw;
    }
    /* el selector de idioma y la hamburguesa suben con el logo: si no, el
       header queda partido en dos alturas */
    .menu-opts { transition: top 0.3s ease, transform 0.3s ease; }
    .menu-btn-bg { transition: margin-top 0.3s ease, padding 0.3s ease; }
    body.header-compacto .menu-opts {
        top: 0;
        transform: translateY(0);
    }
    body.header-compacto .menu-btn-bg {
        margin-top: 0.4vw;
        padding: 1.3vw 2.4vw;
    }
    body.header-compacto #mob-lang { display: none; }
    /* Al entrar el footer, que ya trae su propio logo, el de la barra se va:
       dos logos en la misma pantalla se leen como un error. La banda y el boton
       de menu se quedan, para no perder la navegacion justo al final. */
    body.footer-a-la-vista .sp-logo {
        opacity: 0;
        pointer-events: none;
    }
    /* En el home el hero ya trae su propio logo grande, asi que el de la barra
       arranca invisible y solo entra cuando aparece la banda. */
    .sp-logo-home { opacity: 0; pointer-events: none; }
    body.header-compacto .sp-logo-home { opacity: 1; pointer-events: auto; }
    body.header-compacto.footer-a-la-vista .sp-logo-home { opacity: 0; pointer-events: none; }
}

/* Enlace de ancla al lado de cada titulo. Discreto: solo aparece al pasar el
   mouse por el titulo. Al hacer clic copia la URL completa al portapapeles y
   confirma con un cartelito, en vez de navegar. */
.ancla {
    margin-left: 0.5em;
    color: #46d6ff;
    text-decoration: none;
    opacity: 0;
    font-weight: 400;
    transition: opacity 0.2s ease;
    position: relative;
    cursor: pointer;
}
h2:hover > .ancla, h3:hover > .ancla, .ancla:focus { opacity: 0.65; }
.ancla:hover { opacity: 1; }
.ancla::after {
    content: "enlace copiado";
    position: absolute;
    left: 50%;
    bottom: 140%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: PoppinsRegular, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #04081c;
    background: #8fe63f;
    padding: 0.35em 0.7em;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.ancla-copiada { opacity: 1 !important; }
.ancla-copiada::after { opacity: 1; }
/* En mobile no hay hover: se muestran siempre, apenas marcados. */
@media screen and (max-width: 800px) {
    .ancla { opacity: 0.45; }
}