/* Poppins auto-alojada (mismos pesos que antes; ya no depende de Google) */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/poppins-900.woff2') format('woff2');}

        :root {
            --azul-cielo: #009cff;
            --azul-marino: #3d405b;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* el «medusssa» gigante del inicio es más ancho que el celular: sin esto, la página se hacía más ancha
           que la pantalla y los botones de arriba a la derecha se salían */
        html {
            overflow-x: hidden;
        }

        body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
            background: var(--azul-cielo);
        }

        /* HEADER - Top Navigation */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1.5rem 0;
            z-index: 1000;
            pointer-events: none;
        }

        /* Navigation wrapper for perfect centering */
        .nav-center-wrapper {
            position: absolute;
            left: 50%;
            top: 1.5rem;
            transform: translateX(-50%);
            pointer-events: auto;
        }

        /* Header Right - Positioned Absolutely */
        .header-right {
            position: absolute;
            right: 3%;
            top: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            pointer-events: auto;
        }

        /* Logo + Menu Button (Top Left) - EXACT Vooban Proportions */
        .logo-menu-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 3000;
            pointer-events: auto;
        }

        /* Logo Button (Square 1:1) */
        .logo-button {
            background: white;
            border: none;
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
            border-radius: 8px;
            pointer-events: auto;
        }

        .logo-button:hover {
            background: #f5f5f5;
        }

        .logo-medusssa {
            width: auto;
            height: 52px;
        }

        /* Menu Button (Tall Rectangle 1:3 proportion) */
        .menu-button {
            background: white;
            border: none;
            width: 72px;
            height: 216px;
            cursor: pointer;
            font-weight: 700;
            color: #009cff;
            font-size: 0.7rem;
            letter-spacing: 2.5px;
            font-family: 'Poppins', sans-serif;
            transition: background 0.3s;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 1.5rem;
            border-radius: 8px;
            pointer-events: auto;
        }

        .menu-button:hover {
            background: #f5f5f5;
        }

        /* Menu Overlay - Grows from Menu Button Right Edge */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: calc(72px + 15px + 4px);
            width: calc(50% - 72px - 15px - 4px);
            height: calc(100vh - 30px);
            margin-bottom: 30px;
            background: white;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            transform-origin: left center;
            transform: scale(0);
            opacity: 0;
            visibility: hidden;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
        }

        .menu-overlay.active {
            transform: scale(1);
            opacity: 1;
            visibility: visible;
        }

        /* Blur Backdrop - Excludes Button Area */
        .menu-backdrop {
            position: fixed;
            top: 0;
            left: calc(72px + 15px + 4px + 72px + 4px);
            width: calc(100% - 72px - 15px - 4px - 72px - 4px);
            height: 100vh;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            z-index: 1999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s;
        }

        .menu-backdrop.active {
            opacity: 1;
            visibility: visible;
        }

        /* Menu Header - Logo + Title */
        .menu-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 2rem 3rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .menu-logo {
            width: auto;
            height: 44px;
        }

        .menu-brand-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: #009cff;
            font-family: 'Roundex', 'Poppins', sans-serif;
            letter-spacing: -0.5px;
        }

        /* Menu Navigation */
        .menu-content {
            flex: 1;
            padding: 3rem 3rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }

        .menu-nav {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left;
            line-height: 1.1;
        }

        .menu-nav li {
            margin-bottom: 0.3rem;
        }

        .menu-nav a {
            font-family: 'Poppins', sans-serif;
            font-size: 2.8rem;
            font-weight: 400;
            color: #009cff;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
            position: relative;
            line-height: 1.1;
        }

        .menu-nav a:hover {
            opacity: 0.7;
        }

        /* Menu Footer */
        /* Top Right Navigation: tres columnas (dos a la izquierda, «OS», dos a la derecha). Las de los lados
           miden igual, así «OS» queda justo a media pantalla aunque «Galería» y «Contacto» sean más anchas */
        .top-nav {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 2.5rem;
            align-items: center;
            padding-top: 0.5rem;
        }
        .nav-lado {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }
        .nav-izq { justify-content: flex-end; }

        .top-nav a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            position: relative;
        }

        /* Al pasar el cursor, cada opción se vuelve una pastilla blanca con letras azules, del tamaño de «OS»: lo mismo que
           hace «OS» y va con los recuadros blancos del logo y del MENU. El relleno se compensa con margen negativo, así las
           letras no se mueven de lugar. Emilio eligió esta (la A) el 5-oct; antes salía una rayita de izquierda a derecha
           que «no cuadra con lo demás del diseño». */
        .top-nav .nav-lado a {
            padding: calc(0.15rem + 1.5px) calc(0.7rem + 1.5px);
            margin: 0 calc(-0.7rem - 1.5px);
            border-radius: 8px;
            transition: background-color 0.2s, color 0.2s;
        }
        .top-nav .nav-lado a:hover,
        .top-nav .nav-lado a:focus-visible {
            background: #ffffff;
            color: #009cff;
            outline: none;
        }

        /* Botón «OS»: lleva a Medusssa OS y va en SU color, el magenta de OS, con letras oscuras como su pantalla de carga,
           «para que se sienta una conexión entre las dos» (Emilio, 6-oct). Cada botón lleva el color de la página a la que
           te lleva: en OS, el de regreso va en el azul de Studio. Al pasar el cursor se hace blanco con «OS» en magenta.
           Antes: rubí de las «sss» (5-oct) y, primero, marco blanco con hover rojo (22-sep). */
        .top-nav a.nav-os {
            background: #e2457c;
            border: 1.5px solid #e2457c;
            color: #0a0807;
            border-radius: 8px;
            padding: 0.15rem 0.7rem;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s;
        }
        .top-nav a.nav-os::after { display: none; }
        .top-nav a.nav-os:hover,
        .top-nav a.nav-os:focus-visible {
            opacity: 1;
            background: #ffffff;
            border-color: #ffffff;
            color: #e2457c;
            outline: none;
        }
        /* El menú de en medio y los botones de la derecha van a media altura del hueco entre el borde de arriba y el
           recuadro de las medusas (Emilio, 5-oct: «se ven recargados hacia abajo»). El recuadro mide 500 px de alto y va
           centrado, así que su borde de arriba queda en (100vh − 500px) / 2 y la mitad del hueco en (100vh − 500px) / 4.
           Antes iban fijos a 1.5rem: en pantallas bajas quedaban casi pegados al recuadro. Los dos se desvanecen al bajar.
           La medusa va en esa misma línea (Emilio, 13-oct, opción A: estaba desalineada con los demás títulos): mientras
           estás arriba baja hasta ahí y, al bajar (body.bajando, cuando el menú ya casi se desvaneció), regresa a su esquina.
           36px = la mitad de la medusa (72). En laptops bajas no sube a menos de 4 px de la orilla. */
        @media (min-width: 821px) {   /* «header …» para ganarle a la regla repetida de .header-right que viene más abajo */
            :root { --linea-arriba: max(28px, calc((100vh - 500px) / 4)); }
            header .nav-center-wrapper {
                top: var(--linea-arriba);
                transform: translate(-50%, -50%);
            }
            header .top-nav { padding-top: 0; }
            header .header-right {
                top: var(--linea-arriba);
                transform: translateY(-50%);
            }
            .logo-menu-container { transition: top 0.35s ease; }
            body:not(.bajando) .logo-menu-container { top: max(4px, calc(var(--linea-arriba) - 36px)); }
        }
        /* con el quinto elemento, en pantallas de 769 a 1000 px el menú se encimaba con los botones de la derecha */
        @media (min-width: 769px) and (max-width: 1000px) {
            .top-nav, .nav-lado { gap: 1.1rem; }
            .top-nav a { font-size: 0.85rem; }
        }
        /* de 769 a 820 px ni así cabe (ya se encimaba desde antes con cuatro): ahí se usa el MENU, que trae todo, OS incluido */
        @media (min-width: 769px) and (max-width: 820px) {
            .top-nav { display: none; }
        }
        /* en el menú (fondo blanco) también va en el magenta de OS; al pasar el cursor se vacía y quedan el marco y las letras magenta */
        .menu-nav a.menu-os {
            background: #e2457c;
            border: 2px solid #e2457c;
            color: #0a0807;
            border-radius: 12px;
            padding: 0 0.35em;
            margin: 0.15rem 0 0.25rem;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s;
        }
        .menu-nav a.menu-os:hover,
        .menu-nav a.menu-os:focus-visible {
            opacity: 1;
            background: transparent;
            color: #e2457c;
            outline: none;
        }

        /* WhatsApp + correo (arriba a la derecha) */
        .header-right {
            position: absolute;
            right: 3%;
            top: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .contact-icon:hover {
            transform: scale(1.1);
        }

        .contact-icon svg {
            width: 24px;
            height: 24px;
            fill: var(--azul-cielo);
        }

        /* HERO SECTION */
        .hero {
            position: relative;
            height: 100vh;
            overflow: visible;
            background: var(--azul-cielo);
        }

        /* Giant MEDUSSSA Text Background */
        .hero-text-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18vw;
            font-weight: 900;
            color: white;
            white-space: nowrap;
            letter-spacing: -0.05em;
            pointer-events: none;
            z-index: 1;
            line-height: 0.9;
            display: flex;
            align-items: center;
            overflow: visible;
        }

        /* The 3 s's that move down - stay visible always */
        .hero-text-bg .s-moving {
            color: #9a031e;
            display: inline-block;
            position: relative;
            transition: none;
        }

        /* Video Container (Starts Small, Grows on Scroll) - VERTICAL FORMAT */
        .video-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 500px;
            background: rgba(255, 255, 255, 0.15);
            /* sin backdrop-filter (13-oct): el video siempre tapa todo el cuadro, así que el desenfoque no se veía, pero el
               navegador lo recalculaba en cada cuadro mientras el video crece. En compus con gráficos débiles la página
               bajaba a ~20 cuadros por segundo al bajar (se veía trabada); sin él va a ~98 */
            border-radius: 20px;
            overflow: hidden;
            z-index: 2;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        /* Video Placeholder (Animated Jellyfish) */
        .video-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #009cff 0%, #1a3ba8 100%);
            position: relative;
            overflow: hidden;
        }

        /* Video real del inicio (las medusas). Siempre mide la pantalla completa y queda centrado:
           el cuadro que crece solo lo va destapando, como una ventana, así el video nunca cambia de escala */
        .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 100vh;
            transform: translate(-50%, -50%);
            object-fit: cover;
            max-width: none;
        }

        /* SSS Ribbon (Animated) */
        /* la cinta crece con el cuadro (85% de su ancho) y algunas S salen en rojo al azar (Emilio, 1-oct) */
        .ribbon-container {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 85%;
            z-index: 3;
            overflow: hidden;
        }

        .ribbon {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(0px);
            padding: 0.5rem 2rem;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            overflow: hidden;
            white-space: nowrap;
            transition: background 0.4s ease, padding 0.4s ease;
            cursor: pointer;
        }
        
        .ribbon:hover {
            background: rgba(255, 255, 255, 0);
            backdrop-filter: blur(0px);
            border: 2px solid rgba(255, 255, 255, 0.8);
            padding: 0.5rem 2.2rem;
        }

        .ribbon-text {
            display: inline-block;
            color: white;
            font-weight: 600;
            font-size: 0.75rem;
            letter-spacing: 4px;
            animation: scrollRibbon 20s linear infinite;
        }

        .ribbon-text .s-roja {
            color: #9a031e;
        }

        @keyframes scrollRibbon {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 3rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            opacity: 1;
            transition: opacity 0.6s;
        }

        .video-container.expanded ~ .scroll-indicator {
            opacity: 0;
        }

        .scroll-text {
            color: white;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 1rem;
            text-align: center;
        }

        .scroll-arrow {
            width: 30px;
            height: 50px;
            border: 2px solid white;
            border-radius: 50px;
            position: relative;
            margin: 0 auto;
        }

        .scroll-arrow::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 50%;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            transform: translateX(-50%);
            animation: scrollDown 2s infinite;
        }

        @keyframes scrollDown {
            0% {
                top: 10px;
                opacity: 1;
            }
            100% {
                top: 30px;
                opacity: 0;
            }
        }

        /* Dark overlay for underwater transition effect */
        .underwater-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 110vh;
            background: #000000;
            opacity: 0;
            pointer-events: none;
            z-index: 5;
            transition: opacity 0.3s ease;
        }

        /* Spacer to allow scrolling */
        .scroll-spacer {
            height: 120vh;
            background: var(--azul-cielo);
        }

        /* About Section - appears after darkness */
        /* el texto queda donde estaba (30vh abajo del fundido) pero el bloque ya no ocupa una pantalla completa:
           antes dejaba ~400 px de negro antes de Servicios (Emilio, 1-oct) */
        .about-section {
            background: #000000;
            display: flex;
            align-items: center;
            padding: 30vh 8rem 6rem;
            position: relative;
            z-index: 10;
            margin-top: 15vh;
        }

        /* el video se funde a negro sin línea: la sección negra trae arriba un desvanecido (de bajada y de subida) */
        .about-section::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            height: 60vh;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, #000000 100%);
            pointer-events: none;
        }

        .about-content {
            display: flex;
            gap: 6rem;
            max-width: 1600px;
            width: 100%;
        }

        .about-label {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 400;
            color: #8a8a8a;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .about-label::before {
            content: '°';
            margin-right: 0.5rem;
        }

        .about-text {
            flex: 1;
            font-family: 'Poppins', sans-serif;
            font-size: clamp(2rem, 3.5vw, 3.5rem);
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            color: #ffffff;
        }

        .about-text span {
            color: #8a8a8a;
            transition: color 0.3s ease;
        }

        .about-text span.highlighted {
            color: #ffffff;
        }

        .about-text .tag {
            color: #00d9ff;
            font-size: 0.5em;
            letter-spacing: 0.15em;
            display: block;
            margin-top: 2rem;
        }

        /* Services Section */
        .services-section {
            background: #000000;
            padding: 4rem 8rem 8rem;
            position: relative;
            z-index: 10;
        }

        .services-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .services-label {
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            font-weight: 400;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: 1rem;
        }

        .services-label::before {
            content: '•';
            margin-right: 0.5rem;
        }

        .services-title {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            font-weight: 400;
            color: #ffffff;
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto;
            text-transform: uppercase;
        }

        .services-list {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* lista compacta: una columna, renglones bajos (Emilio, 1-oct: antes eran casi dos pantallas de títulos) */
        .service-item {
            border-top: 1px solid #333333;
            padding: 1.1rem 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .service-item:last-child {
            border-bottom: 1px solid #333333;
        }

        .service-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .service-name {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(1.3rem, 2.2vw, 2.25rem);
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            transition: all 0.3s ease;
        }

        .service-toggle {
            width: 36px;
            height: 36px;
            position: relative;
            flex-shrink: 0;
            margin-left: 2rem;
        }

        .service-toggle::before,
        .service-toggle::after {
            content: '';
            position: absolute;
            background: #9a031e;
            transition: all 0.3s ease;
        }

        .service-toggle::before {
            width: 30px;
            height: 3px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .service-toggle::after {
            width: 3px;
            height: 30px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .service-item.active .service-toggle::after {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .service-item.active .service-toggle::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .service-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .service-item.active .service-content {
            max-height: 500px;
        }

        .service-description {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1rem;
            font-weight: 400;
            color: #999999;
            line-height: 1.8;
            margin: 2rem 0;
            max-width: 800px;
        }

        .service-features {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .service-feature {
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .service-feature::before {
            content: '+';
            color: #9a031e;
            font-size: 1.2rem;
            font-weight: 700;
        }

        /* =====================
           GALLERY SECTION
        ===================== */
        .gallery-section {
            background: #000000;
            padding: 8rem;
            position: relative;
            z-index: 10;
        }

        .gallery-header {
            margin-bottom: 4rem;
        }

        .gallery-title {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(3rem, 7vw, 7rem);
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -0.03em;
            text-transform: uppercase;
            line-height: 1;
        }

        /* la galería es una cinta (Emilio, 1-oct): las tarjetas corren despacio de lado a lado y frenan suave con el cursor.
           El movimiento lo lleva site.js; aquí solo el acomodo. Va de orilla a orilla de la pantalla */
        .gallery-section {
            overflow: hidden;
        }

        .gallery-grid {
            display: flex;
            gap: 1.5rem;
            width: max-content;
            margin-left: -8rem;
            padding-right: 1.5rem;   /* = el espacio entre tarjetas: así la vuelta es exacta */
            will-change: transform;
        }

        .gallery-grid .gallery-card {
            flex: 0 0 auto;
            width: clamp(240px, 21vw, 400px);
        }

        /* Each card */
        .gallery-card {
            position: relative;
            cursor: pointer;
            display: block;
            color: inherit;
            text-decoration: none;
        }

        .gallery-card:focus-visible {
            outline: 3px solid var(--azul-cielo);
            outline-offset: 6px;
            border-radius: 16px;
        }

        .gallery-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* el recuadro que sale al pasar el cursor lleva el logo del cliente */
        .gallery-popup-logo {
            background: #ffffff;
            padding: 12%;
        }

        .gallery-popup-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .gallery-card-image {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 3/4;
        }

        .gallery-card-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0 0.8rem;
            border-bottom: 1px solid #333333;
        }

        .gallery-card-name {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: 0.02em;
        }

        .gallery-card-year {
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            font-weight: 400;
            color: #8a8a8a;
        }

        /* Background layer — gets blurred on hover */
        .gallery-bg {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: filter 0.4s ease;
            border-radius: 16px;
        }

        .gallery-placeholder-svg {
            width: 70%;
            height: 70%;
            opacity: 0.6;
        }

        /* Ribbon — sits behind popup, z-index 2 */
        .gallery-ribbon-wrap {
            position: absolute;
            top: 50%;
            left: -10%;
            width: 120%;
            transform: translateY(-50%);
            overflow: hidden;
            z-index: 2;
            opacity: 0;
            /* al salir: la cinta se va primero (antes que el recuadro) */
            transition: opacity 0.15s ease;
            pointer-events: none;
        }

        .gallery-ribbon {
            background: #ffffff;
            color: #000000;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.5rem 0;
            white-space: nowrap;
            display: flex;
        }

        .gallery-ribbon-inner {
            display: flex;
            animation: ribbonScroll 10s linear infinite;
            white-space: nowrap;
        }

        @keyframes ribbonScroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Popup — sólido, centrado, con bordes redondeados, encima del ribbon */
        .gallery-popup {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
            opacity: 0;
            /* al salir: el recuadro se va después de la cinta. Solo aparece y desaparece, sin crecer (no brinca) */
            transition: opacity 0.2s ease 0.12s;
            pointer-events: none;
        }

        .gallery-popup-inner {
            width: 62%;
            height: 62%;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-popup-svg {
            width: 100%;
            height: 100%;
        }

        /* HOVER STATE */
        .gallery-card:hover .gallery-card-image .gallery-bg,
        .gallery-card:focus-visible .gallery-card-image .gallery-bg {
            filter: blur(8px) brightness(0.55);
        }

        .gallery-card:hover .gallery-ribbon-wrap,
        .gallery-card:focus-visible .gallery-ribbon-wrap {
            opacity: 1;
            /* al entrar: la cinta aparece hasta que el recuadro ya está completo, así no se asoma a través de él */
            transition: opacity 0.3s ease 0.22s;
        }

        .gallery-card:hover .gallery-popup,
        .gallery-card:focus-visible .gallery-popup {
            opacity: 1;
            transition: opacity 0.2s ease;
        }

        /* =====================
           CONTACT SECTION
        ===================== */
        .contact-section {
            background: #000000;
            padding: 8rem;
            display: flex;
            gap: 8rem;
            align-items: flex-start;
            position: relative;
            z-index: 10;
        }

        .contact-left {
            flex: 0 0 45%;
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .contact-title {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(2rem, 4vw, 4.5rem);
            font-weight: 900;
            color: #ffffff;
            text-transform: uppercase;
            line-height: 0.95;
            letter-spacing: -0.03em;
            border-left: 5px solid #ffffff;
            padding-left: 1.5rem;
        }

        .contact-sub {
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            line-height: 1.7;
            letter-spacing: 0.05em;
            max-width: 400px;
        }

        .contact-founder {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            margin-top: 1rem;
        }

        .contact-founder-avatar {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: #222222;
            border: 2px solid #333;
            flex-shrink: 0;
            overflow: hidden;
        }

        .contact-founder-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .contact-founder-name {
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: #e63946;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .contact-founder-role {
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            font-weight: 400;
            color: #888888;
            margin-top: 2px;
        }

        /* Right — Formulario */
        .contact-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0;
            padding-top: 1rem;
        }

        .contact-field {
            border-bottom: 1px solid #333333;
        }

        .contact-input {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 400;
            color: #ffffff;
            padding: 1.8rem 0;
            caret-color: #ffffff;
        }

        .contact-input::placeholder {
            color: #8a8a8a;
        }

        .contact-textarea {
            min-height: 140px;
            resize: vertical;
        }

        .contact-btn {
            align-self: flex-start;
            margin-top: 2.5rem;
            background: #ffffff;
            color: #000000;
            border: none;
            border-radius: 50px;
            padding: 1rem 2.5rem;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s, color 0.3s;
        }

        .contact-btn:hover {
            background: #e63946;
            color: #ffffff;
        }

        /* =====================
           FINAL RIBBON
        ===================== */
        .final-ribbon-wrap {
            position: relative;
            height: 260px;
            overflow: hidden;
            background: #009cff;
            z-index: 5;
            display: flex;
            align-items: center;
        }

        .final-ribbon-track {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .final-ribbon-scroll {
            display: flex;
            align-items: center;
            white-space: nowrap;
            animation: finalRibbonScroll 14s linear infinite;
            flex-shrink: 0;
        }

        .final-ribbon-inner {
            display: inline-block;
            white-space: nowrap;
            font-family: 'Poppins', sans-serif;
            font-size: clamp(5rem, 12vw, 11rem);
            font-weight: 900;
            color: #000000;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            padding-right: 3rem;
            flex-shrink: 0;
        }

        @keyframes finalRibbonScroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* ===================== */
        .footer-section {
            background: #000000;
            border-top: 1px solid #1a1a1a;
            padding: 1.8rem 8rem;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        .contact-datos {
            list-style: none;
            margin-top: 2rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            color: #ffffff;
        }

        .contact-datos a {
            color: #ffffff;
            text-decoration: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.35);
            transition: border-color 0.2s;
        }

        .contact-datos a:hover,
        .contact-datos a:focus-visible {
            border-color: #ffffff;
        }

        .footer-os {
            margin-left: auto;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #ffffff;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }
        .footer-os b {
            font-weight: 700;
            font-size: 0.75rem;
            background: #e2457c;
            border: 1.5px solid #e2457c;
            color: #0a0807;
            border-radius: 6px;
            padding: 0 0.35rem;
            transition: background-color 0.2s, border-color 0.2s, color 0.2s;
        }
        .footer-os:hover b,
        .footer-os:focus-visible b {
            background: #ffffff;
            border-color: #ffffff;
            color: #e2457c;
        }
        .footer-copy {
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            font-weight: 400;
            color: #e63946;
        }

        /* =====================
           SOCIAL SECTION
        ===================== */
        .social-section {
            background: #000000;
            padding: 3rem 8rem;
            display: flex;
            flex-direction: column;
            gap: 0;
            border-top: 1px solid #1a1a1a;
            position: relative;
            z-index: 10;
        }

        .social-link {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(1rem, 2vw, 1.6rem);
            font-weight: 800;
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            padding: 0.9rem 0;
            border-bottom: 1px solid #1a1a1a;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.25s ease;
            overflow: hidden;
        }

        .social-link:hover {
            color: #e63946;
        }

        /* Contenedor de la flecha con overflow hidden para que desaparezca */
        .social-arrow-wrap {
            display: inline-flex;
            overflow: hidden;
            width: 1em;
            height: 1em;
            position: relative;
        }

        .social-arrow {
            display: inline-block;
            font-style: normal;
            /* Estado inicial: visible en posición normal */
            transform: translate(0, 0);
            opacity: 1;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease;
        }

        /* Hover: sale hacia arriba-derecha y desaparece */
        .social-link:hover .social-arrow {
            transform: translate(120%, -120%);
            opacity: 0;
        }

        /* Flecha fantasma que entra desde abajo-izquierda al hacer hover */
        .social-arrow-ghost {
            display: inline-block;
            position: absolute;
            font-style: normal;
            /* Empieza abajo-izquierda fuera */
            transform: translate(-120%, 120%);
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease;
        }

        .social-link:hover .social-arrow-ghost {
            transform: translate(0, 0);
            opacity: 1;
        }

        /* ===================== */

        /* Izquierda — cada elemento sube desde abajo, de izquierda a derecha en timing */
        .contact-left .contact-title,
        .contact-left .contact-sub,
        .contact-left .contact-founder {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .contact-left .contact-title.anim-visible,
        .contact-left .contact-sub.anim-visible,
        .contact-left .contact-founder.anim-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Derecha — cada campo/botón sube desde abajo con delay escalonado */
        .contact-field,
        .contact-btn {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .contact-field.anim-visible,
        .contact-btn.anim-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* WhatsApp junto al formulario (Emilio, 7-oct): abre el chat directo con el mensaje ya escrito.
           Sube con el botón «Contactar». */
        .contact-acciones {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 2.5rem;
        }
        .contact-acciones .contact-btn { margin-top: 0; }
        .contact-wa {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            color: #ffffff;
            text-decoration: none;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease, transform 0.8s ease, background-color 0.3s, color 0.3s, border-color 0.3s;
        }
        .contact-wa.anim-visible { opacity: 1; transform: translateY(0); }
        .contact-wa svg { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
        /* va al lado de «Contactar» y mide lo mismo (Emilio eligió «al lado», 7-oct). Verde de WhatsApp relleno con letras
           negras, como «Contactar» (blanco con letras negras), para que llame la atención; al pasar el cursor, al revés: solo
           el marco y las letras verdes (Emilio eligió «botón lleno», 7-oct) */
        .contact-wa {
            border-radius: 50px;
            padding: 1rem 2rem;
            line-height: normal;
            background: #25d366;
            color: #000000;
            box-shadow: inset 0 0 0 1.5px #25d366;
        }
        .contact-wa:hover,
        .contact-wa:focus-visible {
            background: transparent;
            color: #25d366;
        }
        /* en el celular, los dos botones caben lado a lado */
        @media (max-width: 420px) {
            .contact-acciones .contact-btn, .contact-wa { padding-left: 1.1rem; padding-right: 1.1rem; }
            .contact-acciones { gap: 0.75rem; }
        }


        /* ===================== */

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .top-nav {
                display: none;
            }

            .hero-text-bg {
                font-size: 25vw;
            }

            .video-container {
                width: 250px;
                height: 400px;
            }

            /* Mobile menu overlay */
            .menu-overlay {
                width: 85%;
                height: calc(100vh - 20px);
                margin-bottom: 20px;
                border-radius: 0 15px 15px 0;
                transform-origin: 15px 100px;
            }

            .menu-overlay.active {
                transform: scale(1);
                opacity: 1;
            }

            .menu-nav a {
                font-size: 2rem;
            }

            /* --- v29: arreglos responsive --- */
            .services-section, .gallery-section, .social-section, .footer-section {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
            .services-section { padding-top: 4rem; padding-bottom: 4rem; }
            .gallery-section { padding-top: 4rem; padding-bottom: 4rem; }
            .about-section { padding: 20vh 1.5rem 3rem; margin-top: 8vh; }
            .contact-section { flex-direction: column; gap: 2.5rem; padding: 4rem 1.5rem; align-items: stretch; }
            .contact-left, .contact-right { flex: 1 1 auto; width: 100%; }
            .about-content { flex-direction: column; gap: 1.5rem; }
            .gallery-grid { margin-left: -1.5rem; }
            .gallery-grid .gallery-card { width: 62vw; }
            .menu-overlay { left: 91px; width: calc(100vw - 91px - 15px); }
            .service-name { font-size: clamp(1.15rem, 5.5vw, 1.6rem); }
            .gallery-title { font-size: clamp(2.2rem, 12vw, 4rem); }
            .contact-title { font-size: clamp(1.8rem, 9vw, 3rem); }
            .service-toggle { width: 36px; height: 36px; margin-left: 1rem; }
            /* header compacto en móvil: el logo/MENU fijo ya no tapa los títulos */
            .logo-menu-container { gap: 6px; }
            .logo-button { width: 52px; height: 52px; }
            .logo-medusssa { width: auto; height: 36px; }
            .menu-button { width: 52px; height: 52px; padding-bottom: 0; align-items: center; font-size: 0.55rem; letter-spacing: 1.5px; }
        }

        /* --- v29: utilidades a11y --- */
        .sr-only {
            position: absolute; width: 1px; height: 1px;
            padding: 0; margin: -1px; overflow: hidden;
            clip: rect(0,0,0,0); white-space: nowrap; border: 0;
        }
        .contact-msg { color: #12b39b; font-weight: 600; margin-top: 1rem; }
        .contact-msg.contact-msg-error { color: #e63946; }
        /* campo trampa contra robots: fuera de la vista, pero no «display:none» (algunos robots se lo saltan) */
        .contact-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
        /* aviso de privacidad corto, junto al formulario */
        .contact-aviso {
            margin-top: 1.75rem;
            max-width: 34rem;
            font-family: 'Poppins', sans-serif;
            font-size: 0.75rem;
            line-height: 1.6;
            color: #8a8a8a;
        }
        .contact-aviso a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
        .footer-aviso {
            margin-left: 2rem;
            font-family: 'Poppins', sans-serif;
            font-size: 0.85rem;
            color: #8a8a8a;
            text-decoration: none;
        }
        .footer-aviso:hover, .footer-aviso:focus-visible { color: #ffffff; }
        a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
            outline: 2px solid #009cff; outline-offset: 3px; border-radius: 4px;
        }
        /* En el encabezado (azul arriba, negro al bajar) el aro azul de la regla de arriba se perdía sobre el azul, y los
           botones redondos se volvían cuadrados al enfocarlos. Con el teclado, el aro va en blanco y cada botón conserva su forma. */
        .logo-button:focus-visible, .menu-button:focus-visible, .contact-icon:focus-visible { outline-color: #ffffff; }
        .logo-button:focus-visible, .menu-button:focus-visible { border-radius: 8px; }
        .contact-icon:focus-visible { border-radius: 50%; }
        .contact-input:focus-visible { outline: none; border-bottom: 2px solid #ffffff; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation: none !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
        }
    

        /* PIE en el celular (12-oct): las tres piezas se amontonaban a 390 px y a 320 «Medusssa OS» se salía. Van una bajo otra, centradas. */
        @media (max-width: 768px) {
            .footer-section { flex-direction: column; gap: 0.9rem; padding-top: 2rem; padding-bottom: 2rem; text-align: center; }
            .footer-aviso, .footer-os { margin-left: 0; }
        }

        /* BOTÓN DE ARRIBA en el celular (Emilio, 12-oct: opción B). La medusa y MENU, uno sobre otro, tapaban el texto en toda la página:
           queda un solo botón con la medusa y «MENU», a la misma altura que WhatsApp y correo (centro a 49 px) */
        .menu-medusa { display: none; }
        @media (max-width: 768px) {
            .logo-menu-container { top: 24px; left: 12px; }
            .logo-button { display: none; }
            .menu-medusa { display: block; }
            .menu-button { flex-direction: column; justify-content: center; gap: 2px; width: 50px; height: 50px; font-size: 0.5rem; letter-spacing: 1px; }
            .menu-overlay { left: 71px; width: calc(100vw - 71px - 12px); }
            .menu-backdrop { left: 71px; width: calc(100% - 71px); }
        }

        /* INICIO en el celular (Emilio, 12-oct: opción B). «medusssa» completa arriba (18vw cabe a lo ancho) y abajo el cuadro del video
           en horizontal, 16:9 como el video: se ve completo, sin zoom. El tamaño del cuadro lo pone site.js (tamInicial). */
        @media (max-width: 768px) {
            .hero-text-bg { font-size: 18vw; top: calc(50% - 24vw - 9vw - 18px); }
        }

        /* WHATSAPP siempre a la vista en el celular (Emilio, 12-oct): WhatsApp y correo de arriba se desvanecen al bajar; este círculo
           chico queda abajo a la derecha, sin relleno (orilla e ícono verdes) para no pesar, y se rellena al llegar a Contacto */
        .wa-flota { display: none; }
        @media (max-width: 768px) {
            .wa-flota { display: flex; align-items: center; justify-content: center; position: fixed; right: 14px; bottom: 16px; z-index: 900;
                width: 50px; height: 50px; border-radius: 50%; border: 2px solid #25d366; background: rgba(0,0,0,.35);
                -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none;
                transition: opacity .3s, background-color .3s; }
            .wa-flota svg { width: 24px; height: 24px; fill: #25d366; transition: fill .3s; }
            body.bajando .wa-flota { opacity: 1; pointer-events: auto; }
            body.en-contacto .wa-flota { background: #25d366; }
            body.en-contacto .wa-flota svg { fill: #000; }
        }