/* ========================================== */
/* RESPONSIVE MOBILE (Máx 768px)              */
/* Adaptación fluida basada en vw / vh / %    */
/* ========================================== */
@media (max-width: 768px) {
    #menu-superior {
        padding: 5vw;
    }

    #menu-superior.tema-claro {
        background-color: #ffffff;

    }

    /* Tema Oscuro: Se mantiene transparente sobre tu gran fondo rojo inicial */
    #menu-superior.tema-oscuro {
        background-color: transparent;
        box-shadow: none;
    }

    .nav-links {
        display: none;
    }

    /* Ocultar los enlaces en móvil (usualmente iría un icono hamburguesa) */
    .logo-container {
        height: 20px;
        width: 140px;
    }

    .onlymobile {
        display: block;
    }

    /* --- Globales Mobile --- */
    .hero-title {
        font-size: 8vw;
    }

    .hero-subtitle {
        font-size: 8vw;
        margin-top: 5vw;
        width: 85%;
    }

    .palabras-stack {
        width: 80vw;
    }

    .palabra {
        margin-left: 0px;

    }

    .patrimonio {
        margin-left: 0px;
    }

    .fiscalidad {
        margin-left: 0px;
    }

    .inversion {
        margin-left: 0px;
    }

    .familia {
        margin-left: 0px;
    }

    .expansion {
        margin-left: 0px;
    }


    .circulo-blanco {
        width: 10vw;
        height: 10vw;
    }

    .logo-global {
        position: absolute;

        bottom: 8dvh;
        right: 3%;

        z-index: 8;
        opacity: 1;
    }

    .gotoweb {
        position: absolute;
        top: 70dvh;
        left: 25%;
        z-index: 80;
        opacity: 0;
        font-size: 1.4rem;
        line-height: 1.2;
        color: #fff;
        letter-spacing: -1.2px;
    }

    .underlined {
        text-decoration: underline;
        color: #ffffff;
    }

    .logo-global-home {


        max-width: 220px;
    }

    .flecha-arriba {
        opacity: 1;
        top: 18vh;
        /* Más cerca del texto central */
        left: 35vw;
        /* Centrado perfecto matemático para un ancho de 30vw */
    }

    .flecha-izq {
        opacity: 1;
        bottom: 42vh;
        /* Más cerca del texto central */
        left: 10vw;
    }

    .flecha-der {
        opacity: 1;
        bottom: 42vh;
        /* Más cerca del texto central */
        right: 10vw;
    }

    .flecha-v svg {
        width: 30vw;
        height: 24vw;
    }

    .hero-text-container {
        width: 86%;
        margin-top: -25dvh;
    }

    /* --- Escena 2: Apilada --- */
    .layout-mitades {
        flex-direction: column;
        justify-content: center;
        height: 100vh;
    }

    .mitad-izq, .mitad-der {
        padding: 5vw;
        width: 100%;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mitad-izq {
        height: 45vh;
        align-items: flex-end;
    }

    .mitad-der {
        height: 55vh;
        align-items: flex-start;
        padding-top: 5vh;
    }

    .imagen-stack-recorte {
        position: relative;
        width: 100%;
        height: 85vh;
        clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    }

    /* Las fotos se superponen todas en el mismo sitio */
    .img-dinamica {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;

        /* CRÍTICO: Todas ocultas por defecto */
        opacity: 0;
        z-index: 1;
    }

    /* Solo la primera se ve al cargar la página */
    .img-dinamica.img-activa {
        opacity: 1;
        z-index: 2;
    }



    /* --- Escena 2 Mobile: Layout en Columna --- */
    #escena-2 {
        display: flex;
        flex-direction: column;
        /* Forzamos flujo de arriba a abajo */
        width: 100vw;
        height: 100vh;
        background-image: url(./assets/fondomobile.png);
        background-repeat: no-repeat;
        background-position: bottom center;

        background-size: contain;
    }

    /* 1. Titular al 100% y centrado */
    .header-escena-2 {
        position: relative;
        /* Anulamos el absolute de desktop */
        top: 0;
        right: 0;
        width: 100%;
        padding: 12vh 5vw 4vh;
        /* Espacio superior para que respire */
        display: flex;
        justify-content: center;
        z-index: 30;
    }

    .titulo-dimension {
        font-size: 7.3vw;
        text-align: right;
        /* Texto perfectamente centrado */
        width: 100%;
    }

    /* Contenedor que agrupa las dos mitades */
    .layout-mitades {
        display: flex;
        flex-direction: column-reverse;
        /* MAGIA: Pone las etiquetas (der) encima de la foto (izq) */
        flex: 1;
        /* Ocupa todo el alto de pantalla que queda libre */
        height: auto;
    }

    /* 2. Dimensiones al 80% y apiladas */
    #escena-2 .mitad-der {
        width: 90%;
        padding: 0;
        justify-content: flex-start;
        align-items: start;
        z-index: 20;
        height: 40vh;
        top: 28%;
    }

    .etiquetas-contenedor {
        width: 100%;
        /* Ancho estricto del 80% */
        margin: 0;
        /* Anulamos el margin-left: auto de desktop */
    }

    .etiqueta-dimension {
        width: 100%;
        /* Ocupa todo el 80% del padre */
        padding: 5vw 7vw;
        font-size: 3.8vw;
        text-align: left;
        /* El doble bisel de clip-path se hereda de desktop perfectamente */
    }

    /* 3. Foto alineada a bottom */
    .mitad-izq {
        width: 100%;
        flex: 1;
        /* Toma el espacio que sobre abajo */
        padding: 0;
        display: flex;
        align-items: flex-end;
        /* Clava la foto al suelo de la pantalla */
    }

    .imagen-stack-recorte {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 40vh;
        /* Límite para que la foto no crezca y aplaste los textos */

        /* Adaptamos el corte a móvil: Recto abajo, corte diagonal arriba */
        clip-path: polygon(0 15vw, 100% 0, 100% 100%, 0 100%);
    }

    .imagen-stack-recorte img {
        object-position: center bottom;
        /* El ancla visual de la imagen se queda abajo */
    }









    .flecha-maestra {
        top: 10%;
        left: -40%;
    }



    #escena-3 {
        align-items: flex-start;
        background-image: url(./assets/fondomobile.png);
        background-repeat: no-repeat;
        background-position: bottom center;

        background-size: contain;

    }

    .contenido-escena-3 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: 22vh;
        /* Dejamos este hueco exacto arriba para la flecha roja */
    }

    .header-escena-3 {
        position: relative;
        /* Quitamos el absolute que traía de desktop */
        top: 0;
        left: 0;
        width: 90vw;
        margin: 0 auto 4vh auto;
        /* Centrado con margen inferior hacia las cajas */
    }

    .titulo-ecosistema {
        font-size: 6vw;
        text-align: left;
    }

    .grid-cajas {
        grid-template-columns: repeat(2, 1fr);
        width: 90vw;
        margin: 0 auto;
        gap: 3vw;
    }

    .caja-mavens {
        min-height: 15vh;
        padding: 4vw;
        clip-path: polygon(0 0, calc(100% - 4vw) 0, 100% 4vw, 100% 100%, 0 100%);
    }

    .caja-mavens h3 {
        font-size: 3.5vw;
    }






    /* --- Escena 4: Filosofía --- */
    .logo-texto-wrapper {
        top: 22vh;
        /* Subimos el logo para dejar espacio a los textos */
        left: 50%;
        transform: translateX(-50%);
        /* Centrado absoluto */
        width: 65vw;
    }

    .texto-logo-mavens {
        width: 100%;
    }

    .texto-filosofia-wrapper {
        top: 33vh;
        /* Colocado justo debajo del logo */
        left: 50%;
        transform: translateX(-50%);
        /* Centrado absoluto */
        width: 85vw;
        gap: 4vh;
        /* Separación entre los dos párrafos */
        text-align: center;
    }

    .texto-filosofia {
        font-size: 4.8vw;
        /* Ajuste sutil del tamaño de fuente */
        line-height: 1.5;
        text-align: center;
        /* Fuerza el centrado del texto como en la captura */
    }

    .texto-filosofia.p2 {
        margin-top: 0px;
    }

    .menu-inferior-wrapper {
        flex-wrap: wrap;

        bottom: 5dvh;
    }

    .menu-item {
        flex: 1 1 40%;
        font-size: 4vw;
        padding: 2vw 5vw;
        min-height: 60px;
    }

    /* --- Escena 5: Tarjeta de Servicios (Mobile 3D) --- */
    .tarjeta-servicios {
        width: 90vw;
        height: 83vh;
        padding: 14vw 8vw;
        clip-path: polygon(10vw 0, 100% 0, 100% 100%, 0 100%, 0 10vw);
    }

    .texto-fijo-servicios {
        font-size: 4.5vw;
        margin-bottom: 3vh;
    }

    /* LA MAGIA DEL ORDEN: Invertimos el flex para que las cajas queden arriba y el texto abajo */
    .layout-servicios {
        flex-direction: column;
        gap: 3vh;
    }

    /* Contenedor 3D adaptado a dimensiones móviles */
    .detalle-servicios {
        height: 41vh;
        perspective: 1000px;
        /* Profundidad focal para móvil */
        transform-style: preserve-3d;
    }

    .caja-roja {
        padding: 5vw 4vw;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        align-items: flex-start;
        /* Sombra para que se note la separación de las capas 3D */
        box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.3);
    }

    .caja-roja li {
        font-size: 3.8vw;
        margin-bottom: 1vh;
    }

    /* Menú de textos (Ahora en la parte inferior) */
    .menu-servicios {
        gap: 1.5vh;
        height: 35vh;
        justify-content: flex-start;
    }

    .item-servicio {
        font-size: 3.8vw;
        color: #9e9593;
    }

    /* Color ROJO corporativo para el elemento activo, como pediste */
    .item-servicio.item-activo {
        color: #000000;
    }

    .icono-asterisco {
        font-size: 4vw;
    }

    /* --- Escena 6: Internacional --- */
    .layout-internacional {
        flex-direction: column;
        justify-content: center;
    }

    .columna-texto-internacional {
        padding: 18vw 5vw;
        flex: none;
        height: 60vh;
        justify-content: flex-start;
    }

    .titulo-internacional {
        font-size: 6vw;
        margin-bottom: 4vh;
    }

    .parrafos-internacionales p {
        font-size: 4vw;
    }

    .logos-partners {
        grid-template-columns: repeat(3, 1fr);
        gap: 5vw;
    }

    .logo-partner {
        max-width: 100%;
    }

    .columna-globo {
        flex: none;
        height: 40vh;
        width: 100%;
        justify-content: center;
    }

    #globo-canvas {
        width: 100%;
        max-width: none;
    }

    .contenido-equipo {
        width: 100%;
        height: 93dvh;

    }

    /* Sobresale a propósito para efecto 3D */

    /* --- Escena 7: Equipo --- */
    .header-equipo {
        padding: 0 5vw;
        margin-top: 5vh;
    }

    .contenido-equipo {
        justify-content: flex-start;
        gap: 20px;
    }

    .titulo-equipo {
        font-size: 5.5vw;
    }

    .carrusel-equipo-track {
        padding: 0 5vw;
        gap: 5vw;
        cursor: pointer;
    }

    .foto-wrapper {
        width: 65vw;
        height: 90vw;
    }

    /* --- Paso 8: Contenido Libre --- */
    .seccion-contacto {
        padding: 10vh 5vw;
    }

    .contacto-wrapper {
        flex-direction: column;
        gap: 5vh;
    }

    .contacto-titulo {
        font-size: 12vw;
    }

    .contacto-texto {
        font-size: 5vw;
    }

    .contacto-acciones {
        flex-direction: column;
        align-items: flex-start;
        gap: 3vh;
    }

    .contacto-direcciones {
        grid-template-columns: 1fr;
        gap: 5vh;
    }

    .seccion-actualidad {
        padding: 10vh 5vw;
    }

    .grid-noticias {
        grid-template-columns: 1fr;
        gap: 8vh;
    }

    .seccion-premios-rsc {
        padding: 10vh 5vw;
    }

    .grid-logos {
        justify-content: center;
        gap: 8vw;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 8vh;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 3vh;
        text-align: center;
    }

    .legal-links a {
        margin: 0 2vw;
    }


    .grid-logos img {
        max-width: 31%;
        max-height: initial;
        object-fit: contain;
        filter: grayscale(100%);
    }
}